Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add initial typescript support as well as bundling for ES & CJS #245

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Add initial typescript support as well as bundling for ES & CJS #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
}
}
10 changes: 6 additions & 4 deletions src/index.js → src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I may of had the pretty: true flag turned on momentarily that led to this autoformatting, happy to remove it.

console.warn(
'Non-Inline StyleSheets detected: ScrollTimeline polyfill currently only' +
' supports inline styles within style tags'
' supports inline styles within style tags'
);
}

Expand Down
29 changes: 29 additions & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"compilerOptions": {
"target": "ES2020",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of these might not be necessary, I was working through which ones were needed or not but starting from a point where at least it was all working for us.

"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": []
}
11 changes: 7 additions & 4 deletions vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -25,4 +27,5 @@ export default defineConfig({
},
}
},
plugins: [dts()],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This creates the index.d.ts file for the exported type information. Without this many folks importing through a bundler with typescript would require not-insignificant amounts of changes and no typing information. It's possible to do it without another package, but it helped simplify the output quite a bit.

})
Loading