@estjs/template 0.0.16-beta.8 → 0.0.16

package/dist/template.d.ts

@@ -22,12 +22,21 @@ declare enum COMPONENT_TYPE {
     FRAGMENT = "fragment",
     PORTAL = "portal",
     SUSPENSE = "suspense",
-    FOR = "for"
+    FOR = "for",
+    TRANSITION = "transition",
+    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>;
@@ -171,20 +180,21 @@ declare function onDestroy(hook: LifecycleHook): void;
  * Modifiers for `bind:*` two-way bindings.
  *
  * - `trim`   — strip surrounding whitespace
- * - `number` — coerce numeric strings to numbers (no-op on NaN)
+ * - `number` — coerce numeric strings to numbers (no-op on NaN / blank)
  * - `lazy`   — commit on `change` instead of `input`
+ *
+ * Unknown keys are ignored at runtime; the compiler rejects them at build time.
  */
 interface BindModifiers {
     trim?: boolean;
     number?: boolean;
     lazy?: boolean;
-    [key: string]: boolean | undefined;
 }
 /**
  * Creates a two-way binding between a DOM element property and a reactive model.
  *
- * - **Model → DOM** — a reactive `effect()` pushes model changes to the element.
- * - **DOM → Model** — an event listener reads user input and calls `setter`.
+ * - Model → DOM via a reactive `effect()`.
+ * - DOM → Model via an event listener that calls `setter`.
  *
  * @param node      Target element. `null` is tolerated (no-op).
  * @param prop      Bound property (`value` / `checked` / `files` / custom).
@@ -198,13 +208,13 @@ declare function bindElement(node: Element | null, prop: 'value' | 'checked' | '
  * Set up event delegation for specified event types.
  *
  * @param eventNames - Array of event names to delegate.
- * @param document - Document to attach events to (defaults to window.document).
+ * @param document - Document to attach events to (defaults to the global document).
  */
 declare function delegateEvents(eventNames: string[], document?: Document): void;
 /**
  * Clear all delegated events from document.
  *
- * @param document - Document to clear events from (defaults to window.document).
+ * @param document - Document to clear events from (defaults to the global document).
  */
 declare function clearDelegatedEvents(document?: Document): void;
 /**
@@ -265,17 +275,7 @@ declare function next(node: Node | null, step?: number): Node | null;
  */
 declare function nthChild(node: Node | null, index: number): Node | null;
 
-/**
- * Returns a new hydration key.
- *
- * @returns The new hydration key as a string.
- */
 declare function getHydrationKey(): string;
-/**
- * Resets the client-side hydration key counter.
- *
- * @returns {void}
- */
 declare function resetHydrationKey(): void;
 /**
  * Returns whether the runtime is currently in the hydration first-pass.
@@ -303,6 +303,8 @@ declare function beginHydration(root: Element): void;
  * @returns {void}
  */
 declare function endHydration(): void;
+declare function hydrationMarker(parent: Node | null, index: number): Comment | null;
+declare function hydrationAnchor(parent: Node | null, index: number): Node | null;
 /**
  * Returns a factory function that, when called at component render time:
  * - During hydration: increments the key, looks up the pre-built registry,
@@ -678,4 +680,96 @@ interface ForProps<T> {
 declare function For<T>(props: ForProps<T>): Node;
 declare namespace For { }
 
-export { type AsyncComponentOptions, Component, type ComponentFn, type ComponentProps, For, Fragment, Portal, Suspense, addEvent, addEventListener, beginHydration, bindElement, child, clearDelegatedEvents, consumeTeleportAnchor, consumeTeleportBlock, createApp, createComponent, createResource, defineAsyncComponent, delegateEvents, endHydration, getHydrationKey, getRenderedElement, hydrate, insert, isComponent, isFragment, isHydrating, isPortal, isSuspense, next, normalizeClass, nthChild, omitProps, onDestroy, onMount, onUpdate, patchAttr, patchAttrHydrate, patchClass, patchClassHydrate, patchStyle, patchStyleHydrate, resetHydrationKey, setStyle, template };
+interface TransitionProps {
+    name?: string;
+    css?: boolean;
+    type?: 'transition' | 'animation';
+    appear?: boolean;
+    duration?: number | {
+        enter: number;
+        leave: number;
+    };
+    enterFromClass?: string;
+    enterActiveClass?: string;
+    enterToClass?: string;
+    appearFromClass?: string;
+    appearActiveClass?: string;
+    appearToClass?: string;
+    leaveFromClass?: string;
+    leaveActiveClass?: string;
+    leaveToClass?: string;
+    onBeforeEnter?: (el: Element) => void;
+    onEnter?: (el: Element, done: () => void) => void;
+    onAfterEnter?: (el: Element) => void;
+    onEnterCancelled?: (el: Element) => void;
+    onBeforeLeave?: (el: Element) => void;
+    onLeave?: (el: Element, done: () => void) => void;
+    onAfterLeave?: (el: Element) => void;
+    onLeaveCancelled?: (el: Element) => void;
+    children?: AnyNode | (() => AnyNode);
+}
+declare function Transition(props: TransitionProps): Node;
+/**
+ * Check if a node is a Transition component.
+ *
+ * @param node - Node to check.
+ * @returns True if node is a Transition.
+ */
+declare function isTransition(node: unknown): boolean;
+
+/**
+ * Props for `<TransitionGroup>`.
+ *
+ * Inherits every enter/leave knob from {@link TransitionProps} (name, css,
+ * type, duration, JS hooks, custom class overrides) and adds:
+ *
+ * - `each` / `key` — same shape as `<For>`; required for stable identity.
+ * - `tag` — wrapper element. Required so we have a layout root to measure
+ *   positions against and to anchor leaving items absolutely. Defaults to
+ *   `'div'`.
+ * - `moveClass` — class applied to elements during the FLIP move animation.
+ *   Defaults to `${name}-move`.
+ * - `children` — render function per item. May return an Element or a
+ *   Component instance (the latter is mounted, its first rendered Element
+ *   participates in the animations).
+ *
+ * `appear` is intentionally NOT supported: items mounted on the initial
+ * render do NOT animate. The appear-related props from {@link TransitionProps}
+ * are therefore omitted from this type. If you need first-frame animation,
+ * mount the group with an empty list and push items after mount.
+ */
+type GroupBaseProps = Omit<TransitionProps, 'children' | 'appear' | 'appearFromClass' | 'appearActiveClass' | 'appearToClass'>;
+interface TransitionGroupProps<T = unknown> extends GroupBaseProps {
+    each: T[] | Signal<T[]> | (() => T[]);
+    key: (item: T, index: number) => unknown;
+    tag?: string;
+    moveClass?: string;
+    children: (item: T, index: number) => unknown;
+}
+/**
+ * Animated keyed list with three coordinated animations:
+ *
+ *   - **enter** — new items fade/slide in using `${name}-enter-*` classes
+ *   - **leave** — removed items animate out (positioned absolutely so the
+ *     remaining items can reflow under FLIP), then are detached
+ *   - **move** — items that stayed but changed position run FLIP: snapshot
+ *     `getBoundingClientRect()` before reconcile, compute delta after,
+ *     invert via `transform`, then transition to identity under `moveClass`
+ *
+ * Each row owns its own scope (mirroring `<For>`), so signals/effects
+ * created inside `children()` are torn down when the row leaves.
+ *
+ * @example
+ * ```tsx
+ * <TransitionGroup name="list" each={items} key={(it) => it.id} tag="ul">
+ *   {(item) => <li>{item.label}</li>}
+ * </TransitionGroup>
+ * ```
+ */
+declare function TransitionGroup<T>(props: TransitionGroupProps<T>): Element;
+/**
+ * Type guard for the TransitionGroup component reference.
+ */
+declare function isTransitionGroup(node: unknown): boolean;
+
+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 };