Skip to content

Commit 0a3a758

Browse files
egirardegirard
authored
Merge pull request #269 from egirard/master
Create "lite" version (js only, without CSS)
2 parents 702b716 + fc6a497 commit 0a3a758

9 files changed

+132
-68
lines changed

‎demo/view-timeline/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@
169169
<input type="checkbox" name="timeline-insets" id="timeline-insets">
170170
<label for="timeline-insets">Use inset 100px 200px</label>
171171
</body>
172-
<script src="../../dist/scroll-timeline.js"></script>
172+
<script src="../../dist/scroll-timeline-lite.js"></script>
173173
<script type="text/javascript">
174174
"use strict";
175175

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
"type": "module",
66
"scripts": {
77
"build": "vite build",
8+
"build-lite" : "vite build --config vite.config.lite.js",
89
"dev": "vite",
9-
"deploy": "npm run build",
10+
"deploy": "npm run build && npm run build-lite",
1011
"test-setup": "node test/setup/checkout-wpt.mjs",
1112
"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)",
1213
"test:simple": "npm run test-setup && cd test && cd wpt && python wpt serve --inject-script ../../dist/scroll-timeline.js",

‎src/index-lite.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Copyright 2024 Google LLC
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// https://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
import { initPolyfill } from "./init-polyfill.js"
16+
17+
initPolyfill();

‎src/index.js

+6-37
Original file line numberDiff line numberDiff line change
@@ -25,47 +25,16 @@ import {
2525

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

28-
function initPolyfill() {
28+
import { initPolyfill } from "./init-polyfill.js"
29+
30+
function initPolyfillIncludingCSS() {
2931
// initCSSPolyfill returns true iff the host browser supports SDA
3032
if (initCSSPolyfill()) {
33+
console.debug("Polyfill skipped because browser supports Scroll Timeline.");
3134
return;
3235
}
3336

34-
if (
35-
!Reflect.defineProperty(window, 'ScrollTimeline', { value: ScrollTimeline })
36-
) {
37-
throw Error(
38-
'Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window'
39-
);
40-
}
41-
if (
42-
!Reflect.defineProperty(window, 'ViewTimeline', { value: ViewTimeline })
43-
) {
44-
throw Error(
45-
'Error installing ViewTimeline polyfill: could not attach ViewTimeline to window'
46-
);
47-
}
48-
49-
if (
50-
!Reflect.defineProperty(Element.prototype, 'animate', { value: animate })
51-
) {
52-
throw Error(
53-
"Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element"
54-
);
55-
}
56-
if (!Reflect.defineProperty(window, 'Animation', { value: ProxyAnimation })) {
57-
throw Error('Error installing Animation constructor.');
58-
}
59-
if (!Reflect.defineProperty(Element.prototype, "getAnimations", { value: elementGetAnimations })) {
60-
throw Error(
61-
"Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to DOM Element"
62-
);
63-
}
64-
if (!Reflect.defineProperty(document, "getAnimations", { value: documentGetAnimations })) {
65-
throw Error(
66-
"Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document"
67-
);
68-
}
37+
initPolyfill();
6938
}
7039

71-
initPolyfill();
40+
initPolyfillIncludingCSS();

‎src/init-polyfill.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// Copyright 2019 Google LLC
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// https://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
import {
16+
ScrollTimeline,
17+
ViewTimeline,
18+
} from "./scroll-timeline-base";
19+
import {
20+
animate,
21+
elementGetAnimations,
22+
documentGetAnimations,
23+
ProxyAnimation
24+
} from "./proxy-animation.js";
25+
26+
import { initCSSPolyfill } from "./scroll-timeline-css"
27+
28+
export function initPolyfill() {
29+
// Don't load if browser claims support
30+
if (window.ViewTimeline !== undefined) {
31+
return true;
32+
}
33+
34+
if (
35+
!Reflect.defineProperty(window, 'ScrollTimeline', { value: ScrollTimeline })
36+
) {
37+
throw Error(
38+
'Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window'
39+
);
40+
}
41+
if (
42+
!Reflect.defineProperty(window, 'ViewTimeline', { value: ViewTimeline })
43+
) {
44+
throw Error(
45+
'Error installing ViewTimeline polyfill: could not attach ViewTimeline to window'
46+
);
47+
}
48+
49+
if (
50+
!Reflect.defineProperty(Element.prototype, 'animate', { value: animate })
51+
) {
52+
throw Error(
53+
"Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element"
54+
);
55+
}
56+
if (!Reflect.defineProperty(window, 'Animation', { value: ProxyAnimation })) {
57+
throw Error('Error installing Animation constructor.');
58+
}
59+
if (!Reflect.defineProperty(Element.prototype, "getAnimations", { value: elementGetAnimations })) {
60+
throw Error(
61+
"Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to DOM Element"
62+
);
63+
}
64+
if (!Reflect.defineProperty(document, "getAnimations", { value: documentGetAnimations })) {
65+
throw Error(
66+
"Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document"
67+
);
68+
}
69+
}

‎test/expected.txt

+2-4
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@ PASS /scroll-animations/css/animation-shorthand.html e.style['animation'] = "1s
2828
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
2929
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial timelines (specified)
3030
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial timelines (computed)
31-
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-delay-end (specified)
32-
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-delay-end (computed)
3331
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-range-start (specified)
3432
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-range-start (computed)
3533
FAIL /scroll-animations/css/animation-shorthand.html Animation shorthand can not represent non-initial animation-range-end (specified)
@@ -210,7 +208,7 @@ FAIL /scroll-animations/css/progress-based-animation-animation-longhand-properti
210208
FAIL /scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html animation-delay with a negative value
211209
PASS /scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html animation-fill-mode
212210
PASS /scroll-animations/css/progress-based-animation-timeline.html progress based animation timeline works
213-
PASS /scroll-animations/css/pseudo-on-scroller.html scroll nearest on pseudo-element attaches to parent scroll container
211+
FAIL /scroll-animations/css/pseudo-on-scroller.html scroll nearest on pseudo-element attaches to parent scroll container
214212
FAIL /scroll-animations/css/scroll-timeline-axis-computed.html Property scroll-timeline-axis value 'initial'
215213
FAIL /scroll-animations/css/scroll-timeline-axis-computed.html Property scroll-timeline-axis value 'inherit'
216214
FAIL /scroll-animations/css/scroll-timeline-axis-computed.html Property scroll-timeline-axis value 'unset'
@@ -454,7 +452,7 @@ FAIL /scroll-animations/css/view-timeline-dynamic.html Dynamically changing view
454452
FAIL /scroll-animations/css/view-timeline-dynamic.html Dynamically changing view-timeline-axis
455453
FAIL /scroll-animations/css/view-timeline-dynamic.html Dynamically changing view-timeline-inset
456454
PASS /scroll-animations/css/view-timeline-dynamic.html Element with scoped view-timeline becoming display:none
457-
FAIL /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with one value
455+
PASS /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with one value
458456
PASS /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with two values
459457
PASS /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with em values
460458
FAIL /scroll-animations/css/view-timeline-inset-animation.html view-timeline-inset with percentage values

‎vite.config.common.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export function buildConfig(source, filename) {
2+
return {
3+
build: {
4+
sourcemap: true,
5+
emptyOutDir: false,
6+
lib: {
7+
// Could also be a dictionary or array of multiple entry points
8+
entry: source,
9+
name: 'ScrollTimeline',
10+
// the proper extensions will be added
11+
fileName: (format, entryAlias) => `${filename}${format=='iife'?'':'-' + format}.js`,
12+
formats: ['iife'],
13+
},
14+
minify: 'terser',
15+
terserOptions: {
16+
keep_classnames: /^((View|Scroll)Timeline)|CSS.*$/
17+
},
18+
rollupOptions: {
19+
output: {
20+
// Provide global variables to use in the UMD build
21+
// for externalized deps
22+
globals: {
23+
},
24+
},
25+
}
26+
}
27+
};
28+
}

‎vite.config.js

+2-25
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,5 @@
11
import { resolve } from 'path'
22
import { defineConfig } from 'vite'
3+
import { buildConfig } from './vite.config.common'
34

4-
export default defineConfig({
5-
build: {
6-
sourcemap: true,
7-
lib: {
8-
// Could also be a dictionary or array of multiple entry points
9-
entry: resolve(__dirname, 'src/index.js'),
10-
name: 'ScrollTimeline',
11-
// the proper extensions will be added
12-
fileName: (format, entryAlias) => `scroll-timeline${format=='iife'?'':'-' + format}.js`,
13-
formats: ['iife'],
14-
},
15-
minify: 'terser',
16-
terserOptions: {
17-
keep_classnames: /^((View|Scroll)Timeline)|CSS.*$/
18-
},
19-
rollupOptions: {
20-
output: {
21-
// Provide global variables to use in the UMD build
22-
// for externalized deps
23-
globals: {
24-
},
25-
},
26-
}
27-
},
28-
})
5+
export default defineConfig(buildConfig(resolve(__dirname, 'src/index.js'), 'scroll-timeline'));

‎vite.config.lite.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { resolve } from 'path'
2+
import { defineConfig } from 'vite'
3+
import { buildConfig } from './vite.config.common'
4+
5+
export default defineConfig(buildConfig(resolve(__dirname, 'src/index-lite.js'), 'scroll-timeline-lite'));

0 commit comments

Comments
 (0)