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

.gitignore

@@ -21,6 +21,7 @@ node_modules
 # demos deployment directory
 build
 dist
+dist-lite
 
 # jest coverage folder
 coverage

demo/view-timeline/index.html

@@ -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>
 <script type="text/javascript">
   "use strict";
 

package.json

@@ -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",

src/index-lite.js

@@ -0,0 +1,17 @@
+// 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 { initPolyfill } from "./init-polyfill.js"
+
+initPolyfill();

src/index.js

@@ -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()) {
+    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();

src/init-polyfill.js

@@ -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"
+    );
+  }
+}

test/expected.txt

@@ -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)

vite.config.common.js

@@ -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: {
+                },
+            },
+            }
+        }
+    };
+}

vite.config.js

@@ -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'));

vite.config.lite.js

@@ -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'));