@devansharora18/tardisjs 0.0.2

package/dist/runtime/index.mjs

@@ -0,0 +1,791 @@
+// src/runtime/state.ts
+// internal dep map — keyed by state object identity
+const depMap = new WeakMap();
+let activeEffect = null;
+let batchQueue = null;
+function $batch(fn) {
+    batchQueue = new Set();
+    fn();
+    const queue = batchQueue;
+    batchQueue = null;
+    requestAnimationFrame(() => {
+        queue.forEach(updater => updater());
+    });
+}
+function createState(initial) {
+    const raw = { ...initial };
+    const deps = new Map();
+    for (const key of Object.keys(raw)) {
+        deps.set(key, new Set());
+    }
+    const proxy = new Proxy(raw, {
+        get(target, key) {
+            if (activeEffect) {
+                if (!deps.has(key))
+                    deps.set(key, new Set());
+                deps.get(key).add(activeEffect);
+            }
+            return target[key];
+        },
+        set(target, key, value) {
+            target[key] = value;
+            const updaters = deps.get(key);
+            if (updaters) {
+                if (batchQueue) {
+                    updaters.forEach(fn => batchQueue.add(fn));
+                }
+                else {
+                    updaters.forEach(fn => fn());
+                }
+            }
+            return true;
+        }
+    });
+    depMap.set(proxy, deps);
+    return proxy;
+}
+function registerDep(state, key, updater) {
+    const deps = depMap.get(state);
+    if (deps) {
+        if (!deps.has(key))
+            deps.set(key, new Set());
+        deps.get(key).add(updater);
+    }
+}
+function withEffect(effect, fn) {
+    const prev = activeEffect;
+    activeEffect = effect;
+    try {
+        return fn();
+    }
+    finally {
+        activeEffect = prev;
+    }
+}
+function $update(state, key, value) {
+    state[key] = value;
+}
+function $toggle(state, key) {
+    state[key] = !state[key];
+}
+function $reset(state, initial) {
+    for (const [key, val] of Object.entries(initial)) {
+        state[key] = val;
+    }
+}
+
+// src/runtime/fetch.ts
+function $fetch(url) {
+    let _method = 'GET';
+    let _body = undefined;
+    let _headers = {};
+    let _done = null;
+    let _fail = null;
+    let _always = null;
+    let _executed = false;
+    function execute() {
+        if (_executed)
+            return;
+        _executed = true;
+        const options = {
+            method: _method,
+            headers: {
+                'Content-Type': 'application/json',
+                ..._headers,
+            },
+        };
+        if (_body !== undefined && _method !== 'GET') {
+            options.body = JSON.stringify(_body);
+        }
+        fetch(url, options)
+            .then(res => {
+            if (!res.ok)
+                throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+            return res.json();
+        })
+            .then(data => {
+            _done?.(data);
+        })
+            .catch(err => {
+            _fail?.(err instanceof Error ? err : new Error(String(err)));
+        })
+            .finally(() => {
+            _always?.();
+        });
+    }
+    const chain = {
+        method(m) {
+            _method = m;
+            return chain;
+        },
+        body(b) {
+            _body = b;
+            return chain;
+        },
+        headers(h) {
+            _headers = { ..._headers, ...h };
+            return chain;
+        },
+        done(fn) {
+            _done = fn;
+            execute();
+            return chain;
+        },
+        fail(fn) {
+            _fail = fn;
+            execute();
+            return chain;
+        },
+        always(fn) {
+            _always = fn;
+            execute();
+            return chain;
+        },
+    };
+    return chain;
+}
+
+// src/runtime/render.ts
+// ── $if ────────────────────────────────────────────────────────────────────
+function $if(conditionFn, builderFn) {
+    const anchor = document.createComment('$if');
+    let currentEl = null;
+    let isMounted = conditionFn();
+    // initial render
+    if (isMounted) {
+        currentEl = builderFn();
+    }
+    return currentEl ?? anchor;
+}
+// ── $each ──────────────────────────────────────────────────────────────────
+function $each(arrayFn, itemBuilderFn) {
+    const container = document.createElement('div');
+    container.setAttribute('data-each', '');
+    function render() {
+        const items = arrayFn();
+        // clear existing children
+        while (container.firstChild) {
+            container.removeChild(container.firstChild);
+        }
+        // render new children
+        items.forEach((item, index) => {
+            container.appendChild(itemBuilderFn(item, index));
+        });
+    }
+    render();
+    return container;
+}
+// ── $show ──────────────────────────────────────────────────────────────────
+function $show(conditionFn, builderFn) {
+    const el = builderFn();
+    function update() {
+        el.style.display = conditionFn() ? '' : 'none';
+    }
+    update();
+    return el;
+}
+// ── $portal ────────────────────────────────────────────────────────────────
+function $portal(selector, builderFn) {
+    const target = document.querySelector(selector);
+    const el = builderFn();
+    if (target) {
+        target.appendChild(el);
+    }
+    else {
+        console.warn(`$portal: target "${selector}" not found`);
+    }
+    return el;
+}
+// ── bind ───────────────────────────────────────────────────────────────────
+// binds a DOM property to a reactive expression
+// re-runs the expression and updates the DOM whenever state changes
+function bind(el, prop, valueFn) {
+    function update() {
+        const val = withEffect(update, valueFn);
+        if (prop === 'textContent') {
+            el.textContent = String(val ?? '');
+        }
+        else if (prop in el) {
+            el[prop] = val;
+        }
+    }
+    // initial render
+    update();
+    el.__update = update;
+}
+// ── bindClass ──────────────────────────────────────────────────────────────
+function bindClass(el, classFn) {
+    function update() {
+        el.className = withEffect(update, classFn);
+    }
+    update();
+    el.__updateClass = update;
+}
+// ── bindAttr ───────────────────────────────────────────────────────────────
+function bindAttr(el, attr, valueFn) {
+    function update() {
+        const val = withEffect(update, valueFn);
+        if (val === null || val === undefined || val === false) {
+            el.removeAttribute(attr);
+        }
+        else {
+            el.setAttribute(attr, String(val));
+        }
+    }
+    update();
+    el[`__updateAttr_${attr}`] = update;
+}
+// ── resolveStyles ──────────────────────────────────────────────────────────
+function resolveStyles(styles, key) {
+    const maybeRules = styles.rules;
+    const styleMap = maybeRules && typeof maybeRules === 'object' && !Array.isArray(maybeRules)
+        ? maybeRules
+        : styles;
+    return styleMap[key] ?? key;
+}
+// ── text ───────────────────────────────────────────────────────────────────
+function text(value) {
+    const node = document.createTextNode('');
+    if (typeof value === 'function') {
+        const valueFn = value;
+        function update() { node.textContent = withEffect(update, valueFn); }
+        update();
+        node.__update = update;
+    }
+    else {
+        node.textContent = value;
+    }
+    return node;
+}
+
+// src/runtime/styles.ts
+function createStyles(mode, rules, props, state) {
+    function resolve() {
+        const classes = [];
+        for (const [key, value] of Object.entries(rules)) {
+            if (key === 'base') {
+                classes.push(value);
+                continue;
+            }
+            // dotted key — variant.primary, disabled.true, size.sm
+            const dotIdx = key.indexOf('.');
+            if (dotIdx >= 0) {
+                const propOrState = key.slice(0, dotIdx);
+                const expectedVal = key.slice(dotIdx + 1);
+                // check props first then state
+                const actualVal = props[propOrState] !== undefined
+                    ? props[propOrState]
+                    : state[propOrState];
+                if (actualVal === undefined)
+                    continue;
+                // match boolean shorthand — disabled.true
+                if (expectedVal === 'true' && actualVal === true) {
+                    classes.push(value);
+                }
+                else if (expectedVal === 'false' && actualVal === false) {
+                    classes.push(value);
+                }
+                else if (String(actualVal) === expectedVal) {
+                    // match string value — variant.primary
+                    classes.push(value);
+                }
+            }
+        }
+        if (mode === 'tailwind') {
+            return classes.join(' ');
+        }
+        else {
+            // css mode — join as inline style string
+            return classes.join('; ');
+        }
+    }
+    return {
+        mode,
+        rules,
+        resolve,
+    };
+}
+
+// src/runtime/registry.ts
+// global registry of all mounted component instances
+const registry = new Map();
+function register(name, instance) {
+    const id = `${name}_${Math.random().toString(36).slice(2, 9)}`;
+    const full = {
+        name,
+        id,
+        el: null,
+        state: instance.state ?? {},
+        methods: instance.methods ?? {},
+        props: instance.props ?? {},
+    };
+    if (!registry.has(name))
+        registry.set(name, []);
+    registry.get(name).push(full);
+    return id;
+}
+function unregister(id) {
+    for (const [name, instances] of registry.entries()) {
+        const idx = instances.findIndex(i => i.id === id);
+        if (idx >= 0) {
+            instances.splice(idx, 1);
+            if (instances.length === 0)
+                registry.delete(name);
+            return;
+        }
+    }
+}
+function getAll(name) {
+    return registry.get(name) ?? [];
+}
+function getById(id) {
+    for (const instances of registry.values()) {
+        const found = instances.find(i => i.id === id);
+        if (found)
+            return found;
+    }
+    return null;
+}
+function getByClass(name, cls) {
+    return getAll(name).filter(i => i.el?.classList.contains(cls));
+}
+function getByPropValue(name, prop, value) {
+    return getAll(name).filter(i => i.props[prop] === value);
+}
+function getByStateValue(name, key, value) {
+    return getAll(name).filter(i => i.state[key] === value);
+}
+function clearRegistry() {
+    registry.clear();
+}
+
+// src/runtime/selector.ts
+// jQuery-tribute: unified selector for DOM elements and Tardis component instances
+function parseAttrFilter(raw) {
+    const match = raw.match(/^([\w.]+)\s*(>=|<=|>|<|=)\s*(.+)$/);
+    if (!match)
+        return null;
+    const [, key, op, rawVal] = match;
+    let value;
+    if (rawVal === 'true')
+        value = true;
+    else if (rawVal === 'false')
+        value = false;
+    else if (/^-?\d+(\.\d+)?$/.test(rawVal))
+        value = parseFloat(rawVal);
+    else
+        value = rawVal.replace(/^["']|["']$/g, ''); // strip surrounding quotes
+    return { key, op, value };
+}
+function instanceMatchesAttr(inst, filter) {
+    const { key, op, value } = filter;
+    let actual;
+    if (key.startsWith('state.')) {
+        actual = inst.state[key.slice(6)];
+    }
+    else {
+        actual = inst.props[key] !== undefined ? inst.props[key] : inst.state[key];
+    }
+    switch (op) {
+        case '=': return actual === value;
+        case '>': return actual > value;
+        case '<': return actual < value;
+        case '>=': return actual >= value;
+        case '<=': return actual <= value;
+        default: return false;
+    }
+}
+// ── DOMSelection ─────────────────────────────────────────────────────────────
+class DOMSelection {
+    constructor(elements) {
+        this.elements = elements;
+    }
+    each(fn) {
+        this.elements.forEach(fn);
+        return this;
+    }
+    focus() { return this.each(el => el.focus()); }
+    blur() { return this.each(el => el.blur()); }
+    hide() { return this.each(el => { el.style.display = 'none'; }); }
+    show() { return this.each(el => { el.style.display = ''; }); }
+    remove() { return this.each(el => el.parentNode?.removeChild(el)); }
+    toggle() {
+        return this.each(el => {
+            el.style.display = el.style.display === 'none' ? '' : 'none';
+        });
+    }
+    disable() { return this.each(el => el.setAttribute('disabled', '')); }
+    enable() { return this.each(el => el.removeAttribute('disabled')); }
+    addClass(cls) { return this.each(el => el.classList.add(cls)); }
+    removeClass(cls) { return this.each(el => el.classList.remove(cls)); }
+    toggleClass(cls) { return this.each(el => el.classList.toggle(cls)); }
+    attr(key, val) {
+        if (val === undefined)
+            return this.elements[0]?.getAttribute(key) ?? null;
+        return this.each(el => el.setAttribute(key, val));
+    }
+    val(value) {
+        if (value === undefined)
+            return this.elements[0]?.value ?? '';
+        return this.each(el => { el.value = value; });
+    }
+    rect() { return this.elements[0]?.getBoundingClientRect() ?? null; }
+    width() { return this.elements[0]?.offsetWidth ?? 0; }
+    height() { return this.elements[0]?.offsetHeight ?? 0; }
+    scrollIntoView() { return this.each(el => el.scrollIntoView?.()); }
+    scrollTo(opts) { return this.each(el => el.scrollTo?.(opts)); }
+    fadeIn() { return this.each(el => { el.style.display = ''; el.style.opacity = '1'; }); }
+    fadeOut() { return this.each(el => { el.style.opacity = '0'; }); }
+    slideDown() {
+        return this.each(el => { el.style.overflow = 'hidden'; el.style.maxHeight = ''; });
+    }
+    slideUp() {
+        return this.each(el => { el.style.overflow = 'hidden'; el.style.maxHeight = '0px'; });
+    }
+    // no-ops for component-only API — keeps chaining safe on DOM selections
+    $update(_key, _value) { return this; }
+    $reset(_initial) { return this; }
+    get methods() {
+        const self = this;
+        return new Proxy({}, {
+            get: () => () => self,
+        });
+    }
+}
+// ── ComponentSelection ────────────────────────────────────────────────────────
+class ComponentSelection {
+    constructor(instances) {
+        this.instances = instances;
+    }
+    eachEl(fn) {
+        this.instances.forEach(inst => { if (inst.el)
+            fn(inst.el); });
+        return this;
+    }
+    focus() { return this.eachEl(el => el.focus()); }
+    blur() { return this.eachEl(el => el.blur()); }
+    hide() { return this.eachEl(el => { el.style.display = 'none'; }); }
+    show() { return this.eachEl(el => { el.style.display = ''; }); }
+    remove() { return this.eachEl(el => el.parentNode?.removeChild(el)); }
+    toggle() {
+        return this.eachEl(el => {
+            el.style.display = el.style.display === 'none' ? '' : 'none';
+        });
+    }
+    disable() { return this.eachEl(el => el.setAttribute('disabled', '')); }
+    enable() { return this.eachEl(el => el.removeAttribute('disabled')); }
+    addClass(cls) { return this.eachEl(el => el.classList.add(cls)); }
+    removeClass(cls) { return this.eachEl(el => el.classList.remove(cls)); }
+    toggleClass(cls) { return this.eachEl(el => el.classList.toggle(cls)); }
+    attr(key, val) {
+        if (val === undefined)
+            return this.instances[0]?.el?.getAttribute(key) ?? null;
+        return this.eachEl(el => el.setAttribute(key, val));
+    }
+    val(value) {
+        if (value === undefined)
+            return this.instances[0]?.el?.value ?? '';
+        return this.eachEl(el => { el.value = value; });
+    }
+    rect() { return this.instances[0]?.el?.getBoundingClientRect() ?? null; }
+    width() { return this.instances[0]?.el?.offsetWidth ?? 0; }
+    height() { return this.instances[0]?.el?.offsetHeight ?? 0; }
+    scrollIntoView() { return this.eachEl(el => el.scrollIntoView?.()); }
+    scrollTo(opts) { return this.eachEl(el => el.scrollTo?.(opts)); }
+    fadeIn() { return this.eachEl(el => { el.style.display = ''; el.style.opacity = '1'; }); }
+    fadeOut() { return this.eachEl(el => { el.style.opacity = '0'; }); }
+    slideDown() {
+        return this.eachEl(el => { el.style.overflow = 'hidden'; el.style.maxHeight = ''; });
+    }
+    slideUp() {
+        return this.eachEl(el => { el.style.overflow = 'hidden'; el.style.maxHeight = '0px'; });
+    }
+    // component-specific
+    $update(key, value) {
+        this.instances.forEach(inst => $update(inst.state, key, value));
+        return this;
+    }
+    $reset(initial) {
+        this.instances.forEach(inst => $reset(inst.state, initial));
+        return this;
+    }
+    get methods() {
+        const self = this;
+        return new Proxy({}, {
+            get(_, methodName) {
+                return (...args) => {
+                    self.instances.forEach(inst => inst.methods[methodName]?.(...args));
+                    return self;
+                };
+            },
+        });
+    }
+}
+// ── $ ────────────────────────────────────────────────────────────────────────
+function $(selector) {
+    const s = selector.trim();
+    // Component selectors start with an uppercase letter
+    if (/^[A-Z]/.test(s)) {
+        const m = s.match(/^([A-Za-z]\w*)(?:#([\w-]+))?(?:\.([\w-]+))?(?:\[([^\]]+)\])?$/);
+        if (m) {
+            const [, name, idFilter, classFilter, attrFilter] = m;
+            let instances = getAll(name);
+            if (idFilter)
+                instances = instances.filter(inst => inst.el?.id === idFilter);
+            if (classFilter)
+                instances = instances.filter(inst => inst.el?.classList.contains(classFilter));
+            if (attrFilter) {
+                const parsed = parseAttrFilter(attrFilter);
+                if (parsed)
+                    instances = instances.filter(inst => instanceMatchesAttr(inst, parsed));
+            }
+            return new ComponentSelection(instances);
+        }
+    }
+    // DOM selector — delegate to querySelectorAll
+    const nodes = document.querySelectorAll(s);
+    return new DOMSelection(Array.from(nodes));
+}
+
+// src/runtime/events.ts
+// stores pending mount callbacks to be called after DOM insertion
+const mountCallbacks = [];
+const destroyCallbacks = [];
+function registerEvents(handlers) {
+    if (handlers.onMount) {
+        mountCallbacks.push(handlers.onMount);
+    }
+    if (handlers.onDestroy) {
+        destroyCallbacks.push(handlers.onDestroy);
+    }
+}
+function flushMountCallbacks() {
+    while (mountCallbacks.length > 0) {
+        const cb = mountCallbacks.shift();
+        cb();
+    }
+}
+function flushDestroyCallbacks() {
+    while (destroyCallbacks.length > 0) {
+        const cb = destroyCallbacks.shift();
+        cb();
+    }
+}
+
+const $params = {};
+let activeRouter = null;
+function normalizePath(path) {
+    if (!path)
+        return '/';
+    const [pathname] = path.split('?');
+    const normalized = pathname.startsWith('/') ? pathname : `/${pathname}`;
+    if (normalized !== '/' && normalized.endsWith('/'))
+        return normalized.slice(0, -1);
+    return normalized;
+}
+function splitPath(path) {
+    const normalized = normalizePath(path);
+    if (normalized === '/')
+        return [];
+    return normalized.slice(1).split('/').filter(Boolean);
+}
+function setParams(next) {
+    for (const key of Object.keys($params)) {
+        delete $params[key];
+    }
+    Object.assign($params, next);
+}
+function matchRoute(routePath, currentPath) {
+    const routeParts = splitPath(routePath);
+    const currentParts = splitPath(currentPath);
+    if (routeParts.length !== currentParts.length) {
+        return { matched: false, params: {} };
+    }
+    const params = {};
+    for (let i = 0; i < routeParts.length; i++) {
+        const routePart = routeParts[i];
+        const currentPart = currentParts[i];
+        if (routePart.startsWith(':')) {
+            params[routePart.slice(1)] = decodeURIComponent(currentPart);
+            continue;
+        }
+        if (routePart !== currentPart) {
+            return { matched: false, params: {} };
+        }
+    }
+    return { matched: true, params };
+}
+function resolveRoute(routes, path) {
+    const normalized = normalizePath(path);
+    for (const route of routes) {
+        const result = matchRoute(route.path, normalized);
+        if (result.matched)
+            return { route, params: result.params };
+    }
+    return { route: null, params: {} };
+}
+function createRouter(routes, mountTarget) {
+    const target = mountTarget ?? document.getElementById('app') ?? document.body;
+    let currentNode = null;
+    function render(path) {
+        const { route, params } = resolveRoute(routes, path);
+        if (!route) {
+            target.innerHTML = '<h1>404</h1>';
+            setParams({});
+            currentNode = null;
+            return;
+        }
+        flushDestroyCallbacks();
+        if (currentNode && currentNode.parentNode === target) {
+            target.removeChild(currentNode);
+        }
+        const nextNode = route.component();
+        currentNode = nextNode;
+        setParams(params);
+        target.innerHTML = '';
+        target.appendChild(nextNode);
+    }
+    function navigate(path, replace = false) {
+        const nextPath = normalizePath(path);
+        if (replace) {
+            window.history.replaceState({}, '', nextPath);
+        }
+        else {
+            window.history.pushState({}, '', nextPath);
+        }
+        render(nextPath);
+    }
+    function back() {
+        window.history.back();
+    }
+    function forward() {
+        window.history.forward();
+    }
+    function handleLinkClick(event) {
+        if (event.defaultPrevented)
+            return;
+        if (event.button !== 0)
+            return;
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        const targetEl = event.target;
+        const anchor = targetEl?.closest('a[href]');
+        if (!anchor)
+            return;
+        const href = anchor.getAttribute('href');
+        if (!href || href.startsWith('http') || href.startsWith('mailto:') || href.startsWith('tel:') || href.startsWith('#'))
+            return;
+        if (anchor.target && anchor.target !== '_self')
+            return;
+        const nextPath = normalizePath(href);
+        event.preventDefault();
+        navigate(nextPath);
+    }
+    const router = {
+        start() {
+            render(window.location.pathname);
+            document.addEventListener('click', handleLinkClick);
+            window.addEventListener('popstate', () => {
+                render(window.location.pathname);
+            });
+            activeRouter = router;
+        },
+        navigate,
+        back,
+        forward,
+    };
+    return router;
+}
+function $navigate(path) {
+    if (activeRouter) {
+        activeRouter.navigate(path);
+        return;
+    }
+    const nextPath = normalizePath(path);
+    window.history.pushState({}, '', nextPath);
+}
+function $back() {
+    if (activeRouter) {
+        activeRouter.back();
+        return;
+    }
+    window.history.back();
+}
+function $forward() {
+    if (activeRouter) {
+        activeRouter.forward();
+        return;
+    }
+    window.history.forward();
+}
+
+// src/runtime/index.ts
+// the ~5KB runtime that ships with every tardisjs app
+const $runtime = {
+    // selector
+    $,
+    params: $params,
+    navigate: $navigate,
+    back: $back,
+    forward: $forward,
+    // state
+    state: createState,
+    update: $update,
+    toggle: $toggle,
+    reset: $reset,
+    batch: $batch,
+    registerDep,
+    // fetch
+    fetch: $fetch,
+    // render
+    if: $if,
+    each: $each,
+    show: $show,
+    portal: $portal,
+    bind,
+    bindClass,
+    bindAttr,
+    resolveStyles,
+    text,
+    // styles
+    styles: createStyles,
+    // registry
+    register,
+    unregister,
+    getAll,
+    getById,
+    // events
+    events: registerEvents,
+    flush: flushMountCallbacks,
+    // placeholder — used during compilation before ui is wired up
+    placeholder(name) {
+        const el = document.createElement('div');
+        el.setAttribute('data-component', name);
+        return el;
+    },
+    // component instantiation
+    component(name, props) {
+        // looks up the component factory from a global registry
+        // populated when components are imported
+        const globalRegistry = window;
+        const factory = globalRegistry[`__tardis_${name}`];
+        if (factory)
+            return factory(props);
+        const el = document.createElement('div');
+        el.setAttribute('data-component', name);
+        el.setAttribute('data-props', JSON.stringify(props));
+        return el;
+    },
+    // chain — attaches event to a chained element
+    chain(el, event, handler) {
+        if (event === '__mount') {
+            flushMountCallbacks();
+        }
+        else {
+            el.addEventListener(event, handler);
+        }
+    },
+};
+
+export { $, $back, $batch, $each, $fetch, $forward, $if, $navigate, $params, $portal, $reset, $runtime, $show, $toggle, $update, ComponentSelection, DOMSelection, bind, bindAttr, bindClass, clearRegistry, createRouter, createState, createStyles, flushDestroyCallbacks, flushMountCallbacks, getAll, getByClass, getById, getByPropValue, getByStateValue, register, registerDep, registerEvents, resolveStyles, text, unregister };
+//# sourceMappingURL=index.mjs.map