what-core 0.1.0

package/dist/h.js

@@ -0,0 +1,150 @@
+const EMPTY_OBJ = {};
+const EMPTY_ARR = [];
+export function h(tag, props, ...children) {
+props = props || EMPTY_OBJ;
+const flat = flattenChildren(children);
+const key = props.key ?? null;
+if (props.key !== undefined) {
+props = { ...props };
+delete props.key;
+}
+return { tag, props, children: flat, key, _vnode: true };
+}
+export function Fragment({ children }) {
+return children;
+}
+function flattenChildren(children) {
+const out = [];
+for (let i = 0; i < children.length; i++) {
+const child = children[i];
+if (child == null || child === false || child === true) continue;
+if (Array.isArray(child)) {
+out.push(...flattenChildren(child));
+} else if (typeof child === 'object' && child._vnode) {
+out.push(child);
+} else {
+out.push(String(child));
+}
+}
+return out;
+}
+export function html(strings, ...values) {
+const src = strings.reduce((acc, str, i) =>
+acc + str + (i < values.length ? `\x00${i}\x00` : ''), '');
+return parseTemplate(src, values);
+}
+function parseTemplate(src, values) {
+src = src.trim();
+const nodes = [];
+let i = 0;
+while (i < src.length) {
+if (src[i] === '<') {
+const result = parseElement(src, i, values);
+if (result) {
+nodes.push(result.node);
+i = result.end;
+continue;
+}
+}
+const result = parseText(src, i, values);
+if (result.text) nodes.push(result.text);
+i = result.end;
+}
+return nodes.length === 1 ? nodes[0] : nodes;
+}
+function parseElement(src, start, values) {
+const openMatch = src.slice(start).match(/^<([a-zA-Z][a-zA-Z0-9-]*|[A-Z]\w*)/);
+if (!openMatch) return null;
+const tag = openMatch[1];
+let i = start + openMatch[0].length;
+const props = {};
+while (i < src.length) {
+while (i < src.length && /\s/.test(src[i])) i++;
+if (src.slice(i, i + 2) === '/>') {
+return { node: h(tag, Object.keys(props).length ? props : null), end: i + 2 };
+}
+if (src[i] === '>') {
+i++;
+break;
+}
+if (src.slice(i, i + 3) === '...') {
+const placeholder = src.slice(i + 3).match(/^\x00(\d+)\x00/);
+if (placeholder) {
+Object.assign(props, values[Number(placeholder[1])]);
+i += 3 + placeholder[0].length;
+continue;
+}
+}
+const attrMatch = src.slice(i).match(/^([a-zA-Z_@:][a-zA-Z0-9_:.-]*)/);
+if (!attrMatch) break;
+const attrName = attrMatch[1];
+i += attrMatch[0].length;
+while (i < src.length && /\s/.test(src[i])) i++;
+if (src[i] === '=') {
+i++;
+while (i < src.length && /\s/.test(src[i])) i++;
+const ph = src.slice(i).match(/^\x00(\d+)\x00/);
+if (ph) {
+props[attrName] = values[Number(ph[1])];
+i += ph[0].length;
+} else if (src[i] === '"' || src[i] === "'") {
+const q = src[i];
+i++;
+let val = '';
+while (i < src.length && src[i] !== q) {
+const tph = src.slice(i).match(/^\x00(\d+)\x00/);
+if (tph) {
+val += String(values[Number(tph[1])]);
+i += tph[0].length;
+} else {
+val += src[i];
+i++;
+}
+}
+i++; 
+props[attrName] = val;
+}
+} else {
+props[attrName] = true;
+}
+}
+const children = [];
+const closeTag = `</${tag}>`;
+while (i < src.length) {
+if (src.slice(i, i + closeTag.length) === closeTag) {
+i += closeTag.length;
+break;
+}
+if (src[i] === '<') {
+const child = parseElement(src, i, values);
+if (child) {
+children.push(child.node);
+i = child.end;
+continue;
+}
+}
+const text = parseText(src, i, values);
+if (text.text != null) children.push(text.text);
+i = text.end;
+}
+return {
+node: h(tag, Object.keys(props).length ? props : null, ...children),
+end: i,
+};
+}
+function parseText(src, start, values) {
+let i = start;
+let text = '';
+while (i < src.length && src[i] !== '<') {
+const ph = src.slice(i).match(/^\x00(\d+)\x00/);
+if (ph) {
+if (text.trim()) {
+return { text: text.trim(), end: i };
+}
+return { text: values[Number(ph[1])], end: i + ph[0].length };
+}
+text += src[i];
+i++;
+}
+return { text: text.trim() || null, end: i };
+}

package/dist/head.js

@@ -0,0 +1,51 @@
+const headState = {
+title: null,
+metas: new Map(),
+links: new Map(),
+};
+export function Head({ title, meta, link, children }) {
+if (typeof document === 'undefined') return null;
+if (title) {
+document.title = title;
+headState.title = title;
+}
+if (meta) {
+for (const attrs of (Array.isArray(meta) ? meta : [meta])) {
+const key = attrs.name || attrs.property || attrs.httpEquiv || JSON.stringify(attrs);
+setHeadTag('meta', key, attrs);
+}
+}
+if (link) {
+for (const attrs of (Array.isArray(link) ? link : [link])) {
+const key = attrs.rel + (attrs.href || '');
+setHeadTag('link', key, attrs);
+}
+}
+return children || null;
+}
+function setHeadTag(tag, key, attrs) {
+const existing = document.head.querySelector(`[data-what-head="${key}"]`);
+if (existing) {
+updateElement(existing, attrs);
+return;
+}
+const el = document.createElement(tag);
+el.setAttribute('data-what-head', key);
+for (const [k, v] of Object.entries(attrs)) {
+el.setAttribute(k, v);
+}
+document.head.appendChild(el);
+}
+function updateElement(el, attrs) {
+for (const [k, v] of Object.entries(attrs)) {
+if (el.getAttribute(k) !== v) {
+el.setAttribute(k, v);
+}
+}
+}
+export function clearHead() {
+const tags = document.head.querySelectorAll('[data-what-head]');
+for (const tag of tags) tag.remove();
+headState.metas.clear();
+headState.links.clear();
+}

package/dist/helpers.js

@@ -0,0 +1,98 @@
+import { signal, effect, computed, batch } from './reactive.js';
+export function show(condition, vnode, fallback = null) {
+return condition ? vnode : fallback;
+}
+export function each(list, fn, keyFn) {
+if (!list || list.length === 0) return [];
+return list.map((item, index) => {
+const vnode = fn(item, index);
+if (keyFn && vnode && typeof vnode === 'object') {
+vnode.key = keyFn(item, index);
+}
+return vnode;
+});
+}
+export function cls(...args) {
+const classes = [];
+for (const arg of args) {
+if (!arg) continue;
+if (typeof arg === 'string') {
+classes.push(arg);
+} else if (typeof arg === 'object') {
+for (const [key, val] of Object.entries(arg)) {
+if (val) classes.push(key);
+}
+}
+}
+return classes.join(' ');
+}
+export function style(obj) {
+if (typeof obj === 'string') return obj;
+return Object.entries(obj)
+.filter(([, v]) => v != null && v !== '')
+.map(([k, v]) => `${camelToKebab(k)}:${v}`)
+.join(';');
+}
+function camelToKebab(str) {
+return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+export function debounce(fn, ms) {
+let timer;
+return (...args) => {
+clearTimeout(timer);
+timer = setTimeout(() => fn(...args), ms);
+};
+}
+export function throttle(fn, ms) {
+let last = 0;
+return (...args) => {
+const now = Date.now();
+if (now - last >= ms) {
+last = now;
+fn(...args);
+}
+};
+}
+export function useMediaQuery(query) {
+if (typeof window === 'undefined') return signal(false);
+const mq = window.matchMedia(query);
+const s = signal(mq.matches);
+mq.addEventListener('change', (e) => s.set(e.matches));
+return s;
+}
+export function useLocalStorage(key, initial) {
+let stored;
+try {
+const raw = localStorage.getItem(key);
+stored = raw !== null ? JSON.parse(raw) : initial;
+} catch {
+stored = initial;
+}
+const s = signal(stored);
+effect(() => {
+try {
+localStorage.setItem(key, JSON.stringify(s()));
+} catch {  }
+});
+if (typeof window !== 'undefined') {
+window.addEventListener('storage', (e) => {
+if (e.key === key && e.newValue !== null) {
+try { s.set(JSON.parse(e.newValue)); } catch {}
+}
+});
+}
+return s;
+}
+export function Portal({ target, children }) {
+if (typeof document === 'undefined') return null;
+const container = typeof target === 'string'
+? document.querySelector(target)
+: target;
+if (!container) return null;
+return { tag: '__portal', props: { container }, children: Array.isArray(children) ? children : [children], _vnode: true };
+}
+export function transition(name, active) {
+return {
+class: active ? `${name}-enter ${name}-enter-active` : `${name}-leave ${name}-leave-active`,
+};
+}

package/dist/hooks.js

@@ -0,0 +1,156 @@
+import { signal, computed, effect, batch, untrack } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
+function getCtx() {
+const ctx = getCurrentComponent();
+if (!ctx) throw new Error('Hooks must be called inside a component');
+return ctx;
+}
+function getHook(ctx) {
+const index = ctx.hookIndex++;
+return { index, exists: index < ctx.hooks.length };
+}
+export function useState(initial) {
+const ctx = getCtx();
+const { index, exists } = getHook(ctx);
+if (!exists) {
+const s = signal(typeof initial === 'function' ? initial() : initial);
+ctx.hooks[index] = s;
+}
+const s = ctx.hooks[index];
+return [s(), s.set];
+}
+export function useSignal(initial) {
+const ctx = getCtx();
+const { index, exists } = getHook(ctx);
+if (!exists) {
+ctx.hooks[index] = signal(typeof initial === 'function' ? initial() : initial);
+}
+return ctx.hooks[index];
+}
+export function useComputed(fn) {
+const ctx = getCtx();
+const { index, exists } = getHook(ctx);
+if (!exists) {
+ctx.hooks[index] = computed(fn);
+}
+return ctx.hooks[index];
+}
+export function useEffect(fn, deps) {
+const ctx = getCtx();
+const { index, exists } = getHook(ctx);
+if (!exists) {
+ctx.hooks[index] = { deps: undefined, cleanup: null };
+}
+const hook = ctx.hooks[index];
+if (depsChanged(hook.deps, deps)) {
+queueMicrotask(() => {
+if (ctx.disposed) return;
+if (hook.cleanup) hook.cleanup();
+hook.cleanup = fn() || null;
+});
+hook.deps = deps;
+}
+}
+export function useMemo(fn, deps) {
+const ctx = getCtx();
+const { index, exists } = getHook(ctx);
+if (!exists) {
+ctx.hooks[index] = { value: undefined, deps: undefined };
+}
+const hook = ctx.hooks[index];
+if (depsChanged(hook.deps, deps)) {
+hook.value = fn();
+hook.deps = deps;
+}
+return hook.value;
+}
+export function useCallback(fn, deps) {
+return useMemo(() => fn, deps);
+}
+export function useRef(initial) {
+const ctx = getCtx();
+const { index, exists } = getHook(ctx);
+if (!exists) {
+ctx.hooks[index] = { current: initial };
+}
+return ctx.hooks[index];
+}
+export function useContext(context) {
+return context._value;
+}
+export function createContext(defaultValue) {
+const ctx = {
+_value: defaultValue,
+Provider: ({ value, children }) => {
+ctx._value = value;
+return children;
+},
+};
+return ctx;
+}
+export function useReducer(reducer, initialState, init) {
+const ctx = getCtx();
+const { index, exists } = getHook(ctx);
+if (!exists) {
+const initial = init ? init(initialState) : initialState;
+const s = signal(initial);
+const dispatch = (action) => {
+s.set(prev => reducer(prev, action));
+};
+ctx.hooks[index] = { signal: s, dispatch };
+}
+const hook = ctx.hooks[index];
+return [hook.signal(), hook.dispatch];
+}
+export function onMount(fn) {
+const ctx = getCtx();
+if (!ctx._mounted) {
+ctx._mountCallbacks = ctx._mountCallbacks || [];
+ctx._mountCallbacks.push(fn);
+}
+}
+export function onCleanup(fn) {
+const ctx = getCtx();
+ctx._cleanupCallbacks = ctx._cleanupCallbacks || [];
+ctx._cleanupCallbacks.push(fn);
+}
+export function createResource(fetcher, options = {}) {
+const data = signal(options.initialValue ?? null);
+const loading = signal(!options.initialValue);
+const error = signal(null);
+let currentFetch = null;
+const refetch = async (source) => {
+loading.set(true);
+error.set(null);
+try {
+const fetchPromise = fetcher(source);
+currentFetch = fetchPromise;
+const result = await fetchPromise;
+if (currentFetch === fetchPromise) {
+data.set(result);
+loading.set(false);
+}
+} catch (e) {
+if (currentFetch === fetcher) {
+error.set(e);
+loading.set(false);
+}
+}
+};
+const mutate = (value) => {
+data.set(typeof value === 'function' ? value(data()) : value);
+};
+if (!options.initialValue) {
+refetch(options.source);
+}
+return [data, { loading, error, refetch, mutate }];
+}
+function depsChanged(oldDeps, newDeps) {
+if (oldDeps === undefined) return true;
+if (!oldDeps || !newDeps) return true;
+if (oldDeps.length !== newDeps.length) return true;
+for (let i = 0; i < oldDeps.length; i++) {
+if (!Object.is(oldDeps[i], newDeps[i])) return true;
+}
+return false;
+}

package/dist/index.js

@@ -0,0 +1,147 @@
+// What Framework - Core
+// The closest framework to vanilla JS.
+
+// Reactive primitives
+export { signal, computed, effect, batch, untrack } from './reactive.js';
+
+// Virtual DOM
+export { h, Fragment, html } from './h.js';
+
+// DOM mounting & rendering
+export { mount } from './dom.js';
+
+// Hooks (React-compatible API)
+export {
+  useState,
+  useSignal,
+  useComputed,
+  useEffect,
+  useMemo,
+  useCallback,
+  useRef,
+  useContext,
+  useReducer,
+  createContext,
+  onMount,
+  onCleanup,
+  createResource,
+} from './hooks.js';
+
+// Component helpers
+export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match } from './components.js';
+
+// Store
+export { createStore, atom } from './store.js';
+
+// Head management
+export { Head, clearHead } from './head.js';
+
+// Utilities
+export {
+  show,
+  each,
+  cls,
+  style,
+  debounce,
+  throttle,
+  useMediaQuery,
+  useLocalStorage,
+  Portal,
+  transition,
+} from './helpers.js';
+
+// DOM Scheduler (prevents layout thrashing)
+export {
+  scheduleRead,
+  scheduleWrite,
+  flushScheduler,
+  measure,
+  mutate,
+  useScheduledEffect,
+  nextFrame,
+  raf,
+  onResize,
+  onIntersect,
+  smoothScrollTo,
+} from './scheduler.js';
+
+// Testing utilities (import separately: 'what/testing')
+// export * from './testing.js';
+
+// Animation primitives
+export {
+  spring,
+  tween,
+  easings,
+  useTransition,
+  useGesture,
+  useAnimatedValue,
+  createTransitionClasses,
+  cssTransition,
+} from './animation.js';
+
+// Accessibility utilities
+export {
+  useFocus,
+  useFocusTrap,
+  FocusTrap,
+  announce,
+  announceAssertive,
+  SkipLink,
+  useAriaExpanded,
+  useAriaSelected,
+  useAriaChecked,
+  useRovingTabIndex,
+  VisuallyHidden,
+  LiveRegion,
+  useId,
+  useIds,
+  useDescribedBy,
+  useLabelledBy,
+  Keys,
+  onKey,
+  onKeys,
+} from './a11y.js';
+
+// Skeleton loaders and loading states
+export {
+  Skeleton,
+  SkeletonText,
+  SkeletonAvatar,
+  SkeletonCard,
+  SkeletonTable,
+  IslandSkeleton,
+  useSkeleton,
+  Placeholder,
+  LoadingDots,
+  Spinner,
+} from './skeleton.js';
+
+// Data fetching (SWR-like)
+export {
+  useFetch,
+  useSWR,
+  useQuery,
+  useInfiniteQuery,
+  invalidateQueries,
+  prefetchQuery,
+  setQueryData,
+  getQueryData,
+  clearCache,
+} from './data.js';
+
+// Form utilities
+export {
+  useForm,
+  useField,
+  rules,
+  simpleResolver,
+  zodResolver,
+  yupResolver,
+  Input,
+  Textarea,
+  Select,
+  Checkbox,
+  Radio,
+  ErrorMessage,
+} from './form.js';

package/dist/reactive.js

@@ -0,0 +1,124 @@
+let currentEffect = null;
+let batchDepth = 0;
+let pendingEffects = new Set();
+export function signal(initial) {
+let value = initial;
+const subs = new Set();
+function read() {
+if (currentEffect) {
+subs.add(currentEffect);
+currentEffect.deps.add(subs); 
+}
+return value;
+}
+read.set = (next) => {
+const nextVal = typeof next === 'function' ? next(value) : next;
+if (Object.is(value, nextVal)) return;
+value = nextVal;
+notify(subs);
+};
+read.peek = () => value;
+read.subscribe = (fn) => {
+return effect(() => fn(read()));
+};
+read._signal = true;
+return read;
+}
+export function computed(fn) {
+let value, dirty = true;
+const subs = new Set();
+const inner = _createEffect(() => {
+value = fn();
+dirty = false;
+notify(subs);
+}, { lazy: true });
+function read() {
+if (currentEffect) {
+subs.add(currentEffect);
+currentEffect.deps.add(subs);
+}
+if (dirty) _runEffect(inner);
+return value;
+}
+inner._onNotify = () => { dirty = true; };
+read._signal = true;
+read.peek = () => {
+if (dirty) _runEffect(inner);
+return value;
+};
+return read;
+}
+export function effect(fn) {
+const e = _createEffect(fn);
+_runEffect(e);
+return () => _disposeEffect(e);
+}
+export function batch(fn) {
+batchDepth++;
+try {
+fn();
+} finally {
+batchDepth--;
+if (batchDepth === 0) flush();
+}
+}
+function _createEffect(fn, opts = {}) {
+return {
+fn,
+deps: new Set(),     
+lazy: opts.lazy || false,
+_onNotify: null,
+disposed: false,
+};
+}
+function _runEffect(e) {
+if (e.disposed) return;
+cleanup(e);
+const prev = currentEffect;
+currentEffect = e;
+try {
+e.fn();
+} finally {
+currentEffect = prev;
+}
+}
+function _disposeEffect(e) {
+e.disposed = true;
+cleanup(e);
+}
+function cleanup(e) {
+for (const dep of e.deps) dep.delete(e);
+e.deps.clear();
+}
+function notify(subs) {
+const snapshot = [...subs];
+for (const e of snapshot) {
+if (e.disposed) continue;
+if (e._onNotify) {
+e._onNotify();
+if (batchDepth > 0) pendingEffects.add(e);
+continue;
+}
+if (batchDepth > 0) {
+pendingEffects.add(e);
+} else {
+_runEffect(e);
+}
+}
+}
+function flush() {
+const effects = [...pendingEffects];
+pendingEffects.clear();
+for (const e of effects) {
+if (!e.disposed && !e._onNotify) _runEffect(e);
+}
+}
+export function untrack(fn) {
+const prev = currentEffect;
+currentEffect = null;
+try {
+return fn();
+} finally {
+currentEffect = prev;
+}
+}