From 8ccd609b2205121303e15de7a4545a2e75064259 Mon Sep 17 00:00:00 2001
From: calinoracation <callie.riggins@airbnb.com>
Date: Mon, 12 Feb 2024 09:28:04 -0800
Subject: [PATCH] Initial typescript, es & cjs exporting

---
 .gitignore                 |  4 ++++
 package.json               |  5 ++++-
 src/{index.js => index.ts} | 10 ++++++----
 tsconfig.json              | 29 +++++++++++++++++++++++++++++
 vite.config.js             | 11 +++++++----
 5 files changed, 50 insertions(+), 9 deletions(-)
 rename src/{index.js => index.ts} (91%)
 create mode 100644 tsconfig.json

diff --git a/.gitignore b/.gitignore
index eb81cb81..50653352 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,10 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+npm-shrinkwrap.json
+package-lock.json
+yarn.lock
+
 # Optional npm cache directory
 .npm
 
diff --git a/package.json b/package.json
index 16048931..03ae90b7 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,8 @@
   "version": "1.0.0",
   "description": "A polyfill for scroll-driven animations on the web via ScrollTimeline",
   "type": "module",
+  "module": "dist/scroll-timeline-es.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "vite build",
     "dev": "vite",
@@ -36,6 +38,7 @@
   "homepage": "https://github.com/flackr/scroll-timeline#readme",
   "devDependencies": {
     "terser": "^5.27.0",
-    "vite": "^5.0.12"
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.2"
   }
 }
diff --git a/src/index.js b/src/index.ts
similarity index 91%
rename from src/index.js
rename to src/index.ts
index 09f0d3ed..20ec2894 100644
--- a/src/index.js
+++ b/src/index.ts
@@ -21,20 +21,22 @@ import {
   elementGetAnimations,
   documentGetAnimations,
   ProxyAnimation
-} from "./proxy-animation.js";
+} from "./proxy-animation";
 
 import { initCSSPolyfill } from "./scroll-timeline-css"
 
-function initPolyfill() {
+export { ScrollTimeline, ViewTimeline }
+
+function initPolyfill(): void {
   // initCSSPolyfill returns true iff the host browser supports SDA
   if (initCSSPolyfill()) {
     return;
   }
 
-  if ([...document.styleSheets].filter((s) => s.href !== null).length) {
+  if ([ ...document.styleSheets ].filter((s) => s.href !== null).length) {
     console.warn(
       'Non-Inline StyleSheets detected: ScrollTimeline polyfill currently only' +
-        ' supports inline styles within style tags'
+      ' supports inline styles within style tags'
     );
   }
 
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..cab5dc73
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "ESNext"],
+    "skipLibCheck": true,
+    "baseUrl": "./",
+    "paths": {
+      "#*": ["src/*"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"],
+  "references": []
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 6a27226b..622c68c5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,20 +1,22 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts';
 
-export default defineConfig({
+export default defineConfig({  
   build: {
     sourcemap: true,
     lib: {
       // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, 'src/index.js'),
+      entry: resolve(__dirname, 'src/index.ts'),
+      filename: 'index',
       name: 'ScrollTimeline',
       // the proper extensions will be added
       fileName: (format, entryAlias) => `scroll-timeline${format=='iife'?'':'-' + format}.js`,
-      formats: ['iife'],
+      formats: ['iife', 'es', 'cjs'],
     },
     minify: 'terser',
     terserOptions: {
-      keep_classnames: /^((View|Scroll)Timeline)|CSS.*$/
+      keep_classnames: /^((View|Scroll)Timeline)|CSS.*$/,
     },
     rollupOptions: {
       output: {
@@ -25,4 +27,5 @@ export default defineConfig({
       },
     }
   },
+  plugins: [dts()],
 })