tagu-tagu 4.2.0 → 4.3.0

package/README.md

@@ -449,6 +449,35 @@ document.body.appendChild(EffectExample());
 ```
 [JSFiddle](https://jsfiddle.net/do_the_simplest/ge3mbua4/3/)
 
+Cleanup in `useEffect`:
+```typescript
+import { button, div, useEffect, useState } from "tagu-tagu";
+
+function EffectWithCleanupExample() {
+	const count = useState(0);
+
+	function incrementCount() {
+		count.set(count.get() + 1);
+	}
+
+	useEffect((effect) => {
+		const countValue = count.get();
+		effect.onCleanup(() => {
+			console.log("Cleanup:", countValue);
+		});
+		console.log("Count:", countValue);
+	});
+
+	return div([
+		div("See console"),
+		button("+", { on: { click: incrementCount } }),
+	]);
+}
+
+document.body.appendChild(EffectWithCleanupExample());
+```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/7L9yb6vd/2/)
+
 ### `If`
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tagu-tagu",
-	"version": "4.2.0",
+	"version": "4.3.0",
 	"description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
 	"keywords": [
 		"front-end",

package/src/flow/Await.ts

@@ -0,0 +1,59 @@
+import { useState } from "../signal/Signal";
+import type { ControlFlow } from "./ControlFlow";
+import { Switch } from "./Switch";
+
+export function Await(
+	promise: Promise<Element>,
+	options?: {
+		pending?: () => Element;
+		rejected?: (error: any) => Element;
+	},
+): ControlFlow;
+export function Await<T>(
+	promise: Promise<T>,
+	options?: {
+		pending?: () => Element;
+		fulfilled: (value: T) => Element;
+		rejected?: (error: any) => Element;
+	},
+): ControlFlow;
+export function Await<T>(
+	promise: Promise<T>,
+	options?: {
+		pending?: () => Element;
+		fulfilled?: (value: T) => Element;
+		rejected?: (error: any) => Element;
+	},
+) {
+	const pending = "pending";
+	const fulfilled = "fulfilled";
+	const rejected = "rejected";
+	const promiseState = useState(pending);
+
+	let value: T;
+	let error: any;
+	promise
+		.then((v) => {
+			value = v;
+			promiseState.set(fulfilled);
+		})
+		.catch((reason) => {
+			error = reason;
+			promiseState.set(rejected);
+		});
+
+	const switchOptions = {} as Record<string, () => Element>;
+
+	if (options?.pending) {
+		switchOptions[pending] = options.pending;
+	}
+
+	switchOptions[fulfilled] = () =>
+		options?.fulfilled?.(value) ?? (value as Element);
+
+	if (options?.rejected) {
+		switchOptions[rejected] = () => options.rejected!(error);
+	}
+
+	return Switch(promiseState, switchOptions);
+}