Adds "lite" version (js only)

Also changes test for CSS support to look for view-timeline

.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-js" : "vite build --config vite.config.lite.js", 
     "dev": "vite",
-    "deploy": "npm run build",
+    "deploy": "npm run build && npm run build-js",
     "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,29 @@
+// 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 { 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 (CSS.supports("view-timeline")) {
+    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"
+    );
+  }
+}

src/scroll-timeline-css.js

@@ -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")) {
     return true;
   }
 

vite.config.lite.js

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