bugfixes

Author: Benedikt Strehle

.github/workflows/uix-deploy-prod.yml

@@ -14,6 +14,6 @@ jobs:
         with:
           submodules: recursive
       - name: Setup Deno
-        uses: "denoland/setup-deno@v1"
+        uses: "denoland/setup-deno@v2"
       - name: Deploy UIX App
         run: "deno run --importmap ./importmap.json -Aqr https://cdn.unyt.org/[email protected]/run.ts --stage prod --detach"

backend/entrypoint.tsx

@@ -33,6 +33,6 @@ if (await listStorage.getSize() === 0) {
 
 // The frontend routes definition
 export default {
-  "/": <Overview lists={listStorage} />,
+  "/": () => <Overview lists={listStorage} />,
   "*": null,
 } satisfies Entrypoint;

common/List.scss

@@ -1,17 +1,15 @@
 import { type ListItem } from "backend/lists.ts";
 import { template } from "uix/html/template.ts";
 import { Component } from "uix/components/Component.ts";
-import type { Ref } from "datex-core-legacy/datex_all.ts";
 
-@template(function (this: List) {
-  const { title, items } = this.properties;
+@template(function({ title, items }) {
   return (
     <div>
       <div class="header">
         <h1>{title}</h1>
       </div>
       <ol>
-        {val(items).map((item, index) => (
+        {items.map((item, index) => (
           <li>
             <input
               type="checkbox"
@@ -24,12 +22,14 @@ import type { Ref } from "datex-core-legacy/datex_all.ts";
         ))}
       </ol>
       <button
+        type="button"
         class="add-button"
         onclick:frontend={() => this.dialog.showModal()}
       >
         Add item
       </button>
       <button
+        type="button"
         class="remove-button"
         onclick:frontend={() => this.removeChecked()}
       >
@@ -49,34 +49,30 @@ import type { Ref } from "datex-core-legacy/datex_all.ts";
           max={99}
         />
         <select id="type" value={this.type}>
-          <option name={"bottle"}>Bottle</option>
-          <option name={"piece"}>Piece</option>
-          <option name={"whatever"}>Whatever</option>
+          <option name="bottle">Bottle</option>
+          <option name="piece">Piece</option>
+          <option name="whatever">Whatever</option>
         </select>
-        <div id="add" onclick:frontend={() => this.addItem()}>
+        <button type="button" onclick:frontend={() => this.addItem()}>
           Add
-        </div>
+        </button>
       </dialog>
     </div>
   );
 })
-export class List extends Component<{ title: string; items: Ref<ListItem[]> }> {
+export class List extends Component<{ title: string; items: ListItem[] }> {
   /** references to the DOM elements */
-  @property
-  name = "";
-  @property
-  amount = 1;
-  @property
-  type = "bottle";
-  @id
-  dialog!: HTMLDialogElement;
+  @property name = "";
+  @property amount = 1;
+  @property type = "bottle";
+  @id dialog!: HTMLDialogElement;
 
   /**
    * Remove all checked items
    */
   private removeChecked() {
     const items = this.properties.items;
-    items.val = val(items).filter((e) => !e.checked);
+    items.splice(0, items.length, ...items.filter((e) => !e.checked))
     globalThis.location.reload();
   }
 

common/List.tsx

@@ -3,15 +3,14 @@ import { template } from "uix/html/template.ts";
 import { Component } from "uix/components/Component.ts";
 import { StorageMap } from "datex-core-legacy/datex_all.ts";
 
-@template(async function (this: Overview) {
-  return (
-    <div>
+@template(async ({lists}) => {
+    const entries = await lists.entriesArray();
+    return <div>
       <h1>Overview</h1>
-      {(await this.properties.lists.entriesArray()).map(([key, val]) => (
+      {entries.map(([key, val]) => (
         <a href={`/${key}`}>{val.title}</a>
       ))}
     </div>
-  );
 })
 export class Overview
   extends Component<{ lists: StorageMap<string, SharedList> }> {}

common/Overview.tsx

@@ -1,11 +1,19 @@
 {
-    "importMap": "./importmap.json",
+    "_publicImportMap": "./importmap.json",
+    "importMap": "./.datex-cache/importmap.lock.json",
     "compilerOptions": {
         "jsx": "react-jsx",
         "jsxImportSource": "jusix",
         "lib": [
             "deno.window",
             "dom"
         ]
+    },
+    "lint": {
+        "rules": {
+            "exclude": [
+                "jsx-key"
+            ]
+        }
     }
 }

deno.json

@@ -1,12 +1,10 @@
 import { Lists } from "../backend/lists.ts";
 import { List } from "../common/List.tsx";
 import { type Entrypoint } from "uix/providers/entrypoints.ts";
-import { lazy } from "uix/providers/common.tsx";
 
 export default {
-  "/:id": lazy(async (_, { id }) => {
+  "/:id": async (_ctx, { id }) => {
     const list = await Lists.get(id);
-
     return <List items={list.items} title={list.title} />; // render the list component
-  }),
+  },
 } satisfies Entrypoint;