@jasonshimmy/custom-elements-runtime 0.3.0 → 0.3.1

package/dist/directive-enhancements.d.ts

@@ -0,0 +1,138 @@
+import type { VNode } from "./runtime/types";
+/**
+ * Conditional rendering with negated condition (opposite of when)
+ * @param cond - Boolean condition to negate
+ * @param children - Content to render when condition is false
+ */
+export declare function unless(cond: boolean, children: VNode | VNode[]): VNode;
+/**
+ * Render content only if array/collection is empty
+ * @param collection - Array or collection to check
+ * @param children - Content to render when empty
+ */
+export declare function whenEmpty(collection: any[] | null | undefined, children: VNode | VNode[]): VNode;
+/**
+ * Render content only if array/collection has items
+ * @param collection - Array or collection to check
+ * @param children - Content to render when not empty
+ */
+export declare function whenNotEmpty(collection: any[] | null | undefined, children: VNode | VNode[]): VNode;
+/**
+ * Enhanced each with filtering capability
+ * @param list - Array to iterate over
+ * @param predicate - Filter function (optional)
+ * @param render - Render function for each item
+ */
+export declare function eachWhere<T>(list: T[], predicate: (item: T, index: number) => boolean, render: (item: T, index: number, filteredIndex: number) => VNode | VNode[]): VNode[];
+/**
+ * Render different content based on array length
+ * @param list - Array to check
+ * @param cases - Object with length-based cases
+ */
+export declare function switchOnLength<T>(list: T[], cases: {
+    empty?: VNode | VNode[];
+    one?: (item: T) => VNode | VNode[];
+    many?: (items: T[]) => VNode | VNode[];
+    exactly?: {
+        [count: number]: (items: T[]) => VNode | VNode[];
+    };
+}): VNode;
+/**
+ * Group array items and render each group
+ * @param list - Array to group
+ * @param groupBy - Function to determine group key
+ * @param renderGroup - Function to render each group
+ */
+export declare function eachGroup<T, K extends string | number>(list: T[], groupBy: (item: T) => K, renderGroup: (groupKey: K, items: T[], groupIndex: number) => VNode | VNode[]): VNode[];
+/**
+ * Render with pagination/chunking
+ * @param list - Array to chunk
+ * @param pageSize - Items per page/chunk
+ * @param currentPage - Current page (0-based)
+ * @param render - Render function for visible items
+ */
+export declare function eachPage<T>(list: T[], pageSize: number, currentPage: number, render: (item: T, index: number, pageIndex: number) => VNode | VNode[]): VNode[];
+/**
+ * Render content based on Promise state
+ * @param promiseState - Object with loading, data, error states
+ * @param cases - Render functions for each state
+ */
+export declare function switchOnPromise<T, E = Error>(promiseState: {
+    loading?: boolean;
+    data?: T;
+    error?: E;
+}, cases: {
+    loading?: VNode | VNode[];
+    success?: (data: T) => VNode | VNode[];
+    error?: (error: E) => VNode | VNode[];
+    idle?: VNode | VNode[];
+}): VNode;
+/**
+ * Render content based on screen size/media query
+ * @param mediaQuery - CSS media query string
+ * @param children - Content to render when media query matches
+ */
+export declare function whenMedia(mediaQuery: string, children: VNode | VNode[]): VNode;
+/**
+ * Media variants matching those in style.ts
+ */
+export declare const mediaVariants: {
+    readonly sm: "(min-width:640px)";
+    readonly md: "(min-width:768px)";
+    readonly lg: "(min-width:1024px)";
+    readonly xl: "(min-width:1280px)";
+    readonly "2xl": "(min-width:1536px)";
+    readonly dark: "(prefers-color-scheme: dark)";
+};
+/**
+ * Responsive order matching style.ts
+ */
+export declare const responsiveOrder: readonly ["sm", "md", "lg", "xl", "2xl"];
+/**
+ * Individual responsive directives matching the style.ts breakpoint system
+ */
+export declare const responsive: {
+    readonly sm: (children: VNode | VNode[]) => VNode;
+    readonly md: (children: VNode | VNode[]) => VNode;
+    readonly lg: (children: VNode | VNode[]) => VNode;
+    readonly xl: (children: VNode | VNode[]) => VNode;
+    readonly "2xl": (children: VNode | VNode[]) => VNode;
+    readonly dark: (children: VNode | VNode[]) => VNode;
+    readonly light: (children: VNode | VNode[]) => VNode;
+    readonly touch: (children: VNode | VNode[]) => VNode;
+    readonly mouse: (children: VNode | VNode[]) => VNode;
+    readonly reducedMotion: (children: VNode | VNode[]) => VNode;
+    readonly highContrast: (children: VNode | VNode[]) => VNode;
+    readonly portrait: (children: VNode | VNode[]) => VNode;
+    readonly landscape: (children: VNode | VNode[]) => VNode;
+};
+/**
+ * Advanced responsive directive that matches the style.ts multi-variant processing
+ * Allows chaining responsive and dark mode conditions like in CSS classes
+ * @param variants - Array of variant keys (e.g., ['dark', 'lg'])
+ * @param children - Content to render when all variants match
+ */
+export declare function whenVariants(variants: Array<keyof typeof mediaVariants | 'light'>, children: VNode | VNode[]): VNode;
+/**
+ * Responsive switch directive - render different content for different breakpoints
+ * Mirrors the responsive behavior from the style system
+ * @param content - Object with breakpoint keys and corresponding content
+ */
+export declare function responsiveSwitch(content: {
+    base?: VNode | VNode[];
+    sm?: VNode | VNode[];
+    md?: VNode | VNode[];
+    lg?: VNode | VNode[];
+    xl?: VNode | VNode[];
+    "2xl"?: VNode | VNode[];
+}): VNode[];
+/**
+ * Enhanced match directive with more fluent API
+ * @param value - Value to match against
+ */
+export declare function switchOn<T>(value: T): {
+    case(matcher: T | ((val: T) => boolean), content: VNode | VNode[]): /*elided*/ any;
+    when(predicate: (val: T) => boolean, content: VNode | VNode[]): /*elided*/ any;
+    otherwise(content: VNode | VNode[]): /*elided*/ any;
+    done(): VNode;
+};

package/dist/directives.d.ts

@@ -9,3 +9,8 @@ export declare function match(): {
     otherwise(content: VNode | VNode[]): /*elided*/ any;
     done(): VNode[];
 };
+/**
+ * Create a stable anchor block with consistent boundaries.
+ * Always has start/end boundaries.
+ */
+export declare function anchorBlock(children: VNode | VNode[] | null | undefined, anchorKey: string): VNode;

package/dist/index.d.ts

@@ -6,6 +6,7 @@
  */
 export * from "./runtime/types";
 export * from "./directives";
+export * from "./directive-enhancements";
 export * from "./event-bus";
 export * from "./store";
 export * from "./router";

package/dist/runtime/logger.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Development-only logging utilities
+ * These are stripped out in production builds via bundler configuration
+ */
+/**
+ * Log error only in development mode
+ */
+export declare function devError(message: string, ...args: any[]): void;
+/**
+ * Log warning only in development mode
+ */
+export declare function devWarn(message: string, ...args: any[]): void;
+/**
+ * Log info only in development mode
+ */
+export declare function devLog(message: string, ...args: any[]): void;

package/dist/runtime/scheduler.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Update Scheduler for batching DOM updates
+ * Prevents excessive re-renders and improves performance
+ */
+declare class UpdateScheduler {
+    private pendingUpdates;
+    private isFlushScheduled;
+    /**
+     * Schedule an update to be executed in the next microtask
+     * Uses component identity to deduplicate multiple render requests for the same component
+     */
+    schedule(update: () => void, componentId?: string): void;
+    /**
+     * Execute all pending updates
+     */
+    private flush;
+    /**
+     * Get the number of pending updates
+     */
+    get pendingCount(): number;
+}
+export declare const updateScheduler: UpdateScheduler;
+/**
+ * Schedule a DOM update to be batched with optional component identity
+ */
+export declare function scheduleDOMUpdate(update: () => void, componentId?: string): void;
+export {};

package/dist/runtime/vdom.d.ts

@@ -31,7 +31,7 @@ export declare function processModelDirective(value: string, modifiers: string[]
  * @param context
  * @returns
  */
-export declare function processBindDirective(value: string, 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): void;
 /**
  * Process :show directive for conditional display
  * @param value
@@ -39,15 +39,8 @@ export declare function processBindDirective(value: string, props: Record<string
  * @param context
  * @returns
  */
-export declare function processShowDirective(value: string, attrs: Record<string, any>, context?: any): void;
-/**
- * Process :class directive for conditional CSS classes
- * @param value
- * @param attrs
- * @param context
- * @returns
- */
-export declare function processClassDirective(value: string, attrs: Record<string, any>, context?: any): void;
+export declare function processShowDirective(value: any, attrs: Record<string, any>, context?: any): void;
+export declare function processClassDirective(value: any, attrs: Record<string, any>, context?: any): void;
 /**
  * Process :style directive for dynamic inline styles
  * @param value

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.3.0",
+  "version": "0.3.1",
   "type": "module",
   "keywords": [
     "web-components",