seqflow-js - npm Package Compare versions

Comparing version 0.0.1-beta.9 to 0.0.1-beta.10

dist/index.d.ts

@@ -88,3 +88,3 @@ import { BrowserRouter, InMemoryRouter, NavigationEvent, Router } from './router';
         [key: string]: string;
-    }, ...children: JSX.Element[]): Node;
+    }, ...children: ChildenType[]): Node;
     /**
@@ -94,6 +94,6 @@ * Create a DOM Fragment element. It is used internally by the framework.
     createDOMFragment({ children, }: {
-        children?: JSX.Element[];
+        children?: ChildenType[];
     }): DocumentFragment;
 }
-export type SeqflowFunction<T extends JSX.IntrinsicAttributes> = (this: SeqflowFunctionContext, data: T) => Promise<void>;
+export type SeqflowFunction<T> = (this: SeqflowFunctionContext, data: T) => Promise<void>;
 export interface ApplicationConfiguration {
@@ -111,22 +111,27 @@ }
 }
-export declare function start<Component extends SeqflowFunction<FirstComponentData>, FirstComponentData extends JSX.IntrinsicAttributes>(root: HTMLElement, firstComponent: Component, componentOption: FirstComponentData | undefined, seqflowConfiguration: Partial<SeqflowConfiguration>): AbortController;
+export declare function start<Component extends SeqflowFunction<FirstComponentData>, FirstComponentData extends Record<string, any> & {
+    children?: ChildenType[];
+}>(root: HTMLElement, firstComponent: Component, componentOption: FirstComponentData | undefined, seqflowConfiguration: Partial<SeqflowConfiguration>): AbortController;
+type ChildenType = Element | Element[];
 declare global {
     namespace JSX {
-        type ElementType = HTMLElement | Function | string | number;
-        interface Element extends HTMLElement {
+        type Element = HTMLElement;
+        type ARG<T = object> = T & {
+            children?: ChildenType;
+        };
+        type ElementType<T> = string | ((this: SeqflowFunctionContext, data?: Record<string, any>) => Promise<void>);
+        type Foo = {
+            [K in keyof HTMLElementTagNameMap]: Omit<Partial<{
+                [V in keyof HTMLElementTagNameMap[K]]: HTMLElementTagNameMap[K][V];
+            }>, "style"> & ARG<{
+                style?: Partial<CSSStyleDeclaration> | string;
+            }>;
+        };
+        interface IntrinsicElements extends Foo {
         }
-        interface IntrinsicElements {
-            [key: string]: Partial<Omit<Element, "children">> & {
-                children?: ElementType | ElementType[];
-            };
-            button: Partial<Omit<HTMLButtonElement, "children">> & {
-                children?: ElementType | ElementType[];
-            };
-        }
         interface IntrinsicAttributes {
             key?: string;
             wrapperClass?: string;
-            children?: ElementType | ElementType[];
         }
     }
 }

package.json

 {
   "name": "seqflow-js",
-  "version": "0.0.1-beta.9",
+  "version": "0.0.1-beta.10",
   "description": "SeqFlow is a modern web framework that is designed to be simple and easy to use. It optimizes the development process by providing a simple and easy-to-understand API. It is a good choice for those who want to create web applications without the complexity of other frameworks.",
@@ -5,0 +5,0 @@ "main": "./dist/index.mjs",

src/index.ts

@@ -113,3 +113,3 @@ import * as DomainsPackage from "./domains";
 		options?: { [key: string]: string },
-		...children: JSX.Element[]
+		...children: ChildenType[]
 	): Node;
@@ -121,5 +121,5 @@ /**
 		children,
-	}: { children?: JSX.Element[] }): DocumentFragment;
+	}: { children?: ChildenType[] }): DocumentFragment;
 }
-export type SeqflowFunction<T extends JSX.IntrinsicAttributes> = (
+export type SeqflowFunction<T> = (
 	this: SeqflowFunctionContext,
@@ -147,3 +147,3 @@ data: T,
 
-function startComponent<T extends JSX.IntrinsicAttributes>(
+function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 	parentContext: SeqflowFunctionContext,
@@ -241,3 +241,3 @@ el: HTMLElement,
 				a.then((child) => {
-					wrapper.replaceWith(child);
+					wrapper.replaceWith(child as Node);
 				});
@@ -247,3 +247,3 @@ return;
 
-			wrapper.replaceWith(a);
+			wrapper.replaceWith(a as Node);
 		},
@@ -289,3 +289,3 @@ domEvent<K extends keyof HTMLElementEventMap>(
 			this: SeqflowFunctionContext,
-			{ children }: JSX.IntrinsicAttributes,
+			{ children }: { children?: ChildenType[] },
 		): DocumentFragment {
@@ -336,3 +336,3 @@ this.app.log({
 			options?: { [key: string]: string },
-			...children: JSX.Element[]
+			...children: ChildenType[]
 		): Node {
@@ -348,2 +348,24 @@ this.app.log({
 				for (const key in options) {
+					if (key === "className") {
+						el.setAttribute("class", options[key]);
+						continue;
+					}
+					if (key === "htmlFor") {
+						el.setAttribute("for", options[key]);
+						continue;
+					}
+					if (key === "style") {
+						const style = options[key] as string | Partial<CSSStyleDeclaration>;
+						if (typeof style === "string") {
+							el.setAttribute("style", style);
+						} else {
+							for (const styleKey in style) {
+								const value = style[styleKey];
+								if (value) {
+									el.style[styleKey] = value;
+								}
+							}
+						}
+						continue;
+					}
 					el.setAttribute(key, options[key]);
@@ -404,3 +426,3 @@ }
 			this._el.innerHTML = "";
-			this._el.appendChild(html);
+			this._el.appendChild(html as Node);
 		},
@@ -438,3 +460,4 @@ };
 	Component extends SeqflowFunction<FirstComponentData>,
-	FirstComponentData extends JSX.IntrinsicAttributes,
+	// biome-ignore lint/suspicious/noExplicitAny: We don't care about the component properties
+	FirstComponentData extends Record<string, any> & { children?: ChildenType[] },
 >(
@@ -500,3 +523,3 @@ root: HTMLElement,
 			options?: { [key: string]: string },
-			...children: JSX.Element[]
+			...children: ChildenType[]
 		): Node {
@@ -522,3 +545,3 @@ const el = document.createElement(tagName);
 			this._el.innerHTML = "";
-			this._el.appendChild(html);
+			this._el.appendChild(html as Node);
 		},
@@ -588,24 +611,40 @@ };
 
+type ChildenType = Element | Element[];
+
 declare global {
 	namespace JSX {
-		// biome-ignore lint/complexity/noBannedTypes: Don't care about `Function` banned type
-		type ElementType = HTMLElement | Function | string | number;
+		// The return type of <button />
+		type Element = HTMLElement;
 
-		interface Element extends HTMLElement {}
+		export type ARG<T = object> = T & {
+			children?: ChildenType;
+		};
 
-		interface IntrinsicElements {
-			[key: string]: Partial<Omit<Element, "children">> & {
-				children?: ElementType | ElementType[];
-			};
-			button: Partial<Omit<HTMLButtonElement, "children">> & {
-				children?: ElementType | ElementType[];
-			};
-		}
+		// This is the type of the first parameter of the jsxFactory
+		type ElementType<T> =
+			| string
+			| ((
+					this: SeqflowFunctionContext,
+					// biome-ignore lint/suspicious/noExplicitAny: We don't care about the component properties
+					data?: Record<string, any>,
+			  ) => Promise<void>);
 
+		type Foo = {
+			[K in keyof HTMLElementTagNameMap]: Omit<
+				Partial<{
+					[V in keyof HTMLElementTagNameMap[K]]: HTMLElementTagNameMap[K][V];
+				}>,
+				"style"
+			> &
+				ARG<{
+					style?: Partial<CSSStyleDeclaration> | string;
+				}>;
+		};
+		interface IntrinsicElements extends Foo {}
+
 		interface IntrinsicAttributes {
 			key?: string;
 			wrapperClass?: string;
-			children?: ElementType | ElementType[];
 		}
 	}
 }

No alert changes

Improved metrics

Total package byte prevSize

268520

increased by7.18%

Lines of code

2823

increased by2.73%

No dependency changes