add cdn test script

Author: geotrev

README.md

@@ -38,15 +38,15 @@ patch(...)
 <script
   type="text/javascript"
   src="https://cdn.jsdelivr.net/npm/omdomdom@0.2.3/dist/omdomdom.js"
-  integrity="sha256-HBLiViWpBlIc3sW3GXN1ZDGOqzCCZSzP4COMH2ToKrk="
+  integrity="sha256-gxTlEzcw/jLOIGWUZiPjoDayTXtSbQ0OYHXUuHkm6ag="
   crossorigin="anonymous"
 ></script>
 
 <!-- Minified/uglified bundle for production -->
 <script
   type="text/javascript"
   src="https://cdn.jsdelivr.net/npm/omdomdom@0.2.3/dist/omdomdom.min.js"
-  integrity="sha256-hQMZhQOXCXn6iVdmSzECnZ/C+NszStwrZSkKBpBCsZw="
+  integrity="sha256-XTDMUzNarjcHvaBN6PjRXw56FBHJgbvABOVQAiS0CKM="
   crossorigin="anonymous"
 ></script>
 ```

config/rollup.serve.config.js

@@ -3,17 +3,26 @@ import { nodeResolve } from "@rollup/plugin-node-resolve"
 import serve from "rollup-plugin-serve"
 import livereload from "rollup-plugin-livereload"
 
+const { CDN } = process.env
+const isCdnMode = CDN === "true"
 const currentDir = process.cwd()
 const TEST_ROOT = path.resolve(currentDir, "test")
 const SOURCE_PATH = TEST_ROOT + "/test-cases.js"
 const OUTPUT_PATH = TEST_ROOT + "/bundle.js"
+const OMDOMDOM_EXTERNAL_ID = path.resolve(currentDir, "src/index.js")
 
 export default {
   input: SOURCE_PATH,
   output: {
     file: OUTPUT_PATH,
     format: "iife",
+    globals: isCdnMode
+      ? {
+          [OMDOMDOM_EXTERNAL_ID]: "Omdomdom",
+        }
+      : {},
   },
+  external: isCdnMode ? [OMDOMDOM_EXTERNAL_ID] : [],
   plugins: [
     nodeResolve(),
     livereload({ watch: TEST_ROOT }),

package-lock.json

@@ -11,6 +11,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "watch": "rollup -c config/rollup.serve.config.js -w",
+    "watch:cdn": "CDN=true rollup -c config/rollup.serve.config.js -w",
     "build": "rollup -c config/rollup.build.config.js",
     "eslint:check": "eslint -c .eslintrc.json",
     "prettier:check": "prettier --config .prettierrc.json --check",
@@ -25,6 +26,7 @@
     "@babel/preset-env": "^7.16.7",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.1.2",
+    "@rollup/plugin-replace": "^3.0.1",
     "babel-eslint": "^10.1.0",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",

package.json

@@ -51,12 +51,10 @@ <h2>List of nodes, varying keys:</h2>
     <div id="test-root-18"></div>
     <br />
 
-    <script src="bundle.js" type="text/javascript"></script>
-
     <!-- <script
       type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/omdomdom@0.1.15/dist/omdomdom.js"
-      integrity="sha256-jQXPYrKovGFYxkqBNsLJbGW2hhZPw0rK+UyMI/W9m/0="
+      src="https://cdn.jsdelivr.net/npm/omdomdom@0.2.3/dist/omdomdom.js"
+      integrity="sha256-HBLiViWpBlIc3sW3GXN1ZDGOqzCCZSzP4COMH2ToKrk="
       crossorigin="anonymous"
     ></script> -->
 
@@ -66,5 +64,7 @@ <h2>List of nodes, varying keys:</h2>
       integrity="sha256-Klp69r4KrFkltD1cr2Htgmp/9cI9687fhBI77oRNUrg="
       crossorigin="anonymous"
     ></script> -->
+
+    <script src="bundle.js" type="text/javascript"></script>
   </body>
 </html>

test/index.html

@@ -1,10 +1,4 @@
-// Test CDN:
-// const render = omdomdom.render
-// const create = omdomdom.create
-// const patch = omdomdom.patch
-
-// Comment this out to test CDN:
-import { render, patch, create } from "../src"
+import { render, patch, create } from "../src/index.js"
 
 // eslint-disable-next-line no-console
 const logNode = (node) => console.log("Node:", node)