@estjs/template 0.0.14 → 0.0.15-beta.1

package/dist/template.d.ts

@@ -1,25 +1,264 @@
-import { Signal as Signal$1 } from '@estjs/signal';
+import { Signal as Signal$1, Computed } from '@estjs/signals';
 import * as csstype from 'csstype';
+export { escapeHTML } from '@estjs/shared';
 
-type EssorComponent = (props: Record<string, unknown>) => JSX.Element | TemplateNode;
-type Hook = 'mounted' | 'destroy';
+interface InjectionKey<T> extends Symbol {
+}
+/**
+ * provide a value to the context
+ * @param {InjectionKey<T>|string|number} key - the key to provide the value to
+ * @param {T} value - the value to provide
+ */
+declare function provide<T>(key: InjectionKey<T> | string | number, value: T): void;
+/**
+ * inject a value from the context
+ * @param {InjectionKey<T>|string|number} key - the key to inject the value from
+ * @param {T} defaultValue - the default value to return if the key is not found
+ * @returns {T} the value injected
+ */
+declare function inject<T>(key: InjectionKey<T> | string | number, defaultValue?: T): T;
+
+/**
+ * context interface
+ */
+interface Context {
+    id: number;
+    parent: Context | null;
+    provides: Map<InjectionKey<unknown> | number | string | symbol, any>;
+    cleanup: Set<() => void>;
+    mount: Set<() => void | Promise<void>>;
+    update: Set<() => void | Promise<void>>;
+    destroy: Set<() => void | Promise<void>>;
+    isMount: boolean;
+    isDestroy: boolean;
+    children: Set<Context>;
+}
+
+declare enum COMPONENT_TYPE {
+    NORMAL = "normal",
+    FRAGMENT = "fragment",
+    PORTAL = "portal",
+    SUSPENSE = "suspense",
+    FOR = "for"
+}
+
+type ComponentFn = (props?: ComponentProps) => Node | Signal$1<Node> | Computed<Node>;
+type ComponentProps = Record<string, unknown>;
+declare class Component {
+    component: ComponentFn;
+    props: ComponentProps | undefined;
+    protected renderedNode: Node | null;
+    protected componentContext: Context | null;
+    protected parentNode: Node | null;
+    protected beforeNode: Node | null;
+    private reactiveProps;
+    private _propSnapshots;
+    readonly key: string | undefined;
+    protected state: number;
+    protected context: Context | null;
+    protected parentContext: Context | null;
+    private [COMPONENT_TYPE.NORMAL];
+    get isConnected(): boolean;
+    get firstChild(): Node | null;
+    constructor(component: ComponentFn, props: ComponentProps | undefined);
+    mount(parentNode: Node, beforeNode?: Node | null): Node | null | Promise<Node | null>;
+    update(prevNode: Component): Component;
+    forceUpdate(): Promise<void>;
+    /**
+     * Destroy component
+     */
+    destroy(): void;
+    applyProps(props: ComponentProps): void;
+}
+/**
+ * check if a node is a component
+ * @param {unknown} node - the node to check
+ * @returns {boolean} true if the node is a component, false otherwise
+ */
+declare function isComponent(node: unknown): node is Component;
+/**
+ * create a component
+ * @param {Function} componentFn - the component function
+ * @param {ComponentProps} props - the component props
+ * @returns {Component} the component
+ */
+declare function createComponent(componentFn: ComponentFn, props?: ComponentProps): Component;
+
+/**
+ * Create a template factory function from HTML string
+ *
+ * This function creates a reusable template factory that efficiently clones
+ * DOM nodes from the provided HTML string. The template is parsed once and
+ *
+ * @param html - The HTML string to create template from
+ * @returns Factory function that returns a cloned node of the template
+ * @throws {Error} When template content is empty or invalid
+ *
+ * @example
+ * ```typescript
+ * const buttonTemplate = template('<button>Click me</button>');
+ * const button1 = buttonTemplate(); // Creates first button instance
+ * const button2 = buttonTemplate(); // Creates second button instance
+ * ```
+ */
+declare function template(html: string): () => Node;
+/**
+ * Create and mount an application with the specified component
+ *
+ * This function initializes an application by mounting a root component
+ * to a target DOM element. It handles target validation and cleanup.
+ *
+ * @param component - The root component function to mount
+ * @param target - CSS selector string or DOM element to mount to
+ * @returns The mount root component instance, or undefined if target not found
+ *
+ * @example
+ * ```typescript
+ * const App = () => template('<div>Hello World</div>')
+ * const app = createApp(App, '#root');
+ *
+ * // Or with DOM element
+ * const container = document.getElementById('app');
+ * const app = createApp(App, container);
+ * ```
+ */
+declare function createApp(component: ComponentFn, target: string | Element): Component | undefined;
+
+type LifecycleHook = () => void;
+declare function onMount(hook: LifecycleHook): void;
+declare function onDestroy(hook: LifecycleHook): void;
+declare function onUpdate(hook: LifecycleHook): void;
 
-interface NodeTrack {
-  cleanup: () => void;
-  isRoot?: boolean;
-  lastNodes?: Map<string, Node | JSX.Element>;
+/**
+ * Add event listener with automatic cleanup on context destruction
+ */
+declare function addEventListener(element: Element, event: string, handler: EventListener, options?: AddEventListenerOptions): void;
+/**
+ * Bind an element to a setter function, allowing the element to update the setter value when its value changes.
+ *
+ * @param node The element to bind.
+ * @param setter The setter function to call when the element's value changes.
+ */
+declare function bindElement(node: Element, key: any, defaultValue: any, setter: (value: unknown) => void): void;
+/**
+ * Reactive node insertion with binding support
+ *
+ * @param parent Parent node
+ * @param nodeFactory Node factory function or static node
+ * @param before Reference node for insertion position
+ *
+ * @example
+ * ```typescript
+ * insert(container, () => message.value, null);
+ * insert(container, staticElement, referenceNode);
+ * insert(container, "Hello World", null); // Direct string support
+ * ```
+ */
+interface InsertOptions {
+    preserveOnCleanup?: boolean;
 }
-interface NodeTrack {
-  cleanup: () => void;
-  isRoot?: boolean;
-  lastNodes?: Map<string, Node | JSX.Element>;
+/**
+ * Reactive node insertion with binding support
+ *
+ * @param parent Parent node
+ * @param nodeFactory Node factory function or static node
+ * @param before Reference node for insertion position
+ * @param options Insertion options
+ *
+ * @example
+ * ```typescript
+ * insert(container, () => message.value, null);
+ * insert(container, staticElement, referenceNode);
+ * insert(container, "Hello World", null); // Direct string support
+ * ```
+ */
+declare function insert(parent: Node, nodeFactory: Function | Node | string, before?: Node, options?: InsertOptions): void;
+/**
+ * Map nodes from template by indexes
+ */
+declare function mapNodes(template: Node, indexes: number[]): Node[];
+
+/**
+ * Set up event delegation for specified event types
+ * @param {string[]} eventNames - Array of event names to delegate
+ * @param {Document} document - Document to attach events to (defaults to window.document)
+ */
+declare function delegateEvents(eventNames: string[], document?: Document): void;
+
+/**
+ * Patches the class attribute of an element
+ * Supports silent hydration (skips DOM updates during hydration phase)
+ *
+ * @param el - The element to patch classes on
+ * @param prev - Previous class value for diffing
+ * @param next - New class value to apply
+ * @param isSVG - Whether the element is an SVG element
+ * @public
+ */
+declare function patchClass(el: Element, prev: unknown, next: unknown, isSVG?: boolean): void;
+/**
+ * Normalizes different class value formats into a single string
+ *
+ * @param value - The class value to normalize
+ * @returns A normalized class string
+ * @public
+ */
+declare function normalizeClass(value: unknown): string;
+
+/**
+ * Patches the style of an element, optimized for different style formats
+ * Supports silent hydration (skips DOM updates during hydration phase)
+ *
+ * @param el - The element to patch styles on
+ * @public
+ */
+declare function patchStyle(el: HTMLElement, prev: unknown, next: unknown): void;
+/**
+ * Sets an individual style property with various optimizations
+ *
+ * @param style - The style object to modify
+ * @param name - The style property name
+ * @param val - The style property value
+ * @private
+ */
+declare function setStyle(style: CSSStyleDeclaration, name: string, val: string | string[]): void;
+
+type AttrValue = string | boolean | number | null | undefined;
+declare function patchAttr(el: Element, key: string, prev: AttrValue, next: AttrValue): void;
+
+/**
+ * Extended event options with delegation support
+ * @public
+ */
+interface EventOptions extends AddEventListenerOptions {
+    /**
+     * CSS selector for event delegation
+     * When provided, the event will only trigger if the target matches this selector
+     */
+    delegate?: string;
 }
+/**
+ * Event handler cleanup function
+ * @public
+ */
+type EventCleanup = () => void;
+/**
+ * Adds an event listener to an element with optional delegation
+ *
+ * @param el - The element to attach the event to
+ * @param event - The event name (e.g., 'click', 'input')
+ * @param handler - The event handler function
+ * @param options - Additional event options including delegation
+ * @returns A cleanup function to remove the event listener
+ * @public
+ */
+declare function addEvent(el: Element, event: string, handler: EventListener, options?: EventOptions): EventCleanup;
 
-type Props = Record<string, any>;
+type estComponent = (props: Record<string, unknown>) => JSX.Element | TemplateNode;
 
-interface EssorNode<T = Record<string, any>> {
+interface estNode<T = Record<string, any>> {
   props?: T;
-  template: EssorComponent | HTMLTemplateElement;
+  template: estComponent | HTMLTemplateElement;
 
   get firstChild(): Node | null;
   get isConnected(): boolean;
@@ -42,8 +281,8 @@ declare const SERIALIZABLE: unique symbol;
 
 declare global {
   export namespace JSX {
-    export type Element = EssorNode;
-    export type JSXElement = EssorNode;
+    export type Element = estNode;
+    export type JSXElement = estNode;
 
     type Children =
       | string
@@ -67,14 +306,12 @@ declare global {
     interface ElementChildrenAttribute {
       children: {};
     }
-    interface EventHandler<T, E extends Event> {
-      (
-        e: E & {
-          currentTarget: T;
-          target: DOMElement;
-        },
-      ): void;
-    }
+    type EventHandler<T, E extends Event> = (
+      e: E & {
+        currentTarget: T;
+        target: DOMElement;
+      },
+    ) => void;
     interface BoundEventHandler<T, E extends Event> {
       0: (
         data: any,
@@ -87,16 +324,14 @@ declare global {
     }
     type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E>;
 
-    interface InputEventHandler<T, E extends InputEvent> {
-      (
-        e: E & {
-          currentTarget: T;
-          target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-            ? T
-            : DOMElement;
-        },
-      ): void;
-    }
+    type InputEventHandler<T, E extends InputEvent> = (
+      e: E & {
+        currentTarget: T;
+        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          ? T
+          : DOMElement;
+      },
+    ) => void;
     interface BoundInputEventHandler<T, E extends InputEvent> {
       0: (
         data: any,
@@ -113,16 +348,14 @@ declare global {
       | InputEventHandler<T, E>
       | BoundInputEventHandler<T, E>;
 
-    interface ChangeEventHandler<T, E extends Event> {
-      (
-        e: E & {
-          currentTarget: T;
-          target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-            ? T
-            : DOMElement;
-        },
-      ): void;
-    }
+    type ChangeEventHandler<T, E extends Event> = (
+      e: E & {
+        currentTarget: T;
+        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          ? T
+          : DOMElement;
+      },
+    ) => void;
     interface BoundChangeEventHandler<T, E extends Event> {
       0: (
         data: any,
@@ -139,16 +372,14 @@ declare global {
       | ChangeEventHandler<T, E>
       | BoundChangeEventHandler<T, E>;
 
-    interface FocusEventHandler<T, E extends FocusEvent> {
-      (
-        e: E & {
-          currentTarget: T;
-          target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-            ? T
-            : DOMElement;
-        },
-      ): void;
-    }
+    type FocusEventHandler<T, E extends FocusEvent> = (
+      e: E & {
+        currentTarget: T;
+        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          ? T
+          : DOMElement;
+      },
+    ) => void;
     interface BoundFocusEventHandler<T, E extends FocusEvent> {
       0: (
         data: any,
@@ -177,10 +408,10 @@ declare global {
       ref?: Signal<T> | ((el: T) => void);
       key?: string | number | symbol;
     }
-    type Accessor<T> = () => T;
+    type Accest<T> = () => T;
     interface Directives {}
     interface DirectiveFunctions {
-      [x: string]: (el: DOMElement, accessor: Accessor<any>) => void;
+      [x: string]: (el: DOMElement, accest: Accest<any>) => void;
     }
     interface ExplicitProperties<T> {
       value: Signal<T>;
@@ -200,7 +431,8 @@ declare global {
       [Key in keyof ExplicitProperties]?: ExplicitProperties<T>[Key];
     };
     interface DOMAttributes<T>
-      extends CustomAttributes<T>,
+      extends
+        CustomAttributes<T>,
         PropAttributes<T>,
         OnCaptureAttributes<T>,
         CustomEventHandlersCamelCase<T>,
@@ -434,7 +666,7 @@ declare global {
       | 'allow-orientation-lock'
       | 'allow-pointer-lock'
       | 'allow-popups'
-      | 'allow-popups-to-escape-sandbox'
+      | 'allow-popups-to-escapeHTML-sandbox'
       | 'allow-presentation'
       | 'allow-same-origin'
       | 'allow-scripts'
@@ -567,7 +799,7 @@ declare global {
       'aria-labelledby'?: string;
       /** Defines the hierarchical level of an element within a structure. */
       'aria-level'?: number | string;
-      /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
+      /** Indicates that an element will be update, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
       'aria-live'?: 'off' | 'assertive' | 'polite';
       /** Indicates whether an element is modal when displayed. */
       'aria-modal'?: boolean | 'false' | 'true';
@@ -1236,7 +1468,7 @@ declare global {
       | 'defer xMidYMax slice'
       | 'defer xMaxYMax slice';
     type SVGUnits = 'userSpaceOnUse' | 'objectBoundingBox';
-    interface CoreSVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    interface estSVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
       id?: string;
       lang?: string;
       tabIndex?: number | string;
@@ -1394,11 +1626,13 @@ declare global {
       'writing-mode'?: 'lr-tb' | 'rl-tb' | 'tb-rl' | 'lr' | 'rl' | 'tb' | 'inherit';
     }
     interface AnimationElementSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
+      extends
+        estSVGAttributes<T>,
         ExternalResourceSVGAttributes,
         ConditionalProcessingSVGAttributes {}
     interface ContainerElementSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
+      extends
+        estSVGAttributes<T>,
         ShapeElementSVGAttributes<T>,
         Pick<
           PresentationSVGAttributes,
@@ -1412,8 +1646,7 @@ declare global {
           | 'color-rendering'
         > {}
     interface FilterPrimitiveElementSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
-        Pick<PresentationSVGAttributes, 'color-interpolation-filters'> {
+      extends estSVGAttributes<T>, Pick<PresentationSVGAttributes, 'color-interpolation-filters'> {
       x?: number | string;
       y?: number | string;
       width?: number | string;
@@ -1432,16 +1665,15 @@ declare global {
       preserveAspectRatio?: SVGPreserveAspectRatio;
     }
     interface GradientElementSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
-        ExternalResourceSVGAttributes,
-        StylableSVGAttributes {
+      extends estSVGAttributes<T>, ExternalResourceSVGAttributes, StylableSVGAttributes {
       gradientUnits?: SVGUnits;
       gradientTransform?: string;
       spreadMethod?: 'pad' | 'reflect' | 'repeat';
       href?: string;
     }
     interface GraphicsElementSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
+      extends
+        estSVGAttributes<T>,
         Pick<
           PresentationSVGAttributes,
           | 'clip-rule'
@@ -1455,14 +1687,14 @@ declare global {
           | 'color-interpolation'
           | 'color-rendering'
         > {}
-    interface LightSourceElementSVGAttributes<T> extends CoreSVGAttributes<T> {}
+    interface LightSourceElementSVGAttributes<T> extends estSVGAttributes<T> {}
     interface NewViewportSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
-        Pick<PresentationSVGAttributes, 'overflow' | 'clip'> {
+      extends estSVGAttributes<T>, Pick<PresentationSVGAttributes, 'overflow' | 'clip'> {
       viewBox?: string;
     }
     interface ShapeElementSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
+      extends
+        estSVGAttributes<T>,
         Pick<
           PresentationSVGAttributes,
           | 'color'
@@ -1481,7 +1713,8 @@ declare global {
           | 'pathLength'
         > {}
     interface TextContentElementSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
+      extends
+        estSVGAttributes<T>,
         Pick<
           PresentationSVGAttributes,
           | 'font-family'
@@ -1518,14 +1751,16 @@ declare global {
       zoomAndPan?: 'disable' | 'magnify';
     }
     interface AnimateSVGAttributes<T>
-      extends AnimationElementSVGAttributes<T>,
+      extends
+        AnimationElementSVGAttributes<T>,
         AnimationAttributeTargetSVGAttributes,
         AnimationTimingSVGAttributes,
         AnimationValueSVGAttributes,
         AnimationAdditionSVGAttributes,
         Pick<PresentationSVGAttributes, 'color-interpolation' | 'color-rendering'> {}
     interface AnimateMotionSVGAttributes<T>
-      extends AnimationElementSVGAttributes<T>,
+      extends
+        AnimationElementSVGAttributes<T>,
         AnimationTimingSVGAttributes,
         AnimationValueSVGAttributes,
         AnimationAdditionSVGAttributes {
@@ -1535,7 +1770,8 @@ declare global {
       origin?: 'default';
     }
     interface AnimateTransformSVGAttributes<T>
-      extends AnimationElementSVGAttributes<T>,
+      extends
+        AnimationElementSVGAttributes<T>,
         AnimationAttributeTargetSVGAttributes,
         AnimationTimingSVGAttributes,
         AnimationValueSVGAttributes,
@@ -1543,7 +1779,8 @@ declare global {
       type?: 'translate' | 'scale' | 'rotate' | 'skewX' | 'skewY';
     }
     interface CircleSVGAttributes<T>
-      extends GraphicsElementSVGAttributes<T>,
+      extends
+        GraphicsElementSVGAttributes<T>,
         ShapeElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         StylableSVGAttributes,
@@ -1553,7 +1790,8 @@ declare global {
       r?: number | string;
     }
     interface ClipPathSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
+      extends
+        estSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
@@ -1562,14 +1800,16 @@ declare global {
       clipPathUnits?: SVGUnits;
     }
     interface DefsSVGAttributes<T>
-      extends ContainerElementSVGAttributes<T>,
+      extends
+        ContainerElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
         TransformableSVGAttributes {}
-    interface DescSVGAttributes<T> extends CoreSVGAttributes<T>, StylableSVGAttributes {}
+    interface DescSVGAttributes<T> extends estSVGAttributes<T>, StylableSVGAttributes {}
     interface EllipseSVGAttributes<T>
-      extends GraphicsElementSVGAttributes<T>,
+      extends
+        GraphicsElementSVGAttributes<T>,
         ShapeElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
@@ -1581,24 +1821,28 @@ declare global {
       ry?: number | string;
     }
     interface FeBlendSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         DoubleInputFilterSVGAttributes,
         StylableSVGAttributes {
       mode?: 'normal' | 'multiply' | 'screen' | 'darken' | 'lighten';
     }
     interface FeColorMatrixSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         SingleInputFilterSVGAttributes,
         StylableSVGAttributes {
       type?: 'matrix' | 'saturate' | 'hueRotate' | 'luminanceToAlpha';
       values?: string;
     }
     interface FeComponentTransferSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         SingleInputFilterSVGAttributes,
         StylableSVGAttributes {}
     interface FeCompositeSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         DoubleInputFilterSVGAttributes,
         StylableSVGAttributes {
       operator?: 'over' | 'in' | 'out' | 'atop' | 'xor' | 'arithmetic';
@@ -1608,7 +1852,8 @@ declare global {
       k4?: number | string;
     }
     interface FeConvolveMatrixSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         SingleInputFilterSVGAttributes,
         StylableSVGAttributes {
       order?: number | string;
@@ -1622,7 +1867,8 @@ declare global {
       preserveAlpha?: 'true' | 'false';
     }
     interface FeDiffuseLightingSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         SingleInputFilterSVGAttributes,
         StylableSVGAttributes,
         Pick<PresentationSVGAttributes, 'color' | 'lighting-color'> {
@@ -1631,7 +1877,8 @@ declare global {
       kernelUnitLength?: number | string;
     }
     interface FeDisplacementMapSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         DoubleInputFilterSVGAttributes,
         StylableSVGAttributes {
       scale?: number | string;
@@ -1643,7 +1890,8 @@ declare global {
       elevation?: number | string;
     }
     interface FeDropShadowSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
+      extends
+        estSVGAttributes<T>,
         FilterPrimitiveElementSVGAttributes<T>,
         StylableSVGAttributes,
         Pick<PresentationSVGAttributes, 'color' | 'flood-color' | 'flood-opacity'> {
@@ -1652,10 +1900,11 @@ declare global {
       stdDeviation?: number | string;
     }
     interface FeFloodSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         StylableSVGAttributes,
         Pick<PresentationSVGAttributes, 'color' | 'flood-color' | 'flood-opacity'> {}
-    interface FeFuncSVGAttributes<T> extends CoreSVGAttributes<T> {
+    interface FeFuncSVGAttributes<T> extends estSVGAttributes<T> {
       type?: 'identity' | 'table' | 'discrete' | 'linear' | 'gamma';
       tableValues?: string;
       slope?: number | string;
@@ -1665,33 +1914,35 @@ declare global {
       offset?: number | string;
     }
     interface FeGaussianBlurSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         SingleInputFilterSVGAttributes,
         StylableSVGAttributes {
       stdDeviation?: number | string;
     }
     interface FeImageSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes {
       preserveAspectRatio?: SVGPreserveAspectRatio;
       href?: string;
     }
     interface FeMergeSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
-        StylableSVGAttributes {}
+      extends FilterPrimitiveElementSVGAttributes<T>, StylableSVGAttributes {}
     interface FeMergeNodeSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
-        SingleInputFilterSVGAttributes {}
+      extends estSVGAttributes<T>, SingleInputFilterSVGAttributes {}
     interface FeMorphologySVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         SingleInputFilterSVGAttributes,
         StylableSVGAttributes {
       operator?: 'erode' | 'dilate';
       radius?: number | string;
     }
     interface FeOffsetSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         SingleInputFilterSVGAttributes,
         StylableSVGAttributes {
       dx?: number | string;
@@ -1703,7 +1954,8 @@ declare global {
       z?: number | string;
     }
     interface FeSpecularLightingSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         SingleInputFilterSVGAttributes,
         StylableSVGAttributes,
         Pick<PresentationSVGAttributes, 'color' | 'lighting-color'> {
@@ -1723,12 +1975,12 @@ declare global {
       limitingConeAngle?: number | string;
     }
     interface FeTileSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
+      extends
+        FilterPrimitiveElementSVGAttributes<T>,
         SingleInputFilterSVGAttributes,
         StylableSVGAttributes {}
     interface FeTurbulanceSVGAttributes<T>
-      extends FilterPrimitiveElementSVGAttributes<T>,
-        StylableSVGAttributes {
+      extends FilterPrimitiveElementSVGAttributes<T>, StylableSVGAttributes {
       baseFrequency?: number | string;
       numOctaves?: number | string;
       seed?: number | string;
@@ -1736,9 +1988,7 @@ declare global {
       type?: 'fractalNoise' | 'turbulence';
     }
     interface FilterSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
-        ExternalResourceSVGAttributes,
-        StylableSVGAttributes {
+      extends estSVGAttributes<T>, ExternalResourceSVGAttributes, StylableSVGAttributes {
       filterUnits?: SVGUnits;
       primitiveUnits?: SVGUnits;
       x?: number | string;
@@ -1748,7 +1998,8 @@ declare global {
       filterRes?: number | string;
     }
     interface ForeignObjectSVGAttributes<T>
-      extends NewViewportSVGAttributes<T>,
+      extends
+        NewViewportSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
@@ -1760,14 +2011,16 @@ declare global {
       height?: number | string;
     }
     interface GSVGAttributes<T>
-      extends ContainerElementSVGAttributes<T>,
+      extends
+        ContainerElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
         TransformableSVGAttributes,
         Pick<PresentationSVGAttributes, 'display' | 'visibility'> {}
     interface ImageSVGAttributes<T>
-      extends NewViewportSVGAttributes<T>,
+      extends
+        NewViewportSVGAttributes<T>,
         GraphicsElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         StylableSVGAttributes,
@@ -1781,7 +2034,8 @@ declare global {
       href?: string;
     }
     interface LineSVGAttributes<T>
-      extends GraphicsElementSVGAttributes<T>,
+      extends
+        GraphicsElementSVGAttributes<T>,
         ShapeElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
@@ -1800,7 +2054,8 @@ declare global {
       y2?: number | string;
     }
     interface MarkerSVGAttributes<T>
-      extends ContainerElementSVGAttributes<T>,
+      extends
+        ContainerElementSVGAttributes<T>,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
         FitToViewBoxSVGAttributes,
@@ -1813,7 +2068,8 @@ declare global {
       orient?: string;
     }
     interface MaskSVGAttributes<T>
-      extends Omit<ContainerElementSVGAttributes<T>, 'opacity' | 'filter'>,
+      extends
+        Omit<ContainerElementSVGAttributes<T>, 'opacity' | 'filter'>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes {
@@ -1824,10 +2080,11 @@ declare global {
       width?: number | string;
       height?: number | string;
     }
-    interface MetadataSVGAttributes<T> extends CoreSVGAttributes<T> {}
-    interface MPathSVGAttributes<T> extends CoreSVGAttributes<T> {}
+    interface MetadataSVGAttributes<T> extends estSVGAttributes<T> {}
+    interface MPathSVGAttributes<T> extends estSVGAttributes<T> {}
     interface PathSVGAttributes<T>
-      extends GraphicsElementSVGAttributes<T>,
+      extends
+        GraphicsElementSVGAttributes<T>,
         ShapeElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
@@ -1838,7 +2095,8 @@ declare global {
       pathLength?: number | string;
     }
     interface PatternSVGAttributes<T>
-      extends ContainerElementSVGAttributes<T>,
+      extends
+        ContainerElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
@@ -1854,7 +2112,8 @@ declare global {
       href?: string;
     }
     interface PolygonSVGAttributes<T>
-      extends GraphicsElementSVGAttributes<T>,
+      extends
+        GraphicsElementSVGAttributes<T>,
         ShapeElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
@@ -1864,7 +2123,8 @@ declare global {
       points?: string;
     }
     interface PolylineSVGAttributes<T>
-      extends GraphicsElementSVGAttributes<T>,
+      extends
+        GraphicsElementSVGAttributes<T>,
         ShapeElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
@@ -1881,7 +2141,8 @@ declare global {
       fy?: number | string;
     }
     interface RectSVGAttributes<T>
-      extends GraphicsElementSVGAttributes<T>,
+      extends
+        GraphicsElementSVGAttributes<T>,
         ShapeElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
@@ -1895,17 +2156,17 @@ declare global {
       ry?: number | string;
     }
     interface SetSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
-        StylableSVGAttributes,
-        AnimationTimingSVGAttributes {}
+      extends estSVGAttributes<T>, StylableSVGAttributes, AnimationTimingSVGAttributes {}
     interface StopSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
+      extends
+        estSVGAttributes<T>,
         StylableSVGAttributes,
         Pick<PresentationSVGAttributes, 'color' | 'stop-color' | 'stop-opacity'> {
       offset?: number | string;
     }
     interface SvgSVGAttributes<T>
-      extends ContainerElementSVGAttributes<T>,
+      extends
+        ContainerElementSVGAttributes<T>,
         NewViewportSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
@@ -1924,14 +2185,16 @@ declare global {
       xmlns?: string;
     }
     interface SwitchSVGAttributes<T>
-      extends ContainerElementSVGAttributes<T>,
+      extends
+        ContainerElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
         TransformableSVGAttributes,
         Pick<PresentationSVGAttributes, 'display' | 'visibility'> {}
     interface SymbolSVGAttributes<T>
-      extends ContainerElementSVGAttributes<T>,
+      extends
+        ContainerElementSVGAttributes<T>,
         NewViewportSVGAttributes<T>,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
@@ -1946,7 +2209,8 @@ declare global {
       y?: number | string;
     }
     interface TextSVGAttributes<T>
-      extends TextContentElementSVGAttributes<T>,
+      extends
+        TextContentElementSVGAttributes<T>,
         GraphicsElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
@@ -1962,7 +2226,8 @@ declare global {
       lengthAdjust?: 'spacing' | 'spacingAndGlyphs';
     }
     interface TextPathSVGAttributes<T>
-      extends TextContentElementSVGAttributes<T>,
+      extends
+        TextContentElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
@@ -1976,7 +2241,8 @@ declare global {
       href?: string;
     }
     interface TSpanSVGAttributes<T>
-      extends TextContentElementSVGAttributes<T>,
+      extends
+        TextContentElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
@@ -1993,7 +2259,8 @@ declare global {
       lengthAdjust?: 'spacing' | 'spacingAndGlyphs';
     }
     interface UseSVGAttributes<T>
-      extends GraphicsElementSVGAttributes<T>,
+      extends
+        GraphicsElementSVGAttributes<T>,
         ConditionalProcessingSVGAttributes,
         ExternalResourceSVGAttributes,
         StylableSVGAttributes,
@@ -2005,7 +2272,8 @@ declare global {
       href?: string;
     }
     interface ViewSVGAttributes<T>
-      extends CoreSVGAttributes<T>,
+      extends
+        estSVGAttributes<T>,
         ExternalResourceSVGAttributes,
         FitToViewBoxSVGAttributes,
         ZoomAndPanSVGAttributes {
@@ -2203,223 +2471,246 @@ declare global {
       view: ViewSVGAttributes<SVGViewElement>;
     }
     interface IntrinsicElements
-      extends HTMLElementTags,
-        HTMLElementDeprecatedTags,
-        SVGElementTags {}
+      extends HTMLElementTags, HTMLElementDeprecatedTags, SVGElementTags {}
   }
 }
 
-declare class LifecycleContext {
-    addEventListener(): void;
-    removeEventListener(): void;
-    static ref: LifecycleContext | null;
-    static context: Record<symbol, Signal$1<any>>;
-    hooks: Record<Hook, Set<() => void>>;
-    addHook(hook: Hook, cb: () => void): void;
-    getContext<T>(context: symbol | string | number): T | undefined;
-    setContext<T>(context: symbol | string | number, value: T): void;
-    initRef(): void;
-    removeRef(): void;
-    clearHooks(): void;
-}
-
-declare class TemplateNode$1 implements JSX.Element {
-    template: HTMLTemplateElement;
-    props: Props;
-    key?: string | undefined;
-    protected treeMap: Map<number, Node>;
-    protected mounted: boolean;
-    protected nodes: Node[];
-    protected trackMap: Map<string, NodeTrack>;
-    protected bindValueKeys: string[];
-    protected componentIndex: number;
-    protected parent: Node | null;
-    constructor(template: HTMLTemplateElement, props: Props, key?: string | undefined);
-    get firstChild(): Node | null;
-    get isConnected(): boolean;
-    addEventListener(): void;
-    removeEventListener(): void;
-    mount(parent: Node, before?: Node | null): Node[];
-    unmount(): void;
-    inheritNode(node: TemplateNode$1): void;
-    protected mapSSGNodeTree(parent: Node): void;
-    protected mapNodeTree(parent: Node, tree: Node): void;
-    protected walkNodeTree(node: Node, handler: (node: Node) => void): void;
-    protected handleSSGNode(node: Node): void;
-    protected patchProps(props: Record<string, Record<string, unknown>> | undefined): void;
-    protected patchProp(key: string, node: Node, props: Record<string, unknown>, isRoot: boolean): void;
-    protected getBindUpdateValue(props: Record<string, any>, key: string, attr: string): any;
-    protected patchChildren(key: string, node: Node, children: unknown, isRoot: boolean): void;
-    protected patchEventListener(key: string, node: Node, attr: string, listener: EventListener): void;
-    protected patchAttribute(key: string, element: HTMLElement, attr: string, value: unknown, updateFn?: Function): void;
-    protected getNodeTrack(trackKey: string, trackLastNodes?: boolean, isRoot?: boolean): NodeTrack;
-    protected patchChild(track: NodeTrack, parent: Node, child: unknown, before: Node | null): void;
-    protected reconcileChildren(parent: Node, nextNodes: Node[], before: Node | null): Map<string, Node>;
-}
+type AnyNode = Node | Component;
 
-declare class ComponentNode$1 extends LifecycleContext implements JSX.Element {
-    template: EssorComponent;
-    props: Props;
-    key?: string | undefined;
-    protected proxyProps: Record<string, Signal$1<unknown>>;
-    protected emitter: Set<() => void>;
-    protected rootNode: TemplateNode$1 | null;
-    protected trackMap: Map<string, NodeTrack>;
-    protected nodes: Node[];
-    protected parent: Node | null;
-    protected before: Node | null;
-    constructor(template: EssorComponent, props: Props, key?: string | undefined);
-    get firstChild(): Node | null;
-    get isConnected(): boolean;
-    mount(parent: Node, before: Node | null): Node[];
-    unmount(): void;
-    private resetState;
-    protected callLifecycleHooks(type: 'mounted' | 'destroy'): void;
-    protected callMountHooks(): void;
-    protected callDestroyHooks(): void;
-    protected clearEmitter(): void;
-    inheritNode(node: ComponentNode$1): void;
-    protected getNodeTrack(trackKey: string): NodeTrack;
-    patchProps(props: Record<string, any> | undefined): void;
-    protected patchEventListener(key: string, prop: any): void;
-    protected patchRef(prop: {
-        value: Node | null;
-    }): void;
-    protected patchUpdateHandler(key: string, prop: any): void;
-    protected patchNormalProp(key: string, prop: any): void;
-    protected cleanup(): void;
+interface FragmentProps {
+    children?: AnyNode | AnyNode[];
+    key?: string;
 }
-
 /**
- * Creates a JSX element from a given template.
+ * Fragment component - renders multiple children without wrapper elements
  *
- * @param template - The template to render. Can be a string representing an HTML
- * element, a function representing a component, or an `HTMLTemplateElement`.
- * @param props - Properties to pass to the component or element.
- * @param key - The key of the element.
- * @returns The created JSX element.
+ * @param props - Component props with children
+ * @returns DocumentFragment containing all children
+ *
+ * @example
+ * ```tsx
+ * <Fragment>
+ *   <div>First</div>
+ *   <span>Second</span>
+ * </Fragment>
+ * ```
  */
-declare function h<K extends keyof HTMLElementTagNameMap>(template: EssorComponent | HTMLTemplateElement | K | '', props?: Props, key?: string): JSX.Element;
+declare function Fragment(props: FragmentProps): DocumentFragment | string;
+declare namespace Fragment {
+    var fragment: boolean;
+}
 /**
- * Checks if the given node is an instance of `ComponentNode`.
- *
- * @param node The node to check.
- * @returns `true` if the node is an instance of `ComponentNode`, otherwise `false`.
+ * Check if a node is a Fragment component
+ * @param node - Node to check
+ * @returns true if node is a Fragment
  */
-declare function isComponent(node: unknown): node is ComponentNode$1;
+declare function isFragment(node: unknown): boolean;
+
+interface PortalProps {
+    children?: AnyNode | AnyNode[];
+    target: string | HTMLElement;
+    key?: string;
+}
 /**
- * Checks if the given node is a JSX element. A JSX element is either an instance
- * of `ComponentNode` or an instance of `TemplateNode`.
+ * Portal component - renders children into a different DOM node
+ *
+ * @param props - Component props with children and target
+ * @returns Comment node as placeholder in parent tree
  *
- * @param node The node to check.
- * @returns `true` if the node is a JSX element, otherwise `false`.
+ * @example
+ * ```tsx
+ * <Portal target="#modal-root">
+ *   <div>Modal content</div>
+ * </Portal>
+ * ```
  */
-declare function isJsxElement(node: unknown): node is EssorNode;
+declare function Portal(props: PortalProps): Comment | string;
+declare namespace Portal {
+    var portal: boolean;
+}
 /**
- * Creates an HTML template element from a given HTML string.
- *
- * @param html The HTML string to create a template from.
- * @returns A new HTML template element.
+ * Check if a node is a Portal component
+ * @param node - Node to check
+ * @returns true if node is a Portal
  */
-declare function createTemplate(html: string): HTMLTemplateElement;
-declare function Fragment<T extends JSX.JSXElement | string | number | boolean | Array<JSX.JSXElement | string | number | boolean>>(template: HTMLTemplateElement | '', props: {
-    children: T;
-} | {
-    [key: string]: {
-        children: T;
-    };
-}): JSX.Element;
+declare function isPortal(node: unknown): boolean;
 
+interface SuspenseProps {
+    /** The content to render. Can be a Promise for async loading. */
+    children?: AnyNode | AnyNode[] | Promise<AnyNode | AnyNode[]>;
+    /** Fallback content to display while children is loading (Promise pending). */
+    fallback?: AnyNode;
+    /** Optional key for reconciliation. */
+    key?: string;
+}
 /**
- * Registers a hook to be called when the component is mounted.
+ * Suspense component - handles async content with a fallback UI
  *
- * @remarks
- * This function can only be called in the component function body.
- * It cannot be used in asynchronous or deferred calls.
- * @param cb - The function to call when the component is mounted.
- */
-declare function onMount(cb: () => void): void;
-/**
- * Registers a hook to be called when the component is about to be unmounted.
+ * @param props - Component props with children, fallback, and optional key
+ * @returns Placeholder node or fallback content
  *
- * @remarks
- * This function can only be called in the component function body.
- * It cannot be used in asynchronous or deferred calls.
- * @param cb - The function to call when the component is about to be unmounted.
+ * @example
+ * ```tsx
+ * <Suspense fallback={<div>Loading...</div>}>
+ *   {asyncContent}
+ * </Suspense>
+ * ```
  */
-declare function onDestroy(cb: () => void): void;
-interface InjectionKey<T> extends Symbol {
+declare const SuspenseContext: unique symbol;
+interface SuspenseContextType {
+    register: (promise: Promise<any>) => void;
+    increment: () => void;
+    decrement: () => void;
 }
 /**
- * Provides a value to be used in the component tree.
+ * Suspense component - handles async content with a fallback UI
+ *
+ * @param props - Component props with children, fallback, and optional key
+ * @returns Placeholder node or fallback content
  *
- * @remarks
- * This function can only be called in the component function body.
- * It cannot be used in asynchronous or deferred calls.
- * @param key - The key to store the value in the LifecycleContext with.
- * @param value - The value to store in the LifecycleContext with the given key.
+ * @example
+ * ```tsx
+ * <Suspense fallback={<div>Loading...</div>}>
+ *   {asyncContent}
+ * </Suspense>
+ * ```
  */
-declare function provide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
+declare function Suspense(props: SuspenseProps): Node | string;
+declare namespace Suspense {
+    var suspense: boolean;
+}
 /**
- * Injects a value from the current component LifecycleContext.
- *
- * @remarks
- * This function can only be called in the component function body.
- * It cannot be used in asynchronous or deferred calls.
- * @param key - The key to retrieve the value from the LifecycleContext with.
- * @param defaultValue - The default value to return if the key is not present
- * in the LifecycleContext.
- * @returns The value stored in the LifecycleContext with the given key, or the default
- * value if the key is not present in the LifecycleContext.
+ * Check if a node is a Suspense component
+ * @param node - Node to check
+ * @returns true if node is a Suspense
  */
-declare function inject<T, K = InjectionKey<T> | string | number>(key: K, defaultValue?: K extends InjectionKey<infer V> ? V : T): (K extends InjectionKey<infer V> ? V : T) | undefined;
+declare function isSuspense(node: unknown): boolean;
 
-declare class SSGNode extends LifecycleContext {
-    private template;
-    private props;
-    key?: string | undefined;
-    private templates;
-    constructor(template: string[] | SSGNode | ((props: Props) => SSGNode), props?: Props, key?: string | undefined);
-    private processTemplate;
-    private processHtmlString;
-    mount(): string;
-    render(): string;
-    private renderTemplate;
-    private normalizeProps;
-    private generateAttributes;
-    private renderChildren;
-    private renderChild;
+type ResourceState = 'pending' | 'ready' | 'errored';
+interface Resource<T> {
+    (): T | undefined;
+    loading: Signal$1<boolean>;
+    error: Signal$1<Error | null>;
+    state: Signal$1<ResourceState>;
+}
+interface ResourceActions<T> {
+    mutate: (value: T) => void;
+    refetch: () => Promise<void>;
+}
+interface ResourceOptions<T> {
+    initialValue?: T;
 }
-
 /**
- * Render a component to a string.
+ * Create a resource for async data fetching
+ * Inspired by SolidJS createResource
+ *
+ * @param fetcher - Function that returns a Promise with the data
+ * @param options - Optional configuration
+ * @returns Tuple of [resource, actions]
+ *
+ * @example
+ * ```typescript
+ * const [data, { refetch, mutate }] = createResource(
+ *   () => fetch('/api/user').then(r => r.json()),
+ *   { initialValue: null }
+ * );
  *
- * This function renders a component to an HTML string. It is used for server-side rendering (SSR) and static site generation (SSG).
+ * // Access data
+ * console.log(data());
+ * console.log(data.loading.value);
+ * console.log(data.state.value);
  *
- * @param component The component to render.
- * @param props Optional props to pass to the component.
- * @returns The rendered HTML string.
+ * // Refetch data
+ * await refetch();
+ *
+ * // Update data directly
+ * mutate({ name: 'John' });
+ * ```
  */
-declare function renderToString(component: EssorComponent, props?: Props): string;
+declare function createResource<T>(fetcher: () => Promise<T>, options?: ResourceOptions<T>): [Resource<T>, ResourceActions<T>];
+
 /**
- * Hydrate a component in a container.
  *
- * This function hydrates a component in a container element. It is used for server-side rendering (SSR) and client-side rendering (CSR).
+ *  ssg compile
+ *
+ *   component context it will this:
  *
- * @param component The component to hydrate.
- * @param container The container element to hydrate in. Can be a string selector or an Element.
- * @throws Error if the container is not found.
+ * function component(props) {
+ * // render function props: template, hydrationKey, ...components
+ * return render(_tmpl, getHydrationKey(), createSSGComponent(xx, {}));
+ * }
+ *
+ * renderToString(component, props)
+ *
+ *
+ */
+/**
+ * render the component to string
+ * @param {ComponentFn} component - the component to render
+ * @param {ComponentProps} props - the props to pass to the component
+ * @returns {string} the rendered string
+ */
+declare function renderToString(component: ComponentFn, props?: ComponentProps): string;
+/**
+ * render the component to string
+ * @param {string[]} templates - the template to render
+ * @param {string} hydrationKey - the hydration key
+ * @param {...string[]} components - the components to render
+ * @returns {string} the rendered string
+ */
+declare function render(templates: string[], hydrationKey: string, ...components: string[]): string;
+/**
+ * create a ssg component
+ * @param {ComponentFn} component - the component to create
+ * @param {ComponentProps} props - the props to pass to the component
+ * @returns {string} the created component as a string
  */
-declare function hydrate(component: EssorComponent, container: string | Element): void;
+declare function createSSGComponent(component: ComponentFn, props?: ComponentProps): string;
+
 /**
- * Create a server-side generation (SSG) node from a component.
+ * get the hydration key
+ * @returns {string} the hydration key
+ */
+declare function getHydrationKey(): string;
+
+/**
+ * Generate server-side rendering attribute string
+ *
+ * Generate HTML-compatible attribute string based on attribute type, handling special cases:
+ * - Automatic unwrapping of reactive values
+ * - Normalization of special attributes (style/class)
+ * - Ignoring event attributes
+ * - Special handling for boolean attributes
  *
- * If the render context is set to SSG, this function will create a new SSGNode from the component. Otherwise, it will create a new JSX element using the h function.
+ * @param attrName Attribute name
+ * @param attrValue Attribute value
+ * @param hydrationId Hydration ID (for client-side reuse)
+ * @returns Formatted HTML attribute string
+ */
+declare function setSSGAttr(attrName: string, attrValue: any, hydrationId: string): string;
+
+/**
+ * Server-side node mapping utilities
+ */
+/**
+ * getRenderedElement function - gets an element based on string template
+ */
+declare function getRenderedElement(temp: string): () => Node;
+/**
+ * Maps server-side rendered nodes during hydration
+ * @param {HTMLElement} template - The root template element
+ * @param {number[]} idx - Array of indices to map
+ * @returns {Node[]} Array of mapped nodes
+ */
+declare function mapSSRNodes(template: HTMLElement, idx: number[]): Node[];
+/**
+ * Hydrates a server-rendered component
  *
- * @param component The component to create the SSGNode from.
- * @param props Optional props to pass to the component.
- * @returns The SSGNode or JSX element.
+ * @param {Function} component - Component function to hydrate
+ * @param {HTMLElement | string} container - Container element or selector
+ * @param {Record<string, unknown>} props - Component properties
+ * @returns {any} Component instance or undefined if hydration fails
  */
-declare function ssg(component: EssorComponent, props?: Props): SSGNode | JSX.Element;
+declare function hydrate(component: (props?: any) => any, container: HTMLElement | string, props?: Record<string, unknown>): any;
 
-export { Fragment, type InjectionKey, h, hydrate, inject, isComponent, isJsxElement, onDestroy, onMount, provide, renderToString, ssg, createTemplate as template };
+export { Component, type ComponentFn, type ComponentProps, Fragment, type FragmentProps, type InjectionKey, Portal, type PortalProps, type Resource, type ResourceActions, type ResourceOptions, type ResourceState, Suspense, SuspenseContext, type SuspenseContextType, type SuspenseProps, addEvent, addEventListener, bindElement, createApp, createComponent, createResource, createSSGComponent, delegateEvents, getHydrationKey, getRenderedElement, hydrate, inject, insert, isComponent, isFragment, isPortal, isSuspense, mapNodes, mapSSRNodes, normalizeClass, onDestroy, onMount, onUpdate, patchAttr, patchClass, patchStyle, provide, render, renderToString, setSSGAttr, setStyle, template };