@sigx/runtime-terminal 0.1.3 → 0.1.4

package/dist/index.js

@@ -1,10 +1,10 @@
 //#region ../runtime-core/src/plugins.ts
-const plugins = [];
+const plugins$1 = [];
 /**
 * Get all registered plugins (internal use)
 */
-function getComponentPlugins() {
-	return plugins;
+function getComponentPlugins$1() {
+	return plugins$1;
 }
 
 //#endregion
@@ -119,7 +119,7 @@ function onCleanup(fn) {
 	if (currentComponentContext) currentComponentContext.onCleanup(fn);
 	else console.warn("onCleanup called outside of component setup");
 }
-const componentRegistry = /* @__PURE__ */ new Map();
+const componentRegistry$1 = /* @__PURE__ */ new Map();
 /**
 * Define a component. Returns a JSX factory function.
 * 
@@ -159,11 +159,11 @@ function defineComponent(setup, options) {
 	factory.__events = null;
 	factory.__ref = null;
 	factory.__slots = null;
-	componentRegistry.set(factory, {
+	componentRegistry$1.set(factory, {
 		name: options?.name,
 		setup
 	});
-	getComponentPlugins().forEach((p) => p.onDefine?.(options?.name, factory, setup));
+	getComponentPlugins$1().forEach((p) => p.onDefine?.(options?.name, factory, setup));
 	return factory;
 }
 
@@ -186,15 +186,17 @@ function batch(fn) {
 	}
 }
 function runEffect(fn) {
-	const effect$1 = function() {
-		cleanup(effect$1);
-		activeEffect = effect$1;
+	const effectFn = function() {
+		cleanup(effectFn);
+		activeEffect = effectFn;
 		fn();
 		activeEffect = null;
 	};
-	effect$1.deps = [];
-	effect$1();
-	return () => cleanup(effect$1);
+	effectFn.deps = [];
+	effectFn();
+	const runner = (() => effectFn());
+	runner.stop = () => cleanup(effectFn);
+	return runner;
 }
 function cleanup(effect$1) {
 	if (!effect$1.deps) return;
@@ -330,6 +332,103 @@ const arrayInstrumentations = {};
 const Fragment$1 = Symbol.for("sigx.Fragment");
 const Text$1 = Symbol.for("sigx.Text");
 
+//#endregion
+//#region ../runtime-core/src/lazy.tsx
+/**
+* Lazy loading utilities for sigx components.
+* 
+* Provides runtime-only lazy loading with no build dependencies.
+* Works with any bundler that supports dynamic import().
+*/
+let currentSuspenseBoundary$1 = null;
+/**
+* Register a promise with the current Suspense boundary
+* @internal
+*/
+function registerPendingPromise$1(promise) {
+	const boundary = currentSuspenseBoundary$1;
+	if (boundary) {
+		boundary.pending.add(promise);
+		promise.finally(() => {
+			boundary.pending.delete(promise);
+			if (boundary.pending.size === 0) boundary.onResolve();
+		});
+		return true;
+	}
+	return false;
+}
+/**
+* Suspense boundary component for handling async loading states.
+* 
+* Wraps lazy-loaded components and shows a fallback while they load.
+* 
+* @example
+* ```tsx
+* import { lazy, Suspense } from 'sigx';
+* 
+* const LazyDashboard = lazy(() => import('./Dashboard'));
+* 
+* // Basic usage
+* <Suspense fallback={<div>Loading...</div>}>
+*     <LazyDashboard />
+* </Suspense>
+* 
+* // With spinner component
+* <Suspense fallback={<Spinner size="large" />}>
+*     <LazyDashboard />
+*     <LazyCharts />
+* </Suspense>
+* ```
+*/
+const Suspense$1 = defineComponent((ctx) => {
+	const { props, slots } = ctx;
+	const state = ctx.signal({
+		isReady: false,
+		pendingCount: 0
+	});
+	const boundary = {
+		pending: /* @__PURE__ */ new Set(),
+		onResolve: () => {
+			state.pendingCount = boundary.pending.size;
+			if (boundary.pending.size === 0) state.isReady = true;
+		}
+	};
+	ctx.onMount(() => {
+		if (boundary.pending.size === 0) state.isReady = true;
+	});
+	return () => {
+		state.isReady;
+		state.pendingCount;
+		const prevBoundary = currentSuspenseBoundary$1;
+		currentSuspenseBoundary$1 = boundary;
+		try {
+			const children = slots.default();
+			if (boundary.pending.size > 0) {
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			if (Array.isArray(children)) {
+				const filtered = children.filter((c) => c != null && c !== false && c !== true);
+				if (filtered.length === 0) return null;
+				if (filtered.length === 1) return filtered[0];
+				return filtered;
+			}
+			return children;
+		} catch (err) {
+			if (err instanceof Promise) {
+				registerPendingPromise$1(err);
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			throw err;
+		} finally {
+			currentSuspenseBoundary$1 = prevBoundary;
+		}
+	};
+}, { name: "Suspense" });
+
 //#endregion
 //#region ../runtime-core/src/renderer.ts
 /**
@@ -340,7 +439,6 @@ function isComponent(type) {
 }
 function createRenderer(options) {
 	const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent } = options;
-	let isPatching = false;
 	let currentAppContext = null;
 	function render$1(element, container, appContext) {
 		if (appContext) currentAppContext = appContext;
@@ -354,6 +452,13 @@ function createRenderer(options) {
 			dom: null,
 			text: element
 		};
+		else if (isComponent(element)) vnode = {
+			type: element,
+			props: {},
+			key: null,
+			children: [],
+			dom: null
+		};
 		else vnode = element;
 		if (vnode) {
 			if (oldVNode) patch(oldVNode, vnode, container);
@@ -365,6 +470,7 @@ function createRenderer(options) {
 		}
 	}
 	function mount(vnode, container, before = null) {
+		if (vnode == null || vnode === false || vnode === true) return;
 		if (vnode.type === Text$1) {
 			const node = hostCreateText(String(vnode.text));
 			vnode.dom = node;
@@ -376,7 +482,7 @@ function createRenderer(options) {
 			const anchor = hostCreateComment("");
 			vnode.dom = anchor;
 			hostInsert(anchor, container, before);
-			vnode.children.forEach((child) => mount(child, container, anchor));
+			if (vnode.children) vnode.children.forEach((child) => mount(child, container, anchor));
 			return;
 		}
 		if (isComponent(vnode.type)) {
@@ -393,17 +499,18 @@ function createRenderer(options) {
 				else if (typeof vnode.props.ref === "object") vnode.props.ref.current = element;
 			}
 		}
-		vnode.children.forEach((child) => {
+		if (vnode.children) vnode.children.forEach((child) => {
 			child.parent = vnode;
 			mount(child, element);
 		});
 		hostInsert(element, container, before);
 	}
 	function unmount(vnode, container) {
-		if (vnode._effect) vnode._effect();
+		const internalVNode = vnode;
+		if (internalVNode._effect) internalVNode._effect.stop();
 		if (vnode.cleanup) vnode.cleanup();
 		if (isComponent(vnode.type)) {
-			const subTree = vnode._subTree;
+			const subTree = internalVNode._subTree;
 			if (subTree) unmount(subTree, container);
 			if (vnode.dom) hostRemove(vnode.dom);
 			if (vnode.props?.ref) {
@@ -413,7 +520,7 @@ function createRenderer(options) {
 			return;
 		}
 		if (vnode.type === Fragment$1) {
-			vnode.children.forEach((child) => unmount(child, container));
+			if (vnode.children) vnode.children.forEach((child) => unmount(child, container));
 			if (vnode.dom) hostRemove(vnode.dom);
 			return;
 		}
@@ -433,13 +540,15 @@ function createRenderer(options) {
 			mount(newVNode, parent, nextSibling);
 			return;
 		}
-		if (oldVNode._effect) {
+		const oldInternal = oldVNode;
+		const newInternal = newVNode;
+		if (oldInternal._effect) {
 			newVNode.dom = oldVNode.dom;
-			newVNode._effect = oldVNode._effect;
-			newVNode._subTree = oldVNode._subTree;
-			newVNode._slots = oldVNode._slots;
-			const props = oldVNode._componentProps;
-			newVNode._componentProps = props;
+			newInternal._effect = oldInternal._effect;
+			newInternal._subTree = oldInternal._subTree;
+			newInternal._slots = oldInternal._slots;
+			const props = oldInternal._componentProps;
+			newInternal._componentProps = props;
 			if (props) {
 				const newProps$1 = newVNode.props || {};
 				untrack(() => {
@@ -449,20 +558,20 @@ function createRenderer(options) {
 					for (const key in props) if (!(key in newProps$1) && key !== "children" && key !== "key" && key !== "ref") delete props[key];
 				});
 			}
-			const slotsRef = oldVNode._slots;
+			const slotsRef = oldInternal._slots;
 			const newChildren = newVNode.props?.children;
 			const newSlotsFromProps = newVNode.props?.slots;
 			if (slotsRef) {
 				if (newChildren !== void 0) slotsRef._children = newChildren;
 				if (newSlotsFromProps !== void 0) slotsRef._slotsFromProps = newSlotsFromProps;
-				if (!isPatching) {
-					isPatching = true;
+				if (!slotsRef._isPatching) {
+					slotsRef._isPatching = true;
 					try {
 						untrack(() => {
 							slotsRef._version.v++;
 						});
 					} finally {
-						isPatching = false;
+						slotsRef._isPatching = false;
 					}
 				}
 			}
@@ -567,6 +676,43 @@ function createRenderer(options) {
 		for (let i = beginIdx; i <= endIdx; i++) if (children[i] && isSameVNode(children[i], newChild)) return i;
 		return null;
 	}
+	/**
+	* Creates a props accessor that can be called with defaults or accessed directly.
+	* After calling with defaults, direct property access uses those defaults.
+	*/
+	function createPropsAccessor(reactiveProps) {
+		let defaults = {};
+		const proxy = new Proxy(function propsAccessor() {}, {
+			get(_, key) {
+				if (typeof key === "symbol") return void 0;
+				const value = reactiveProps[key];
+				return value != null ? value : defaults[key];
+			},
+			apply(_, __, args) {
+				if (args[0] && typeof args[0] === "object") defaults = {
+					...defaults,
+					...args[0]
+				};
+				return proxy;
+			},
+			has(_, key) {
+				if (typeof key === "symbol") return false;
+				return key in reactiveProps || key in defaults;
+			},
+			ownKeys() {
+				return [...new Set([...Object.keys(reactiveProps), ...Object.keys(defaults)])];
+			},
+			getOwnPropertyDescriptor(_, key) {
+				if (typeof key === "symbol") return void 0;
+				if (key in reactiveProps || key in defaults) return {
+					enumerable: true,
+					configurable: true,
+					writable: false
+				};
+			}
+		});
+		return proxy;
+	}
 	function mountComponent(vnode, container, before, setup) {
 		const anchor = hostCreateComment("");
 		vnode.dom = anchor;
@@ -576,9 +722,10 @@ function createRenderer(options) {
 		let exposeCalled = false;
 		const { children, slots: slotsFromProps, ...propsData } = vnode.props || {};
 		const reactiveProps = signal(propsData);
-		vnode._componentProps = reactiveProps;
+		const internalVNode = vnode;
+		internalVNode._componentProps = reactiveProps;
 		const slots = createSlots(children, slotsFromProps);
-		vnode._slots = slots;
+		internalVNode._slots = slots;
 		const mountHooks = [];
 		const cleanupHooks = [];
 		const parentInstance = getCurrentInstance();
@@ -586,7 +733,7 @@ function createRenderer(options) {
 		const ctx = {
 			el: container,
 			signal,
-			props: reactiveProps,
+			props: createPropsAccessor(reactiveProps),
 			slots,
 			emit: (event, ...args) => {
 				const handler = reactiveProps[`on${event[0].toUpperCase() + event.slice(1)}`];
@@ -602,7 +749,9 @@ function createRenderer(options) {
 			expose: (exposedValue) => {
 				exposed = exposedValue;
 				exposeCalled = true;
-			}
+			},
+			renderFn: null,
+			update: () => {}
 		};
 		ctx.__name = componentName;
 		if (currentAppContext) ctx._appContext = currentAppContext;
@@ -626,24 +775,31 @@ function createRenderer(options) {
 			if (typeof vnode.props.ref === "function") vnode.props.ref(refValue);
 			else if (vnode.props.ref && typeof vnode.props.ref === "object") vnode.props.ref.current = refValue;
 		}
-		if (renderFn) vnode._effect = effect(() => {
-			const prevInstance = setCurrentInstance(ctx);
-			try {
-				const subTreeResult = renderFn();
-				if (subTreeResult == null) return;
-				const subTree = normalizeSubTree(subTreeResult);
-				const prevSubTree = vnode._subTree;
-				if (prevSubTree) {
-					patch(prevSubTree, subTree, container);
-					notifyComponentUpdated(currentAppContext, componentInstance);
-				} else mount(subTree, container, anchor);
-				vnode._subTree = subTree;
-			} catch (err) {
-				if (!handleComponentError(currentAppContext, err, componentInstance, "render")) throw err;
-			} finally {
-				setCurrentInstance(prevInstance);
-			}
-		});
+		if (renderFn) {
+			ctx.renderFn = renderFn;
+			const componentEffect = effect(() => {
+				const prevInstance = setCurrentInstance(ctx);
+				try {
+					const subTreeResult = ctx.renderFn();
+					if (subTreeResult == null) return;
+					const subTree = normalizeSubTree(subTreeResult);
+					const prevSubTree = internalVNode._subTree;
+					if (prevSubTree) {
+						patch(prevSubTree, subTree, container);
+						notifyComponentUpdated(currentAppContext, componentInstance);
+					} else mount(subTree, container, anchor);
+					internalVNode._subTree = subTree;
+				} catch (err) {
+					if (!handleComponentError(currentAppContext, err, componentInstance, "render")) throw err;
+				} finally {
+					setCurrentInstance(prevInstance);
+				}
+			});
+			internalVNode._effect = componentEffect;
+			ctx.update = () => {
+				componentEffect();
+			};
+		}
 		const mountCtx = { el: container };
 		mountHooks.forEach((hook) => hook(mountCtx));
 		notifyComponentMounted(currentAppContext, componentInstance);
@@ -683,11 +839,12 @@ function createRenderer(options) {
 			_children: children,
 			_slotsFromProps: slotsFromProps || {},
 			_version: versionSignal,
+			_isPatching: false,
 			default: function() {
 				this._version.v;
 				const c = this._children;
 				const { defaultChildren } = extractNamedSlotsFromChildren(c);
-				return defaultChildren;
+				return defaultChildren.filter((child) => child != null && child !== false && child !== true);
 			}
 		};
 		return new Proxy(slotsObj, { get(target, prop) {
@@ -706,6 +863,8 @@ function createRenderer(options) {
 	}
 	/**
 	* Normalize render result to a VNode (wrapping arrays in Fragment)
+	* Note: Falsy values (null, undefined, false, true) from conditional rendering
+	* are handled by mount() which guards against them, so no filtering needed here.
 	*/
 	function normalizeSubTree(result) {
 		if (Array.isArray(result)) return {
@@ -811,6 +970,60 @@ let platformSyncProcessor = null;
 function getPlatformSyncProcessor() {
 	return platformSyncProcessor;
 }
+const plugins = [];
+/**
+* Get all registered plugins (internal use)
+*/
+function getComponentPlugins() {
+	return plugins;
+}
+const componentRegistry = /* @__PURE__ */ new Map();
+/**
+* Define a component. Returns a JSX factory function.
+* 
+* @param setup - Setup function that receives context and returns a render function
+* @param options - Optional configuration (e.g., name for DevTools)
+* 
+* @example
+* ```tsx
+* type CardProps = DefineProp<"title", string> & DefineSlot<"header">;
+* 
+* export const Card = defineComponent<CardProps>((ctx) => {
+*     const { title } = ctx.props;
+*     const { slots } = ctx;
+*     
+*     return () => (
+*         <div class="card">
+*             {slots.header?.() ?? <h2>{title}</h2>}
+*             {slots.default()}
+*         </div>
+*     );
+* });
+* ```
+*/
+function defineComponent$1(setup, options) {
+	const factory = function(props) {
+		return {
+			type: factory,
+			props: props || {},
+			key: props?.key || null,
+			children: [],
+			dom: null
+		};
+	};
+	factory.__setup = setup;
+	factory.__name = options?.name;
+	factory.__props = null;
+	factory.__events = null;
+	factory.__ref = null;
+	factory.__slots = null;
+	componentRegistry.set(factory, {
+		name: options?.name,
+		setup
+	});
+	getComponentPlugins().forEach((p) => p.onDefine?.(options?.name, factory, setup));
+	return factory;
+}
 const Fragment = Symbol.for("sigx.Fragment");
 const Text = Symbol.for("sigx.Text");
 function normalizeChildren(children) {
@@ -905,6 +1118,100 @@ function jsx(type, props, key) {
 function jsxs(type, props, key) {
 	return jsx(type, props, key);
 }
+/**
+* Lazy loading utilities for sigx components.
+* 
+* Provides runtime-only lazy loading with no build dependencies.
+* Works with any bundler that supports dynamic import().
+*/
+let currentSuspenseBoundary = null;
+/**
+* Register a promise with the current Suspense boundary
+* @internal
+*/
+function registerPendingPromise(promise) {
+	const boundary = currentSuspenseBoundary;
+	if (boundary) {
+		boundary.pending.add(promise);
+		promise.finally(() => {
+			boundary.pending.delete(promise);
+			if (boundary.pending.size === 0) boundary.onResolve();
+		});
+		return true;
+	}
+	return false;
+}
+/**
+* Suspense boundary component for handling async loading states.
+* 
+* Wraps lazy-loaded components and shows a fallback while they load.
+* 
+* @example
+* ```tsx
+* import { lazy, Suspense } from 'sigx';
+* 
+* const LazyDashboard = lazy(() => import('./Dashboard'));
+* 
+* // Basic usage
+* <Suspense fallback={<div>Loading...</div>}>
+*     <LazyDashboard />
+* </Suspense>
+* 
+* // With spinner component
+* <Suspense fallback={<Spinner size="large" />}>
+*     <LazyDashboard />
+*     <LazyCharts />
+* </Suspense>
+* ```
+*/
+const Suspense = defineComponent$1((ctx) => {
+	const { props, slots } = ctx;
+	const state = ctx.signal({
+		isReady: false,
+		pendingCount: 0
+	});
+	const boundary = {
+		pending: /* @__PURE__ */ new Set(),
+		onResolve: () => {
+			state.pendingCount = boundary.pending.size;
+			if (boundary.pending.size === 0) state.isReady = true;
+		}
+	};
+	ctx.onMount(() => {
+		if (boundary.pending.size === 0) state.isReady = true;
+	});
+	return () => {
+		state.isReady;
+		state.pendingCount;
+		const prevBoundary = currentSuspenseBoundary;
+		currentSuspenseBoundary = boundary;
+		try {
+			const children = slots.default();
+			if (boundary.pending.size > 0) {
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			if (Array.isArray(children)) {
+				const filtered = children.filter((c) => c != null && c !== false && c !== true);
+				if (filtered.length === 0) return null;
+				if (filtered.length === 1) return filtered[0];
+				return filtered;
+			}
+			return children;
+		} catch (err) {
+			if (err instanceof Promise) {
+				registerPendingPromise(err);
+				const fallback = props.fallback;
+				if (typeof fallback === "function") return fallback();
+				return fallback ?? null;
+			}
+			throw err;
+		} finally {
+			currentSuspenseBoundary = prevBoundary;
+		}
+	};
+}, { name: "Suspense" });
 
 //#endregion
 //#region src/components/Input.tsx