switch to @ivi/htm

Author: leeoniya

frameworks/keyed/ivi/package-lock.json

@@ -18,16 +18,16 @@
     "build-prod": "rollup -c rollup.config.mjs"
   },
   "dependencies": {
-    "@ivi/tpl": "3.0.1",
+    "@ivi/htm": "^3.0.2",
     "ivi": "3.0.3"
   },
   "devDependencies": {
-    "tslib": "2.8.1",
-    "typescript": "5.7.2",
-    "rollup": "4.27.4",
+    "@ivi/rollup-plugin": "3.0.4",
     "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.1",
-    "@ivi/rollup-plugin": "3.0.4"
+    "rollup": "4.27.4",
+    "tslib": "2.8.1",
+    "typescript": "5.7.2"
   }
-}
+}

frameworks/keyed/ivi/package.json

@@ -1,5 +1,5 @@
 import { defineRoot, dirtyCheck, update, component, List, eventDispatcher, getProps, useReducer } from "ivi";
-import { htm } from "@ivi/tpl";
+import { htm as html } from "@ivi/htm";
 import { Entry, State, Action, ActionType } from "./types.js";
 
 const random = (max: number) => Math.round(Math.random() * 1000) % max;
@@ -66,21 +66,26 @@ interface RowProps {
 const Row = component<RowProps>((c) => {
   const onSelect = () => { dispatch(c, { type: ActionType.Select, entry: getProps(c).entry }); };
   const onRemove = () => { dispatch(c, { type: ActionType.Remove, entry: getProps(c).entry }); };
-  return ({ entry, selected }) => htm`
-    tr${selected === true ? "danger" : ""}
-      td.col-md-1 =${entry.id}
-      td.col-md-4
-        a @click=${onSelect} =${entry.label}
-      td.col-md-1
-        a @click=${onRemove} span.glyphicon.glyphicon-remove :aria-hidden='true'
-      td.col-md-6
-    `;
+  return ({ entry, selected }) => html`
+    <tr class=${selected === true ? "danger" : ""}>
+      <td class="col-md-1" .textContent=${entry.id}/>
+      <td class="col-md-4">
+        <a @click=${onSelect} .textContent=${entry.label}/>
+      </td>
+      <td class="col-md-1">
+        <a @click=${onRemove}>
+          <span class="glyphicon glyphicon-remove" aria-hidden="true"/>
+        </a>
+      </td>
+      <td class="col-md-6"/>
+    </tr>
+  `;
 });
 
-const Button = (text: string, id: string, onClick: () => void) => /* preventClone */ htm`
-  div.col-sm-6.smallpad
-    button.btn.btn-primary.btn-block :type='button' :id=${id} @click=${onClick}
-      =${text}
+const Button = (text: string, id: string, onClick: () => void) => /* preventClone */ html`
+  <div class="col-sm-6 smallpad">
+    <button class="btn btn-primary btn-block" type="button" id=${id} @click=${onClick} .textContent=${text}/>
+  </div>
 `;
 
 const App = component((c) => {
@@ -98,18 +103,28 @@ const App = component((c) => {
 
   return () => {
     const { data, selected } = _state();
-    return /* preventClone */ htm`
-    div.container
-      div.jumbotron
-        div.row
-          div.col-md-6 h1 'ivi'
-          div.col-md-6 div.row ${buttons}
-      table.table.table-hover.table-striped.test-data
-        @dispatch=${onDispatch}
-        ${data.length
-           ? htm`tbody ${List(data, getEntryId, (entry) => Row({ entry, selected: selected === entry.id }))}`
-           : htm`tbody`}
-      span.preloadicon.glyphicon.glyphicon-remove :aria-hidden='true'
+    return /* preventClone */ html`
+      <div class="container">
+        <div class="jumbotron">
+          <div class="row">
+            <div class="col-md-6">
+              <h1>ivi</h1>
+            </div>
+            <div class="col-md-6">
+              <div class="row">
+                ${buttons}
+              </div>
+            </div>
+          </div>
+        </div>
+        <table class="table table-hover table-striped test-data" @dispatch=${onDispatch}>
+          ${data.length
+            ? html`<tbody>${List(data, getEntryId, (entry) => Row({ entry, selected: selected === entry.id }))}</tbody>`
+            : html`<tbody/>`
+          }
+        </table>
+        <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"/>
+      </div>
     `;
   };
 });