From d24bb4cf48b2f0e1f436d6e69e5faae6a9086fec Mon Sep 17 00:00:00 2001 From: Jonas Strehle Date: Wed, 16 Oct 2024 20:11:23 +0200 Subject: [PATCH] Upgrade for UIX@0.3.0 --- .github/workflows/uix-deploy-prod.yml | 3 +- .vscode/settings.json | 3 ++ backend/entrypoint.tsx | 31 ++++++++++++- backend/lists.eternal.ts | 28 +---------- backend/lists.ts | 13 +++--- common/List.tsx | 67 ++++++++++++++------------- common/Overview.tsx | 10 ++-- deno.json | 5 +- frontend/entrypoint.tsx | 8 ++-- importmap.json | 15 +++--- 10 files changed, 96 insertions(+), 87 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.github/workflows/uix-deploy-prod.yml b/.github/workflows/uix-deploy-prod.yml index 8672799..c14f6a1 100644 --- a/.github/workflows/uix-deploy-prod.yml +++ b/.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" diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3c2e53b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "deno.enable": true +} \ No newline at end of file diff --git a/backend/entrypoint.tsx b/backend/entrypoint.tsx index 40cd219..f5bba8a 100644 --- a/backend/entrypoint.tsx +++ b/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 { diff --git a/backend/lists.eternal.ts b/backend/lists.eternal.ts index be66c52..e3a2f5e 100644 --- a/backend/lists.eternal.ts +++ b/backend/lists.eternal.ts @@ -1,3 +1,4 @@ +import { StorageMap } from "datex-core-legacy/datex_all.ts"; import { SharedList } from "./lists.ts"; /** @@ -5,29 +6,4 @@ import { SharedList } from "./lists.ts"; * 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([[ - "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(); diff --git a/backend/lists.ts b/backend/lists.ts index 0221632..9e910f5 100644 --- a/backend/lists.ts +++ b/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 + items: ListItem[] } export class Lists { - static async get(id: string) { + static async get(id: string): Promise { // 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))!; } } \ No newline at end of file diff --git a/common/List.tsx b/common/List.tsx index d200105..3bb3635 100644 --- a/common/List.tsx +++ b/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
-

{this.options.$.list.$.title}

+

{title}

    { - map(this.options.list.items, (item, index) => { - const reactiveItem = item.$ as unknown as ListItem; - return
  1. - - - {reactiveItem.amount} {reactiveItem.type}{always(()=>item.amount! > 1 ? 's': '')} -
    2. - }) + items.map((item, index) =>
  2. + + + {item.amount} {item.type}{item.amount! > 1 ? 's': ''} +
    3. ) }
- - - - + + -
this.addItem()}>Add
+
this.addItem()}> + Add +
}) -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 = ''; } } \ No newline at end of file diff --git a/common/Overview.tsx b/common/Overview.tsx index 134b2e3..2595e96 100644 --- a/common/Overview.tsx +++ b/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

Overview

{ - ...map(this.options.lists, ([key, val]) => ( + (await this.properties.lists.entriesArray()).map(([key, val]) => {val.title} - )) + ) }
}) -export class Overview extends Component<{lists: Map}> {} \ No newline at end of file +export class Overview extends Component<{lists: StorageMap}> {} \ No newline at end of file diff --git a/deno.json b/deno.json index e0d6c80..357317d 100644 --- a/deno.json +++ b/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" diff --git a/frontend/entrypoint.tsx b/frontend/entrypoint.tsx index 78a1032..2b07e16 100644 --- a/frontend/entrypoint.tsx +++ b/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 // render the list component + const list = await Lists.get(id); + + return // render the list component }) } satisfies Entrypoint; diff --git a/importmap.json b/importmap.json index 19820ed..e3f21f3 100644 --- a/importmap.json +++ b/importmap.json @@ -1,12 +1,11 @@ { "imports": { - "datex-core-legacy": "https://cdn.unyt.org/datex-core-js-legacy@0.1.x/datex.ts", - "datex-core-legacy/": "https://cdn.unyt.org/datex-core-js-legacy@0.1.x/", - "unyt_core": "https://cdn.unyt.org/datex-core-js-legacy@0.1.x/datex.ts", - "unyt_core/": "https://cdn.unyt.org/datex-core-js-legacy@0.1.x/", - "uix": "https://cdn.unyt.org/uix@0.2.x/uix.ts", - "uix/": "https://cdn.unyt.org/uix@0.2.x/src/", - "uix/jsx-runtime": "https://cdn.unyt.org/uix@0.2.x/src/jsx-runtime/jsx.ts", - "unyt-tests/": "https://cdn.unyt.org/unyt-tests/" + "datex-core-legacy": "https://cdn.unyt.org/datex-core-js-legacy@0.2.x/datex.ts", + "datex-core-legacy/": "https://cdn.unyt.org/datex-core-js-legacy@0.2.x/", + "uix": "https://cdn.unyt.org/uix@0.3.x/uix.ts", + "uix/": "https://cdn.unyt.org/uix@0.3.x/src/", + "uix/jsx-runtime": "https://cdn.unyt.org/uix@0.3.x/src/jsx-runtime/jsx.ts", + "jusix/jsx-runtime": "https://cdn.unyt.org/uix@0.3.x/src/jsx-runtime/jsx.ts", + "unyt-tests/": "https://cdn.unyt.org/unyt_tests/" } } \ No newline at end of file