RC2 preparation

README.md

@@ -27,15 +27,15 @@ async function getRandomQuote(): Promise<Quote> {
 
 export async function Main({}, { component }: Contexts) {
 	// Render loading message
-	component.renderSync(
+	component.render(
 		<p>Loading...</p>
 	);
 
 	// Perform an async operation
 	const quote = await getRandomQuote();
 
 	// Replace loading message with quote
-	component.renderSync(
+	component.render(
 		<div>
 			<div>{quote.content}</div>
 			<div>{quote.author}</div>

examples/counter/src/Main.tsx

@@ -11,7 +11,7 @@ export async function Main(
 	_: ComponentProps<unknown>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Card
 			compact
 			className={"m-auto w-96 bg-slate-900 text-slate-200 mt-6"}

examples/counter/src/domains/counter/components/ApplyDeltaButton.tsx

@@ -5,7 +5,7 @@ export async function ApplyDeltaButton(
 	{ delta, label }: ComponentProps<{ delta: number; label: string }>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Button
 			color="primary"
 			onClick={() => app.domains.counter.applyDelta(delta)}

examples/counter/src/domains/counter/components/SetCounterValue.tsx

@@ -6,7 +6,7 @@ export async function SetCounterValue(
 	_: ComponentProps<unknown>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Form key="form" className={[classes.wrapper, "a"]}>
 			<FormField label={"Choose a value"} className={"w-full max-w-xs"}>
 				<NumberInput required name="set-value" key="choose-value" />
@@ -22,12 +22,14 @@ export async function SetCounterValue(
 		</Form>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent("form", "submit", { preventDefault: true }),
 	);
-	for await (const _ of events) {
-		const input = component.getChild<HTMLInputElement>("choose-value");
-		const value = input.valueAsNumber;
-		app.domains.counter.set(value);
+	for await (const ev of events) {
+		if (component.matches(ev, "form", "submit")) {
+			const input = component.getChild<HTMLInputElement>("choose-value");
+			const value = input.valueAsNumber;
+			app.domains.counter.set(value);
+		}
 	}
 }

examples/counter/src/domains/counter/components/ShowValue.tsx

@@ -7,10 +7,12 @@ export async function ShowValue(
 ) {
 	component._el.setAttribute("aria-live", "polite");
 
-	component.renderSync(`${app.domains.counter.get()}`);
+	component.render(`${app.domains.counter.get()}`);
 
-	const events = component.waitEvents(component.domainEvent(CounterChanged));
+	const events = component.listenEvents(component.domainEvent(CounterChanged));
 	for await (const ev of events) {
-		component._el.textContent = `${ev.detail.currentValue}`;
+		if (component.matches(ev, CounterChanged)) {
+			component._el.textContent = `${ev.detail.currentValue}`;
+		}
 	}
 }

examples/custom-element/src/Counter.tsx

@@ -54,12 +54,12 @@ async function ChangeCounterButton(
 	data: ComponentProps<{ delta: number; text: string }>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Button key="button" type="button" color="primary">
 			{data.text}
 		</Button>,
 	);
-	const events = component.waitEvents(component.domEvent("button", "click"));
+	const events = component.listenEvents(component.domEvent("button", "click"));
 
 	for await (const _ of events) {
 		app.domains.counter.applyDelta(data.delta);
@@ -72,7 +72,7 @@ export async function Counter(
 ) {
 	component._el.classList.add(classes["counter-card"]);
 
-	component.renderSync(
+	component.render(
 		<Card
 			compact
 			className={"m-auto w-96 bg-slate-900 text-slate-200 mt-6"}
@@ -90,7 +90,7 @@ export async function Counter(
 		</Card>,
 	);
 
-	const events = component.waitEvents(component.domainEvent(CounterChanged));
+	const events = component.listenEvents(component.domainEvent(CounterChanged));
 	for await (const ev of events) {
 		component.getChild("counter").textContent = `${ev.detail.counter}`;
 	}

examples/e-commerce/src/Main.tsx

@@ -10,7 +10,7 @@ export async function Main(
 ) {
 	await app.domains.user.restoreUser();
 
-	component.renderSync(<Router />);
+	component.render(<Router />);
 }
 
 declare module "@seqflow/seqflow" {

examples/e-commerce/src/components/CardList.tsx

@@ -9,7 +9,7 @@ export async function CardList<T extends { id: string }>(
 	}>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<ol className={classes.wrapper}>
 			{data.items.map((item) => (
 				<li

examples/e-commerce/src/components/Header.tsx

@@ -11,7 +11,7 @@ export async function Header(
 	data: ComponentProps<{ user?: UserType }>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Navbar className={classes.header}>
 			<Navbar.Start>
 				<a href="/">
@@ -37,7 +37,7 @@ export async function Header(
 	const className = user ? classes.logged : classes.unlogged;
 	component._el.classList.add(className);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(UserLoggedEvent),
 		component.domainEvent(UserLoggedOutEvent),
 		component.domEvent(component._el, "click", {
@@ -46,19 +46,15 @@ export async function Header(
 	);
 
 	for await (const ev of events) {
-		if (ev instanceof UserLoggedEvent) {
+		if (component.matches(ev, UserLoggedEvent)) {
 			component._el.classList.add(classes.logged);
 			component._el.classList.remove(classes.unlogged);
-		} else if (ev instanceof UserLoggedOutEvent) {
+		} else if (component.matches(ev, UserLoggedOutEvent)) {
 			component._el.classList.add(classes.unlogged);
 			component._el.classList.remove(classes.logged);
-		} else if (
-			component.getChild("sign-in").contains(ev.target as HTMLElement)
-		) {
+		} else if (component.matches(ev, "sign-in", "click")) {
 			app.router.navigate("/login");
-		} else if (
-			component.getChild("store-logo").contains(ev.target as HTMLElement)
-		) {
+		} else if (component.matches(ev, "store-logo", "click")) {
 			app.router.navigate("/");
 		}
 	}

examples/e-commerce/src/domains/cart/components/AddToCart.tsx

@@ -11,7 +11,7 @@ export async function AddToCart(
 
 	component._el.style.width = "100px";
 
-	component.renderSync(
+	component.render(
 		<>
 			<Button
 				className={[classes.firstAddToCart, "w-full"]}
@@ -51,8 +51,6 @@ export async function AddToCart(
 	);
 
 	const firstAddToCart = component.getChild("first-add-to-cart");
-	const secondAddToCart = component.getChild("second-add-to-cart");
-	const removeFromCart = component.getChild("remove-from-cart");
 	const otherAddToCartWrapper = component.getChild("other-add-to-cart-wrapper");
 	const counter = component.getChild("counter");
 
@@ -66,35 +64,27 @@ export async function AddToCart(
 		otherAddToCartWrapper.classList.remove(classes.show);
 	}
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "click"),
 	);
 	for await (const ev of events) {
-		const target = ev.target as HTMLElement;
-		switch (true) {
-			case firstAddToCart.contains(target): {
-				const c = app.domains.cart.addToCart({ product: data.product });
-				counter.textContent = `${c}`;
-				otherAddToCartWrapper.classList.add(classes.show);
-				firstAddToCart.classList.remove(classes.show);
-				break;
-			}
-			case removeFromCart.contains(target): {
-				const remain = app.domains.cart.removeFromCart({
-					product: data.product,
-				});
-				counter.textContent = `${remain}`;
-				if (remain === 0) {
-					otherAddToCartWrapper.classList.remove(classes.show);
-					firstAddToCart.classList.add(classes.show);
-				}
-				break;
-			}
-			case secondAddToCart.contains(target): {
-				const c = app.domains.cart.addToCart({ product: data.product });
-				counter.textContent = `${c}`;
-				break;
+		if (component.matches(ev, "first-add-to-cart", "click")) {
+			const c = app.domains.cart.addToCart({ product: data.product });
+			counter.textContent = `${c}`;
+			otherAddToCartWrapper.classList.add(classes.show);
+			firstAddToCart.classList.remove(classes.show);
+		} else if (component.matches(ev, "remove-from-cart", "click")) {
+			const remain = app.domains.cart.removeFromCart({
+				product: data.product,
+			});
+			counter.textContent = `${remain}`;
+			if (remain === 0) {
+				otherAddToCartWrapper.classList.remove(classes.show);
+				firstAddToCart.classList.add(classes.show);
 			}
+		} else if (component.matches(ev, "second-add-to-cart", "click")) {
+			const c = app.domains.cart.addToCart({ product: data.product });
+			counter.textContent = `${c}`;
 		}
 	}
 }

examples/e-commerce/src/domains/cart/components/CartBadge.tsx

@@ -10,7 +10,7 @@ export async function CartBadge(
 	const productCount = app.domains.cart.getProductCount();
 	const count = productCount === 0 ? "" : productCount;
 
-	component.renderSync(
+	component.render(
 		<Button
 			color="ghost"
 			shape="circle"
@@ -31,15 +31,18 @@ export async function CartBadge(
 	);
 
 	const counter = component.getChild("counter") as HTMLSpanElement;
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(ChangeCartEvent),
 		component.domainEvent(CheckoutEndedCartEvent),
 		component.domEvent(component._el, "click", {
 			preventDefault: true,
 		}),
 	);
 	for await (const ev of events) {
-		if (ev instanceof ChangeCartEvent || ev instanceof CheckoutEndedCartEvent) {
+		if (
+			component.matches(ev, ChangeCartEvent) ||
+			component.matches(ev, CheckoutEndedCartEvent)
+		) {
 			const productCount = app.domains.cart.getProductCount();
 			const count = productCount === 0 ? "" : productCount;
 			counter.textContent = `${count}`;

examples/e-commerce/src/domains/cart/components/CartProductList.tsx

@@ -6,7 +6,7 @@ import { ChangeCartEvent } from "../events";
 import classes from "./CartProductList.module.css";
 
 async function EmptyCart(_: ComponentProps<unknown>, { component }: Contexts) {
-	component.renderSync(<div>Cart is empty</div>);
+	component.render(<div>Cart is empty</div>);
 }
 
 export async function CartProduct(
@@ -15,7 +15,7 @@ export async function CartProduct(
 ) {
 	component._el.classList.add(classes.product);
 	component._el.id = `cart-product-${data.product.id}`;
-	component.renderSync(
+	component.render(
 		<>
 			<div className={classes.left}>
 				<img
@@ -36,7 +36,7 @@ export async function CartProduct(
 		</>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent("remove-from-cart", "click"),
 	);
 	for await (const ev of events) {
@@ -49,14 +49,14 @@ export async function CartProductList(
 	{ component, app }: Contexts,
 ) {
 	if (data.cart.products.length === 0) {
-		component.renderSync(<EmptyCart />);
+		component.render(<EmptyCart />);
 		return;
 	}
 
 	const checkoutButton = (
 		<Button
 			color="primary"
-			key="remove-from-cart"
+			key="checkout-button"
 			type="button"
 			className={"mt-4"}
 		>
@@ -67,15 +67,17 @@ export async function CartProductList(
 	const cartLogin = (
 		<Alert color="warning" className={"mt-4"} style={{ display: "block" }}>
 			You have to log in to checkout. Click{" "}
-			<a href="/login">here to go to login page</a>
+			<a key="go-to-login" href="/login">
+				here to go to login page
+			</a>
 		</Alert>
 	) as HTMLElement;
 	const cartTotal = (
 		<div className={classes.cartTotal} id="cart-total">
 			total: {data.cart.total} €
 		</div>
 	) as HTMLElement;
-	component.renderSync(
+	component.render(
 		<>
 			<ul className={classes.cartProducts}>
 				{data.cart.products.map(({ product, count, subTotal }) => {
@@ -104,26 +106,18 @@ export async function CartProductList(
 		cartLogin.remove();
 	}
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "click", {
 			preventDefault: true,
 		}),
 		component.domainEvent(ChangeCartEvent),
 	);
 	for await (const ev of events) {
-		if (ev.target instanceof HTMLElement) {
-			if (cartLogin.contains(ev.target)) {
-				ev.preventDefault();
-				app.router.navigate("/login");
-				continue;
-			}
-			if (checkoutButton.contains(ev.target)) {
-				ev.preventDefault();
-				app.router.navigate("/checkout");
-				continue;
-			}
-		}
-		if (ev instanceof ChangeCartEvent) {
+		if (component.matches(ev, "go-to-login", "click")) {
+			app.router.navigate("/login");
+		} else if (component.matches(ev, "checkout-button", "click")) {
+			app.router.navigate("/checkout");
+		} else if (component.matches(ev, ChangeCartEvent)) {
 			switch (ev.detail.action) {
 				case "remove-all-elements-of-a-product":
 					component.replaceChild(ev.detail.product.id, () => <></>);
@@ -138,11 +132,10 @@ export async function CartProductList(
 			const cart = app.domains.cart.getCart();
 
 			if (cart.products.length === 0) {
-				component.renderSync(<EmptyCart />);
-				break;
+				component.render(<EmptyCart />);
+			} else {
+				cartTotal.innerText = `total: ${cart.total} €`;
 			}
-
-			cartTotal.innerText = `total: ${cart.total} €`;
 		}
 	}
 }