nuclo 0.1.96 → 0.1.97

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuclo",
   "private": false,
-  "version": "0.1.96",
+  "version": "0.1.97",
   "type": "module",
   "main": "./dist/nuclo.cjs",
   "module": "./dist/nuclo.js",

package/types/features/list.d.ts

@@ -1,8 +1,22 @@
 declare global {
-  // Dynamic list function types
-  export type ListRenderFunction<T> = (item: T, index: number) => ExpandedElement<any> | NodeModFn<any>;
-  export type ListItemsProvider<T> = () => T[];
-  export function list<T>(itemsProvider: ListItemsProvider<T>, render: ListRenderFunction<T>): NodeModFn<any>;
+  // Dynamic list function types - supports both HTML and SVG elements
+  export type ListRenderFunction<T, TTagName extends ElementTagName = ElementTagName> = (
+    item: T, 
+    index: number
+  ) => ExpandedElement<TTagName> 
+    | NodeModFn<TTagName> 
+    | Node 
+    | null
+    | ((parent?: ExpandedElement<TTagName>, index?: number) => ExpandedElement<TTagName> | SVGElement | Node); // Support functions with optional params (like SVG builders)
+    
+  export type ListItemsProvider<T> = () => readonly T[];
+  
+  // List returns a function typed to be compatible with both HTML (NodeModFn) and SVG (SVGElementModifierFn) contexts
+  // Note: The implementation allows optional parameters, but the type signature matches the stricter requirement
+  export function list<T, TTagName extends ElementTagName = ElementTagName>(
+    itemsProvider: ListItemsProvider<T>, 
+    render: ListRenderFunction<T, TTagName>
+  ): (parent: ExpandedElement<TTagName>, index: number) => Comment;
 }
 
 export {};

package/types/svg/base.d.ts

@@ -2,72 +2,75 @@ declare global {
   // SVG attribute types that accept string values for all SVG properties
   // This is needed because SVG DOM properties like 'width' are SVGAnimatedLength,
   // but we set them as strings using setAttribute()
+  // Supports reactive values (functions) for dynamic attributes
   export type SVGAttributes = {
     // Common SVG attributes
-    width?: string | number;
-    height?: string | number;
-    viewBox?: string;
-    fill?: string;
-    stroke?: string;
-    "stroke-width"?: string | number;
-    "stroke-linecap"?: "butt" | "round" | "square";
-    "stroke-linejoin"?: "miter" | "round" | "bevel";
-    "stroke-dasharray"?: string;
-    "stroke-dashoffset"?: string | number;
-    opacity?: string | number;
-    "fill-opacity"?: string | number;
-    "stroke-opacity"?: string | number;
-    transform?: string;
-    className?: string;
-    id?: string;
+    width?: string | number | (() => string | number);
+    height?: string | number | (() => string | number);
+    viewBox?: string | (() => string);
+    fill?: string | (() => string);
+    stroke?: string | (() => string);
+    "stroke-width"?: string | number | (() => string | number);
+    "stroke-linecap"?: "butt" | "round" | "square" | (() => "butt" | "round" | "square");
+    "stroke-linejoin"?: "miter" | "round" | "bevel" | (() => "miter" | "round" | "bevel");
+    "stroke-dasharray"?: string | (() => string);
+    "stroke-dashoffset"?: string | number | (() => string | number);
+    opacity?: string | number | (() => string | number);
+    "fill-opacity"?: string | number | (() => string | number);
+    "stroke-opacity"?: string | number | (() => string | number);
+    transform?: string | (() => string);
+    className?: string | (() => string);
+    id?: string | (() => string);
 
     // Path attributes
-    d?: string;
+    d?: string | (() => string);
 
     // Circle/Ellipse attributes
-    cx?: string | number;
-    cy?: string | number;
-    r?: string | number;
-    rx?: string | number;
-    ry?: string | number;
+    cx?: string | number | (() => string | number);
+    cy?: string | number | (() => string | number);
+    r?: string | number | (() => string | number);
+    rx?: string | number | (() => string | number);
+    ry?: string | number | (() => string | number);
 
     // Line attributes
-    x1?: string | number;
-    y1?: string | number;
-    x2?: string | number;
-    y2?: string | number;
+    x1?: string | number | (() => string | number);
+    y1?: string | number | (() => string | number);
+    x2?: string | number | (() => string | number);
+    y2?: string | number | (() => string | number);
 
     // Rect attributes
-    x?: string | number;
-    y?: string | number;
+    x?: string | number | (() => string | number);
+    y?: string | number | (() => string | number);
 
     // Polygon/Polyline attributes
-    points?: string;
+    points?: string | (() => string);
 
     // Text attributes
-    "text-anchor"?: "start" | "middle" | "end";
-    "dominant-baseline"?: string;
-    "font-family"?: string;
-    "font-size"?: string | number;
-    "font-weight"?: string | number;
+    "text-anchor"?: "start" | "middle" | "end" | (() => "start" | "middle" | "end");
+    "dominant-baseline"?: string | (() => string);
+    "font-family"?: string | (() => string);
+    "font-size"?: string | number | (() => string | number);
+    "font-weight"?: string | number | (() => string | number);
 
     // Gradient attributes
-    offset?: string;
-    "stop-color"?: string;
-    "stop-opacity"?: string | number;
+    offset?: string | (() => string);
+    "stop-color"?: string | (() => string);
+    "stop-opacity"?: string | number | (() => string | number);
 
     // Use element
-    href?: string;
+    href?: string | (() => string);
 
     // Filter attributes
-    filter?: string;
+    filter?: string | (() => string);
 
     // Clipping and masking
-    "clip-path"?: string;
-    mask?: string;
+    "clip-path"?: string | (() => string);
+    mask?: string | (() => string);
 
-    // Allow any other string attributes
-    [key: string]: string | number | undefined;
+    // Allow any other string attributes (including reactive functions)
+    // Using a more restrictive type to maintain type safety
+  } & {
+    [K in string]?: string | number | (() => string) | (() => number);
   };
 
   // SVG element modifier types
@@ -77,12 +80,13 @@ declare global {
     | SVGAttributes
     | SVGElementTagNameMap[TTagName]
     | SVGElement  // Allow any SVG element as a child
-    | ((parent: SVGElementTagNameMap[TTagName], index: number) => SVGElement);  // Allow SVG element builders as children
+    | Node  // Allow any DOM Node (including Comment, Text, etc.)
+    | ((parent: SVGElementTagNameMap[TTagName], index: number) => SVGElement | Node);  // Allow SVG element and Node builders as children
 
   export type SVGElementModifierFn<TTagName extends keyof SVGElementTagNameMap = keyof SVGElementTagNameMap> = (
     parent: SVGElementTagNameMap[TTagName],
     index: number,
-  ) => SVGElementModifier<TTagName> | void;
+  ) => SVGElementModifier<TTagName> | Node | void;
 
   // SVG builder type - returns a NodeModFn-compatible function
   // Parameters are optional to allow standalone usage (e.g., svg()() for creating detached SVG)