what-core 0.1.0

package/dist/components.js

@@ -0,0 +1,140 @@
+import { h } from './h.js';
+import { signal, effect, untrack } from './reactive.js';
+export const errorBoundaryStack = [];
+export function memo(Component, areEqual) {
+const compare = areEqual || shallowEqual;
+let prevProps = null;
+let prevResult = null;
+function MemoWrapper(props) {
+if (prevProps && compare(prevProps, props)) {
+return prevResult;
+}
+prevProps = { ...props };
+prevResult = Component(props);
+return prevResult;
+}
+MemoWrapper.displayName = `Memo(${Component.name || 'Anonymous'})`;
+return MemoWrapper;
+}
+function shallowEqual(a, b) {
+if (a === b) return true;
+const keysA = Object.keys(a);
+const keysB = Object.keys(b);
+if (keysA.length !== keysB.length) return false;
+for (const key of keysA) {
+if (!Object.is(a[key], b[key])) return false;
+}
+return true;
+}
+export function lazy(loader) {
+let Component = null;
+let loadPromise = null;
+let loadError = null;
+const listeners = new Set();
+function LazyWrapper(props) {
+if (loadError) throw loadError;
+if (Component) return h(Component, props);
+if (!loadPromise) {
+loadPromise = loader()
+.then(mod => {
+Component = mod.default || mod;
+listeners.forEach(fn => fn());
+listeners.clear();
+})
+.catch(err => { loadError = err; });
+}
+throw loadPromise;
+}
+LazyWrapper.displayName = 'Lazy';
+LazyWrapper._lazy = true;
+LazyWrapper._onLoad = (fn) => {
+if (Component) fn();
+else listeners.add(fn);
+};
+return LazyWrapper;
+}
+export function Suspense({ fallback, children }) {
+const loading = signal(false);
+const pendingPromises = new Set();
+const boundary = {
+_suspense: true,
+onSuspend(promise) {
+loading.set(true);
+pendingPromises.add(promise);
+promise.finally(() => {
+pendingPromises.delete(promise);
+if (pendingPromises.size === 0) {
+loading.set(false);
+}
+});
+},
+};
+return {
+tag: '__suspense',
+props: { boundary, fallback, loading },
+children: Array.isArray(children) ? children : [children],
+_vnode: true,
+};
+}
+export function ErrorBoundary({ fallback, children, onError }) {
+const errorState = signal(null);
+const handleError = (error) => {
+errorState.set(error);
+if (onError) {
+try {
+onError(error);
+} catch (e) {
+console.error('Error in onError handler:', e);
+}
+}
+};
+const reset = () => errorState.set(null);
+return {
+tag: '__errorBoundary',
+props: { errorState, handleError, fallback, reset },
+children: Array.isArray(children) ? children : [children],
+_vnode: true,
+};
+}
+export function getCurrentErrorBoundary() {
+return errorBoundaryStack[errorBoundaryStack.length - 1] || null;
+}
+export function reportError(error) {
+const boundary = getCurrentErrorBoundary();
+if (boundary) {
+boundary.handleError(error);
+return true;
+}
+return false;
+}
+export function Show({ when, fallback = null, children }) {
+const condition = typeof when === 'function' ? when() : when;
+return condition ? children : fallback;
+}
+export function For({ each, fallback = null, children }) {
+const list = typeof each === 'function' ? each() : each;
+if (!list || list.length === 0) return fallback;
+const renderFn = Array.isArray(children) ? children[0] : children;
+if (typeof renderFn !== 'function') {
+console.warn('For: children must be a function');
+return fallback;
+}
+return list.map((item, index) => renderFn(item, index));
+}
+export function Switch({ fallback = null, children }) {
+const kids = Array.isArray(children) ? children : [children];
+for (const child of kids) {
+if (child && child.tag === Match) {
+const condition = typeof child.props.when === 'function'
+? child.props.when()
+: child.props.when;
+if (condition) {
+return child.children;
+}
+}
+}
+return fallback;
+}
+export function Match({ when, children }) {
+return { tag: Match, props: { when }, children, _vnode: true };
+}

package/dist/dom.js

@@ -0,0 +1,443 @@
+import { effect, batch, untrack } from './reactive.js';
+import { errorBoundaryStack, reportError } from './components.js';
+export function mount(vnode, container) {
+if (typeof container === 'string') {
+container = document.querySelector(container);
+}
+container.textContent = '';
+const node = createDOM(vnode, container);
+if (node) container.appendChild(node);
+return () => {
+container.textContent = '';
+};
+}
+function createDOM(vnode, parent) {
+if (vnode == null || vnode === false || vnode === true) return null;
+if (typeof vnode === 'string' || typeof vnode === 'number') {
+return document.createTextNode(String(vnode));
+}
+if (Array.isArray(vnode)) {
+const frag = document.createDocumentFragment();
+for (const child of vnode) {
+const node = createDOM(child, parent);
+if (node) frag.appendChild(node);
+}
+return frag;
+}
+if (typeof vnode.tag === 'function') {
+return createComponent(vnode, parent);
+}
+const el = document.createElement(vnode.tag);
+applyProps(el, vnode.props, {});
+for (const child of vnode.children) {
+const node = createDOM(child, el);
+if (node) el.appendChild(node);
+}
+el._vnode = vnode;
+return el;
+}
+const componentStack = [];
+export function getCurrentComponent() {
+return componentStack[componentStack.length - 1];
+}
+function createComponent(vnode, parent) {
+const { tag: Component, props, children } = vnode;
+if (Component === '__errorBoundary' || vnode.tag === '__errorBoundary') {
+return createErrorBoundary(vnode, parent);
+}
+if (Component === '__suspense' || vnode.tag === '__suspense') {
+return createSuspenseBoundary(vnode, parent);
+}
+const ctx = {
+hooks: [],
+hookIndex: 0,
+effects: [],
+cleanups: [],
+mounted: false,
+disposed: false,
+};
+const marker = document.createComment(`w:${Component.name || 'anon'}`);
+let currentNodes = [];
+const dispose = effect(() => {
+if (ctx.disposed) return;
+ctx.hookIndex = 0;
+componentStack.push(ctx);
+let result;
+try {
+result = Component({ ...props, children });
+} catch (error) {
+componentStack.pop();
+if (!reportError(error)) {
+console.error('[what] Uncaught error in component:', Component.name || 'Anonymous', error);
+throw error;
+}
+return;
+}
+componentStack.pop();
+const vnodes = Array.isArray(result) ? result : [result];
+if (!ctx.mounted) {
+ctx.mounted = true;
+for (const v of vnodes) {
+const node = createDOM(v, parent);
+if (node) {
+currentNodes.push(node);
+}
+}
+} else {
+reconcile(marker.parentNode, currentNodes, vnodes, marker);
+}
+});
+ctx.effects.push(dispose);
+const frag = document.createDocumentFragment();
+frag.appendChild(marker);
+for (const node of currentNodes) {
+frag.appendChild(node);
+}
+return frag;
+}
+function createErrorBoundary(vnode, parent) {
+const { errorState, handleError, fallback, reset } = vnode.props;
+const children = vnode.children;
+const marker = document.createComment('w:errorBoundary');
+let currentNodes = [];
+const boundary = { handleError };
+const dispose = effect(() => {
+const error = errorState();
+errorBoundaryStack.push(boundary);
+let vnodes;
+if (error) {
+if (typeof fallback === 'function') {
+vnodes = [fallback({ error, reset })];
+} else {
+vnodes = [fallback];
+}
+} else {
+vnodes = children;
+}
+errorBoundaryStack.pop();
+vnodes = Array.isArray(vnodes) ? vnodes : [vnodes];
+if (currentNodes.length === 0) {
+for (const v of vnodes) {
+const node = createDOM(v, parent);
+if (node) currentNodes.push(node);
+}
+} else {
+reconcile(marker.parentNode, currentNodes, vnodes, marker);
+}
+});
+const frag = document.createDocumentFragment();
+frag.appendChild(marker);
+for (const node of currentNodes) {
+frag.appendChild(node);
+}
+return frag;
+}
+function createSuspenseBoundary(vnode, parent) {
+const { boundary, fallback, loading } = vnode.props;
+const children = vnode.children;
+const marker = document.createComment('w:suspense');
+let currentNodes = [];
+const dispose = effect(() => {
+const isLoading = loading();
+const vnodes = isLoading ? [fallback] : children;
+const normalized = Array.isArray(vnodes) ? vnodes : [vnodes];
+if (currentNodes.length === 0) {
+for (const v of normalized) {
+const node = createDOM(v, parent);
+if (node) currentNodes.push(node);
+}
+} else {
+reconcile(marker.parentNode, currentNodes, normalized, marker);
+}
+});
+const frag = document.createDocumentFragment();
+frag.appendChild(marker);
+for (const node of currentNodes) {
+frag.appendChild(node);
+}
+return frag;
+}
+function reconcile(parent, oldNodes, newVNodes, beforeMarker) {
+if (!parent) return;
+const hasKeys = newVNodes.some(v => v && typeof v === 'object' && v.key != null);
+if (hasKeys) {
+reconcileKeyed(parent, oldNodes, newVNodes, beforeMarker);
+} else {
+reconcileUnkeyed(parent, oldNodes, newVNodes, beforeMarker);
+}
+}
+function reconcileUnkeyed(parent, oldNodes, newVNodes, beforeMarker) {
+const maxLen = Math.max(oldNodes.length, newVNodes.length);
+const newNodes = [];
+for (let i = 0; i < maxLen; i++) {
+const oldNode = oldNodes[i];
+const newVNode = newVNodes[i];
+if (i >= newVNodes.length) {
+if (oldNode && oldNode.parentNode) {
+oldNode.parentNode.removeChild(oldNode);
+}
+continue;
+}
+if (i >= oldNodes.length) {
+const node = createDOM(newVNode, parent);
+if (node) {
+const ref = getInsertionRef(oldNodes, beforeMarker);
+parent.insertBefore(node, ref);
+newNodes.push(node);
+}
+continue;
+}
+const patched = patchNode(parent, oldNode, newVNode);
+newNodes.push(patched);
+}
+oldNodes.length = 0;
+oldNodes.push(...newNodes);
+}
+function reconcileKeyed(parent, oldNodes, newVNodes, beforeMarker) {
+const oldKeyMap = new Map();
+for (let i = 0; i < oldNodes.length; i++) {
+const node = oldNodes[i];
+const key = node._vnode?.key;
+if (key != null) {
+oldKeyMap.set(key, { node, index: i });
+}
+}
+const newNodes = [];
+const newLen = newVNodes.length;
+const sources = new Array(newLen).fill(-1); 
+const reused = new Set();
+for (let i = 0; i < newLen; i++) {
+const vnode = newVNodes[i];
+const key = vnode?.key;
+if (key != null && oldKeyMap.has(key)) {
+const { node: oldNode, index: oldIndex } = oldKeyMap.get(key);
+sources[i] = oldIndex;
+reused.add(oldIndex);
+}
+}
+for (let i = 0; i < oldNodes.length; i++) {
+if (!reused.has(i) && oldNodes[i]?.parentNode) {
+oldNodes[i].parentNode.removeChild(oldNodes[i]);
+}
+}
+const lis = longestIncreasingSubsequence(sources.filter(s => s !== -1));
+const lisSet = new Set(lis.map((_, i) => {
+let count = 0;
+for (let j = 0; j < sources.length; j++) {
+if (sources[j] !== -1) {
+if (count === lis[i]) return j;
+count++;
+}
+}
+return -1;
+}));
+let lastInserted = beforeMarker?.nextSibling || null;
+for (let i = newLen - 1; i >= 0; i--) {
+const vnode = newVNodes[i];
+const key = vnode?.key;
+const oldEntry = key != null ? oldKeyMap.get(key) : null;
+if (oldEntry && sources[i] !== -1) {
+const oldNode = oldEntry.node;
+const patched = patchNode(parent, oldNode, vnode);
+newNodes[i] = patched;
+if (!lisSet.has(i) && patched.parentNode) {
+parent.insertBefore(patched, lastInserted);
+}
+lastInserted = patched;
+} else {
+const node = createDOM(vnode, parent);
+if (node) {
+parent.insertBefore(node, lastInserted);
+lastInserted = node;
+}
+newNodes[i] = node;
+}
+}
+oldNodes.length = 0;
+oldNodes.push(...newNodes.filter(Boolean));
+}
+function longestIncreasingSubsequence(arr) {
+if (arr.length === 0) return [];
+const n = arr.length;
+const dp = new Array(n).fill(1);      
+const parent = new Array(n).fill(-1); 
+const tails = [0];                     
+for (let i = 1; i < n; i++) {
+if (arr[i] > arr[tails[tails.length - 1]]) {
+parent[i] = tails[tails.length - 1];
+tails.push(i);
+} else {
+let lo = 0, hi = tails.length - 1;
+while (lo < hi) {
+const mid = (lo + hi) >> 1;
+if (arr[tails[mid]] < arr[i]) lo = mid + 1;
+else hi = mid;
+}
+if (arr[i] < arr[tails[lo]]) {
+if (lo > 0) parent[i] = tails[lo - 1];
+tails[lo] = i;
+}
+}
+}
+const result = [];
+let k = tails[tails.length - 1];
+while (k !== -1) {
+result.push(k);
+k = parent[k];
+}
+return result.reverse();
+}
+function getInsertionRef(nodes, marker) {
+if (nodes.length > 0) {
+const last = nodes[nodes.length - 1];
+return last.nextSibling;
+}
+return marker ? marker.nextSibling : null;
+}
+function patchNode(parent, domNode, vnode) {
+if (vnode == null || vnode === false || vnode === true) {
+if (domNode && domNode.parentNode) domNode.parentNode.removeChild(domNode);
+return null;
+}
+if (typeof vnode === 'string' || typeof vnode === 'number') {
+const text = String(vnode);
+if (domNode.nodeType === 3) {
+if (domNode.textContent !== text) domNode.textContent = text;
+return domNode;
+}
+const newNode = document.createTextNode(text);
+parent.replaceChild(newNode, domNode);
+return newNode;
+}
+if (Array.isArray(vnode)) {
+const frag = document.createDocumentFragment();
+for (const v of vnode) {
+const node = createDOM(v, parent);
+if (node) frag.appendChild(node);
+}
+parent.replaceChild(frag, domNode);
+return frag;
+}
+if (typeof vnode.tag === 'function') {
+const node = createComponent(vnode, parent);
+parent.replaceChild(node, domNode);
+return node;
+}
+if (domNode.nodeType === 1 && domNode.tagName.toLowerCase() === vnode.tag) {
+const oldProps = domNode._vnode?.props || {};
+applyProps(domNode, vnode.props, oldProps);
+reconcileChildren(domNode, vnode.children);
+domNode._vnode = vnode;
+return domNode;
+}
+const newNode = createDOM(vnode, parent);
+parent.replaceChild(newNode, domNode);
+return newNode;
+}
+function reconcileChildren(parent, newChildVNodes) {
+const oldChildren = Array.from(parent.childNodes);
+const hasKeys = newChildVNodes.some(v => v && typeof v === 'object' && v.key != null);
+if (hasKeys) {
+reconcileKeyed(parent, oldChildren, newChildVNodes, null);
+} else {
+const maxLen = Math.max(oldChildren.length, newChildVNodes.length);
+for (let i = 0; i < maxLen; i++) {
+if (i >= newChildVNodes.length) {
+if (oldChildren[i]?.parentNode) {
+parent.removeChild(oldChildren[i]);
+}
+continue;
+}
+if (i >= oldChildren.length) {
+const node = createDOM(newChildVNodes[i], parent);
+if (node) parent.appendChild(node);
+continue;
+}
+patchNode(parent, oldChildren[i], newChildVNodes[i]);
+}
+}
+}
+function applyProps(el, newProps, oldProps) {
+newProps = newProps || {};
+oldProps = oldProps || {};
+for (const key in oldProps) {
+if (key === 'key' || key === 'ref' || key === 'children') continue;
+if (!(key in newProps)) {
+removeProp(el, key, oldProps[key]);
+}
+}
+for (const key in newProps) {
+if (key === 'key' || key === 'ref' || key === 'children') continue;
+if (newProps[key] !== oldProps[key]) {
+setProp(el, key, newProps[key]);
+}
+}
+if (newProps.ref && newProps.ref !== oldProps.ref) {
+if (typeof newProps.ref === 'function') newProps.ref(el);
+else newProps.ref.current = el;
+}
+}
+function setProp(el, key, value) {
+if (key.startsWith('on') && key.length > 2) {
+const event = key.slice(2).toLowerCase();
+const old = el._events?.[event];
+if (old) el.removeEventListener(event, old);
+if (!el._events) el._events = {};
+const wrappedHandler = (e) => untrack(() => value(e));
+wrappedHandler._original = value;
+el._events[event] = wrappedHandler;
+el.addEventListener(event, wrappedHandler);
+return;
+}
+if (key === 'className' || key === 'class') {
+el.className = value || '';
+return;
+}
+if (key === 'style') {
+if (typeof value === 'string') {
+el.style.cssText = value;
+} else if (typeof value === 'object') {
+for (const prop in value) {
+el.style[prop] = value[prop] ?? '';
+}
+}
+return;
+}
+if (key === 'dangerouslySetInnerHTML') {
+el.innerHTML = value.__html;
+return;
+}
+if (typeof value === 'boolean') {
+if (value) el.setAttribute(key, '');
+else el.removeAttribute(key);
+return;
+}
+if (key.startsWith('data-') || key.startsWith('aria-')) {
+el.setAttribute(key, value);
+return;
+}
+if (key in el) {
+el[key] = value;
+} else {
+el.setAttribute(key, value);
+}
+}
+function removeProp(el, key, oldValue) {
+if (key.startsWith('on') && key.length > 2) {
+const event = key.slice(2).toLowerCase();
+if (el._events?.[event]) {
+el.removeEventListener(event, el._events[event]);
+delete el._events[event];
+}
+return;
+}
+if (key === 'className' || key === 'class') {
+el.className = '';
+return;
+}
+if (key === 'style') {
+el.style.cssText = '';
+return;
+}
+el.removeAttribute(key);
+}