@jasonshimmy/custom-elements-runtime 1.1.0 → 1.1.2

package/dist/index.d.ts

@@ -16,3 +16,4 @@ export * from "./directive-enhancements";
 export * from "./event-bus";
 export * from "./store";
 export * from "./router";
+export * from "./transitions";

package/dist/runtime/component.d.ts

@@ -20,18 +20,19 @@ export declare function createElementClass<S extends object, C extends object, P
  *   return html`<h1>Hello World</h1>`;
  * });
  *
- * // With props only
- * component('with-props', ({ message = 'Hello' }) => {
+ * // With props using useProps() hook
+ * component('with-props', () => {
+ *   const { message } = useProps({ message: 'Hello' });
  *   return html`<div>${message}</div>`;
  * });
  *
- * // With props and hooks
- * component('my-switch', ({
- *   modelValue = false,
- *   label = ''
- * }, { emit, onConnected, onDisconnected }) => {
- *   onConnected(() => console.log('Switch connected!'));
- *   onDisconnected(() => console.log('Switch disconnected!'));
+ * // With props and lifecycle hooks
+ * component('my-switch', () => {
+ *   const { modelValue, label } = useProps({ modelValue: false, label: '' });
+ *   const emit = useEmit();
+ *
+ *   useOnConnected(() => console.log('Switch connected!'));
+ *   useOnDisconnected(() => console.log('Switch disconnected!'));
  *
  *   return html`
  *     <label>
@@ -47,4 +48,3 @@ export declare function createElementClass<S extends object, C extends object, P
  * ```
  */
 export declare function component(tag: string, renderFn: () => VNode | VNode[] | Promise<VNode | VNode[]>): void;
-export declare function component<TProps extends Record<string, any> = {}>(tag: string, renderFn: (props: TProps) => VNode | VNode[] | Promise<VNode | VNode[]>): void;

package/dist/runtime/event-manager.d.ts

@@ -31,28 +31,14 @@ declare class EventManager {
      * Get the number of tracked event listeners for an element
      */
     static getListenerCount(element: HTMLElement): number;
-}
-/**
- * Enhanced event listener tracker that stores more metadata
- * for better debugging and cleanup
- */
-interface EventListenerMetadata {
-    event: string;
-    handler: EventListener;
-    options?: AddEventListenerOptions;
-    cleanup: () => void;
-    addedAt: number;
-}
-declare class DetailedEventManager {
-    private static listeners;
-    static addListener(element: HTMLElement, event: string, handler: EventListener, options?: AddEventListenerOptions): void;
-    static removeListener(element: HTMLElement, event: string, handler: EventListener, options?: EventListenerOptions): boolean;
-    static cleanup(element: HTMLElement): void;
-    static getListenerInfo(element: HTMLElement): EventListenerMetadata[];
-    static findStaleListeners(_maxAge?: number): Array<{
-        element: HTMLElement;
-        listeners: EventListenerMetadata[];
+    /**
+     * Return listener metadata stored for the element (test/debug only)
+     */
+    static getListenerInfo(element: HTMLElement): Array<{
+        event: string;
+        handler?: Function;
+        wrapper?: Function;
+        options?: any;
     }>;
 }
-export { EventManager, DetailedEventManager };
-export type { EventListenerMetadata };
+export { EventManager };

package/dist/runtime/helpers.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Safe execution helper - silently ignores errors
+ */
+export declare const safe: (fn: () => void) => void;
 /**
  * Convert camelCase to kebab-case with caching
  */

package/dist/runtime/hooks.d.ts

@@ -18,7 +18,8 @@ export declare function clearCurrentComponentContext(): void;
  *
  * @example
  * ```ts
- * component('my-button', ({ label = 'Click me' }) => {
+ * component('my-button', () => {
+ *   const { label } = useProps({ label: 'Click me' });
  *   const emit = useEmit();
  *
  *   return html`
@@ -121,7 +122,9 @@ export declare function useProps<T extends Record<string, any>>(defaults: T): T;
  * ```ts
  * import { css } from '@lib/style';
  *
- * component('my-component', ({ theme = 'light' }) => {
+ * component('my-component', () => {
+ *   const { theme } = useProps({ theme: 'light' });
+ *
  *   useStyle(() => css`
  *     :host {
  *       background: ${theme === 'light' ? 'white' : 'black'};

package/dist/runtime/reactive.d.ts

@@ -3,12 +3,9 @@
  */
 declare class ReactiveSystem {
     private currentComponent;
-    private componentDependencies;
-    private componentRenderFunctions;
+    private componentData;
     private stateStorage;
-    private stateIndexCounter;
     private trackingDisabled;
-    private lastWarningTime;
     /**
      * Set the current component being rendered for dependency tracking
      */

package/dist/runtime/scheduler.d.ts

@@ -1,7 +1,3 @@
-/**
- * Update Scheduler for batching DOM updates
- * Prevents excessive re-renders and improves performance
- */
 declare class UpdateScheduler {
     private pendingUpdates;
     private isFlushScheduled;

package/dist/runtime/style.d.ts

@@ -25,6 +25,7 @@ export declare const containerVariants: MediaVariantMap;
 export declare const responsiveOrder: string[];
 export declare const containerOrder: string[];
 export declare function parseSpacing(className: string): string | null;
+export declare function parseSpaceUtility(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): {
@@ -33,7 +34,7 @@ export declare function parseOpacityModifier(className: string): {
 };
 export declare function parseColorWithOpacity(className: string): string | null;
 /**
- * Parse gradient color stop utilities like from-red-500, to-blue-600, via-green-400
+ * Parse gradient color stop utilities like from-error-500, to-primary-600, via-success-400
  */
 export declare function parseGradientColorStop(className: string): string | null;
 export declare function parseOpacity(className: string): string | null;

package/dist/runtime/transition-utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Perform enter transition on an element
+ */
+export declare function performEnterTransition(el: HTMLElement, transitionMeta: any): Promise<void>;
+/**
+ * Perform leave transition on an element
+ */
+export declare function performLeaveTransition(el: HTMLElement, transitionMeta: any): Promise<void>;
+/**
+ * Cancel ongoing transition
+ */
+export declare function cancelTransition(el: HTMLElement, isEnter: boolean, transitionMeta: any): void;

package/dist/runtime/types.d.ts

@@ -17,6 +17,8 @@ export interface VNode {
         reactiveRef?: any;
         /** Compiler-provided hint: whether this VNode represents a custom element (contains a dash) */
         isCustomElement?: boolean;
+        /** Transition group metadata */
+        _transitionGroup?: any;
     };
     children?: VNode[] | string;
 }

package/dist/runtime/vdom-model-helpers.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Helper functions for model binding updates in vdom.ts
+ * Extracted to reduce code duplication and improve maintainability
+ */
+/**
+ * Check if two values have changed, handling arrays specially
+ */
+export declare function hasValueChanged(newValue: any, currentValue: any): boolean;
+/**
+ * Update state value (reactive or path-based)
+ */
+export declare function updateStateValue(isReactive: boolean, value: any, newValue: any, context: any, arg?: string): void;
+/**
+ * Trigger render and watchers after state update
+ */
+export declare function triggerStateUpdate(context: any, isReactive: boolean, value: any, newValue: any): void;
+/**
+ * Emit custom update events (both kebab-case and camelCase)
+ */
+export declare function emitUpdateEvents(target: HTMLElement, propName: string, newValue: any): void;
+/**
+ * Update element properties and attributes to sync with state
+ */
+export declare function syncElementWithState(target: any, propName: string, propValue: any, isReactive: boolean): void;
+/**
+ * Get current state value (reactive or path-based)
+ */
+export declare function getCurrentStateValue(isReactive: boolean, value: any, context: any, arg?: string): any;

package/dist/runtime/vdom.d.ts

@@ -31,7 +31,7 @@ export declare function processModelDirective(value: string | any, modifiers: st
  * @param context
  * @returns
  */
-export declare function processBindDirective(value: any, props: Record<string, any>, attrs: Record<string, any>, context?: any): void;
+export declare function processBindDirective(value: any, props: Record<string, any>, attrs: Record<string, any>, context?: any, el?: HTMLElement): void;
 /**
  * Process :show directive for conditional display
  * @param value

package/dist/transitions.d.ts

@@ -0,0 +1,261 @@
+/**
+ * Transitions Module
+ * Vue-like transition system integrated with JIT CSS
+ * Provides Transition and TransitionGroup components for enter/leave animations
+ */
+import type { VNode } from './runtime/types';
+/**
+ * Transition class names for different animation phases
+ * All values should be JIT CSS utility classes
+ */
+export interface TransitionClasses {
+    /** Classes applied at the start of enter transition */
+    enterFrom?: string;
+    /** Classes applied during entire enter transition */
+    enterActive?: string;
+    /** Classes applied at the end of enter transition */
+    enterTo?: string;
+    /** Classes applied at the start of leave transition */
+    leaveFrom?: string;
+    /** Classes applied during entire leave transition */
+    leaveActive?: string;
+    /** Classes applied at the end of leave transition */
+    leaveTo?: string;
+}
+/**
+ * Lifecycle hooks for transition events
+ */
+export interface TransitionHooks {
+    /** Called before enter transition starts */
+    onBeforeEnter?: (el: HTMLElement) => void;
+    /** Called during enter transition (with done callback for manual control) */
+    onEnter?: (el: HTMLElement, done: () => void) => void;
+    /** Called after enter transition completes */
+    onAfterEnter?: (el: HTMLElement) => void;
+    /** Called if enter transition is cancelled */
+    onEnterCancelled?: (el: HTMLElement) => void;
+    /** Called before leave transition starts */
+    onBeforeLeave?: (el: HTMLElement) => void;
+    /** Called during leave transition (with done callback for manual control) */
+    onLeave?: (el: HTMLElement, done: () => void) => void;
+    /** Called after leave transition completes */
+    onAfterLeave?: (el: HTMLElement) => void;
+    /** Called if leave transition is cancelled */
+    onLeaveCancelled?: (el: HTMLElement) => void;
+}
+/**
+ * Options for Transition component
+ */
+export interface TransitionOptions extends TransitionClasses, TransitionHooks {
+    /** Preset name (fade, slide-right, scale, etc.) */
+    preset?: keyof typeof transitionPresets;
+    /** Whether to show the content */
+    show: boolean;
+    /** Transition mode: default, out-in (leave before enter), in-out (enter before leave) */
+    mode?: 'default' | 'out-in' | 'in-out';
+    /** Custom duration override (ms) */
+    duration?: number | {
+        enter: number;
+        leave: number;
+    };
+    /** Whether to apply transition on initial render */
+    appear?: boolean;
+    /** Whether to use CSS transitions (true) or JS-only hooks (false) */
+    css?: boolean;
+    /** Optional name for debugging */
+    name?: string;
+}
+/**
+ * Options for TransitionGroup component
+ */
+export interface TransitionGroupOptions extends Omit<TransitionOptions, 'show'> {
+    /** HTML tag for the wrapper element */
+    tag?: string;
+    /** Class applied during move transitions (when items reorder) */
+    moveClass?: string;
+    /** Whether to show the group (defaults to true for TransitionGroup) */
+    show?: boolean;
+    /** CSS classes to apply to the wrapper element (e.g., 'flex gap-4' or 'grid grid-cols-3') */
+    class?: string;
+    /** Inline styles to apply to the wrapper element */
+    style?: string | Record<string, string>;
+}
+/**
+ * Pre-defined transition presets using JIT CSS classes
+ * Users can reference these by name or define custom classes
+ */
+export declare const transitionPresets: {
+    /** Simple fade in/out */
+    readonly fade: {
+        readonly enterFrom: "opacity-0";
+        readonly enterActive: "transition-opacity duration-300 ease-out";
+        readonly enterTo: "opacity-100";
+        readonly leaveFrom: "opacity-100";
+        readonly leaveActive: "transition-opacity duration-200 ease-in";
+        readonly leaveTo: "opacity-0";
+    };
+    /** Slide in from right */
+    readonly 'slide-right': {
+        readonly enterFrom: "translate-x-[100%] opacity-0";
+        readonly enterActive: "transition-all duration-300 ease-out";
+        readonly enterTo: "translate-x-[0%] opacity-100";
+        readonly leaveFrom: "translate-x-[0%] opacity-100";
+        readonly leaveActive: "transition-all duration-200 ease-in";
+        readonly leaveTo: "translate-x-[100%] opacity-0";
+    };
+    /** Slide in from left */
+    readonly 'slide-left': {
+        readonly enterFrom: "translate-x-[-100%] opacity-0";
+        readonly enterActive: "transition-all duration-300 ease-out";
+        readonly enterTo: "translate-x-[0%] opacity-100";
+        readonly leaveFrom: "translate-x-[0%] opacity-100";
+        readonly leaveActive: "transition-all duration-200 ease-in";
+        readonly leaveTo: "translate-x-[-100%] opacity-0";
+    };
+    /** Slide up from bottom */
+    readonly 'slide-up': {
+        readonly enterFrom: "translate-y-[100%] opacity-0";
+        readonly enterActive: "transition-all duration-300 ease-out";
+        readonly enterTo: "translate-y-[0%] opacity-100";
+        readonly leaveFrom: "translate-y-[0%] opacity-100";
+        readonly leaveActive: "transition-all duration-200 ease-in";
+        readonly leaveTo: "translate-y-[100%] opacity-0";
+    };
+    /** Slide down from top */
+    readonly 'slide-down': {
+        readonly enterFrom: "translate-y-[-100%] opacity-0";
+        readonly enterActive: "transition-all duration-300 ease-out";
+        readonly enterTo: "translate-y-[0%] opacity-100";
+        readonly leaveFrom: "translate-y-[0%] opacity-100";
+        readonly leaveActive: "transition-all duration-200 ease-in";
+        readonly leaveTo: "translate-y-[-100%] opacity-0";
+    };
+    /** Scale up from center */
+    readonly scale: {
+        readonly enterFrom: "scale-95 opacity-0";
+        readonly enterActive: "transition-all duration-200 ease-out";
+        readonly enterTo: "scale-100 opacity-100";
+        readonly leaveFrom: "scale-100 opacity-100";
+        readonly leaveActive: "transition-all duration-150 ease-in";
+        readonly leaveTo: "scale-95 opacity-0";
+    };
+    /** Scale down to center */
+    readonly 'scale-down': {
+        readonly enterFrom: "scale-105 opacity-0";
+        readonly enterActive: "transition-all duration-200 ease-out";
+        readonly enterTo: "scale-100 opacity-100";
+        readonly leaveFrom: "scale-100 opacity-100";
+        readonly leaveActive: "transition-all duration-150 ease-in";
+        readonly leaveTo: "scale-105 opacity-0";
+    };
+    /** Bounce effect */
+    readonly bounce: {
+        readonly enterFrom: "scale-0 opacity-0";
+        readonly enterActive: "transition-all duration-500 ease-out";
+        readonly enterTo: "scale-100 opacity-100";
+        readonly leaveFrom: "scale-100 opacity-100";
+        readonly leaveActive: "transition-all duration-200 ease-in";
+        readonly leaveTo: "scale-0 opacity-0";
+    };
+    /** Zoom and fade */
+    readonly zoom: {
+        readonly enterFrom: "scale-0 opacity-0";
+        readonly enterActive: "transition-all duration-300 ease-out";
+        readonly enterTo: "scale-100 opacity-100";
+        readonly leaveFrom: "scale-100 opacity-100";
+        readonly leaveActive: "transition-all duration-200 ease-in";
+        readonly leaveTo: "scale-0 opacity-0";
+    };
+    /** Flip in */
+    readonly flip: {
+        readonly enterFrom: "rotate-[90deg] opacity-0";
+        readonly enterActive: "transition-all duration-400 ease-out";
+        readonly enterTo: "rotate-[0deg] opacity-100";
+        readonly leaveFrom: "rotate-[0deg] opacity-100";
+        readonly leaveActive: "transition-all duration-300 ease-in";
+        readonly leaveTo: "rotate-[90deg] opacity-0";
+    };
+};
+/**
+ * Transition component - wraps content with enter/leave animations
+ *
+ * @example
+ * ```ts
+ * // Using a preset
+ * ${Transition({ preset: 'fade', show: isVisible.value }, html`<div>Content</div>`)}
+ *
+ * // Using custom JIT classes
+ * ${Transition({
+ *   show: isVisible.value,
+ *   enterFrom: 'opacity-0 scale-95',
+ *   enterActive: 'transition-all duration-300',
+ *   enterTo: 'opacity-100 scale-100',
+ *   leaveFrom: 'opacity-100 scale-100',
+ *   leaveActive: 'transition-all duration-200',
+ *   leaveTo: 'opacity-0 scale-95'
+ * }, html`<div>Content</div>`)}
+ *
+ * // With lifecycle hooks
+ * ${Transition({
+ *   preset: 'slide-right',
+ *   show: isVisible.value,
+ *   onAfterEnter: (el) => console.log('Entered!'),
+ *   onAfterLeave: (el) => console.log('Left!')
+ * }, html`<div>Content</div>`)}
+ * ```
+ */
+export declare function Transition(options: TransitionOptions, content: VNode | VNode[]): VNode;
+/**
+ * TransitionGroup component - animates lists with enter/leave/move transitions
+ *
+ * @example
+ * ```ts
+ * // Basic usage
+ * ${TransitionGroup({
+ *   preset: 'slide-right',
+ *   tag: 'ul',
+ *   moveClass: 'transition-transform duration-300'
+ * }, each(items.value, (item) => html`
+ *   <li key="${item.id}">${item.text}</li>
+ * `))}
+ *
+ * // With flex layout
+ * ${TransitionGroup({
+ *   preset: 'fade',
+ *   class: 'flex gap-4 flex-wrap'
+ * }, each(items.value, (item) => html`
+ *   <div key="${item.id}" class="flex-shrink-0">${item.text}</div>
+ * `))}
+ *
+ * // With grid layout
+ * ${TransitionGroup({
+ *   preset: 'scale',
+ *   class: 'grid grid-cols-3 gap-4'
+ * }, each(items.value, (item) => html`
+ *   <div key="${item.id}">${item.text}</div>
+ * `))}
+ * ```
+ */
+export declare function TransitionGroup(options: TransitionGroupOptions, children: VNode[]): VNode;
+/**
+ * Helper to create custom transition presets
+ *
+ * @example
+ * ```ts
+ * const customFade = createTransitionPreset({
+ *   enterFrom: 'opacity-0',
+ *   enterActive: 'transition-opacity duration-500 ease-out',
+ *   enterTo: 'opacity-100',
+ *   leaveFrom: 'opacity-100',
+ *   leaveActive: 'transition-opacity duration-300 ease-in',
+ *   leaveTo: 'opacity-0'
+ * });
+ *
+ * ${Transition({ ...customFade, show: visible.value }, content)}
+ * ```
+ */
+export declare function createTransitionPreset(classes: TransitionClasses): TransitionClasses;
+/**
+ * Get the global transition stylesheet (creates it if needed)
+ */
+export declare function getTransitionStyleSheet(): CSSStyleSheet;

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": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "keywords": [
     "web-components",