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.

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
2 changes: 1 addition & 1 deletion demo/view-timeline/index.html
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/scroll-timeline-lite.js"></script>
<script type="text/javascript">
"use strict";

Expand Down
3 changes: 2 additions & 1 deletion package.json
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
17 changes: 17 additions & 0 deletions src/index-lite.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Copyright 2024 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 { initPolyfill } from "./init-polyfill.js"

initPolyfill();
43 changes: 6 additions & 37 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,47 +25,16 @@ 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
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
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 (window.ViewTimeline !== undefined) {
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"
);
}
}
6 changes: 2 additions & 4 deletions test/expected.txt
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ PASS /scroll-animations/css/animation-shorthand.html e.style['animation'] = "1s
FAIL /scroll-animations/css/animation-shorthand.html e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n 1s linear 1s 2 reverse forwards paused anim2,\n 1s linear 1s 2 reverse forwards paused anim3" should not set unrelated longhands
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial timelines (specified)
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial timelines (computed)
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-delay-end (specified)
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-delay-end (computed)
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-range-start (specified)
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-range-start (computed)
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-range-end (specified)
Expand Down Expand Up @@ -210,7 +208,7 @@ FAIL /scroll-animations/css/progress-based-animation-animation-longhand-properti
FAIL /scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html animation-delay with a negative value
PASS /scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html animation-fill-mode
PASS /scroll-animations/css/progress-based-animation-timeline.html progress based animation timeline works
PASS /scroll-animations/css/pseudo-on-scroller.html scroll nearest on pseudo-element attaches to parent scroll container
FAIL /scroll-animations/css/pseudo-on-scroller.html scroll nearest on pseudo-element attaches to parent scroll container
FAIL /scroll-animations/css/scroll-timeline-axis-computed.html Property scroll-timeline-axis value 'initial'
FAIL /scroll-animations/css/scroll-timeline-axis-computed.html Property scroll-timeline-axis value 'inherit'
FAIL /scroll-animations/css/scroll-timeline-axis-computed.html Property scroll-timeline-axis value 'unset'
Expand Down Expand Up @@ -454,7 +452,7 @@ FAIL /scroll-animations/css/view-timeline-dynamic.html Dynamically changing view
FAIL /scroll-animations/css/view-timeline-dynamic.html Dynamically changing view-timeline-axis
FAIL /scroll-animations/css/view-timeline-dynamic.html Dynamically changing view-timeline-inset
PASS /scroll-animations/css/view-timeline-dynamic.html Element with scoped view-timeline becoming display:none
FAIL /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with one value
PASS /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with one value
PASS /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with two values
PASS /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with em values
FAIL /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with percentage values
Expand Down
28 changes: 28 additions & 0 deletions vite.config.common.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
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: {
},
},
}
}
};
}
27 changes: 2 additions & 25 deletions vite.config.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,5 @@
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { buildConfig } from './vite.config.common'

export default defineConfig({
build: {
sourcemap: true,
lib: {
// Could also be a dictionary or array of multiple entry points
entry: resolve(__dirname, 'src/index.js'),
name: 'ScrollTimeline',
// the proper extensions will be added
fileName: (format, entryAlias) => `scroll-timeline${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: {
},
},
}
},
})
export default defineConfig(buildConfig(resolve(__dirname, 'src/index.js'), 'scroll-timeline'));
5 changes: 5 additions & 0 deletions vite.config.lite.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { buildConfig } from './vite.config.common'

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