lumix-js 0.1.0

package/dist/cli/loader.d.ts

@@ -0,0 +1,9 @@
+import type { LuminConfig } from "../config.js";
+/**
+ * Find the config file path in the given directory.
+ */
+export declare function findConfigPath(cwd: string): string | undefined;
+/**
+ * Load and return the LuminJS config from the project directory.
+ */
+export declare function loadConfig(cwd?: string): Promise<LuminConfig>;

package/dist/cli/loader.js

@@ -0,0 +1,34 @@
+import { bundleRequire } from "bundle-require";
+import path from "path";
+import fs from "fs";
+const CONFIG_FILES = [
+    "lumix.config.mjs",
+    "lumix.config.js",
+    "lumix.config.ts",
+    "lumix.config.mts",
+];
+/**
+ * Find the config file path in the given directory.
+ */
+export function findConfigPath(cwd) {
+    for (const file of CONFIG_FILES) {
+        const fullPath = path.resolve(cwd, file);
+        if (fs.existsSync(fullPath)) {
+            return fullPath;
+        }
+    }
+    return undefined;
+}
+/**
+ * Load and return the LuminJS config from the project directory.
+ */
+export async function loadConfig(cwd = process.cwd()) {
+    const configPath = findConfigPath(cwd);
+    if (!configPath) {
+        return {};
+    }
+    const { mod } = await bundleRequire({
+        filepath: configPath,
+    });
+    return mod.default || mod;
+}

package/dist/cli/preview.d.ts

@@ -0,0 +1 @@
+export declare function preview(): Promise<void>;

package/dist/cli/preview.js

@@ -0,0 +1,39 @@
+import { preview as vitePreview } from "vite";
+import lumin from "../../../vite-plugin-lumix/dist/index.js";
+import pc from "picocolors";
+import { loadConfig } from "./loader.js";
+import path from "path";
+import { __dirname } from "./utils.js";
+export async function preview() {
+    const cwd = process.cwd();
+    const config = await loadConfig(cwd);
+    console.log("");
+    console.log(`  ${pc.bold(pc.cyan("⚡ LumixJS"))} ${pc.dim("v0.1.0")}`);
+    console.log(pc.dim("  Previewing production build...\n"));
+    try {
+        const server = await vitePreview({
+            root: cwd,
+            base: "/",
+            plugins: [lumin(config), ...(config.vite?.plugins || [])],
+            preview: {
+                port: 4173,
+                ...config.vite?.preview,
+            },
+            resolve: {
+                alias: {
+                    "lumix-js": path.resolve(__dirname, "../index.js"),
+                    ...config.vite?.resolve?.alias,
+                },
+            },
+            ...config.vite,
+        });
+        const address = server.resolvedUrls?.local?.[0] || `http://localhost:4173/`;
+        console.log(`  ${pc.green("➜")}  ${pc.bold("Preview:")}  ${pc.cyan(address)}`);
+        console.log(`  ${pc.green("➜")}  ${pc.dim("press")} ${pc.bold("Ctrl+C")} ${pc.dim("to stop")}\n`);
+    }
+    catch (e) {
+        console.error(pc.red(pc.bold("\n  Preview failed!")));
+        console.error(pc.red(`  ${e.message}\n`));
+        process.exit(1);
+    }
+}

package/dist/cli/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const __filename: string;
+export declare const __dirname: string;

package/dist/cli/utils.js

@@ -0,0 +1,4 @@
+import { fileURLToPath } from "url";
+import path from "path";
+export const __filename = fileURLToPath(import.meta.url);
+export const __dirname = path.dirname(__filename);

package/dist/config.d.ts

@@ -0,0 +1,42 @@
+export interface LuminConfig {
+    /**
+     * Application title, injected into the <title> tag.
+     */
+    title?: string;
+    /**
+     * Path to the favicon file (e.g. "./favicon.ico" or "/icon.png").
+     */
+    favicon?: string;
+    /**
+     * Head metadata (meta tags, link tags, etc.)
+     */
+    head?: {
+        meta?: Array<Record<string, string>>;
+        link?: Array<Record<string, string>>;
+        script?: Array<Record<string, string>>;
+    };
+    /**
+     * Root element ID to hydrate into. Defaults to 'app'.
+     */
+    rootId?: string;
+    /**
+     * Vite specific configuration overrides.
+     */
+    vite?: any;
+    /**
+     * Source directory. Defaults to the root of the project.
+     */
+    srcDir?: string;
+    /**
+     * Enable or disable semantic type checking during build/dev.
+     * Defaults to true in TS projects, can be disabled for JS projects.
+     */
+    checkTypes?: boolean;
+    /** Allow extra keys without TS errors, but we'll warn at runtime */
+    [key: string]: any;
+}
+/**
+ * Helper function to provide types for the LuminJS config.
+ * Validates the config and warns about unknown fields.
+ */
+export declare function defineConfig(config: LuminConfig): LuminConfig;

package/dist/config.js

@@ -0,0 +1,21 @@
+const VALID_KEYS = new Set([
+    "title",
+    "favicon",
+    "head",
+    "rootId",
+    "vite",
+    "srcDir",
+    "checkTypes",
+]);
+/**
+ * Helper function to provide types for the LuminJS config.
+ * Validates the config and warns about unknown fields.
+ */
+export function defineConfig(config) {
+    const unknown = Object.keys(config).filter((k) => !VALID_KEYS.has(k));
+    if (unknown.length > 0) {
+        console.warn(`\x1b[33m[lumin] Warning: Unknown config field(s): ${unknown.map((k) => `"${k}"`).join(", ")}.\x1b[0m`);
+        console.warn(`\x1b[33m[lumin] Valid fields are: ${[...VALID_KEYS].join(", ")}.\x1b[0m`);
+    }
+    return config;
+}

package/dist/control.d.ts

@@ -0,0 +1,17 @@
+export type ControlBranch = {
+    cond?: () => any;
+    body: () => any | any[];
+};
+/**
+ * Reactive If/Else helper
+ * @param condition Initial condition for the first branch
+ * @param branches List of branches with optional conditions and bodies
+ */
+export declare function __if(condition: () => any, branches: ControlBranch[]): () => any;
+/**
+ * Reactive For loop helper
+ * @param list Closure returning the array to iterate over
+ * @param render Closure to render each item
+ * @param keyFn Optional closure to extract a unique key from each item
+ */
+export declare function __for<T>(list: () => T[], render: (item: T, index: number) => any | any[], keyFn?: (item: T) => any): () => any[];

package/dist/control.js

@@ -0,0 +1,47 @@
+/**
+ * Reactive If/Else helper
+ * @param condition Initial condition for the first branch
+ * @param branches List of branches with optional conditions and bodies
+ */
+export function __if(condition, branches) {
+    return () => {
+        if (condition())
+            return branches[0].body();
+        for (let i = 1; i < branches.length; i++) {
+            const b = branches[i];
+            if (!b.cond || b.cond())
+                return b.body();
+        }
+        return [];
+    };
+}
+/**
+ * Reactive For loop helper
+ * @param list Closure returning the array to iterate over
+ * @param render Closure to render each item
+ * @param keyFn Optional closure to extract a unique key from each item
+ */
+export function __for(list, render, keyFn) {
+    const cache = new Map();
+    return () => {
+        const items = list() || [];
+        if (!keyFn)
+            return items.map((item, index) => render(item, index));
+        const newNodes = items.map((item, index) => {
+            const key = keyFn(item);
+            if (cache.has(key))
+                return cache.get(key);
+            const rendered = render(item, index);
+            cache.set(key, rendered);
+            return rendered;
+        });
+        // Cleanup cache for items no longer present
+        const itemKeys = new Set(items.map(keyFn));
+        for (const key of cache.keys()) {
+            if (!itemKeys.has(key)) {
+                cache.delete(key);
+            }
+        }
+        return newNodes;
+    };
+}

package/dist/dom.d.ts

@@ -0,0 +1,8 @@
+import { Signal } from "./signals.js";
+export type AttrValue = string | number | boolean | (() => any) | Signal<any>;
+export interface Props {
+    [key: string]: AttrValue;
+}
+export declare function h(tag: string | ((props: Props, ...children: any[]) => any), props: Props | null, ...children: any[]): any;
+export declare function Fragment(_props: any, ...children: any[]): any[];
+export declare function hydrate(root: HTMLElement, component: (props?: any) => HTMLElement, props?: any): void;

package/dist/dom.js

@@ -0,0 +1,136 @@
+import { effect } from "./signals.js";
+import { bind } from "./bind.js";
+import { withHooks, runHooks } from "./lifecycle.js";
+export function h(tag, props, ...children) {
+    if (typeof tag === "function") {
+        const { result, mount, destroy } = withHooks(() => tag(props || {}, ...children));
+        // If it's a component that returns a single element, we can attach hooks to it
+        if (result instanceof HTMLElement) {
+            if (mount.length > 0) {
+                // Simple trick: use MutationObserver or just run on next tick if added
+                setTimeout(() => runHooks(mount), 0);
+            }
+            if (destroy.length > 0) {
+                result._luminDestroy = destroy;
+            }
+        }
+        return result;
+    }
+    const el = document.createElement(tag);
+    if (props) {
+        for (const [key, value] of Object.entries(props)) {
+            // ── bind: directive ──────────────────────────────
+            if (key.startsWith("bind:")) {
+                const property = key.slice(5); // "bind:value" → "value"
+                if (typeof value === "function" && "_peek" in value) {
+                    // It's a Signal — set up two-way binding
+                    bind(el, property, value);
+                }
+                continue;
+            }
+            // ── Event handlers ───────────────────────────────
+            if (key.startsWith("on") && typeof value === "function") {
+                const eventName = key.slice(2).toLowerCase();
+                el.addEventListener(eventName, value);
+            }
+            // ── Reactive attribute (Signal or closure) ───────
+            else if (typeof value === "function") {
+                effect(() => {
+                    const v = value();
+                    if (key === "value" ||
+                        key === "checked" ||
+                        key === "disabled" ||
+                        key === "selected") {
+                        // DOM properties not attributes
+                        el[key] = v;
+                    }
+                    else if (typeof v === "boolean") {
+                        if (v)
+                            el.setAttribute(key, "");
+                        else
+                            el.removeAttribute(key);
+                    }
+                    else {
+                        el.setAttribute(key, String(v));
+                    }
+                });
+            }
+            // ── Static attribute ─────────────────────────────
+            else {
+                el.setAttribute(key, String(value));
+            }
+        }
+    }
+    for (const child of children.flat(Infinity)) {
+        if (child === null || child === undefined)
+            continue;
+        if (typeof child === "function") {
+            // Reactive block (Signal, closure, or control flow helper)
+            const startMarker = document.createComment("cf-start");
+            const endMarker = document.createComment("cf-end");
+            el.appendChild(startMarker);
+            el.appendChild(endMarker);
+            let prevNodes = [];
+            effect(() => {
+                let v = child();
+                // Normalize to array of nodes
+                let newNodes = [];
+                const items = Array.isArray(v) ? v.flat(Infinity) : [v];
+                for (let item of items) {
+                    if (item === null || item === undefined)
+                        continue;
+                    while (typeof item === "function") {
+                        item = item();
+                    }
+                    if (item instanceof Node) {
+                        newNodes.push(item);
+                    }
+                    else {
+                        newNodes.push(document.createTextNode(String(item)));
+                    }
+                }
+                // --- Improved Reconciliation ---
+                const newNodeSet = new Set(newNodes);
+                // 1. Remove and unmount only nodes that are NOT in the new set
+                for (const node of prevNodes) {
+                    if (!newNodeSet.has(node)) {
+                        unmount(node);
+                        if (node.parentNode === el) {
+                            el.removeChild(node);
+                        }
+                    }
+                }
+                // 2. Insert or move nodes
+                // insertBefore naturally handles moves (reaches same state if already correctly positioned)
+                for (const node of newNodes) {
+                    el.insertBefore(node, endMarker);
+                }
+                prevNodes = newNodes;
+            });
+        }
+        else if (child instanceof Node) {
+            el.appendChild(child);
+        }
+        else {
+            el.appendChild(document.createTextNode(String(child)));
+        }
+    }
+    return el;
+}
+export function Fragment(_props, ...children) {
+    return children.flat(Infinity);
+}
+function unmount(node) {
+    if (node instanceof HTMLElement) {
+        const hooks = node._luminDestroy;
+        if (hooks)
+            runHooks(hooks);
+    }
+    node.childNodes.forEach(unmount);
+}
+export function hydrate(root, component, props) {
+    while (root.firstChild)
+        root.removeChild(root.firstChild);
+    const el = h(component, props || {});
+    root.appendChild(el);
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./signals.js";
+export * from "./store.js";
+export * from "./bind.js";
+export * from "./dom.js";
+export * from "./control.js";
+export * from "./lifecycle.js";
+export * from "./config.js";

package/dist/index.js

@@ -0,0 +1,7 @@
+export * from "./signals.js";
+export * from "./store.js";
+export * from "./bind.js";
+export * from "./dom.js";
+export * from "./control.js";
+export * from "./lifecycle.js";
+export * from "./config.js";

package/dist/lifecycle.d.ts

@@ -0,0 +1,16 @@
+type Hook = () => void;
+export declare function onMount(fn: Hook): void;
+export declare function onDestroy(fn: Hook): void;
+/**
+ * Internal helper to catch hooks during component execution
+ */
+export declare function withHooks<T>(fn: () => T): {
+    result: T;
+    mount: Hook[];
+    destroy: Hook[];
+};
+/**
+ * Internal helper to run a set of hooks
+ */
+export declare function runHooks(hooks: Hook[]): void;
+export {};

package/dist/lifecycle.js

@@ -0,0 +1,45 @@
+let currentHooks = null;
+export function onMount(fn) {
+    if (currentHooks) {
+        currentHooks.mount.push(fn);
+    }
+    else {
+        console.warn("onMount must be called during component initialization.");
+    }
+}
+export function onDestroy(fn) {
+    if (currentHooks) {
+        currentHooks.destroy.push(fn);
+    }
+    else {
+        console.warn("onDestroy must be called during component initialization.");
+    }
+}
+/**
+ * Internal helper to catch hooks during component execution
+ */
+export function withHooks(fn) {
+    const previous = currentHooks;
+    const hooks = { mount: [], destroy: [] };
+    currentHooks = hooks;
+    try {
+        const result = fn();
+        return { result, ...hooks };
+    }
+    finally {
+        currentHooks = previous;
+    }
+}
+/**
+ * Internal helper to run a set of hooks
+ */
+export function runHooks(hooks) {
+    for (const hook of hooks) {
+        try {
+            hook();
+        }
+        catch (e) {
+            console.error("Error in hook:", e);
+        }
+    }
+}

package/dist/signals.d.ts

@@ -0,0 +1,21 @@
+export type Subscriber<T> = (value: T) => void;
+export type Unsubscribe = () => void;
+export type CleanupFn = () => void;
+export interface Signal<T> {
+    (): T;
+    (next: T): T;
+    readonly value: T;
+    _subscribe(fn: Subscriber<T>): Unsubscribe;
+    _peek(): T;
+}
+export interface ReadonlySignal<T> {
+    (): T;
+    readonly value: T;
+    _subscribe(fn: Subscriber<T>): Unsubscribe;
+    _peek(): T;
+}
+export declare function signal<T>(initialValue: T): Signal<T>;
+export declare function effect(fn: () => void | CleanupFn): Unsubscribe;
+export declare function computed<T>(fn: () => T): ReadonlySignal<T>;
+export declare function batch<T>(fn: () => T): T;
+export declare function untrack<T>(fn: () => T): T;

package/dist/signals.js

@@ -0,0 +1,144 @@
+let activeEffect = null;
+let batchDepth = 0;
+const pendingEffects = new Set();
+function runEffect(node) {
+    // Cleanup previous run
+    if (node.cleanup)
+        node.cleanup();
+    // Remove this effect from all its previous dependency sets
+    for (const depSet of node.deps) {
+        depSet.delete(node);
+    }
+    node.deps.clear();
+    // Run with tracking
+    const prev = activeEffect;
+    activeEffect = node;
+    try {
+        node.cleanup = node.execute();
+    }
+    finally {
+        activeEffect = prev;
+    }
+}
+function notify(subscribers) {
+    for (const node of [...subscribers]) {
+        if (batchDepth > 0) {
+            pendingEffects.add(node);
+        }
+        else {
+            runEffect(node);
+        }
+    }
+}
+// ─── signal() ──────────────────────────────────────────────
+export function signal(initialValue) {
+    let value = initialValue;
+    const subscribers = new Set();
+    function readWrite(next) {
+        if (arguments.length === 0) {
+            // Track dependency
+            if (activeEffect) {
+                subscribers.add(activeEffect);
+                activeEffect.deps.add(subscribers);
+            }
+            return value;
+        }
+        else {
+            const newVal = next;
+            if (!Object.is(value, newVal)) {
+                value = newVal;
+                notify(subscribers);
+            }
+            return value;
+        }
+    }
+    Object.defineProperty(readWrite, "value", {
+        get() {
+            return readWrite();
+        },
+        set(v) {
+            readWrite(v);
+        },
+        enumerable: true,
+    });
+    readWrite._subscribe = (fn) => {
+        const node = {
+            execute: () => fn(value),
+            deps: new Set(),
+            cleanup: undefined,
+        };
+        subscribers.add(node);
+        return () => {
+            subscribers.delete(node);
+            for (const depSet of node.deps)
+                depSet.delete(node);
+        };
+    };
+    readWrite._peek = () => value;
+    return readWrite;
+}
+// ─── effect() ──────────────────────────────────────────────
+export function effect(fn) {
+    const node = {
+        execute: fn,
+        deps: new Set(),
+        cleanup: undefined,
+    };
+    runEffect(node);
+    return () => {
+        if (node.cleanup)
+            node.cleanup();
+        for (const depSet of node.deps) {
+            depSet.delete(node);
+        }
+        node.deps.clear();
+    };
+}
+// ─── computed() ────────────────────────────────────────────
+export function computed(fn) {
+    const inner = signal(undefined);
+    effect(() => {
+        inner(fn());
+    });
+    // Return read-only wrapper
+    function readOnly() {
+        return inner();
+    }
+    Object.defineProperty(readOnly, "value", {
+        get() {
+            return inner();
+        },
+        enumerable: true,
+    });
+    readOnly._subscribe = inner._subscribe;
+    readOnly._peek = inner._peek;
+    return readOnly;
+}
+// ─── batch() ───────────────────────────────────────────────
+export function batch(fn) {
+    batchDepth++;
+    try {
+        return fn();
+    }
+    finally {
+        batchDepth--;
+        if (batchDepth === 0) {
+            const effects = [...pendingEffects];
+            pendingEffects.clear();
+            for (const node of effects) {
+                runEffect(node);
+            }
+        }
+    }
+}
+// ─── untrack() ─────────────────────────────────────────────
+export function untrack(fn) {
+    const prev = activeEffect;
+    activeEffect = null;
+    try {
+        return fn();
+    }
+    finally {
+        activeEffect = prev;
+    }
+}

package/dist/store.d.ts

@@ -0,0 +1,37 @@
+import { Signal, Unsubscribe } from "./signals.js";
+export type StoreListener<T> = (state: T, key?: string) => void;
+export interface Store<T extends Record<string, any>> {
+    /** Read a key reactively */
+    get<K extends keyof T>(key: K): T[K];
+    /** Write a key and notify subscribers */
+    set<K extends keyof T>(key: K, value: T[K]): void;
+    /** Update multiple keys in a batch */
+    update(partial: Partial<T>): void;
+    /** Reset to initial state */
+    reset(): void;
+    /** Get an immutable snapshot */
+    snapshot(): Readonly<T>;
+    /** Subscribe to all changes */
+    subscribe(fn: StoreListener<T>): Unsubscribe;
+    /** Get underlying signal for a key */
+    signal<K extends keyof T>(key: K): Signal<T[K]>;
+    /** Reactive proxy — read/write with `store.state.key` */
+    readonly state: T;
+}
+export interface PersistOptions {
+    /** Storage key for persistence */
+    key: string;
+    /** Storage backend — defaults to localStorage */
+    storage?: Storage;
+    /** Custom serializer — defaults to JSON.stringify */
+    serialize?: (value: any) => string;
+    /** Custom deserializer — defaults to JSON.parse */
+    deserialize?: (value: string) => any;
+    /** Keys to include (whitelist). If omitted, all keys are persisted. */
+    include?: string[];
+    /** Keys to exclude (blacklist). */
+    exclude?: string[];
+}
+export declare function store<T extends Record<string, any>>(initialState: T): Store<T>;
+export declare function persist<T extends Record<string, any>>(st: Store<T>, options: PersistOptions): Unsubscribe;
+export declare function derived<T extends Record<string, any>, R>(st: Store<T>, fn: (state: Readonly<T>) => R): Signal<R>;