feat: adds snabbdom browser bundle support

geotrev · Jan 16, 2022 · e0ea2fe · e0ea2fe
1 parent e7912a6
commit e0ea2fe
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -47,7 +47,9 @@ $ npm i rotom
 
 Use the CDN to skip packaging and use the library from the cloud.
 
-First, include the renderer:
+First, include a renderer (only one):
+
+**Omdomdom**:
 
 ```html
 <!-- Development build -->
@@ -67,6 +69,30 @@ First, include the renderer:
 ></script>
 ```
 
+**Snabbdom**:
+
+```html
+<!-- Development build -->
+<script
+  type="text/javascript"
+  src="https://cdn.jsdelivr.net/npm/rotom@0.9.2/dist/snabbdom.js"
+  integrity="sha256-NKgEEe5JMJgIg2jtyq8znfNBAsxZYQwKkD0diYL390U="
+  crossorigin="anonymous"
+></script>
+
+<!-- OR production build-->
+<script
+  type="text/javascript"
+  src="https://cdn.jsdelivr.net/npm/rotom@0.9.2/dist/snabbdom.min.js"
+  integrity="sha256-B8iG3NqITfDbCJGeChjPi/lgJ5BC5/Rqo4MZlnC9L9Y="
+  crossorigin="anonymous"
+></script>
+```
+
+Note that Snabbdom doesn't build its own browser bundle so Rotom provides it.
+
+---
+
 And Rotom itself (after the renderer script):
 
 ```html

diff --git a/config/rollup.build.config.js b/config/rollup.build.config.js
@@ -97,25 +97,25 @@ function createProdOutputs(type) {
 function createLibConfigs() {
   return [
     {
-      input: path.resolve(currentDir, `src/rotom.jsx.js`),
+      input: path.resolve(currentDir, "src/rotom.jsx.js"),
       output: createDevOutputs(RenderTypes.JSX),
       external,
       plugins: [...plugins, replacePlugin(Environments.DEVELOPMENT)],
     },
     {
-      input: path.resolve(currentDir, `src/rotom.jsx.js`),
+      input: path.resolve(currentDir, "src/rotom.jsx.js"),
       output: createProdOutputs(RenderTypes.JSX),
       external,
       plugins: [...plugins, replacePlugin(Environments.PRODUCTION)],
     },
     {
-      input: path.resolve(currentDir, `src/rotom.template.js`),
+      input: path.resolve(currentDir, "src/rotom.template.js"),
       output: createDevOutputs(RenderTypes.TEMPLATE),
       external,
       plugins: [...plugins, replacePlugin(Environments.DEVELOPMENT)],
     },
     {
-      input: path.resolve(currentDir, `src/rotom.template.js`),
+      input: path.resolve(currentDir, "src/rotom.template.js"),
       output: createProdOutputs(RenderTypes.TEMPLATE),
       external,
       plugins: [...plugins, replacePlugin(Environments.PRODUCTION)],
@@ -136,7 +136,7 @@ function createDistConfigs() {
       input: path.resolve(currentDir, "src/rotom.template.js"),
       output: {
         ...baseDistOutput,
-        file: path.resolve(currentDir, `dist/rotom.template.js`),
+        file: path.resolve(currentDir, "dist/rotom.template.js"),
         sourcemap: true,
       },
       external,
@@ -146,7 +146,7 @@ function createDistConfigs() {
       input: path.resolve(currentDir, "src/rotom.template.js"),
       output: {
         ...baseDistOutput,
-        file: path.resolve(currentDir, `dist/rotom.template.min.js`),
+        file: path.resolve(currentDir, "dist/rotom.template.min.js"),
         sourcemap: true,
         plugins: [terserPlugin],
       },
@@ -156,4 +156,30 @@ function createDistConfigs() {
   ]
 }
 
-export default [...createLibConfigs(), ...createDistConfigs()]
+function createSnabbdomConfig() {
+  return {
+    input: path.resolve(currentDir, "vendor/snabbdom.js"),
+    output: [
+      {
+        file: path.resolve(currentDir, "dist/snabbdom.js"),
+        format: "umd",
+        name: "snabbdom",
+        sourcemap: true,
+      },
+      {
+        file: path.resolve(currentDir, "dist/snabbdom.min.js"),
+        format: "umd",
+        name: "snabbdom",
+        sourcemap: true,
+        plugins: [terserPlugin],
+      },
+    ],
+    plugins,
+  }
+}
+
+export default [
+  createSnabbdomConfig(),
+  ...createLibConfigs(),
+  ...createDistConfigs(),
+]
diff --git a/paopu.config.json b/paopu.config.json
@@ -4,6 +4,10 @@
     "resources": ["dist/omdomdom.js", "dist/omdomdom.min.js"],
     "targets": ["README.md", "test/template/index.html"]
   },
+  "snabbdom": {
+    "resources": ["dist/snabbdom.js", "dist/snabbdom.min.js"],
+    "targets": ["README.md", "test/jsx/index.html"]
+  },
   "rotom": {
     "resources": ["dist/rotom.template.js", "dist/rotom.template.min.js"],
     "targets": ["README.md", "test/jsx/index.html", "test/template/index.html"]

diff --git a/test/jsx/index.html b/test/jsx/index.html
@@ -34,6 +34,34 @@
       })
     </script>
 
-    <script src="bundle.js" defer></script>
+    <!-- <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/rotom@0.9.2/dist/snabbdom.js"
+      integrity="sha256-NKgEEe5JMJgIg2jtyq8znfNBAsxZYQwKkD0diYL390U="
+      crossorigin="anonymous"
+    ></script> -->
+
+    <!-- <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/rotom@0.9.2/dist/snabbdom.min.js"
+      integrity="sha256-B8iG3NqITfDbCJGeChjPi/lgJ5BC5/Rqo4MZlnC9L9Y="
+      crossorigin="anonymous"
+    ></script> -->
+
+    <!-- <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/rotom@0.9.2/dist/rotom.template.js"
+      integrity="sha256-VCvTNMHKyllheidwKrN6aSGMNo/OTMlldeoJQLhpTZI="
+      crossorigin="anonymous"
+    ></script> -->
+
+    <!-- <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/rotom@0.9.2/dist/rotom.template.min.js"
+      integrity="sha256-l0g50A9Tw0UCiWQBOQmDHKD7RKVO4anDhoQ65ovyebk="
+      crossorigin="anonymous"
+    ></script> -->
+
+    <script src="bundle.js"></script>
   </body>
 </html>
diff --git a/test/template/index.html b/test/template/index.html
@@ -39,29 +39,25 @@
       src="https://cdn.jsdelivr.net/npm/omdomdom@0.3.0/dist/omdomdom.js"
       integrity="sha256-BpjOyF5QNlVmvIoAucFkb4hr+8+5r0qctp12U3J9cmM="
       crossorigin="anonymous"
-      defer
     ></script> -->
     <!-- <script
       type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/omdomdom@0.3.0/dist/omdomdom.min.js"
       integrity="sha256-3nljHoQODiym3VbusqWmLtNJpCerzfNgoqH3RM/Vi34="
       crossorigin="anonymous"
-      defer
     ></script> -->
 
     <!-- <script
       type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/rotom@0.9.2/dist/rotom.template.js"
       integrity="sha256-VCvTNMHKyllheidwKrN6aSGMNo/OTMlldeoJQLhpTZI="
       crossorigin="anonymous"
-      defer
     ></script> -->
     <!-- <script
       type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/rotom@0.9.2/dist/rotom.template.min.js"
       integrity="sha256-l0g50A9Tw0UCiWQBOQmDHKD7RKVO4anDhoQ65ovyebk="
       crossorigin="anonymous"
-      defer
     ></script> -->
 
     <script src="bundle.js" defer></script>

diff --git a/vendor/snabbdom.js b/vendor/snabbdom.js
@@ -0,0 +1 @@
+export * as snabbdom from "snabbdom"