Skip to content

Commit

Permalink
Merge pull request #269 from egirard/master
Browse files Browse the repository at this point in the history
Create "lite" version (js only, without CSS)
  • Loading branch information
egirard authored Jul 8, 2024
2 parents 702b716 + fc6a497 commit 0a3a758
Show file tree
Hide file tree
Showing 9 changed files with 132 additions and 68 deletions.
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()) {
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'));

0 comments on commit 0a3a758

Please sign in to comment.