Enable JSX

examples/counter-component/src/Main.tsx

@@ -0,0 +1,34 @@
+import { SeqflowFunctionContext } from "seqflow-js";
+
+async function Button(this: SeqflowFunctionContext, data: { text: string }) {
+	this.renderSync(<button type="button">{data.text}</button>);
+}
+
+export async function Main(this: SeqflowFunctionContext) {
+	let counter = 0;
+	const incrementButton = <Button text="Increment" />;
+	const decrementButton = <Button text="Decrement" />;
+	const counterDiv = <div>{counter}</div>;
+	this.renderSync(
+		<>
+			<div>
+				{decrementButton}
+				{incrementButton}
+			</div>
+			{counterDiv}
+		</>,
+	);
+
+	const events = this.waitEvents(
+		this.domEvent("click", { el: this._el as HTMLElement }),
+	);
+	for await (const ev of events) {
+		if (incrementButton.contains(ev.target)) {
+			counter++;
+		} else if (decrementButton.contains(ev.target)) {
+			counter--;
+		}
+
+		counterDiv.textContent = `${counter}`;
+	}
+}

examples/counter-component/src/index.ts

@@ -2,4 +2,4 @@ import { start } from "seqflow-js";
 import { Main } from "./Main";
 import "./index.css";
 
-start(document.getElementById("root"), Main);
+start(document.getElementById("root"), Main, undefined, {});

examples/counter-component/tests/index.test.ts

@@ -1,16 +1,14 @@
-import { waitFor } from "@testing-library/dom";
+import { screen, waitFor } from "@testing-library/dom";
 import { start } from "seqflow-js";
 import { expect, test } from "vitest";
 import { Main } from "../src/Main";
 
 test("should increment and decrement the counter", async () => {
-	start(document.body, Main);
+	start(document.body, Main, undefined, {});
 
-	const incrementButton =
-		document.querySelector<HTMLButtonElement>("#increment");
-	const decrementButton =
-		document.querySelector<HTMLButtonElement>("#decrement");
-	const counterDiv = document.querySelector<HTMLDivElement>("#counter");
+	const incrementButton = await screen.findByText(/increment/i);
+	const decrementButton = await screen.findByText(/decrement/i);
+	const counterDiv = await screen.findByText(/0/i);
 
 	expect(counterDiv?.textContent).toBe("0");
 

examples/counter-component/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "lib": ["es2015", "dom"],
+        "jsx": "react",
+        "jsxFactory": "this.createDOMElement",
+        "jsxFragmentFactory": "this.createDOMFragment"
+    },
+    "include": ["./src/**/*", "./tests/**/*"]
+}

examples/counter-domain/src/Main.tsx

@@ -0,0 +1,52 @@
+import { SeqflowFunctionContext } from "seqflow-js";
+import {
+	CounterChanged,
+	CounterDomain,
+	CounterReset,
+	components,
+} from "./domains/counter";
+
+import "./index.css";
+
+export async function Main(this: SeqflowFunctionContext) {
+	const counter = this.app.domains.counter.get();
+
+	const decrement = (
+		<components.ChangeCounterButton delta={-1} text={"Decrement"} />
+	);
+	const increment = (
+		<components.ChangeCounterButton delta={1} text={"Increment"} />
+	);
+	const reset = <components.ResetCounterButton />;
+	const counterDiv = <div>{counter}</div>;
+	this.renderSync(
+		<>
+			<div />
+			<div id="counter-card">
+				<div id="actions">
+					{decrement}
+					<div />
+					{increment}
+					<div />
+					{reset}
+				</div>
+				{counterDiv}
+			</div>
+			<div />
+		</>,
+	);
+
+	const events = this.waitEvents(
+		this.domainEvent(CounterChanged),
+		this.domainEvent(CounterReset),
+	);
+	for await (const ev of events) {
+		counterDiv.textContent = `${ev.detail.counter}`;
+	}
+}
+
+declare module "seqflow-js" {
+	interface Domains {
+		counter: CounterDomain;
+	}
+}

examples/counter-domain/src/domains/counter/components/ChangeCounterButton.tsx

@@ -0,0 +1,14 @@
+import { SeqflowFunctionContext } from "seqflow-js";
+
+export async function ChangeCounterButton(
+	this: SeqflowFunctionContext,
+	data: { delta: number; text: string },
+) {
+	this.renderSync(<button type="button">{data.text}</button>);
+	const events = this.waitEvents(
+		this.domEvent("click", { el: this._el as HTMLElement }),
+	);
+	for await (const _ of events) {
+		this.app.domains.counter.applyDelta(data.delta);
+	}
+}

examples/counter-domain/src/domains/counter/components/ResetCounterButton.tsx

@@ -0,0 +1,11 @@
+import { SeqflowFunctionContext } from "seqflow-js";
+
+export async function ResetCounterButton(this: SeqflowFunctionContext) {
+	this.renderSync(<button type="button">Reset</button>);
+	const events = this.waitEvents(
+		this.domEvent("click", { el: this._el as HTMLElement }),
+	);
+	for await (const _ of events) {
+		this.app.domains.counter.reset();
+	}
+}

examples/counter-domain/tests/index.test.ts

@@ -6,7 +6,6 @@ import { CounterDomain } from "../src/domains/counter";
 
 test("should increment and decrement the counter", async () => {
 	start(document.body, Main, undefined, {
-		log() {},
 		domains: {
 			counter: (eventTarget) => {
 				return new CounterDomain(eventTarget);
@@ -18,14 +17,28 @@ test("should increment and decrement the counter", async () => {
 		await screen.findByText<HTMLButtonElement>("Increment");
 	const decrementButton =
 		await screen.findByText<HTMLButtonElement>("Decrement");
+	const resetButton =
+		await screen.findByText<HTMLButtonElement>("Reset");
 	const counterDiv = await screen.findByText<HTMLDivElement>("0");
 
 	expect(counterDiv.textContent).toBe("0");
 
+	// increment the counter
 	incrementButton?.click();
 	await waitFor(() => expect(counterDiv?.textContent).toBe("1"));
+	// increment the counter again
 	incrementButton?.click();
 	await waitFor(() => expect(counterDiv?.textContent).toBe("2"));
+	// decrement the counter
 	decrementButton?.click();
 	await waitFor(() => expect(counterDiv?.textContent).toBe("1"));
+	// reset the counter
+	resetButton?.click();
+	await waitFor(() => expect(counterDiv?.textContent).toBe("0"));
+	// counter can be negative
+	decrementButton?.click();
+	await waitFor(() => expect(counterDiv?.textContent).toBe("-1"));
+	// reset the counter again
+	resetButton?.click();
+	await waitFor(() => expect(counterDiv?.textContent).toBe("0"));
 });

examples/counter-domain/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "lib": ["es2015", "dom"],
+        "jsx": "react",
+        "jsxFactory": "this.createDOMElement",
+        "jsxFragmentFactory": "this.createDOMFragment"
+    },
+    "include": ["./src/**/*", "./tests/**/*"]
+}