Feat/es5 examples

.github/workflows/examples.yml

@@ -55,7 +55,7 @@ jobs:
         run: pnpm build
 
       - name: Build examples
-        run: cd examples && pnpm build
+        run: cd examples && pnpm build && pnpm build:es5
 
       - name: Setup Pages
         uses: actions/configure-pages@v5

README.md

@@ -59,6 +59,13 @@ The Example Tests can be launched with:
 pnpm start
 ```
 
+Alternatively you can use the hosted version of the Example Tests, which can be found here:
+[https://lightning-js.github.io/renderer/](https://lightning-js.github.io/renderer/).
+
+If you want to use this on an older browser, you will have to use a version with polyfills and legacy JS targets.
+This can be found here:
+[https://lightning-js.github.io/renderer/es5/](https://lightning-js.github.io/renderer/es5/)
+
 See [examples/README.md](./examples/README.md) for more info.
 
 ## Visual Regression Tests

examples/package.json

@@ -10,6 +10,7 @@
     "start:prod": "concurrently -c \"auto\" \"pnpm:watch:renderer\" \"pnpm:watch\" \"sleep 5 && pnpm preview\"",
     "dev": "vite --open --host",
     "build": "vite build",
+    "build:es5": "vite build --config vite.es5.config.js",
     "watch": "vite build --watch",
     "watch-all": "concurrently -c \"auto\" \"pnpm:watch:renderer\" \"pnpm:watch\"",
     "preview": "vite preview --host --open",
@@ -24,7 +25,8 @@
     "@stdlib/random-base-mt19937": "^0.2.1"
   },
   "devDependencies": {
-    "vite": "^5.0.0"
+    "@vitejs/plugin-legacy": "^5.4.2",
+    "vite": "^5.4.8"
   },
   "engines": {
     "npm": "please-use-pnpm"

examples/vite.es5.config.ts

@@ -0,0 +1,59 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, 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
+ *
+ * http://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 { defineConfig } from 'vite';
+import * as path from 'path';
+import legacy from '@vitejs/plugin-legacy';
+
+/**
+ * Targeting Chrome 38 for a legacy build.
+ */
+const prodTarget = 'Chrome>=38';
+
+/**
+ * Vite Config
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default defineConfig(({ command, mode, isSsrBuild }) => {
+  return {
+    plugins: [
+      legacy({
+        targets: [prodTarget],
+        modernPolyfills: true,
+      }),
+    ],
+    worker: {
+      format: 'es',
+    },
+    build: {
+      target: prodTarget,
+      minify: false,
+      sourcemap: true,
+      emptyOutDir: false,
+      postcss: false, // Disable PostCSS
+      outDir: path.resolve(__dirname, 'dist/es5/'),
+    },
+    server: {
+      headers: {
+        'Cross-Origin-Opener-Policy': 'same-origin',
+        'Cross-Origin-Embedder-Policy': 'require-corp',
+      },
+    },
+  };
+});