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

Create "lite" version (js only, without CSS) #269

Merged
merged 13 commits into from
Jul 8, 2024
Merged

Create "lite" version (js only, without CSS) #269

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4bb7621
Add support for negative CSS values
egirard Sep 25, 2023
192b0c8
Merge branch 'master' of https://github.com/egirard/scroll-timeline
egirard Sep 25, 2023
4f24b57
Merge branch 'master' of https://github.com/egirard/scroll-timeline
egirard May 14, 2024
5188a38
Adds "lite" version (js only)
egirard May 30, 2024
617f292
Merge branch 'flackr:master' into master
egirard May 30, 2024
8057b5f
Rename build-js to build-lite for consistency
egirard May 30, 2024
0a62254
Merge branch 'master' of https://github.com/egirard/scroll-timeline
egirard May 30, 2024
774b9b8
Remove dist.lite directory
egirard Jun 20, 2024
abc4d41
Update expected.txt
egirard Jun 20, 2024
15ea511
Cleanup
egirard Jul 8, 2024
4ed714f
Update expectations
egirard Jul 8, 2024
012c7ff
Purge references to dist-lite
egirard Jul 8, 2024
fc6a497
Cleanup (remove diagnostic output)
egirard Jul 8, 2024
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ node_modules
# demos deployment directory
build
dist
dist-lite
egirard marked this conversation as resolved.
Show resolved Hide resolved

# jest coverage folder
coverage
Expand Down
2 changes: 1 addition & 1 deletion demo/view-timeline/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@
<input type="checkbox" name="timeline-insets" id="timeline-insets">
<label for="timeline-insets">Use inset 100px 200px</label>
</body>
<script src="../../dist/scroll-timeline.js"></script>
<script src="../../dist-lite/scroll-timeline-lite.js"></script>
Copy link
Owner

Choose a reason for hiding this comment

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

this is just dist/scroll-timeline-lite.js now.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Thanks - fixed.

<script type="text/javascript">
"use strict";

Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
"type": "module",
"scripts": {
"build": "vite build",
"build-lite" : "vite build --config vite.config.lite.js",
"dev": "vite",
"deploy": "npm run build",
"deploy": "npm run build && npm run build-lite",
"test-setup": "node test/setup/checkout-wpt.mjs",
"test:wpt": "npm run test-setup && cd test && cd wpt && (python wpt run --headless -y --log-wptreport ../report/data.json --log-wptscreenshot=../report/screenshots.txt --log-html=../report/index.html --inject-script ../../dist/scroll-timeline.js firefox scroll-animations || true)",
"test:simple": "npm run test-setup && cd test && cd wpt && python wpt serve --inject-script ../../dist/scroll-timeline.js",
Expand Down
29 changes: 29 additions & 0 deletions src/index-lite.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// Copyright 2019 Google LLC
egirard marked this conversation as resolved.
Show resolved Hide resolved
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import {
ScrollTimeline,
ViewTimeline,
} from "./scroll-timeline-base";
import {
animate,
elementGetAnimations,
documentGetAnimations,
ProxyAnimation
Copy link
Owner

Choose a reason for hiding this comment

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

nit: We're not using any of these imports here - they can be removed.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Done

} from "./proxy-animation.js";


import { initPolyfill } from "./init-polyfill.js"

initPolyfill();
44 changes: 7 additions & 37 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,47 +25,17 @@ import {

import { initCSSPolyfill } from "./scroll-timeline-css"

function initPolyfill() {
import { initPolyfill } from "./init-polyfill.js"

function initPolyfillIncludingCSS() {
// initCSSPolyfill returns true iff the host browser supports SDA
console.debug("Polyfill initializing.");
if (initCSSPolyfill()) {
Copy link
Owner

Choose a reason for hiding this comment

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

I'm a bit unsure about this. If the browser supports the CSS API's but not the JS ones maybe we should still polyfill the JS apis.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Best to check with typeof ScrollTimeline !== "undefined" (and ViewTimeline) here indeed.

console.debug("Polyfill skipped because browser supports Scroll Timeline.");
return;
}

if (
!Reflect.defineProperty(window, 'ScrollTimeline', { value: ScrollTimeline })
) {
throw Error(
'Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window'
);
}
if (
!Reflect.defineProperty(window, 'ViewTimeline', { value: ViewTimeline })
) {
throw Error(
'Error installing ViewTimeline polyfill: could not attach ViewTimeline to window'
);
}

if (
!Reflect.defineProperty(Element.prototype, 'animate', { value: animate })
) {
throw Error(
"Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element"
);
}
if (!Reflect.defineProperty(window, 'Animation', { value: ProxyAnimation })) {
throw Error('Error installing Animation constructor.');
}
if (!Reflect.defineProperty(Element.prototype, "getAnimations", { value: elementGetAnimations })) {
throw Error(
"Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to DOM Element"
);
}
if (!Reflect.defineProperty(document, "getAnimations", { value: documentGetAnimations })) {
throw Error(
"Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document"
);
}
initPolyfill();
}

initPolyfill();
initPolyfillIncludingCSS();
69 changes: 69 additions & 0 deletions src/init-polyfill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
// Copyright 2019 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import {
ScrollTimeline,
ViewTimeline,
} from "./scroll-timeline-base";
import {
animate,
elementGetAnimations,
documentGetAnimations,
ProxyAnimation
} from "./proxy-animation.js";

import { initCSSPolyfill } from "./scroll-timeline-css"

export function initPolyfill() {
// Don't load if browser claims support
if (CSS.supports("view-timeline")) {
Copy link
Owner

Choose a reason for hiding this comment

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

For the JS polyfill, feature detection should look for 'ViewTimeline' in window or window.ViewTimeline !== undefined to see if the javascript interface has been implemented by the browser.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Done.

return true;
}

if (
!Reflect.defineProperty(window, 'ScrollTimeline', { value: ScrollTimeline })
) {
throw Error(
'Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window'
);
}
if (
!Reflect.defineProperty(window, 'ViewTimeline', { value: ViewTimeline })
) {
throw Error(
'Error installing ViewTimeline polyfill: could not attach ViewTimeline to window'
);
}

if (
!Reflect.defineProperty(Element.prototype, 'animate', { value: animate })
) {
throw Error(
"Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element"
);
}
if (!Reflect.defineProperty(window, 'Animation', { value: ProxyAnimation })) {
throw Error('Error installing Animation constructor.');
}
if (!Reflect.defineProperty(Element.prototype, "getAnimations", { value: elementGetAnimations })) {
throw Error(
"Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to DOM Element"
);
}
if (!Reflect.defineProperty(document, "getAnimations", { value: documentGetAnimations })) {
throw Error(
"Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document"
);
}
}
2 changes: 1 addition & 1 deletion src/scroll-timeline-css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ function updateKeyframesIfNecessary(anim, options) {

export function initCSSPolyfill() {
// Don't load if browser claims support
if (CSS.supports("animation-timeline: --works")) {
if (CSS.supports("view-timeline")) {
egirard marked this conversation as resolved.
Show resolved Hide resolved
return true;
}

Expand Down
29 changes: 29 additions & 0 deletions vite.config.lite.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
build: {
sourcemap: true,
outDir: 'dist-lite',
lib: {
// Could also be a dictionary or array of multiple entry points
entry: resolve(__dirname, 'src/index-lite.js'),
name: 'ScrollTimelineLite',
// the proper extensions will be added
fileName: (format, entryAlias) => `scroll-timeline-lite${format=='iife'?'':'-' + format}.js`,
formats: ['iife'],
},
minify: 'terser',
terserOptions: {
keep_classnames: /^((View|Scroll)Timeline)|CSS.*$/
},
rollupOptions: {
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
},
},
}
},
})
Copy link
Owner

Choose a reason for hiding this comment

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

This is duplicating a lot of config that likely should be kept in sync. Can you move all of this to a file like vite.common.js, e.g.

export function buildConfig(source, filename) {
    return {
        build: {
            sourcemap: true,
            emptyOutDir: false,
            lib: {
            // Could also be a dictionary or array of multiple entry points
            entry: source,
            name: 'ScrollTimeline',
            // the proper extensions will be added
            fileName: (format, entryAlias) => `${filename}${format=='iife'?'':'-' + format}.js`,
            formats: ['iife'],
            },
            minify: 'terser',
            terserOptions: {
            keep_classnames: /^((View|Scroll)Timeline)|CSS.*$/
            },
            rollupOptions: {
            output: {
                // Provide global variables to use in the UMD build
                // for externalized deps
                globals: {
                },
            },
            }
        }
    };
}

vite.config.js:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import { buildConfig } from './vite.common'

export default defineConfig(buildConfig(resolve(__dirname, 'src/index.js'), 'scroll-timeline'));

vite.config.lite.js:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import { buildConfig } from './vite.common'

export default defineConfig(buildConfig(resolve(__dirname, 'src/index-lite.js'), 'scroll-timeline-lite'));

This also eliminates the need to have a separate dist dir by configuring vite to not empty the dir on building.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Done.

Loading