Initial typescript, es & cjs exporting

.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
 

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"
   }
 }

src/index.js → 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'
     );
   }
 

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": []
+}

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()],
 })