Updated uhtml to v5

Author: WebReflection

frameworks/keyed/uhtml/package-lock.json

@@ -1,8 +1,6 @@
 {
   "name": "js-framework-benchmark-uhtml",
-  "version": "1.0.0",
   "description": "uhtml demo",
-  "main": "index.js",
   "type": "module",
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "uhtml",
@@ -29,13 +27,12 @@
   },
   "homepage": "https://github.com/krausest/js-framework-benchmark#readme",
   "dependencies": {
-    "js-framework-benchmark-utils": "^0.4.0",
-    "uhtml": "^4.7.0"
+    "uhtml": "^5.0.3"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/plugin-terser": "0.4.4",
     "rollup": "4.28.1",
-    "rollup-plugin-html-literals": "1.1.8"
+    "rollup-plugin-minify-template-literals": "^1.1.7"
   }
 }

frameworks/keyed/uhtml/package.json

@@ -1,4 +1,4 @@
-import minifyHTML from "rollup-plugin-html-literals";
+import minifyHTML from "rollup-plugin-minify-template-literals";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import terser from "@rollup/plugin-terser";
 
@@ -7,19 +7,21 @@ const isProduction = process.env.BUILD === "production";
 /** @type {import('rollup').RollupOptions} */
 export default {
   input: "src/index.js",
-  output: {
-    esModule: true,
-    file: "dist/index.js",
-  },
   plugins: [
     minifyHTML({
       options: {
         minifyOptions: {
+          ignoreCustomComments: [/^!/],
           keepClosingSlash: true,
+          caseSensitive: true,
         },
       },
     }),
     nodeResolve(),
     isProduction && terser(),
   ],
+  output: {
+    esModule: true,
+    file: "dist/index.js",
+  },
 };

frameworks/keyed/uhtml/rollup.config.js

@@ -1,15 +1,21 @@
-import {State} from 'js-framework-benchmark-utils';
-import {html, htmlFor, render} from 'uhtml/keyed';
-
-import Jumbotron from './jumbotron.js';
-import Table from './table.js';
-
-const state = State(Table, false, htmlFor);
-
-render(document.getElementById('container'), html`
-  <div class="container">
-    ${Jumbotron(state)}
-    ${Table(state)}
-    <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
-  </div>
-`);
+import { html, render, signal } from 'uhtml';
+
+import Table from './table.js';
+import Jumbotron from '../../../non-keyed/uhtml/src/jumbotron.js';
+import { handle } from '../../../non-keyed/uhtml/src/utils.js';
+
+const App = ({ title, data }) => html`
+  <div class="container">
+    <!-- direct, non reactive, component -->
+    ${Jumbotron({ title, data })}
+    <!-- reactive component -->
+    <${Table} ...${{ data, select: handle('select'), remove: handle('remove') }} />
+    <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
+  </div>
+`;
+
+render(document.getElementById('container'), App({
+  title: 'µhtml keyed',
+  data: signal([], { greedy: true })
+}));
+

frameworks/keyed/uhtml/src/index.js

@@ -1,24 +1,22 @@
-import {htmlFor} from 'uhtml/keyed';
+import { html } from 'uhtml';
 
-export default (state) => {
-  const {data, selected, selectRow, removeRow} = state;
-  return htmlFor(state)`
-    <table class="table table-hover table-striped test-data" .state=${state}>
-      <tbody>${
-      data.map(({id, label, html}) => html`
-        <tr id=${id} class=${id === selected ? 'danger' : ''}>
-          <td class="col-md-1">${id}</td>
-          <td class="col-md-4">
-            <a onclick=${selectRow}>${label}</a>
-          </td>
-          <td class="col-md-1">
-            <a onclick=${removeRow}>
-              <span class="glyphicon glyphicon-remove" aria-hidden="true" />
-            </a>
-          </td>
-          <td class="col-md-6" />
-        </tr>`
-      )}</tbody>
-    </table>
-  `;
-};
+// Table component: it subscribes to the data signal
+// as it relies its array content to change and update rows
+export default ({ data, select, remove }) => html`
+  <table class="table table-hover table-striped test-data">
+    <tbody>${data.value.map(({ id, label, selected }) => html`
+      <tr key=${id} id=${id} class=${id === selected ? 'danger' : ''}>
+        <td class="col-md-1">${id}</td>
+        <td class="col-md-4">
+          <a onclick=${select}>${label}</a>
+        </td>
+        <td class="col-md-1">
+          <a onclick=${remove}>
+            <span class="glyphicon glyphicon-remove" aria-hidden="true" />
+          </a>
+        </td>
+        <td class="col-md-6" />
+      </tr>
+    `)}</tbody>
+  </table>
+`;