Merge pull request #15 from iamgiolaga/refactor/log-rework

refactor: rework of logs

examples/custom-element/src/index.ts

@@ -18,7 +18,9 @@ class CounterElement extends HTMLElement {
 	connectedCallback() {
 		const div = document.createElement("div");
 		if (shadowDomMode) {
-			const shadow = this.attachShadow({ mode: shadowDomMode });
+			const shadow = this.attachShadow({
+				mode: shadowDomMode,
+			});
 			if (typeof injectCSS === "function") {
 				injectCSS(shadow);
 			}
@@ -34,7 +36,11 @@ class CounterElement extends HTMLElement {
 		// Even if `ShadowRoot` is not a `HTMLElement`, we can cast it to `HTMLElement` to make TypeScript happy.
 		// It works anyway.
 		this.abortController = start(div, Counter, undefined, {
-			log: (l) => console.log(l),
+			log: {
+				error: (l) => console.error(l),
+				info: (l) => console.info(l),
+				debug: (l) => console.debug(l),
+			},
 			domains: {
 				// Create the Counter domain with the initial value and the external event target
 				counter: (et) =>
@@ -53,7 +59,9 @@ class CounterElement extends HTMLElement {
 	// This method is called when the `value` attribute changes
 	attributeChangedCallback(name: string, oldValue: string, newValue: string) {
 		this.externalEventTarget.dispatchEvent(
-			new ExternalChangeValue({ newValue: Number(newValue) }),
+			new ExternalChangeValue({
+				newValue: Number(newValue),
+			}),
 		);
 	}
 

examples/e-commerce/src/pages/login.tsx

@@ -36,5 +36,10 @@ export async function Login(this: SeqflowFunctionContext) {
 		break;
 	}
 
+	this.app.log.info({
+		message: "User logged in",
+		data: { user },
+	});
+
 	this.app.router.navigate("/");
 }

examples/empty/src/index.ts

@@ -3,5 +3,9 @@ import { Main } from "./Main";
 import "./index.css";
 
 start(document.getElementById("root"), Main, undefined, {
-	log: (l) => console.log(l),
+	log: {
+		error: (l) => console.error(l),
+		info: (l) => console.info(l),
+		debug: (l) => console.debug(l),
+	},
 });

examples/random-quote/src/index.ts

@@ -3,7 +3,11 @@ import { Main } from "./Main";
 import "./index.css";
 
 start(document.getElementById("root"), Main, undefined, {
-	log: (l) => console.log(l),
+	log: {
+		error: (l) => console.error(l),
+		info: (l) => console.info(l),
+		debug: (l) => console.debug(l),
+	},
 	config: {
 		api: {
 			baseUrl: "https://api.quotable.io",

examples/random-quote/tests/index.test.ts

@@ -25,7 +25,11 @@ afterAll(() => server.close());
 
 test("should render the quote and refresh it", async () => {
 	start(document.body, Main, undefined, {
-		// log: (l) => console.log(l),
+		// log: {
+		// 	error: (l) => console.error(l),
+		// 	info: (l) => console.info(l),
+		// 	debug: (l) => console.debug(l),
+		// },
 		config: {
 			api: {
 				// Route to the mock server

packages/seqflow-js/src/index.ts

@@ -17,11 +17,14 @@ export type DomainEvent<T> = DomainsPackage.DomainEvent<T>;
 export const createDomainEventClass = DomainsPackage.createDomainEventClass;
 
 export interface Log {
-	type: "info" | "debug" | "error";
 	message: string;
 	data?: unknown;
 }
-export type LogFunction = (log: Log) => void;
+export interface LogFunction {
+	info: (l: Log) => void;
+	error: (l: Log) => void;
+	debug: (l: Log) => void;
+}
 
 export interface SeqflowAppContext {
 	log: LogFunction;
@@ -117,7 +120,9 @@ export interface SeqflowFunctionContext {
 	 */
 	createDOMFragment({
 		children,
-	}: { children?: ChildenType[] }): DocumentFragment;
+	}: {
+		children?: ChildenType[];
+	}): DocumentFragment;
 }
 export type SeqflowFunction<T> = (
 	this: SeqflowFunctionContext,
@@ -149,8 +154,7 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 	componentOption: T | undefined,
 ) {
 	const componentName = component.name;
-	parentContext.app.log({
-		type: "debug",
+	parentContext.app.log.debug?.({
 		message: "startComponent",
 		data: { componentOption, componentName },
 	});
@@ -213,8 +217,7 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 		) {
 			const oldChildIndex = componentChildren.findIndex((c) => c.key === key);
 			if (oldChildIndex < 0) {
-				this.app.log({
-					type: "error",
+				this.app.log.error?.({
 					message: "replaceChild: wrapper not found",
 					data: { key, newChild },
 				});
@@ -264,8 +267,7 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 			return domainEvent(b.t, eventTarget);
 		},
 		navigationEvent(): EventAsyncGenerator<NavigationEvent> {
-			this.app.log({
-				type: "debug",
+			this.app.log.debug?.({
 				message: "navigationEvent",
 				data: {
 					componentName,
@@ -283,8 +285,7 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 			this: SeqflowFunctionContext,
 			{ children }: { children?: ChildenType[] },
 		): DocumentFragment {
-			this.app.log({
-				type: "debug",
+			this.app.log.debug?.({
 				message: "createDOMFragment",
 				data: { children },
 			});
@@ -313,8 +314,7 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 					continue;
 				}
 
-				this.app.log({
-					type: "error",
+				this.app.log.error?.({
 					message: "Unsupported child type. Implement me",
 					data: { child, children },
 				});
@@ -329,8 +329,7 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 			options?: { [key: string]: string },
 			...children: ChildenType[]
 		): Node {
-			this.app.log({
-				type: "debug",
+			this.app.log.debug?.({
 				message: "createDOMElement",
 				data: { tagName, options, children },
 			});
@@ -381,10 +380,15 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 						continue;
 					}
 
-					this.app.log({
-						type: "error",
+					this.app.log.error?.({
 						message: "Unsupported child type. Implement me",
-						data: { child, children, tagName, options, el },
+						data: {
+							child,
+							children,
+							tagName,
+							options,
+							el,
+						},
 					});
 					throw new Error("Unsupported child type");
 				}
@@ -406,7 +410,10 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 				wrapper.classList.add(options.wrapperClass);
 			}
 
-			startComponent(childContext, wrapper, tagName, { ...options, children });
+			startComponent(childContext, wrapper, tagName, {
+				...options,
+				children,
+			});
 			return wrapper;
 		},
 		renderSync(this: SeqflowFunctionContext, html: string | JSX.Element) {
@@ -423,15 +430,16 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 	if (v.then !== undefined) {
 		v.then(
 			() => {
-				parentContext.app.log({
-					type: "debug",
+				parentContext.app.log.debug?.({
 					message: "Component rendering ended",
-					data: { componentOption, componentName },
+					data: {
+						componentOption,
+						componentName,
+					},
 				});
 			},
 			(e) => {
-				parentContext.app.log({
-					type: "error",
+				parentContext.app.log.error?.({
 					message: "Component throws an error",
 					data: {
 						componentOption,
@@ -449,12 +457,16 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 export function start<
 	Component extends SeqflowFunction<FirstComponentData>,
 	// biome-ignore lint/suspicious/noExplicitAny: We don't care about the component properties
-	FirstComponentData extends Record<string, any> & { children?: ChildenType[] },
+	FirstComponentData extends Record<string, any> & {
+		children?: ChildenType[];
+	},
 >(
 	root: HTMLElement,
 	firstComponent: Component,
 	componentOption: FirstComponentData | undefined,
-	seqflowConfiguration: Partial<SeqflowConfiguration>,
+	seqflowConfiguration: Partial<
+		Omit<SeqflowConfiguration, "log"> & { log?: Partial<LogFunction> }
+	>,
 ): AbortController {
 	const seqflowConfig = applyDefaults(seqflowConfiguration);
 
@@ -472,10 +484,12 @@ export function start<
 		router: seqflowConfig.router,
 	};
 	seqflowConfig.router.getEventTarget().addEventListener("navigation", (ev) => {
-		appContext.log({
-			type: "info",
+		appContext.log.info?.({
 			message: "navigate",
-			data: { path: (ev as NavigationEvent).path, event: ev },
+			data: {
+				path: (ev as NavigationEvent).path,
+				event: ev,
+			},
 		});
 	});
 
@@ -541,18 +555,32 @@ export function start<
 }
 
 function applyDefaults(
-	seqflowConfiguration: Partial<SeqflowConfiguration>,
+	seqflowConfiguration: Partial<
+		Omit<SeqflowConfiguration, "log"> & { log?: Partial<LogFunction> }
+	>,
 ): SeqflowConfiguration {
 	function noop() {}
 
 	if (seqflowConfiguration.router === undefined) {
 		seqflowConfiguration.router = new BrowserRouter(new EventTarget());
 	}
 
+	if (seqflowConfiguration.log === undefined) {
+		seqflowConfiguration.log = {};
+	}
+	if (seqflowConfiguration.log.info === undefined) {
+		seqflowConfiguration.log.info = noop;
+	}
+	if (seqflowConfiguration.log.error === undefined) {
+		seqflowConfiguration.log.error = noop;
+	}
+	if (seqflowConfiguration.log.debug === undefined) {
+		seqflowConfiguration.log.debug = noop;
+	}
+
 	return Object.assign(
 		{},
 		{
-			log: noop,
 			config: {},
 			domains: {},
 		},

packages/seqflow-js/tests/appConfig.test.tsx

@@ -1,57 +1,81 @@
-import { screen, waitFor } from "@testing-library/dom";
-import { expect, test } from "vitest";
+import { beforeAll, beforeEach, expect, test, vi } from "vitest";
 
 import { type Log, type SeqflowFunctionContext, start } from "../src/index";
 
+const consoleInfoSpy = vi.spyOn(console, "info");
+
+beforeEach(() => {
+	vi.clearAllMocks();
+});
+
 test("app log", async () => {
 	async function App(this: SeqflowFunctionContext) {
-		this.app.log({ type: "info", message: "render" });
+		this.app.log.info({ message: "render" });
 		this.renderSync("");
 	}
 
-	const logs: Log[] = [];
 	start(
 		document.body,
 		App,
 		{},
 		{
-			log: (l: Log) => {
-				logs.push(l);
+			log: {
+				error: (l: Log) => console.error(l),
+				info: (l: Log) => console.info(l),
+				debug: (l: Log) => console.debug(l),
 			},
 		},
 	);
 	expect(document.body.innerHTML).toBe("");
+	expect(consoleInfoSpy).toHaveBeenCalledOnce();
+	expect(consoleInfoSpy).toHaveBeenCalledWith({ message: "render" });
+});
 
-	const appLog = logs.find((l) => l.message === "render" && l.type === "info");
-	expect(appLog).toBeDefined();
+test("app log - partial", async () => {
+	async function App(this: SeqflowFunctionContext) {
+		this.app.log.error({ message: "render" });
+		this.app.log.info({ message: "render" });
+		this.app.log.debug({ message: "render" });
+		this.renderSync("1");
+	}
+
+	start(
+		document.body,
+		App,
+		{},
+		{
+			log: {},
+		},
+	);
+	expect(document.body.innerHTML).toBe("1");
 });
 
 test("app config", async () => {
 	async function App(this: SeqflowFunctionContext) {
-		this.app.log({ type: "info", message: this.app.config.api });
+		this.app.log.info({ message: this.app.config.api });
 		this.renderSync("");
 	}
 
-	const logs: Log[] = [];
 	start(
 		document.body,
 		App,
 		{},
 		{
-			log: (l: Log) => {
-				logs.push(l);
+			log: {
+				error: (l: Log) => console.error(l),
+				info: (l: Log) => console.info(l),
+				debug: (l: Log) => console.debug(l),
 			},
 			config: {
 				api: "https://api.example.com",
 			},
 		},
 	);
 	expect(document.body.innerHTML).toBe("");
-
-	const appLog = logs.find(
-		(l) => l.message === "https://api.example.com" && l.type === "info",
-	);
-	expect(appLog).toBeDefined();
+	expect(consoleInfoSpy).toHaveBeenCalledOnce();
+	expect(consoleInfoSpy).toHaveBeenCalledWith({
+		message: "https://api.example.com",
+	});
 });
 
 declare module "../src/index" {