From 5188a38853b3d72103d82325ead82bc235f08ece Mon Sep 17 00:00:00 2001
From: egirard <eugene.girard@gmail.com>
Date: Thu, 30 May 2024 02:09:01 -0400
Subject: [PATCH] Adds "lite" version (js only)

Also changes test for CSS support to look for view-timeline
---
 .gitignore                    |  1 +
 demo/view-timeline/index.html |  2 +-
 package.json                  |  3 +-
 src/index-lite.js             | 29 +++++++++++++++
 src/index.js                  | 44 ++++------------------
 src/init-polyfill.js          | 69 +++++++++++++++++++++++++++++++++++
 src/scroll-timeline-css.js    |  2 +-
 vite.config.lite.js           | 29 +++++++++++++++
 8 files changed, 139 insertions(+), 40 deletions(-)
 create mode 100644 src/index-lite.js
 create mode 100644 src/init-polyfill.js
 create mode 100644 vite.config.lite.js

diff --git a/.gitignore b/.gitignore
index eb81cb81..bb293c19 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,7 @@ node_modules
 # demos deployment directory
 build
 dist
+dist-lite
 
 # jest coverage folder
 coverage
diff --git a/demo/view-timeline/index.html b/demo/view-timeline/index.html
index 6f91c1f9..71634046 100644
--- a/demo/view-timeline/index.html
+++ b/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";
 
diff --git a/package.json b/package.json
index 16048931..c8a782df 100644
--- a/package.json
+++ b/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",
diff --git a/src/index-lite.js b/src/index-lite.js
new file mode 100644
index 00000000..10c000c9
--- /dev/null
+++ b/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();
diff --git a/src/index.js b/src/index.js
index 5aafe307..cfa9c570 100644
--- a/src/index.js
+++ b/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();
diff --git a/src/init-polyfill.js b/src/init-polyfill.js
new file mode 100644
index 00000000..11367702
--- /dev/null
+++ b/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"
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js
index 5d3d0b01..c38bb384 100644
--- a/src/scroll-timeline-css.js
+++ b/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;
   }
 
diff --git a/vite.config.lite.js b/vite.config.lite.js
new file mode 100644
index 00000000..e41e5415
--- /dev/null
+++ b/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: {
+        },
+      },
+    }
+  },
+})