@estjs/template 0.0.16-beta.9 → 0.0.17-beta.1

package/dist/template.d.ts

@@ -1,6 +1,6 @@
 import { Signal, Computed } from '@estjs/signals';
-import { S as Scope, I as InjectionKey } from './internal-DR5pJGCO.js';
-export { i as inject, p as provide } from './internal-DR5pJGCO.js';
+import { S as Scope } from './internal-DR5pJGCO.js';
+export { I as InjectionKey, i as inject, p as provide } from './internal-DR5pJGCO.js';
 import { normalizeClassName } from '@estjs/shared';
 
 declare enum COMPONENT_STATE {
@@ -27,6 +27,17 @@ declare enum COMPONENT_TYPE {
     TRANSITION_GROUP = "transition-group"
 }
 
+type AnyNode = Node | Component<any> | Element | string | number | boolean | null | undefined | AnyNode[] | (() => AnyNode) | Signal<AnyNode> | Computed<AnyNode>;
+type ComponentProps = Record<string, unknown>;
+type ComponentFn<P = ComponentProps> = (props: P) => AnyNode;
+/** A mounted application instance returned by createApp() and hydrate(). */
+interface AppInstance {
+    /** The root Component wrapper (undefined if mounting produced raw nodes). */
+    root: Component | undefined;
+    /** Tear down the application: dispose scopes, remove DOM nodes. */
+    unmount: () => void;
+}
+
 declare class Component<P extends ComponentProps = {}> {
     readonly component: ComponentFn<P>;
     props: P;
@@ -90,112 +101,56 @@ declare function isComponent(node: unknown): node is Component;
  */
 declare function createComponent<P extends ComponentProps>(componentFn: ComponentFn<P>, props?: P): Component<P>;
 
-type AnyNode = Node | Component<any> | Element | string | number | boolean | null | undefined | AnyNode[] | (() => AnyNode) | Signal<AnyNode> | Computed<AnyNode>;
-type ComponentProps = Record<string, unknown>;
-type ComponentFn<P = ComponentProps> = (props: P) => AnyNode;
-/** Phase + plugin name passed to error/warn handlers. */
-interface ErrorInfo {
-    phase: 'install' | 'mount' | 'cleanup' | 'effect';
-    plugin?: string;
-}
-/**
- * Application-level configuration. Plugins and user code can set these to
- * customize framework behaviour without monkey-patching internals.
- */
-interface AppConfig {
-    /** Invoked when an uncaught error propagates out of a plugin / lifecycle hook / effect. */
-    errorHandler?: (info: ErrorInfo, error: unknown) => void;
-    /** Custom warn handler (dev only). When set, framework `warn()` calls are redirected here. */
-    warnHandler?: (info: {
-        plugin?: string;
-    }, message: string) => void;
-}
-/**
- * Context passed to every plugin's setup function. Plugins use this to
- * register providers, hook lifecycle events, and report problems.
- */
-interface AppContext {
-    /** Provide a value at the application root scope, retrievable via `inject()`. */
-    provide<T>(key: InjectionKey<T> | string | number, value: T): void;
-    /** Inject a value from the application scope. Plugins ordered later can read what earlier plugins provided. */
-    inject<T>(key: InjectionKey<T> | string | number, defaultValue?: T): T;
-    /** Register a callback that runs after the root component mounts. */
-    onMount(fn: () => void): void;
-    /** Register a callback that runs when the application is unmounted. */
-    onCleanup(fn: () => void): void;
-    /** Non-fatal report. Routed to config.warnHandler if set, otherwise a dev console warning. */
-    warn(message: string): void;
-    /** Fatal report. Throws — plugin setup fails, mount() rejects. */
-    error(message: string): never;
-    /** Application config — readable and mutable by plugins. */
-    config: AppConfig;
-    /** Framework version (injected by the build; empty string in unbundled tests). */
-    version: string;
-}
 /**
- * Plugin definition.
+ * 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.
+ *
+ * Security note: `template(html)` is a raw HTML entrypoint. The caller is
+ * responsible for ensuring `html` is trusted and not derived from unsanitized
+ * user input.
+ *
+ * @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
- * ```ts
- * const router = definePlugin<{ routes: Route[] }>({
- *   name: 'essor:router',
- *   enforce: 'pre',
- *   setup(ctx, options) {
- *     ctx.provide(RouterKey, createRouter(options.routes));
- *   },
- * });
+ * ```typescript
+ * const buttonTemplate = template('<button>Click me</button>');
+ * const button1 = buttonTemplate(); // Creates first button instance
+ * const button2 = buttonTemplate(); // Creates second button instance
  * ```
  */
-interface Plugin<TOptions = void> {
-    /** Required. Used for dedup, error messages, ordering. */
-    name: string;
-    /** Coarse ordering bucket. Default 'default'. Order: pre → default → post; within bucket, array order wins. */
-    enforce?: 'pre' | 'default' | 'post';
-    /** Setup. May be async; mount() awaits it. */
-    setup(ctx: AppContext, options: TOptions): void | Promise<void>;
-}
-/** Plugin entry in `CreateAppOptions.plugins` — bare or paired with options. */
-type PluginEntry = Plugin<void> | readonly [Plugin<any>, unknown];
-/** Options accepted by the config-object form of `createApp(component, options)`. */
-interface CreateAppOptions {
-    plugins?: ReadonlyArray<PluginEntry>;
-    config?: Partial<AppConfig>;
-}
+declare function template(html: string): () => Node;
 /**
- * Application builder returned by `createApp(component)` or `createApp(component, options)`.
+ * 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 Object with root component and unmount function.
  *
  * @example
- * ```ts
- * await createApp(App, {
- *   plugins: [router, [store, { initial: {} }]],
- * }).mount('#root');
+ * ```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);
  * ```
  */
-interface App {
-    /** Application config. Mutate before mounting to install error/warn handlers. */
-    config: AppConfig;
-    /** Mount into the DOM. Returns a Promise when any plugin has async setup; sync otherwise. */
-    mount(target: string | Element): Promise<AppInstance | undefined> | AppInstance | undefined;
-    /** Hydrate over SSR HTML. Returns a Promise when any plugin has async setup; sync otherwise. */
-    hydrate(target: string | Element): Promise<AppInstance | undefined> | AppInstance | undefined;
-}
-/** A mounted application instance. */
-interface AppInstance {
-    /** The root Component wrapper (undefined if mounting produced raw nodes). */
-    root: Component | undefined;
-    /** Tear down the application: dispose scopes, remove DOM nodes. */
+declare function createApp<P extends ComponentProps = {}>(component: ComponentFn<P>, target: string | Element): {
+    root: Component<{}> | undefined;
     unmount: () => void;
-}
-
-/**
- * Create a reusable template factory from an HTML string. Parsed once, cloned per call.
- * Caller is responsible for ensuring `html` is trusted.
- */
-declare function template(html: string): () => Node;
-declare function createApp<P extends ComponentProps = {}>(component: ComponentFn<P>): App;
-declare function createApp<P extends ComponentProps = {}, A extends string | Element | CreateAppOptions = string | Element | CreateAppOptions>(component: ComponentFn<P>, arg: A): A extends string | Element ? AppInstance | undefined : App;
-declare function hydrate<P extends ComponentProps = {}>(component: ComponentFn<P>, target: string | Element): AppInstance | undefined | Promise<AppInstance | undefined>;
-declare function definePlugin<T = void>(plugin: Plugin<T>): Plugin<T>;
+} | undefined;
+declare function hydrate<P extends ComponentProps = {}>(component: ComponentFn<P>, target: string | Element): {
+    root: Component<{}> | undefined;
+    unmount: () => void;
+} | undefined;
 
 type LifecycleHook = () => void | Promise<void>;
 /**
@@ -817,4 +772,4 @@ declare function TransitionGroup<T>(props: TransitionGroupProps<T>): Element;
  */
 declare function isTransitionGroup(node: unknown): boolean;
 
-export { type App, type AppConfig, type AppContext, type AppInstance, type AsyncComponentOptions, Component, type ComponentFn, type ComponentProps, type CreateAppOptions, type ErrorInfo, For, Fragment, InjectionKey, type Plugin, type PluginEntry, Portal, Suspense, Transition, TransitionGroup, type TransitionGroupProps, type TransitionProps, addEvent, addEventListener, beginHydration, bindElement, child, clearDelegatedEvents, consumeTeleportAnchor, consumeTeleportBlock, createApp, createComponent, createResource, defineAsyncComponent, definePlugin, delegateEvents, endHydration, getHydrationKey, getRenderedElement, hydrate, hydrationAnchor, hydrationMarker, insert, isComponent, isFragment, isHydrating, isPortal, isSuspense, isTransition, isTransitionGroup, next, normalizeClass, nthChild, omitProps, onDestroy, onMount, onUpdate, patchAttr, patchAttrHydrate, patchClass, patchClassHydrate, patchStyle, patchStyleHydrate, resetHydrationKey, setStyle, template };
+export { type AppInstance, type AsyncComponentOptions, Component, type ComponentFn, type ComponentProps, For, Fragment, Portal, Suspense, Transition, TransitionGroup, type TransitionGroupProps, type TransitionProps, addEvent, addEventListener, beginHydration, bindElement, child, clearDelegatedEvents, consumeTeleportAnchor, consumeTeleportBlock, createApp, createComponent, createResource, defineAsyncComponent, delegateEvents, endHydration, getHydrationKey, getRenderedElement, hydrate, hydrationAnchor, hydrationMarker, insert, isComponent, isFragment, isHydrating, isPortal, isSuspense, isTransition, isTransitionGroup, next, normalizeClass, nthChild, omitProps, onDestroy, onMount, onUpdate, patchAttr, patchAttrHydrate, patchClass, patchClassHydrate, patchStyle, patchStyleHydrate, resetHydrationKey, setStyle, template };

package/dist/template.dev.cjs

@@ -3,22 +3,9 @@
 var shared = require('@estjs/shared');
 var signals = require('@estjs/signals');
 
-var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1169,6 +1156,91 @@ function createComponent(componentFn, props) {
   }
   return new Component(componentFn, props);
 }
+
+// src/renderer.ts
+function template(html) {
+  let node;
+  const create = () => {
+    const template2 = document.createElement("template");
+    template2.innerHTML = html;
+    const firstChild = template2.content.firstChild;
+    if (!firstChild) {
+      throw new Error("Invalid template: empty content");
+    }
+    return firstChild;
+  };
+  return () => (node || (node = create())).cloneNode(true);
+}
+function createApp(component, target) {
+  const container = shared.isString(target) ? document.querySelector(target) : target;
+  if (!container) {
+    {
+      shared.warn(`Target element not found: ${target}`);
+    }
+    return;
+  }
+  const existingContent = container.innerHTML;
+  if (existingContent) {
+    {
+      shared.warn(`Target element is not empty, it will be cleared: ${target}`);
+    }
+    container.innerHTML = "";
+  }
+  const scope = createScope();
+  let rootNode;
+  try {
+    runWithScope(scope, () => {
+      const mountedRoot = createComponent(component);
+      if (isComponent(mountedRoot)) {
+        rootNode = mountedRoot;
+        insertNode(container, mountedRoot);
+      }
+    });
+  } catch (error_) {
+    disposeScope(scope);
+    throw error_;
+  }
+  return {
+    root: rootNode,
+    unmount: () => {
+      disposeScope(scope);
+      rootNode == null ? void 0 : rootNode.destroy();
+    }
+  };
+}
+function hydrate(component, target) {
+  const container = shared.isString(target) ? document.querySelector(target) : target;
+  if (!container) {
+    {
+      shared.warn(`[essor] hydrate: target element not found: ${target}`);
+    }
+    return;
+  }
+  beginHydration(container);
+  const scope = createScope();
+  let rootNode;
+  try {
+    runWithScope(scope, () => {
+      const mountedRoot = createComponent(component);
+      if (isComponent(mountedRoot)) {
+        rootNode = mountedRoot;
+        insert(container, mountedRoot);
+      }
+    });
+  } catch (error_) {
+    disposeScope(scope);
+    throw error_;
+  } finally {
+    endHydration();
+  }
+  return {
+    root: rootNode,
+    unmount: () => {
+      disposeScope(scope);
+      rootNode == null ? void 0 : rootNode.destroy();
+    }
+  };
+}
 function provide(key, value) {
   const scope = getActiveScope();
   if (!scope) {
@@ -1201,186 +1273,6 @@ function inject(key, defaultValue) {
   }
   return defaultValue;
 }
-
-// src/renderer.ts
-var VERSION = typeof __VERSION__ === "string" ? __VERSION__ : "";
-var ENFORCE_ORDER = { pre: 0, default: 1, post: 2 };
-function template(html) {
-  let node;
-  const create = () => {
-    const template2 = document.createElement("template");
-    template2.innerHTML = html;
-    const firstChild = template2.content.firstChild;
-    if (!firstChild) {
-      throw new Error("Invalid template: empty content");
-    }
-    return firstChild;
-  };
-  return () => (node || (node = create())).cloneNode(true);
-}
-function createApp(component, arg) {
-  if (shared.isString(arg) || arg instanceof Element) {
-    return buildApp(component).mount(arg);
-  }
-  return buildApp(component, arg);
-}
-function hydrate(component, target) {
-  return buildApp(component).hydrate(target);
-}
-function definePlugin(plugin) {
-  return plugin;
-}
-function buildApp(component, options) {
-  var _a2, _b;
-  const plugins = (_a2 = options == null ? void 0 : options.plugins) != null ? _a2 : [];
-  const config = __spreadValues({}, (_b = options == null ? void 0 : options.config) != null ? _b : {});
-  let mounted = false;
-  function mount(target, isHydrate) {
-    if (mounted) {
-      shared.warn("App is already mounted");
-      return;
-    }
-    mounted = true;
-    const container = shared.isString(target) ? document.querySelector(target) : target;
-    if (!container) {
-      {
-        shared.warn(`[essor] ${isHydrate ? "hydrate" : "createApp"}: target element not found: ${target}`);
-      }
-      return;
-    }
-    if (!isHydrate && container.innerHTML) {
-      shared.warn(`Target element is not empty, it will be cleared: ${target}`);
-      container.innerHTML = "";
-    }
-    const scope = createScope();
-    const mountHooks = [];
-    const seenNames = /* @__PURE__ */ new Set();
-    const seenRefs = /* @__PURE__ */ new Set();
-    let activePluginName;
-    let root;
-    function reportError(error5, info) {
-      if (config.errorHandler) config.errorHandler(info, error5);
-      else throw error5;
-    }
-    const ordered = plugins.map((entry, index) => ({ entry, index })).sort((a, b) => {
-      var _a3, _b2;
-      const pa = ENFORCE_ORDER[(_a3 = normalizePlugin(a.entry).enforce) != null ? _a3 : "default"];
-      const pb = ENFORCE_ORDER[(_b2 = normalizePlugin(b.entry).enforce) != null ? _b2 : "default"];
-      return pa - pb || a.index - b.index;
-    }).map((x) => x.entry);
-    function runSetup(plugin, opts) {
-      if (seenRefs.has(plugin) || seenNames.has(plugin.name)) {
-        shared.warn(`Plugin "${plugin.name}" is already registered, skipping`);
-        return;
-      }
-      seenRefs.add(plugin);
-      seenNames.add(plugin.name);
-      activePluginName = plugin.name;
-      try {
-        const result = plugin.setup(ctx, opts);
-        if (result instanceof Promise) {
-          const pinned = plugin.name;
-          return result.catch((error5) => reportError(error5, { phase: "install", plugin: pinned })).finally(() => {
-            if (activePluginName === pinned) activePluginName = void 0;
-          });
-        }
-        activePluginName = void 0;
-        return result;
-      } catch (error5) {
-        activePluginName = void 0;
-        reportError(error5, { phase: "install", plugin: plugin.name });
-      }
-    }
-    const ctx = {
-      provide,
-      inject,
-      onMount: (fn) => void mountHooks.push(fn),
-      onCleanup,
-      warn(message) {
-        const info = { plugin: activePluginName };
-        if (config.warnHandler) config.warnHandler(info, message);
-        else shared.warn(message);
-      },
-      error(message) {
-        throw new Error(message);
-      },
-      config,
-      version: VERSION
-    };
-    function finishMount() {
-      if (isHydrate) beginHydration(container);
-      try {
-        const node = createComponent(component);
-        if (isComponent(node)) {
-          root = node;
-          (isHydrate ? insert : insertNode)(container, node);
-        }
-      } finally {
-        if (isHydrate) endHydration();
-      }
-      for (const fn of mountHooks) {
-        try {
-          fn();
-        } catch (error5) {
-          reportError(error5, { phase: "mount" });
-        }
-      }
-      return {
-        root,
-        unmount() {
-          disposeScope(scope);
-          root == null ? void 0 : root.destroy();
-        }
-      };
-    }
-    let asyncTail;
-    try {
-      runWithScope(scope, () => {
-        for (const entry of ordered) {
-          const [plugin, opts] = unpack(entry);
-          if (asyncTail) {
-            asyncTail = asyncTail.then(
-              () => runWithScope(scope, () => {
-                const r = runSetup(plugin, opts);
-                return r instanceof Promise ? r : void 0;
-              })
-            );
-            continue;
-          }
-          const result = runSetup(plugin, opts);
-          if (result instanceof Promise) asyncTail = result;
-        }
-      });
-    } catch (error5) {
-      disposeScope(scope);
-      throw error5;
-    }
-    if (asyncTail) {
-      return asyncTail.then(() => runWithScope(scope, finishMount)).catch((error5) => {
-        disposeScope(scope);
-        throw error5;
-      });
-    }
-    try {
-      return runWithScope(scope, finishMount);
-    } catch (error5) {
-      disposeScope(scope);
-      throw error5;
-    }
-  }
-  const app = {
-    config,
-    mount: (target) => mount(target, false),
-    hydrate: (target) => mount(target, true)
-  };
-  return app;
-}
-function normalizePlugin(entry) {
-  return Array.isArray(entry) ? entry[0] : entry;
-}
-function unpack(entry) {
-  return Array.isArray(entry) ? [entry[0], entry[1]] : [entry, void 0];
-}
 function reTargetEvent(e, value) {
   Object.defineProperty(e, "target", {
     configurable: true,
@@ -3048,7 +2940,6 @@ exports.createApp = createApp;
 exports.createComponent = createComponent;
 exports.createResource = createResource;
 exports.defineAsyncComponent = defineAsyncComponent;
-exports.definePlugin = definePlugin;
 exports.delegateEvents = delegateEvents;
 exports.endHydration = endHydration;
 exports.getHydrationKey = getHydrationKey;