@jasonshimmy/custom-elements-runtime 0.1.2 → 0.1.4

package/dist/directives.d.ts

@@ -1,4 +1,4 @@
-import type { VNode } from "./vdom";
+import type { VNode } from "./runtime/types";
 export declare function when(cond: boolean, children: VNode | VNode[]): VNode;
 export declare function each<T extends string | number | boolean | {
     id?: string | number;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Custom Elements Runtime
+ * Lightweight, strongly typed, functional custom element runtime for two-way binding, event, and prop support.
+ * Supports: state, computed, props, style, render, lifecycle hooks, #model-* and data-on-* attributes.
+ * No external dependencies. Mobile-first, secure, and developer friendly.
+ */
+export * from "./runtime/types";
+export * from "./directives";
+export * from "./event-bus";
+export * from "./store";
+export * from "./router";
+export { component } from "./runtime/component";
+export { css } from "./runtime/style";
+export { html } from "./runtime/template-compiler";

package/dist/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/router.d.ts

@@ -1,25 +1,60 @@
 /**
  * Lightweight, scalable router for Custom Elements Runtime
  * - Functional API, zero dependencies, SSR/static site compatible
- * - Integrates with Store and runtime.ts
+ * - Integrates with createStore and lib/index.ts
  */
 import { type Store } from './store';
+export interface RouteComponent {
+    new (...args: any[]): any;
+    (...args: any[]): any;
+}
+export interface RouteState {
+    path: string;
+    params: Record<string, string>;
+    query: Record<string, string>;
+}
+export type GuardResult = boolean | string | Promise<boolean | string>;
 export interface Route {
     path: string;
+    /**
+     * Statically available component (already imported)
+     */
     component?: string;
+    /**
+     * Lazy loader that resolves to something renderable
+     */
     load?: () => Promise<{
         default: string | HTMLElement | Function;
     }>;
+    /**
+     * Runs before matching — return false to cancel,
+     * or a string to redirect
+     */
+    beforeEnter?: (to: RouteState, from: RouteState) => GuardResult;
+    /**
+     * Runs right before navigation commits — can cancel or redirect
+     */
+    onEnter?: (to: RouteState, from: RouteState) => GuardResult;
+    /**
+     * Runs after navigation completes — cannot cancel
+     */
+    afterEnter?: (to: RouteState, from: RouteState) => void;
 }
 export interface RouterConfig {
     routes: Route[];
     base?: string;
+    initialUrl?: string;
 }
 export interface RouteState {
     path: string;
     params: Record<string, string>;
     query: Record<string, string>;
 }
+export declare const parseQuery: (search: string) => Record<string, string>;
+export declare const matchRoute: (routes: Route[], path: string) => {
+    route: Route | null;
+    params: Record<string, string>;
+};
 /**
  * Loads a route's component, supporting both static and async.
  * @param route Route object
@@ -28,8 +63,8 @@ export interface RouteState {
 export declare function resolveRouteComponent(route: Route): Promise<any>;
 export declare function useRouter(config: RouterConfig): {
     store: Store<RouteState>;
-    push: (path: string) => void;
-    replace: (path: string) => void;
+    push: (path: string) => Promise<void>;
+    replace: (path: string) => Promise<void>;
     back: () => void;
     subscribe: (listener: (state: RouteState) => void) => void;
     matchRoute: (path: string) => {
@@ -43,10 +78,16 @@ export declare function matchRouteSSR(routes: Route[], path: string): {
     route: Route | null;
     params: Record<string, string>;
 };
+/**
+ * Singleton router instance for global access.
+ *
+ * Define here to prevent circular dependency
+ * issue with component.
+ */
 export declare function initRouter(config: RouterConfig): {
     store: Store<RouteState>;
-    push: (path: string) => void;
-    replace: (path: string) => void;
+    push: (path: string) => Promise<void>;
+    replace: (path: string) => Promise<void>;
     back: () => void;
     subscribe: (listener: (state: RouteState) => void) => void;
     matchRoute: (path: string) => {

package/dist/router.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/component.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentConfig, ComponentContext } from "./types";
+export declare function component<S extends object = {}, C extends object = {}, P extends object = {}, T extends object = any>(tag: string, renderOrConfig: ((context: ComponentContext<S, C, P, T>) => any) | ComponentConfig<S, C, P, T>, config?: Partial<ComponentConfig<S, C, P, T>>): void;
+export declare function createElementClass<S extends object, C extends object, P extends object, T extends object = any>(config: ComponentConfig<S, C, P, T>): CustomElementConstructor | {
+    new (): object;
+};

package/dist/runtime/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare function toKebab(str: string): string;
+export declare function escapeHTML(str: string | number | boolean): string | number | boolean;

package/dist/runtime/lifecycle.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentConfig, ComponentContext } from "./types";
+/**
+ * Handles the connected lifecycle hook.
+ */
+export declare function handleConnected<S extends object, C extends object, P extends object, T extends object>(cfg: ComponentConfig<S, C, P, T>, context: ComponentContext<S, C, P, T>, isMounted: boolean, setMounted: (val: boolean) => void): void;
+/**
+ * Handles the disconnected lifecycle hook.
+ */
+export declare function handleDisconnected<S extends object, C extends object, P extends object, T extends object>(cfg: ComponentConfig<S, C, P, T>, context: ComponentContext<S, C, P, T>, listeners: Array<() => void>, clearListeners: () => void, clearWatchers: () => void, setTemplateLoading: (val: boolean) => void, setTemplateError: (err: Error | null) => void, setMounted: (val: boolean) => void): void;
+/**
+ * Handles the attribute changed lifecycle hook.
+ */
+export declare function handleAttributeChanged<S extends object, C extends object, P extends object, T extends object>(cfg: ComponentConfig<S, C, P, T>, name: string, oldValue: string | null, newValue: string | null, context: ComponentContext<S, C, P, T>): void;

package/dist/runtime/props.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentConfig, ComponentContext } from "./types";
+/**
+ * Applies props to the component context.
+ * @param element - The custom element instance.
+ * @param cfg - The component config.
+ * @param context - The component context.
+ */
+export declare function applyProps<S extends object, C extends object, P extends object, T extends object>(element: HTMLElement, cfg: ComponentConfig<S, C, P, T>, context: ComponentContext<S, C, P, T>): void;

package/dist/runtime/render.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentConfig, ComponentContext, VNode, Refs } from "./types";
+/**
+ * Renders the component output.
+ */
+export declare function renderComponent<S extends object, C extends object, P extends object, T extends object>(shadowRoot: ShadowRoot | null, cfg: ComponentConfig<S, C, P, T>, context: ComponentContext<S, C, P, T>, refs: Refs["refs"], setHtmlString: (html: string) => void, setLoading: (val: boolean) => void, setError: (err: Error | null) => void, applyStyle: (html: string) => void): void;
+/**
+ * Renders VNode(s) to the shadowRoot.
+ */
+export declare function renderOutput<S extends object, C extends object, P extends object, T extends object>(shadowRoot: ShadowRoot | null, output: VNode | VNode[], context: ComponentContext<S, C, P, T>, refs: Refs["refs"], setHtmlString: (html: string) => void): void;
+/**
+ * Debounced render request.
+ */
+export declare function requestRender(renderFn: () => void, lastRenderTime: number, renderCount: number, setLastRenderTime: (t: number) => void, setRenderCount: (c: number) => void, renderTimeoutId: ReturnType<typeof setTimeout> | null, setRenderTimeoutId: (id: ReturnType<typeof setTimeout> | null) => void): void;
+/**
+ * Applies styles to the shadowRoot.
+ */
+export declare function applyStyle<S extends object, C extends object, P extends object, T extends object>(shadowRoot: ShadowRoot | null, cfg: ComponentConfig<S, C, P, T>, context: ComponentContext<S, C, P, T>, htmlString: string, styleSheet: CSSStyleSheet | null, setStyleSheet: (sheet: CSSStyleSheet | null) => void): void;

package/dist/runtime/render.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/style.d.ts

@@ -0,0 +1,61 @@
+/**
+ * CSS template literal
+ *
+ * This doesn't sanitize CSS values.
+ * Runtime does that for us.
+ *
+ * @param strings
+ * @param values
+ * @returns
+ */
+export declare function css(strings: TemplateStringsArray, ...values: unknown[]): string;
+/**
+ * CSS minification utility (basic)
+ */
+export declare function minifyCSS(css: string): string;
+export declare function getBaseResetSheet(): CSSStyleSheet;
+export declare function sanitizeCSS(css: string): string;
+/**
+ * Minimal Shadow DOM reset
+ */
+export declare const baseReset: string;
+/**
+ * JIT CSS implementation
+ */
+type CSSMap = Record<string, string>;
+type SelectorVariantMap = Record<string, (selector: string, body: string) => string>;
+type MediaVariantMap = Record<string, string>;
+export declare const colors: Record<string, Record<string, string>>;
+export declare const utilityMap: CSSMap;
+export declare const spacing = "var(--spacing, 0.25rem)";
+export declare const spacingProps: Record<string, string[]>;
+export declare const selectorVariants: SelectorVariantMap;
+export declare const mediaVariants: MediaVariantMap;
+export declare const responsiveOrder: string[];
+export declare function parseSpacing(className: string): string | null;
+export declare function hexToRgb(hex: string): string;
+export declare function parseColorClass(className: string): string | null;
+export declare function parseOpacityModifier(className: string): {
+    base: string;
+    opacity?: number;
+};
+export declare function parseColorWithOpacity(className: string): string | null;
+/**
+ * Arbitrary value parser — supports:
+ * - prop-[value]
+ */
+export declare function parseArbitrary(className: string): string | null;
+export declare function escapeClassName(name: string): string;
+export declare function extractClassesFromHTML(html: string): string[];
+/**
+ * JIT CSS generation with throttling and memoization.
+ * Only regenerates CSS if HTML changes and enough time has passed.
+ * Caches results for repeated HTML inputs.
+ */
+export declare const jitCssCache: Map<string, {
+    css: string;
+    timestamp: number;
+}>;
+export declare const JIT_CSS_THROTTLE_MS = 16;
+export declare function jitCSS(html: string): string;
+export {};

package/dist/runtime/template-compiler.d.ts

@@ -0,0 +1,26 @@
+import type { VNode } from "./types";
+export declare function h(tag: string, props?: Record<string, any>, children?: VNode[] | string, key?: string | number): VNode;
+export declare function isAnchorBlock(v: any): boolean;
+export declare function isElementVNode(v: any): v is VNode;
+export declare function ensureKey(v: VNode, k: string): VNode;
+export declare function parseProps(str: string, values?: unknown[], context?: Record<string, any>): {
+    props: Record<string, any>;
+    attrs: Record<string, any>;
+    directives: Record<string, {
+        value: string;
+        modifiers: string[];
+    }>;
+};
+/**
+ * Internal implementation allowing an optional compile context for #model.
+ * Fixes:
+ *  - Recognize interpolation markers embedded in text ("World{{1}}") and replace them.
+ *  - Skip empty arrays from directives so markers don't leak as text.
+ *  - Pass AnchorBlocks through (and deep-normalize their children's keys) so the renderer can mount/patch them surgically.
+ *  - Do not rewrap interpolated VNodes (preserve their keys); only fill in missing keys.
+ */
+export declare function htmlImpl(strings: TemplateStringsArray, values: unknown[], context?: Record<string, any>): VNode | VNode[];
+/**
+ * Default export: plain html.
+ */
+export declare function html(strings: TemplateStringsArray, ...values: unknown[]): VNode | VNode[];

package/dist/{runtime.d.ts → runtime/types.d.ts}

@@ -1,30 +1,58 @@
 /**
- * runtime.ts
- * Lightweight, strongly typed, functional custom element runtime for two-way binding, event, and prop support.
- * Supports: state, computed, props, style, render, lifecycle hooks, #model-* and data-on-* attributes.
- * No external dependencies. Mobile-first, secure, and developer friendly.
+ * VDOM types
  */
-export { createStore } from "./store";
-export { eventBus } from "./event-bus";
-export { html } from "./template-compiler";
-export { when, each, match } from "./directives";
-import { type VNode } from "./vdom";
-type LifecycleKeys = "onConnected" | "onDisconnected" | "onAttributeChanged" | "onError" | "errorFallback";
-interface WatchOptions {
+export interface VNode {
+    tag: string;
+    key?: string;
+    props?: {
+        key?: string;
+        props?: any;
+        attrs?: Record<string, any>;
+        directives?: Record<string, {
+            value: string;
+            modifiers: string[];
+        }>;
+        ref?: string;
+    };
+    children?: VNode[] | string;
+}
+export type VDomRefs = Record<string, HTMLElement | undefined>;
+export interface AnchorBlockVNode extends VNode {
+    tag: "#anchor";
+    key: string;
+    children: VNode[];
+    _startNode?: Comment;
+    _endNode?: Comment;
+}
+/**
+ * Runtime types
+ */
+export type LifecycleKeys = "onConnected" | "onDisconnected" | "onAttributeChanged" | "onError" | "errorFallback";
+export interface WatchOptions {
     immediate?: boolean;
     deep?: boolean;
 }
-type WatchCallback<T = any, S = any> = (newValue: T, oldValue: T, context?: S) => void;
-type WatchConfig<S> = {
+export type WatchCallback<T = any, S = any> = (newValue: T, oldValue: T, context?: S) => void;
+export interface WatcherState {
+    callback: WatchCallback;
+    options: WatchOptions;
+    oldValue: any;
+}
+export type WatchConfig<S> = {
     [K in keyof S]?: WatchCallback<S[K]> | [WatchCallback<S[K]>, WatchOptions?];
 } | Record<string, WatchCallback | [WatchCallback, WatchOptions?]>;
-type InferMethods<T> = {
+export type InferMethods<T> = {
     [K in keyof T as K extends LifecycleKeys ? never : K]: T[K] extends Function ? T[K] : never;
 };
-interface Refs {
+export interface Refs {
     refs: Record<string, HTMLElement | undefined>;
 }
-export type ComponentContext<S extends object, C extends object, P extends object, T extends object = any> = S & C & P & InferMethods<T> & Refs;
+export type ComponentContext<S extends object, C extends object, P extends object, T extends object = any> = S & C & P & InferMethods<T> & Refs & {
+    requestRender?: () => void;
+    error?: Error | null;
+    hasError?: boolean;
+    isLoading?: boolean;
+};
 export interface ComponentConfig<S extends object, C extends object = {}, P extends object = {}, T extends object = any> {
     state?: S;
     computed?: {
@@ -46,18 +74,3 @@ export interface ComponentConfig<S extends object, C extends object = {}, P exte
     errorFallback?: (error: Error | null, context: ComponentContext<S, C, P, T>) => string;
     [key: string]: any;
 }
-/**
- * CSS template literal
- *
- * This doesn't sanitize CSS values.
- * Runtime does that for us.
- *
- * @param strings
- * @param values
- * @returns
- */
-export declare function css(strings: TemplateStringsArray, ...values: unknown[]): string;
-export declare function component<S extends object = {}, C extends object = {}, P extends object = {}, T extends object = any>(tag: string, renderOrConfig: ((context: ComponentContext<S, C, P, T>) => any) | ComponentConfig<S, C, P, T>, config?: Partial<ComponentConfig<S, C, P, T>>): void;
-export declare function createElementClass<S extends object, C extends object, P extends object, T extends object = any>(config: ComponentConfig<S, C, P, T>): CustomElementConstructor | {
-    new (): object;
-};

package/dist/runtime/vdom.d.ts

@@ -0,0 +1,67 @@
+/**
+ * vdom.ts
+ * Lightweight, strongly typed, functional virtual DOM renderer for custom elements.
+ * Features: keyed diffing, incremental patching, focus/caret preservation, event delegation, SSR-friendly, no dependencies.
+ */
+import type { VNode, VDomRefs } from "./types";
+/**
+ * Recursively clean up refs for all descendants of a node
+ */
+export declare function cleanupRefs(node: Node, refs?: VDomRefs): void;
+/**
+ * Get nested property value from object using dot notation
+ */
+export declare function getNestedValue(obj: any, path: string): any;
+/**
+ * Set nested property value in object using dot notation
+ */
+export declare function setNestedValue(obj: any, path: string, value: any): void;
+/**
+ * Process #model directive for two-way data binding
+ */
+export declare function processModelDirective(value: string, modifiers: string[], props: Record<string, any>, attrs: Record<string, any>, listeners: Record<string, EventListener>, context?: any, el?: HTMLElement): void;
+/**
+ * Process #bind directive for attribute/property binding
+ */
+export declare function processBindDirective(value: string, props: Record<string, any>, attrs: Record<string, any>, context?: any): void;
+/**
+ * Process #show directive for conditional display
+ */
+export declare function processShowDirective(value: string, attrs: Record<string, any>, context?: any): void;
+/**
+ * Process #class directive for conditional CSS classes
+ */
+export declare function processClassDirective(value: string, attrs: Record<string, any>, context?: any): void;
+export declare function processStyleDirective(value: any, attrs: Record<string, any>, context?: any): void;
+/**
+ * Process directives and return merged props, attrs, and event listeners
+ */
+export declare function processDirectives(directives: Record<string, {
+    value: any;
+    modifiers: string[];
+}>, context?: any, el?: HTMLElement, vnodeAttrs?: Record<string, any>): {
+    props: Record<string, any>;
+    attrs: Record<string, any>;
+    listeners: Record<string, EventListener>;
+};
+export declare function assignKeysDeep(nodeOrNodes: VNode | VNode[], baseKey: string): VNode | VNode[];
+/**
+ * Patch props on an element.
+ * Only update changed props, remove old, add new.
+ */
+export declare function patchProps(el: HTMLElement, oldProps: Record<string, any>, newProps: Record<string, any>, context?: any): void;
+export declare function createElement(vnode: VNode | string, context?: any, refs?: VDomRefs): Node;
+/**
+ * Patch children using keys for node matching.
+ */
+export declare function patchChildren(parent: HTMLElement, oldChildren: VNode[] | string | undefined, newChildren: VNode[] | string | undefined, context?: any, refs?: VDomRefs): void;
+/**
+ * Patch a node using keys for node matching.
+ */
+export declare function patch(dom: Node, oldVNode: VNode | string | null, newVNode: VNode | string | null, context?: any, refs?: VDomRefs): Node;
+/**
+ * Main renderer: uses patching and keys for node reuse.
+ * Never uses innerHTML. Only updates what has changed.
+ */
+export declare function vdomRenderer(root: ShadowRoot, vnodeOrArray: VNode | VNode[], context?: any, refs?: VDomRefs): void;
+export declare function renderToString(vnode: VNode): string;

package/dist/runtime/vdom.edge.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/vdom.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/watchers.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentContext, WatchCallback, WatchOptions, WatcherState } from "./types";
+/**
+ * Initializes watchers for a component.
+ */
+export declare function initWatchers(context: ComponentContext<any, any, any, any>, watchers: Map<string, WatcherState>, watchConfig: Record<string, WatchCallback | [WatchCallback, WatchOptions]>): void;
+/**
+ * Gets a nested value from context by path.
+ */
+export declare function getNestedValue(context: any, path: string): any;
+/**
+ * Triggers watchers when state changes.
+ */
+export declare function triggerWatchers(context: ComponentContext<any, any, any, any>, watchers: Map<string, WatcherState>, path: string, newValue: any): void;

package/dist/store.d.ts

@@ -2,9 +2,7 @@ type Listener<T> = (state: T) => void;
 export interface Store<T extends object> {
     subscribe(listener: Listener<T>): void;
     getState(): T;
+    setState(partial: Partial<T> | ((prev: T) => Partial<T>)): void;
 }
-export declare function createStore<T extends object>(initial: T): {
-    subscribe: (listener: Listener<T>) => void;
-    getState: () => T;
-};
+export declare function createStore<T extends object>(initial: T): Store<T>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jasonshimmy/custom-elements-runtime",
   "description": "A powerful, modern, and lightweight runtime for creating reactive web components with TypeScript",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "keywords": [
     "web-components",
@@ -39,19 +39,18 @@
   },
   "main": "dist/custom-elements-runtime.cjs.js",
   "module": "dist/custom-elements-runtime.es.js",
-  "types": "dist/runtime.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "dist/runtime.d.ts"
+    "dist/index.d.ts"
   ],
   "exports": {
     ".": {
-      "types": "./dist/runtime.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/custom-elements-runtime.es.js",
       "require": "./dist/custom-elements-runtime.cjs.js",
       "default": "./dist/custom-elements-runtime.umd.js"
-    },
-    "./runtime.d.ts": "./dist/runtime.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"

package/dist/style-utils.d.ts

@@ -1,11 +0,0 @@
-/**
- * CSS minification utility (basic)
- */
-export declare function minifyCSS(css: string): string;
-export declare function getBaseResetSheet(): CSSStyleSheet;
-export declare function sanitizeCSS(css: string): string;
-/**
- * Minimal Shadow DOM reset
- */
-export declare const baseReset = "\n  :host, *, ::before, ::after {\n    all: isolate;\n    box-sizing: border-box;\n    border: 0 solid currentColor;\n    margin: 0;\n    padding: 0;\n    font: inherit;\n    vertical-align: baseline;\n    background: transparent;\n    color: inherit;\n    -webkit-tap-highlight-color: transparent;\n  }\n  :host {\n    display: contents;\n    font: 16px/1.5 ui-sans-serif, system-ui, sans-serif;\n    -webkit-text-size-adjust: 100%;\n    text-size-adjust: 100%;\n  }\n  button, input, select, textarea {\n    background: transparent;\n    outline: none;\n  }\n  textarea { resize: vertical }\n  progress { vertical-align: baseline }\n  button, textarea { overflow: visible }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    max-width: 100%;\n    height: auto;\n  }\n  svg { fill: currentColor; stroke: none }\n  a { text-decoration: inherit; cursor: pointer }\n  button, [type=button], [type=reset], [type=submit] {\n    cursor: pointer;\n    appearance: button;\n    background: none;\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  ::-webkit-input-placeholder, ::placeholder {\n    color: inherit; opacity: .5;\n  }\n  *:focus {\n    outline: 2px solid var(--color-blue-500, #3b82f6);\n    outline-offset: 2px;\n  }\n  ol, ul { list-style: none }\n  table { border-collapse: collapse }\n  sub, sup {\n    font-size: .75em;\n    line-height: 0;\n    position: relative;\n  }\n  sub { bottom: -.25em }\n  sup { top: -.5em }\n  [disabled], [aria-disabled=true] { cursor: not-allowed }\n  [hidden] { display: none }\n";
-export declare function jitCSS(html: string): string;

package/dist/template-compiler.d.ts

@@ -1,6 +0,0 @@
-import type { VNode } from "./vdom";
-export declare function h(tag: string, props?: Record<string, any>, children?: VNode[] | string, key?: string | number): VNode;
-/**
- * Default export: plain html.
- */
-export declare function html(strings: TemplateStringsArray, ...values: unknown[]): VNode | VNode[];

package/dist/vdom.d.ts

@@ -1,34 +0,0 @@
-/**
- * vdom.ts
- * Lightweight, strongly typed, functional virtual DOM renderer for custom elements.
- * Features: keyed diffing, incremental patching, focus/caret preservation, event delegation, SSR-friendly, no dependencies.
- */
-export interface VNode {
-    tag: string;
-    key?: string;
-    props?: {
-        key?: string;
-        props?: any;
-        attrs?: Record<string, any>;
-        directives?: Record<string, {
-            value: string;
-            modifiers: string[];
-        }>;
-        ref?: string;
-    };
-    children?: VNode[] | string;
-}
-export type VDomRefs = Record<string, HTMLElement | undefined>;
-export interface AnchorBlockVNode extends VNode {
-    tag: "#anchor";
-    key: string;
-    children: VNode[];
-    _startNode?: Comment;
-    _endNode?: Comment;
-}
-/**
- * Main renderer: uses patching and keys for node reuse.
- * Never uses innerHTML. Only updates what has changed.
- */
-export declare function vdomRenderer(root: ShadowRoot, vnodeOrArray: VNode | VNode[], context?: any, refs?: VDomRefs): void;
-export declare function renderToString(vnode: VNode): string;