Upgrade for [email protected]

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

@@ -4,6 +4,7 @@ name: Deploy prod
 on: push
 env:
   GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+  HOST_TOKEN: ${{secrets.HOST_TOKEN}}
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -15,4 +16,4 @@ jobs:
       - name: Setup Deno
         uses: "denoland/setup-deno@v1"
       - name: Deploy UIX App
-        run: "deno run --importmap ./importmap.json -Aqr https://cdn.unyt.org/uix@0.2.x/run.ts --stage prod --detach"
+        run: "deno run --importmap ./importmap.json -Aqr https://cdn.unyt.org/uix@0.3.x/run.ts --stage prod --detach"

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"deno.enable": true
+}

backend/entrypoint.tsx

@@ -1,6 +1,35 @@
 import { Overview } from "../common/Overview.tsx";
 import { listStorage } from "backend/lists.eternal.ts";
-import { Entrypoint } from "uix/html/entrypoints.ts";
+import { Entrypoint } from "uix/providers/entrypoints.ts";
+
+if (await listStorage.getSize() === 0) {
+	await listStorage.set(
+		"jonas",
+		{
+			title: "Jonas Shopping List",
+			items: [
+				{
+					name: "Milk",
+					amount: 1,
+					type: "Bottle",
+					checked: false
+				},
+				{
+					name: "Butter",
+					amount: 4,
+					type: "Piece",
+					checked: false
+				},
+				{
+					name: "Beer",
+					amount: 2,
+					type: "Bottle",
+					checked: false
+				}
+			]
+		}
+	);
+}
 
 // The frontend routes definition
 export default {

backend/lists.eternal.ts

@@ -1,33 +1,9 @@
+import { StorageMap } from "datex-core-legacy/datex_all.ts";
 import { SharedList } from "./lists.ts";
 
 /**
  * Create a new list storage map with default values.
  * Because this is an exported value from a ".eternal.ts" module, 
  * the state will be saved persistently and can still be accessed after restart
  */
-export const listStorage = new Map<string, SharedList>([[
-	"jonas",
-	{
-		title: "Jonas Shopping List",
-		items: new Set([
-			{
-				name: "Milk",
-				amount: 1,
-				type: "Bottle",
-				checked: false
-			},
-			{
-				name: "Butter",
-				amount: 4,
-				type: "Piece",
-				checked: false
-			},
-			{
-				name: "Beer",
-				amount: 2,
-				type: "Bottle",
-				checked: false
-			}
-		])
-	}
-]]);
+export const listStorage = new StorageMap<string, SharedList>();

backend/lists.ts

@@ -1,4 +1,3 @@
-// deno-lint-ignore-file require-await
 import { listStorage } from "./lists.eternal.ts";
 
 export type ListItem = {
@@ -10,18 +9,18 @@ export type ListItem = {
 
 export type SharedList = {
 	title: string,
-	items: Set<ListItem>
+	items: ListItem[]
 }
 
 export class Lists {
-	static async get(id: string) {
+	static async get(id: string): Promise<SharedList> {
 		// create new list if none exists
-		if (!listStorage.has(id)) {
-			listStorage.set(id, {
+		if (!await listStorage.has(id)) {
+			await listStorage.set(id, {
 				title: id,
-				items: new Set()
+				items: []
 			});
 		}
-		return listStorage.get(id)!;
+		return (await listStorage.get(id))!;
 	}
 }

common/List.tsx

@@ -1,73 +1,74 @@
-import { ListItem, type SharedList } from "backend/lists.ts";
-import { map, always } from "datex-core-legacy/functions.ts";
+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;
 	return <div>
 		<div class="header">
-			<h1>{this.options.$.list.$.title}</h1>
+			<h1>{title}</h1>
 		</div>
 		<ol>
 			{
-				map(this.options.list.items, (item, index) => {
-					const reactiveItem = item.$ as unknown as ListItem;
-					return <li>
-						<input type="checkbox" checked={reactiveItem.checked} id={`checkbox-${index}`}/>
-						<label for={`checkbox-${index}`}>{reactiveItem.name}</label>
-						<span>{reactiveItem.amount} {reactiveItem.type}{always(()=>item.amount! > 1 ? 's': '')}</span>
-					</li>
-				})
+				items.map((item, index) => <li>
+						<input type="checkbox" checked={item.checked} id={`checkbox-${index}`}/>
+						<label for={`checkbox-${index}`}>{item.name}</label>
+						<span>{item.amount} {item.type}{item.amount! > 1 ? 's': ''}</span>
+				</li>)
 			}
 		</ol>
-		<button class="add-button" onclick:frontend={() => this.dialog.showModal()}>
+		<button class="add-button"
+			onclick:frontend={() => this.dialog.showModal()}>
 			Add item
 		</button>
 		<button class="remove-button" onclick:frontend={() => this.removeChecked()}>
 			Cleanup
 		</button>
 		<dialog id="dialog" onclick:frontend={function (e) { if (e.target == this) this.close()}}>
-			<input placeholder="Enter item name" type="text" id="name"/>
-			<input placeholder="Enter amount" type="number" id="amount" value={1} max={99}/>
-			<select id="type">
-				<option>Bottle</option>
-				<option>Piece</option>
-				<option>Whatever</option>
+			<input placeholder="Enter item name" type="text" value={this.name}/>
+			<input placeholder="Enter amount" type="number" value={this.amount} max={99}/>
+			<select id="type" value={this.type}>
+				<option name={"bottle"}>Bottle</option>
+				<option name={"piece"}>Piece</option>
+				<option name={"whatever"}>Whatever</option>
 			</select>
-			<div id="add" onclick:frontend={() => this.addItem()}>Add</div>
+			<div id="add" onclick:frontend={() => this.addItem()}>
+				Add
+			</div>
 		</dialog>
 	</div>
 })
-export class List extends Component<{list: SharedList}> {
+export class List extends Component<{title: string, items: ListItem[]}> {
 
 	/** references to the DOM elements */
-	@id name!: HTMLInputElement;
-	@id amount!: HTMLInputElement;
-	@id type!: HTMLOptionElement;
+	@property name = '';
+	@property amount = 1;
+	@property type = 'bottle';
 	@id dialog!: HTMLDialogElement;
 
 	/**
 	 * Remove all checked items
 	 */
 	private removeChecked() {
-		[...this.options.list.items]
-			.filter(item => item.checked)
-			.forEach(item => this.options.list.items.delete(item))
+		const items = this.properties.items;
+		items.val = val(items).filter(e => !e.checked);
+		globalThis.location.reload();
 	}
 
 	/**
 	 * Add a new item to the list
 	 */
 	private addItem() {
-		if (!this.name.value)
+		if (!this.name)
 			return alert("Please enter a name");
-
-		this.options.list.items.add({
+		val(this.properties.items).push({
 			checked: false,
-			name: this.name.value,
-			amount: Number(this.amount.value),
-			type: this.type.value,
+			name: val(this.name),
+			amount: val(this.amount),
+			type: val(this.type),
 		});
-		this.dialog.close()
+		this.dialog.close();
+		this.name = '';
 	}
 }

common/Overview.tsx

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

deno.json

@@ -1,9 +1,8 @@
 {
-    "_publicImportMap": "./importmap.json",
-    "importMap": "./.datex-cache/importmap.lock.json",
+    "importMap": "./importmap.json",
     "compilerOptions": {
         "jsx": "react-jsx",
-        "jsxImportSource": "uix",
+        "jsxImportSource": "jusix",
         "lib": [
             "deno.window",
             "dom"

frontend/entrypoint.tsx

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

importmap.json

@@ -1,12 +1,11 @@
 {
     "imports": {
-        "datex-core-legacy": "https://cdn.unyt.org/[email protected]/datex.ts",
-        "datex-core-legacy/": "https://cdn.unyt.org/[email protected]/",
-        "unyt_core": "https://cdn.unyt.org/[email protected]/datex.ts",
-        "unyt_core/": "https://cdn.unyt.org/[email protected]/",
-        "uix": "https://cdn.unyt.org/[email protected]/uix.ts",
-        "uix/": "https://cdn.unyt.org/[email protected]/src/",
-        "uix/jsx-runtime": "https://cdn.unyt.org/[email protected]/src/jsx-runtime/jsx.ts",
-        "unyt-tests/": "https://cdn.unyt.org/unyt-tests/"
+        "datex-core-legacy": "https://cdn.unyt.org/[email protected]/datex.ts",
+        "datex-core-legacy/": "https://cdn.unyt.org/[email protected]/",
+        "uix": "https://cdn.unyt.org/[email protected]/uix.ts",
+        "uix/": "https://cdn.unyt.org/[email protected]/src/",
+        "uix/jsx-runtime": "https://cdn.unyt.org/[email protected]/src/jsx-runtime/jsx.ts",
+        "jusix/jsx-runtime": "https://cdn.unyt.org/[email protected]/src/jsx-runtime/jsx.ts",
+        "unyt-tests/": "https://cdn.unyt.org/unyt_tests/"
     }
 }