Fix (almost) all typescript errors

allevo · May 10, 2024 · b61df6f · b61df6f
1 parent fa73178
commit b61df6f
Show file tree

Hide file tree

Showing 22 changed files with 254 additions and 176 deletions.
diff --git a/examples/counter-component/src/Main.tsx b/examples/counter-component/src/Main.tsx
@@ -23,6 +23,10 @@ export async function Main(this: SeqflowFunctionContext) {
 		this.domEvent("click", { el: this._el as HTMLElement }),
 	);
 	for await (const ev of events) {
+		if (!(ev.target instanceof HTMLElement)) {
+			continue;
+		}
+
 		if (incrementButton.contains(ev.target)) {
 			counter++;
 		} else if (decrementButton.contains(ev.target)) {

diff --git a/examples/counter/src/Main.tsx b/examples/counter/src/Main.tsx
@@ -1,13 +1,9 @@
 import { type SeqflowFunctionContext } from "seqflow-js";
 
 export async function Main(this: SeqflowFunctionContext) {
-	const incrementButton: HTMLButtonElement = (
-		<button type="button">Increment</button>
-	);
-	const decrementButton: HTMLButtonElement = (
-		<button type="button">Decrement</button>
-	);
-	const counterDiv: HTMLDivElement = <div>0</div>;
+	const incrementButton = <button type="button">Increment</button>;
+	const decrementButton = <button type="button">Decrement</button>;
+	const counterDiv = <div>0</div>;
 
 	let counter = 0;
 	this.renderSync(

diff --git a/examples/custom-element/src/Counter.tsx b/examples/custom-element/src/Counter.tsx
@@ -59,7 +59,7 @@ async function ChangeCounterButton(
 export async function Counter(this: SeqflowFunctionContext) {
 	const counterDiv = <div>{this.app.domains.counter.get()}</div>;
 	this.renderSync(
-		<div class={classes.counter}>
+		<div className={classes.counter}>
 			<ChangeCounterButton delta={-1} text="Decrement" />
 			{counterDiv}
 			<ChangeCounterButton delta={1} text="Increment" />

diff --git a/examples/e-commerce/src/components/CardList.tsx b/examples/e-commerce/src/components/CardList.tsx
@@ -10,9 +10,9 @@ export async function CardList<T extends { id: string | number }>(
 	},
 ) {
 	this.renderSync(
-		<ol class={classes.wrapper}>
+		<ol className={classes.wrapper}>
 			{data.items.map((item) => (
-				<li class={classes.element} id={`${data.prefix}-${item.id}`}>
+				<li className={classes.element} id={`${data.prefix}-${item.id}`}>
 					<data.Component {...item} />
 				</li>
 			))}

diff --git a/examples/e-commerce/src/components/header.tsx b/examples/e-commerce/src/components/header.tsx
@@ -11,14 +11,14 @@ export async function Header(
 	data: { user?: UserType },
 ) {
 	const loginButton = <button type="button">Sign in</button>;
-	const storeLogo = <img src={icon} alt="icon" class={classes.icon} />;
+	const storeLogo = <img src={icon} alt="icon" className={classes.icon} />;
 
 	this.renderSync(
-		<header class={classes.header}>
+		<header className={classes.header}>
 			<a href="/">{storeLogo}</a>
-			<div class={classes.emptySpace} />
+			<div className={classes.emptySpace} />
 			<UserProfileBadge wrapperClass={classes.displayOnLogged} />
-			<div id="login" class={classes.displayOnUnlogged}>
+			<div id="login" className={classes.displayOnUnlogged}>
 				{loginButton}
 			</div>
 			<CartBadge />

diff --git a/examples/e-commerce/src/domains/cart/components/AddToCart.tsx b/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
@@ -9,23 +9,23 @@ export async function AddToCart(
 	const initCount = this.app.domains.cart.getProductCount(data.product.id);
 
 	const firstAddToCart = (
-		<button type="button" class={classes.firstAddToCart}>
+		<button type="button" className={classes.firstAddToCart}>
 			Add to cart
 		</button>
 	);
 	const removeFromCart = (
-		<button type="button" class={classes.removeFromCart}>
+		<button type="button" className={classes.removeFromCart}>
 			-
 		</button>
 	);
 	const secondAddFromCart = (
-		<button type="button" class={classes.secondAddFromCart}>
+		<button type="button" className={classes.secondAddFromCart}>
 			+
 		</button>
 	);
-	const count = <span class="count">{initCount}</span>;
+	const count = <span className="count">{initCount}</span>;
 	const otherAddToCartWrapper = (
-		<div class={`${classes.otherAddToCartWrapper} ${classes.show}`}>
+		<div className={`${classes.otherAddToCartWrapper} ${classes.show}`}>
 			{removeFromCart}
 			{count}
 			{secondAddFromCart}

diff --git a/examples/e-commerce/src/domains/cart/components/CartBadge.tsx b/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
@@ -6,13 +6,17 @@ export async function CartBadge(this: SeqflowFunctionContext) {
 	const count = this.app.domains.cart.getProductCount();
 
 	const counter = (
-		<span arial-hidden={true} class={classes.cartProductCounter}>
+		<span arial-hidden={true} className={classes.cartProductCounter}>
 			{count}
 		</span>
 	);
 	this.renderSync(
-		<a href="/cart" title="go to cart" class={classes.numberOfProductsInCart}>
-			<i class={`fa-solid fa-cart-shopping ${classes.icon}`} />
+		<a
+			href="/cart"
+			title="go to cart"
+			className={classes.numberOfProductsInCart}
+		>
+			<i className={`fa-solid fa-cart-shopping ${classes.icon}`} />
 			{counter}
 		</a>,
 	);

diff --git a/examples/e-commerce/src/domains/cart/components/CartProductList.tsx b/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
@@ -13,21 +13,21 @@ export async function CartProduct(
 	data: { product: Product; count: number; subTotal: number },
 ) {
 	const removeButton = (
-		<button type="button" class="remove-from-cart">
-			<i class="fa-solid fa-trash" />
+		<button type="button" className="remove-from-cart">
+			<i className="fa-solid fa-trash" />
 		</button>
 	);
 	this.renderSync(
-		<div class={classes.product} id={`cart-product-${data.product.id}`}>
-			<div class={classes.left}>
+		<div className={classes.product} id={`cart-product-${data.product.id}`}>
+			<div className={classes.left}>
 				<img
-					class={classes.productImage}
+					className={classes.productImage}
 					src={data.product.image}
 					alt={data.product.title}
 				/>
 				<div>{data.product.price} €</div>
 			</div>
-			<div class={classes.productTitle}>
+			<div className={classes.productTitle}>
 				<p>{data.product.title}</p>
 			</div>
 			<div>x {data.count}</div>
@@ -58,16 +58,16 @@ export async function CartProductList(
 	const checkoutButton = <button type="button">Checkout</button>;
 	const cartLogin = <a href="/login">Go to login</a>;
 	const cartTotal = (
-		<div class={classes.cartTotal} id="cart-total">
+		<div className={classes.cartTotal} id="cart-total">
 			total: {data.cart.total} €
 		</div>
 	);
 	this.renderSync(
 		<div>
-			<ul class={classes.cartProducts}>
+			<ul className={classes.cartProducts}>
 				{data.cart.products.map(({ product, count, subTotal }) => {
 					return (
-						<li key={`cart-item-${product.id}`}>
+						<li id={`cart-item-${product.id}`}>
 							<CartProduct
 								product={product}
 								count={count}
@@ -79,7 +79,7 @@ export async function CartProductList(
 			</ul>
 			<hr />
 			{cartTotal}
-			<div class={classes.cartCheckout}>{checkoutButton}</div>
+			<div className={classes.cartCheckout}>{checkoutButton}</div>
 			<div>{cartLogin}</div>
 		</div>,
 	);
@@ -115,7 +115,7 @@ export async function CartProductList(
 			switch (ev.detail.action) {
 				case "remove-all-elements-of-a-product":
 					this._el
-						.querySelector(`li[key=cart-item-${ev.detail.product.id}]`)
+						.querySelector(`li#cart-item-${ev.detail.product.id}`)
 						?.remove();
 					break;
 				default:

diff --git a/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx b/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
@@ -12,7 +12,7 @@ export async function CartTooltip(this: SeqflowFunctionContext) {
 	}
 
 	const cartTooltipLink = (
-		<a class={classes.cartTooltipLink} id="cart-tooltip-link" href="/cart">
+		<a className={classes.cartTooltipLink} id="cart-tooltip-link" href="/cart">
 			Go to checkout
 		</a>
 	);

diff --git a/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx b/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx
@@ -1,4 +1,4 @@
-import { SeqflowAppContext, SeqflowFunctionContext } from "seqflow-js";
+import { SeqflowFunctionContext } from "seqflow-js";
 import { CardList } from "../../../components/CardList";
 import { ProductCategory } from "../ProductDomain";
 import classes from "./ProductCategoryList.module.css";
@@ -8,8 +8,12 @@ async function CategoryItem(
 	data: ProductCategory,
 ) {
 	const anchor = (
-		<a class={classes.categoryAnchor} href={`/category/${data.name}`}>
-			<img class={classes.categoryImage} src={data.image.url} alt={data.name} />
+		<a className={classes.categoryAnchor} href={`/category/${data.name}`}>
+			<img
+				className={classes.categoryImage}
+				src={data.image.url}
+				alt={data.name}
+			/>
 			<span>{data.name}</span>
 		</a>
 	);
@@ -31,7 +35,7 @@ export async function ProductCategoryList(
 	data: { categories: ProductCategory[] },
 ) {
 	this.renderSync(
-		<div class={classes.productList}>
+		<div className={classes.productList}>
 			<CardList
 				prefix="category"
 				items={data.categories}

diff --git a/examples/e-commerce/src/domains/product/components/ProductItem.tsx b/examples/e-commerce/src/domains/product/components/ProductItem.tsx
@@ -5,13 +5,13 @@ import classes from "./ProductItem.module.css";
 
 export async function ProductItem(this: SeqflowFunctionContext, data: Product) {
 	const productImage = (
-		<img src={data.image} class={classes.productImage} alt={data.title} />
+		<img src={data.image} className={classes.productImage} alt={data.title} />
 	);
-	const tooltip = <div class={classes.tooltipWrapper}>{data.title}</div>;
+	const tooltip = <div className={classes.tooltipWrapper}>{data.title}</div>;
 	this.renderSync(
-		<div class={classes.wrapper}>
+		<div className={classes.wrapper}>
 			{productImage}
-			<p class={classes.price}>{data.price} €</p>
+			<p className={classes.price}>{data.price} €</p>
 			{tooltip}
 			<div id={`product-card-cart-${data.id}`}>
 				<AddToCart product={data} />

diff --git a/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx b/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
@@ -18,7 +18,7 @@ export async function UserProfileBadge(this: SeqflowFunctionContext) {
 		<img
 			width={size}
 			height={size}
-			class={classes.logo}
+			className={classes.logo}
 			src={getProfileUrl(user, size)}
 			alt="Profile Avatar"
 		/>
@@ -37,9 +37,9 @@ export async function UserProfileBadge(this: SeqflowFunctionContext) {
 	);
 
 	this.renderSync(
-		<button type="button" class={classes.logoWrapper} href="/profile">
+		<button type="button" className={classes.logoWrapper}>
 			{profilePicture}
-			<div class={classes["profile-header-menu-wrapper"]}>
+			<div className={classes["profile-header-menu-wrapper"]}>
 				{profileHeaderMenu}
 			</div>
 		</button>,

diff --git a/examples/e-commerce/src/pages/login.tsx b/examples/e-commerce/src/pages/login.tsx
@@ -5,13 +5,13 @@ export async function Login(this: SeqflowFunctionContext) {
 	const el = (
 		<input id="username" type="text" name="username" value="johnd" />
 	) as HTMLInputElement;
-	const error = <p class="error" />;
+	const error = <p className="error" />;
 	const submit = (<button type="submit">Login</button>) as HTMLButtonElement;
 
 	this.renderSync(
 		<div>
 			<form>
-				<label for="username">Username</label>
+				<label htmlFor="username">Username</label>
 				{el}
 				{error}
 				{submit}

diff --git a/examples/e-commerce/tests/index.test.ts b/examples/e-commerce/tests/index.test.ts
@@ -1,14 +1,11 @@
 import {
 	screen,
-	waitFor,
-	waitForElementToBeRemoved,
 } from "@testing-library/dom";
 import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
 
 import { InMemoryRouter, start } from "seqflow-js";
 import { afterAll, afterEach, beforeAll, expect, test } from "vitest";
-import { s } from "vitest/dist/reporters-MmQN-57K";
 import { Main } from "../src/Main";
 import { CartDomain } from "../src/domains/cart";
 import { ProductDomain } from "../src/domains/product";