update uix-tests

uix-tests/common/datex-tests.tsx

@@ -0,0 +1,66 @@
+export default <>
+    Hello DATEX
+</>
+
+
+import { Datex, property } from "datex-core-legacy/datex.ts";
+import { inferType, StorageSet } from 'datex-core-legacy/datex_all.ts';
+
+const C = 0;
+
+@sync class A {
+    @property a!: number;
+    construct() {
+        this.a = 42;
+    }
+}
+@sync class B extends A {
+    @property b!: number;
+    construct() {
+        super.construct();
+        this.b = 69;
+    }
+}
+
+const list = eternalVar("tmp1-"+C) ?? $$(new StorageSet<A>());
+if (await list.getSize() === 0) {
+    await list.add(new A());
+    await list.add(new B());
+}
+for await (const entry of list) {
+    console.log(entry,entry.a, entry.b)
+}
+console.log("")
+
+
+// { // Structs
+// 	const A = struct('A',
+// 		class {
+// 			@property a!: number;
+// 			construct() {
+//                 console.log("contrucst A")
+// 				this.a = 42;
+// 			}
+// 		}
+// 	)
+// 	type A = inferType<typeof A>;
+
+// 	const B = struct('B',
+// 		class extends A {
+// 			@property b!: number;
+// 			construct() {
+// 				super.construct();
+// 				this.b = 69;
+// 			}
+// 		}
+// 	)
+// 	type B = inferType<typeof B>;
+// 	const list = eternalVar("tmp2-"+C) ?? $$(new StorageSet<A>());
+// 	if (await list.getSize() === 0) {
+// 		await list.add(new A());
+// 		await list.add(new B());
+// 	}
+// 	for await (const entry of list) {
+// 		console.log(entry, entry.a, entry.b)
+// 	}
+// }

uix-tests/common/tests.tsx

@@ -4,6 +4,8 @@ import ChildComponent from "common/ChildComponent.tsx";
 
 export default {
 
+	'/datex-tests': () => import("./datex-tests.tsx"),
+
 	'/test1': () => <div>Test 1</div>,
 	'/test2': () => {
 		const value = $$(0);
@@ -47,7 +49,7 @@ export default {
 			/>
 
 			<input class={({s:true})} type="number" value={'xy'}/>
-			<input type={"button"} value={$("fe")} style={$$({color: 'red', x: [3]})}/>
+			<input type={"button"} value={$("fe")} style={$$({color: 'red', x: [3]})} onclick:frontend={() => alert("Click!")}/>
 
 			<x-custom-element x="234" y={5}>x</x-custom-element>
 			<Component1 number1={value} number2={value} data={data}/>
@@ -164,7 +166,71 @@ export default {
 	'/test10': () => <main>
 		<BaseComponent title="Base" color="red"/>
 		<ChildComponent title="Child" color={"orange"} counter={$$(3)}/>
-	</main>
+	</main>,
+
+	'/test11': () => {
+		const radius = $(0);
+
+		return (
+			<div>
+				<h1>Circle Area Calculator</h1>
+				<input step="0.01" type="number" placeholder="Radius" value={radius}/>
+				<p>Area = { Math.PI * radius ** 2 }</p>
+			</div>
+		);
+	},
+
+	'/test12': () => {
+		const showDialog = $$(false);
+		globalThis.showDialog = showDialog;
+		return <div>
+			<div>My Div</div>
+			{val(showDialog) ? <div id="dialog">My Dialog</div> : null}
+		</div>;
+	},
+
+	'/test13': () => {
+		const showDialog = $$(false);
+		globalThis.showDialog = showDialog;
+		return <div>
+			<div>My Div</div>
+			{val(showDialog) && <div id="dialog">My Dialog</div>}
+		</div>;
+	},
+
+	'/test14': () => {
+		const showDialog = $$(true);
+		globalThis.showDialog = showDialog;
+		return <div>
+			<div>My Div</div>
+			{val(showDialog) && <div id="dialog">My Dialog</div>}
+		</div>;
+	},
+
+	'/test15': () => {
+		const showDialog = $$(false);
+		globalThis.showDialog = showDialog;
+		return <div>
+			<div>My Div</div>
+			{val(showDialog) ? <div id="dialog">My Dialog</div> : "no dialog!"}
+		</div>;
+	},
+
+	'/test16': () => {
+		const showDialog = $$(false);
+		globalThis.showDialog = showDialog;
+		return <div>
+			<div>My Div</div>
+			{val(showDialog) ? <div id="dialog">My Dialog</div> : [1,2,3]}
+		</div>;
+	},
 
+	'/test17': () => <input 
+		type="button"
+		value="Hello"
+		onclick:frontend={() => {
+			alert("Hello!");
+		}}
+	/>,
 
 }