Prepare for UIX@0.3.x

.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/.dx

@@ -5,7 +5,7 @@ endpoint: stage {
 },
 
 location: stage {
-	prod: @+unyt-host-4
+	prod: @+unyt-private-1
 },
 
 domain: stage {

common/TOR-Worker.ts

@@ -2,7 +2,6 @@ const ed = await import("https://unpkg.com/@noble/ed25519@2.0.0/index.js");
 const base32 = await import("https://cdn.jsdelivr.net/npm/hi-base32@0.5.1/+esm");
 await import("https://cdn.jsdelivr.net/npm/js-sha3@0.9.2/src/sha3.min.js");
 
-
 export type AddressData = {
 	address: string;
 	public: {
@@ -81,7 +80,7 @@ async function generateOnionV3(keys: KeyPair | Promise<KeyPair> = generateKeys()
 	hash.update(version);
 
 	const checksum = hash.digest().slice(0, 2);
-   
+
 	const decoded = new Uint8Array([...publicKey, ...checksum, ...version]);
 	const address = base32.encode(Array.from(decoded)).toLowerCase().concat(".onion");
 	const _publicKey = getPublicKey(address);

common/components/MainPage.css

@@ -0,0 +1,87 @@
+
+:host {
+	display: flex;
+	flex-direction: column;
+	font-size: x-large;
+	padding: 10px;
+	width: 70%;
+	margin: auto;
+	align-items: center;
+	margin-top: 40px;
+	text-align: center;
+	&>div {
+		margin-top: 30px;
+		width: 100%;
+		flex-wrap: wrap;
+		justify-content: center;
+		&>h2 {
+			width: 100%;
+		}
+		grid-gap: 20px;
+		gap: 20px;
+		display: flex;
+		border-bottom: 1px solid gray;
+		padding-bottom: 30px;
+		&>input {
+			flex: 1;
+			padding: 20px;
+			border-radius: var(--standard-border-radius);
+			max-width: 300px;
+			background-color: transparent;
+			color: var(--text_highlight);
+			padding-left: 20px;
+			font-size: x-large;
+			border: 2px solid var(--accent);
+		}
+
+		&.hidden {
+			&>.button {
+				opacity: 0.4;
+				background-color: transparent;
+				border-color: var(--red);
+				color: var(--text_highlight);
+			}
+		}
+		&>div {
+			transition: opacity 0.2s;
+			background-color: var(--text_highlight);
+			border: 3px solid var(--text_highlight);
+			border-radius: var(--standard-border-radius);
+			padding: 10px;
+			cursor: pointer;
+			transition: background-color 0.2s;
+			box-sizing: border-box;
+			color: var(--accent);
+			&:hover {
+				color: var(--text_highlight);
+				background-color: transparent;
+			}
+		}
+		&>.results {
+			text-align: left;
+			word-break: break-word;
+			width: 100%;
+			gap: 6px;
+			font-family: monospace;
+			display: flex;
+			flex-direction: column;
+		}
+	}
+	&>#tor {
+		span {
+			max-width: 1000px;
+			margin: auto;
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			b {
+				width: 50%;
+			}
+			a {
+				margin: auto;
+				margin-bottom: 10px;
+				text-align: center;
+			}
+		}
+	}
+}

common/components/MainPage.tsx

@@ -1,17 +1,43 @@
 import { template } from "uix/html/template.ts";
 import { Component } from "uix/components/Component.ts";
-import { spawnThreads, spawnThread } from "unyt_core/threads/threads.ts";
-import { always, map } from "unyt_core/functions.ts";
+import { spawnThreads, spawnThread, run } from "datex-core-legacy/threads/threads.ts";
 import type { AddressData } from "common/TOR-Worker.ts";
 
 @template(function(this: MainPage) {
-	return <div>
-		<div id="tor" class={always(()=>this.calculatingAddress?'hidden':'')}>
+	return <>
+		<div id="run" class={this.calculatingPI ? 'hidden': ''}>
+			<h2>Use Console</h2>
+			<div onclick={() => this.runConsole()} class="button">
+				Run in Thread
+			</div>
+		</div>
+		<div id="pi" class={this.calculatingPI ? 'hidden': ''}>
+			<h2>Calculate PI</h2>
+			<input id="inputPiDigits" 
+				type="number"
+				placeholder="Number of digits"
+				value={this.piDigits}/>
+			<div onclick={() => this.computePI()} class="button">{
+				this.calculatingPI ? "Waiting" : "Calculate"
+			}</div>
+			<section class="results">
+				{this.resultPIs.map(pi =>
+					<span>{pi}</span>
+				)}
+			</section>
+		</div>
+		<div id="tor" class={this.calculatingAddress ? 'hidden': ''}>
 			<h2>Create TOR Address</h2>
-			<input id="torAddress" maxlength="3" type="text" placeholder="Prefix of vanity address" value={this.$.addressPrefix}/>
-			<div onclick={() => this.createVanityAddress()} class="button">Compute</div>
+			<input id="torAddress"
+				maxlength="3"
+				type="text"
+				placeholder="Prefix of vanity address"
+				value={this.addressPrefix}/>
+			<div onclick={() => this.createVanityAddress()} class="button">{
+				this.calculatingAddress ? "Waiting" : "Calculate"
+			}</div>
 			<section class="results">
-				{map(this.resultAddresses, (address: AddressData) =>
+				{this.resultAddresses.map(address =>
 					<span>
 						<a>{address.address}</a>
 						<b>Pub: {address.public.b64}</b>
@@ -20,44 +46,26 @@ import type { AddressData } from "common/TOR-Worker.ts";
 				)}
 			</section>
 		</div>
-		<div id="pi" class={always(()=>this.calculatingPI?'hidden':'')}>
-			<h2>Calculate PI</h2>
-			<input id="inputPiDigits" type="number" placeholder="Number of digits" value={this.$.piDigits}/>
-			<div onclick={() => this.computePI()} class="button">Compute</div>
-			<section class="results">
-				{map(this.resultPIs, (pi: string) =>
-					<span>{pi}</span>
-				)}
-			</section>
-		</div>
-	</div>
+	</>
 })
 export class MainPage extends Component {
-
 	// reference properties for input values
 	@property piDigits = 5;
-	@property addressPrefix = "";
+	@property addressPrefix = '';
 
 	// reference properties for calculation state
 	@property calculatingPI = false
 	@property calculatingAddress = false
 
 	// arrays containing history of calculated results
-	@property resultPIs:string[] = []
-	@property resultAddresses:AddressData[] = []
-
-	async createVanityAddress() {
-		this.calculatingAddress = true;
+	@property resultPIs: string[] = []
+	@property resultAddresses: AddressData[] = []
 
-		// spawn 10 new threads
-		using threads = await spawnThreads<typeof import('../TOR-Worker.ts')>('../TOR-Worker.ts', 10);
-		// try to find an address in parallel
-		const address = await Promise.any(
-			threads.map(thread => thread.generateVanityAddress(this.addressPrefix))
-		);
-		this.resultAddresses.unshift(address);
-
-		this.calculatingAddress = false;
+	runConsole() {
+		run(() => {
+			console.log("Hello, main thread!");
+			globalThis.console.log("Hello, worker!");
+		});
 	}
 
 	async computePI() {
@@ -71,4 +79,18 @@ export class MainPage extends Component {
 
 		this.calculatingPI = false;
 	}
+
+	async createVanityAddress() {
+		this.calculatingAddress = true;
+
+		// spawn 10 new threads
+		using threads = await spawnThreads<typeof import('../TOR-Worker.ts')>('../TOR-Worker.ts', 10);
+		// try to find an address in parallel
+		const address = await Promise.any(
+			threads.map(thread => thread.generateVanityAddress(this.addressPrefix))
+		);
+		this.resultAddresses.unshift(address);
+
+		this.calculatingAddress = false;
+	}
 }

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": [
             "dom",
             "deno.window"

frontend/entrypoint.css

@@ -1,7 +1,7 @@
 slot#main {
 	overflow-y: scroll;
 }
-.button {
+div.button {
 	display: flex;
 	align-items: center;
 }

frontend/entrypoint.tsx

@@ -1,2 +1,3 @@
-import { MainPage } from "../common/components/MainPage.tsx";
-export default <MainPage/>
+import { type Entrypoint } from "uix/providers/entrypoints.ts";
+import { MainPage } from "common/components/MainPage.tsx";
+export default <MainPage/> satisfies Entrypoint;