Merge PR #1922: update native-document framework

krausest · krausest · commit bd087f0a2974 · 2025-09-13T18:16:21.000Z
diff --git a/frameworks/keyed/native-document/index.html b/frameworks/keyed/native-document/index.html
@@ -5,7 +5,7 @@
   <link href="/css/currentStyle.css" rel="stylesheet" />
 </head>
 <body>
-  <div id="main"></div>
+  <div id="root"></div>
   <script src="dist/main.js"></script>
 </body>
 </html>
diff --git a/frameworks/keyed/native-document/package-lock.json b/frameworks/keyed/native-document/package-lock.json
diff --git a/frameworks/keyed/native-document/package.json b/frameworks/keyed/native-document/package.json
@@ -11,7 +11,7 @@
     "dev": "vite"
   },
   "dependencies": {
-    "native-document": "1.0.26",
+    "native-document": "1.0.34",
     "vite": "^7.0.4"
   }
 }
diff --git a/frameworks/keyed/native-document/src/components/RemoveIcon.js b/frameworks/keyed/native-document/src/components/RemoveIcon.js
@@ -1,8 +1,6 @@
 import { Link, Span } from "native-document/elements";
-import AppService from "../service";
 
-export default function RemoveIcon(itemId){
-  return Link(
-    Span({ class: 'glyphicon glyphicon-remove', 'aria-hidden': true })
-  ).nd.onClick(() => AppService.remove(itemId));
-};
+
+export default (function RemoveIcon(attributes) {
+  return Link(Span(attributes));
+}).cached({ class: 'glyphicon glyphicon-remove', 'aria-hidden': true });
diff --git a/frameworks/keyed/native-document/src/main.js b/frameworks/keyed/native-document/src/main.js
@@ -1,32 +1,41 @@
 import { Tr, Td, ForEachArray, Link, Span, Div, Table, TBody } from "native-document/elements";
-import { Observable } from "native-document";
+import { useCache } from 'native-document';
 
 import Jumbotron from "./components/Jumbotron";
 import RemoveIcon from "./components/RemoveIcon";
 
 import AppService from "./service";
 
-const App = () => {
-
-  return Div({ class: 'container' }, [
-    Jumbotron(),
-    Table({ class: 'table table-hover table-striped test-data' }, [
-      TBody(
-        ForEachArray(AppService.data, (item) => {
-            return Tr( { class: { 'danger': AppService.selected.when(item.id) } }, [
-              Td({ class: 'col-md-1' }, item.id),
-              Td({ class: 'col-md-4' },
-                Link(item.label)
-              ).nd.onClick(() => AppService.select(item.id)),
-              Td({ class: 'col-md-1' }, RemoveIcon(item.id)),
-              Td({ class: 'col-md-6'})
-            ]);
-          },
-          'id')
-      ),
-      Span({ class: 'preloadicon glyphicon glyphicon-remove', 'aria-hidden': true })
-    ])
+
+const Attributes = {
+  table: { class: 'table table-hover table-striped test-data' },
+};
+
+const TableRowBuilder = useCache(($binder) => {
+
+  const isSelected = $binder.class((item) => AppService.selected.when(item.id));
+  const id = $binder.value((item) => item.id);
+  const label = $binder.value((item) => item.label);
+
+  const rowClick = $binder.attach((_, item) => AppService.select(item.id));
+  const removeClick = $binder.attach((_, item) => AppService.remove(item.id));
+
+  return Tr( { class: { 'danger': isSelected } }, [
+    Td({ class: 'col-md-1' }, id),
+    Td({ class: 'col-md-4' }, Link(label)).nd.attach('onClick', rowClick),
+    Td({ class: 'col-md-1' },
+      RemoveIcon().nd.attach('onClick', removeClick)
+    ),
+    Td({ class: 'col-md-6'})
   ]);
-}
+});
+
+const App = Div({ class: 'container' }, [
+  Jumbotron(),
+  Table(Attributes.table,
+    TBody(ForEachArray(AppService.data, TableRowBuilder, 'id', { isParentUniqueChild: true}))
+  ),
+  Span({ class: 'preloadicon glyphicon glyphicon-remove', 'aria-hidden': true })
+]);
 
-document.querySelector('#main').append(App());
+document.getElementById('root').appendChild(App);
diff --git a/frameworks/keyed/native-document/src/service.js b/frameworks/keyed/native-document/src/service.js
@@ -8,6 +8,7 @@ const selected = Observable(0);
 const AppService = {
   data,
   selected,
+  clean: Observable(false),
   resetSelected() {
     selected.disconnectAll();
     selected.set(0);

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`"dev": "vite"`
`12`	`12`	`},`
`13`	`13`	`"dependencies": {`
`14`		`- "native-document": "1.0.26",`
	`14`	`+ "native-document": "1.0.34",`
`15`	`15`	`"vite": "^7.0.4"`
`16`	`16`	`}`
`17`	`17`	`}`