@minejs/jsx 0.0.5 → 0.0.7

package/README.md

@@ -8,10 +8,10 @@
 </div>
 
 <div align="center">
-    <img src="https://img.shields.io/badge/v-0.0.5-black"/>
+    <img src="https://img.shields.io/badge/v-0.0.7-black"/>
     <img src="https://img.shields.io/badge/🔥-@minejs-black"/>
     <br>
-    <img src="https://img.shields.io/badge/coverage-97.59%25-brightgreen" alt="Test Coverage" />
+    <img src="https://img.shields.io/badge/coverage-98.78%25-brightgreen" alt="Test Coverage" />
     <img src="https://img.shields.io/github/issues/minejs-org/jsx?style=flat" alt="Github Repo Issues" />
     <img src="https://img.shields.io/github/stars/minejs-org/jsx?style=social" alt="GitHub Repo stars" />
 </div>
@@ -25,7 +25,7 @@
 
 - ## Quick Start 🔥
 
-    > **_Lightweight JSX runtime with fine-grained reactivity._**
+    > Lightweight JSX runtime with fine-grained reactivity..
 
     - ### Setup
 
@@ -40,7 +40,10 @@
     - ### Usage
 
         ```ts
-        import { jsx, Fragment, Show, For, render, mount, createRoot } from '@minejs/jsx'
+        import {
+            jsx, Fragment,
+            Show, For, render, mount, createRoot
+            } from '@minejs/jsx'
         import { signal } from '@minejs/signals'
         ```
 
@@ -88,583 +91,17 @@
             })
             ```
 
-        - ### 4. Control Flow Components
-
-            ```typescript
-            const isVisible = signal(true)
-            const items = signal(['Apple', 'Banana', 'Orange'])
-
-            // Conditional rendering
-            const conditional = Show({
-                when: isVisible(),
-                children: jsx('div', { children: 'Visible!' })
-            })
-
-            // List rendering
-            const list = For({
-                each: items(),
-                children: (item) => jsx('li', { children: item })
-            })
-            ```
-
-
     <br>
 
 - ## API Reference 🔥
 
-    - #### `jsx<P = any>(type: string | ComponentFunction, props: JSXProps | null): JSXElement`
-        > Create a DOM element from JSX or component function.
-
-        ```typescript
-        // HTML element
-        const div = jsx('div', {
-            className: 'box',
-            children: 'Content'
-        })
-
-        // Component
-        const Greeting = (props) => jsx('h1', { children: `Hello, ${props.name}!` })
-        const greeting = jsx(Greeting, { name: 'John' })
-        ```
-
-    - #### `jsxs(type: string | ComponentFunction, props: JSXProps | null): JSXElement`
-
-        > Alias for jsx(). Used by TypeScript JSX transform for multiple children.
-
-        ```typescript
-        const el = jsxs('div', {
-            children: [
-                jsx('h1', { children: 'Title' }),
-                jsx('p', { children: 'Paragraph' })
-            ]
-        })
-        ```
-
-    - #### `Fragment(props: { children?: any }): DocumentFragment`
-
-        > Create a DocumentFragment to group elements without wrapper.
-
-        ```typescript
-        const frag = Fragment({
-            children: [
-                jsx('div', { children: 'First' }),
-                jsx('div', { children: 'Second' })
-            ]
-        })
-        ```
-
-    - #### `component<P = any>(fn: (props: P) => JSXElement | null): ComponentFunction<P>`
-
-        > Create a component from a function.
-
-        ```typescript
-        const Button = component<{ label: string }>((props) => {
-            return jsx('button', { children: props.label })
-        })
-        ```
-
-    - #### `defineComponent<P = any>(setup: (props: P) => () => JSXElement | null): ComponentFunction<P>`
-
-        > Create a component with setup function (like Vue Composition API).
-
-        ```typescript
-        const Counter = defineComponent((props) => {
-            const count = signal(0)
-
-            return () => jsx('div', {
-                children: `Count: ${count()}`
-            })
-        })
-        ```
-
-    - #### `Show(props: { when: boolean | Signal<boolean>, children: any }): JSXElement | null`
-
-        > Conditional rendering based on boolean condition.
-
-        ```typescript
-        const isLoggedIn = signal(false)
-
-        Show({
-            when: isLoggedIn(),
-            children: jsx('div', { children: 'Welcome back!' })
-        })
-        ```
-
-    - #### `Switch(props: { children: { when: boolean | Signal<boolean>, children: any }[] }): JSXElement | null`
-
-        > Render first matching condition.
-
-        ```typescript
-        const status = signal('loading')
-
-        Switch({
-            children: [
-                { when: status() === 'loading', children: jsx('div', { children: 'Loading...' }) },
-                { when: status() === 'error', children: jsx('div', { children: 'Error!' }) },
-                { when: status() === 'success', children: jsx('div', { children: 'Success!' }) }
-            ]
-        })
-        ```
-
-    - #### `For<T>(props: { each: T[] | Signal<T[]>, children: (item: T, index: number) => JSXElement }): JSXElement`
-
-        > Render list of items.
-
-        ```typescript
-        const todos = signal([
-            { id: 1, text: 'Learn JSX' },
-            { id: 2, text: 'Build app' }
-        ])
-
-        For({
-            each: todos(),
-            children: (todo) => jsx('li', { children: todo.text })
-        })
-        ```
-
-    - #### `createElements(elements: any[]): DocumentFragment`
-
-        > Create multiple elements at once.
-
-        ```typescript
-        const fragment = createElements([
-            jsx('div', null),
-            jsx('span', null),
-            jsx('button', null)
-        ])
-        ```
-
-    - #### `render(component: JSXElement | (() => JSXElement), container: HTMLElement | string, options?: RenderOptions): MountedComponent`
-
-        > Render component to DOM.
-
-        ```typescript
-        const el = jsx('div', { children: 'Content' })
-
-        const mounted = render(el, '#app', {
-            mode: 'replace',
-            onMount: () => console.log('Mounted!'),
-            onUnmount: () => console.log('Unmounted!')
-        })
-
-        mounted.unmount()
-        mounted.update(newElement)
-        ```
-
-    - #### `mount(component: JSXElement | (() => JSXElement), container: HTMLElement | string): MountedComponent`
-
-        > Shorthand for render with replace mode.
-
-        ```typescript
-        mount(jsx('div', { children: 'App' }), '#app')
-        ```
-
-    - #### `createRoot(container: HTMLElement | string): { render: (component) => void, unmount: () => void }`
-
-        > Create a root for multiple renders.
-
-        ```typescript
-        const root = createRoot('#app')
-        root.render(jsx('div', { children: 'First' }))
-        root.render(jsx('div', { children: 'Second' }))
-        root.unmount()
-        ```
-
-    - #### `hydrate(component: JSXElement | (() => JSXElement), container: HTMLElement | string): MountedComponent`
-
-        > Hydrate server-rendered HTML with client-side interactivity.
-
-        ```typescript
-        hydrate(jsx('div', { children: 'Content' }), '#app')
-        ```
-
-    - #### `createPortal(children: JSXElement, container: HTMLElement | string): JSXElement`
-
-        > Render element to different DOM node.
-
-        ```typescript
-        const modal = createPortal(
-            jsx('div', { className: 'modal', children: 'Modal content' }),
-            document.body
-        )
-        ```
-
-    - #### `Teleport(props: { to: string | HTMLElement, children: JSXElement }): JSXElement`
-
-        > Alias for createPortal with component syntax.
-
-        ```typescript
-        Teleport({
-            to: '#portal',
-            children: jsx('div', { children: 'Teleported!' })
-        })
-        ```
-
-    - #### `lazy<P = any>(loader: () => Promise<{ default: (props: P) => JSXElement }>, fallback?: JSXElement): (props: P) => JSXElement`
-
-        > Lazy load component with dynamic import.
-
-        ```typescript
-        const HeavyComponent = lazy(
-            () => import('./HeavyComponent'),
-            jsx('div', { children: 'Loading...' })
-        )
-        ```
-
-    - #### `ErrorBoundary(props: { fallback: (error: Error) => JSXElement, children: JSXElement }): JSXElement`
-
-        > Catch errors in component tree.
-
-        ```typescript
-        ErrorBoundary({
-            fallback: (error) => jsx('div', { children: `Error: ${error.message}` }),
-            children: jsx('div', { children: 'Content' })
-        })
-        ```
-
-    - #### `Suspense(props: { fallback: JSXElement, children: JSXElement | Promise<JSXElement> }): JSXElement`
-
-        > Handle async content with fallback.
-
-        ```typescript
-        Suspense({
-            fallback: jsx('div', { children: 'Loading...' }),
-            children: Promise.resolve(jsx('div', { children: 'Loaded!' }))
-        })
-        ```
-
-    - #### `queueUpdate(fn: () => void): void`
-
-        > Queue DOM update to be batched.
-
-        ```typescript
-        queueUpdate(() => {
-            // DOM update
-        })
-        ```
-
-    - #### `onDOMReady(callback: () => void): void`
-
-        > Execute callback when DOM is ready.
-
-        ```typescript
-        onDOMReady(() => {
-            console.log('DOM ready!')
-        })
-        ```
-
-    - #### `isBrowser(): boolean`
-
-        > Check if running in browser environment.
-
-        ```typescript
-        if (isBrowser()) {
-            console.log('Running in browser!')
-        }
-        ```
-
-    <br>
-
-
-- ## Real-World Examples
-
-  - #### Counter Component
-
-    ```typescript
-    import { jsx } from '@minejs/jsx'
-    import { render } from '@minejs/jsx'
-    import { signal } from '@minejs/signals'
-
-    const count = signal(0)
+    - #### [`Render`](./docs/render.md)
 
-    const app = jsx('div', {
-        className: 'counter',
-        children: [
-            jsx('h1', { children: `Count: ${count()}` }),
-            jsx('button', {
-                children: 'Increment',
-                onClick: () => count.set(count() + 1)
-            })
-        ]
-    })
-
-    render(app, '#app')
-    ```
-
-  - #### Todo App
-
-    ```typescript
-    import { jsx, For, Show } from '@minejs/jsx'
-    import { render } from '@minejs/jsx'
-    import { signal, computed } from '@minejs/signals'
-
-    interface Todo {
-        id: number
-        text: string
-        done: boolean
-    }
-
-    const todos = signal<Todo[]>([])
-    const input = signal('')
-    const filter = signal<'all' | 'active' | 'completed'>('all')
-
-    const filteredTodos = computed(() => {
-        const f = filter()
-        const t = todos()
-
-        if (f === 'active') return t.filter(todo => !todo.done)
-        if (f === 'completed') return t.filter(todo => todo.done)
-        return t
-    })
-
-    const addTodo = () => {
-        if (input().trim()) {
-            todos.update(list => [
-                ...list,
-                { id: Date.now(), text: input(), done: false }
-            ])
-            input.set('')
-        }
-    }
-
-    const app = jsx('div', {
-        className: 'todo-app',
-        children: [
-            jsx('h1', { children: 'Todos' }),
-            jsx('div', {
-                className: 'input-group',
-                children: [
-                    jsx('input', {
-                        type: 'text',
-                        value: input(),
-                        onInput: (e) => input.set((e.target as HTMLInputElement).value),
-                        placeholder: 'Add todo...'
-                    }),
-                    jsx('button', {
-                        children: 'Add',
-                        onClick: addTodo
-                    })
-                ]
-            }),
-            jsx('ul', {
-                children: For({
-                    each: filteredTodos(),
-                    children: (todo) => jsx('li', {
-                        children: [
-                            jsx('input', {
-                                type: 'checkbox',
-                                checked: todo.done
-                            }),
-                            jsx('span', { children: todo.text })
-                        ]
-                    })
-                })
-            })
-        ]
-    })
-
-    render(app, '#app')
-    ```
-
-  - #### Form with Validation
-
-    ```typescript
-    import { jsx, Show } from '@minejs/jsx'
-    import { render } from '@minejs/jsx'
-    import { signal, computed } from '@minejs/signals'
-
-    const email = signal('')
-    const password = signal('')
-
-    const isEmailValid = computed(() => {
-        return email().includes('@') && email().length > 3
-    })
-
-    const isPasswordValid = computed(() => {
-        return password().length >= 8
-    })
-
-    const canSubmit = computed(() => {
-        return isEmailValid() && isPasswordValid()
-    })
-
-    const form = jsx('form', {
-        children: [
-            jsx('div', {
-                children: [
-                    jsx('input', {
-                        type: 'email',
-                        value: email(),
-                        onInput: (e) => email.set((e.target as HTMLInputElement).value),
-                        placeholder: 'Email'
-                    }),
-                    Show({
-                        when: !isEmailValid() && email(),
-                        children: jsx('span', {
-                            style: { color: 'red' },
-                            children: 'Invalid email'
-                        })
-                    })
-                ]
-            }),
-            jsx('div', {
-                children: [
-                    jsx('input', {
-                        type: 'password',
-                        value: password(),
-                        onInput: (e) => password.set((e.target as HTMLInputElement).value),
-                        placeholder: 'Password'
-                    }),
-                    Show({
-                        when: !isPasswordValid() && password(),
-                        children: jsx('span', {
-                            style: { color: 'red' },
-                            children: 'Password must be 8+ characters'
-                        })
-                    })
-                ]
-            }),
-            jsx('button', {
-                type: 'submit',
-                disabled: !canSubmit(),
-                children: 'Submit'
-            })
-        ]
-    })
-
-    render(form, '#app')
-    ```
-
-  - #### Dynamic List with Filtering
-
-    ```typescript
-    import { jsx, For, Show } from '@minejs/jsx'
-    import { render } from '@minejs/jsx'
-    import { signal, computed } from '@minejs/signals'
-
-    const items = signal(['React', 'Vue', 'Svelte', 'SolidJS'])
-    const searchTerm = signal('')
-
-    const filtered = computed(() => {
-        const term = searchTerm().toLowerCase()
-        return items().filter(item => item.toLowerCase().includes(term))
-    })
-
-    const app = jsx('div', {
-        children: [
-            jsx('input', {
-                type: 'text',
-                value: searchTerm(),
-                onInput: (e) => searchTerm.set((e.target as HTMLInputElement).value),
-                placeholder: 'Search...'
-            }),
-            jsx('ul', {
-                children: For({
-                    each: filtered(),
-                    children: (item) => jsx('li', { children: item })
-                })
-            }),
-            Show({
-                when: filtered().length === 0,
-                children: jsx('p', { children: 'No results found' })
-            })
-        ]
-    })
-
-    render(app, '#app')
-    ```
-
-
-- ## More 🔥
-
-    - ### Vanilla Setup (No Framework)
-
-        - #### HTML :
-
-            ```html
-            <!DOCTYPE html>
-            <html>
-            <head>
-                <title>My App</title>
-            </head>
-            <body>
-                <div id="app"></div>
-                <script type="module" src="./app.ts"></script>
-            </body>
-            </html>
-            ```
-
-        - #### TypeScript/JavaScript (app.ts)
-
-            ```typescript
-            import { jsx } from '@minejs/jsx'
-            import { mount } from '@minejs/jsx'
-            import { signal } from '@minejs/signals'
-
-            // Create reactive state
-            const count = signal(0)
-
-            // Create UI
-            const app = jsx('div', {
-                className: 'container',
-                children: [
-                    jsx('h1', { children: `Count: ${count()}` }),
-                    jsx('button', {
-                        children: 'Increment',
-                        onClick: () => count.set(count() + 1)
-                    })
-                ]
-            })
-
-            // Mount to DOM
-            mount(app, '#app')
-            ```
-
-    <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> <br> </div>
-
-    - ### Using JSX Syntax (.tsx/.jsx files)
-
-        - #### TypeScript Configuration (tsconfig.json)
-
-            ```json
-            {
-                "compilerOptions": {
-                    "jsx"               : "react-jsx",
-                    "jsxImportSource"   : "@minejs/jsx",
-                    "target"            : "ES2020",
-                    "module"            : "ESNext"
-                }
-            }
-            ```
-
-        - #### Component File (Counter.tsx)
+        > Lightweight DOM rendering library for JSX elements.
 
-            ```tsx
-            import { signal } from '@minejs/signals'
-            import { JSXElement } from '@minejs/jsx'
+    - #### [`Runtime`](./docs/runtime.md)
 
-            export function Counter(): JSXElement {
-                const count = signal(0)
-
-                return (
-                    <div className="counter">
-                        <h1>Count: {count()}</h1>
-                        <button onClick={() => count.set(count() + 1)}>
-                            Increment
-                        </button>
-                    </div>
-                )
-            }
-            ```
-
-        - #### Main App (app.tsx)
-
-            ```tsx
-            import { mount } from '@minejs/jsx'
-            import { Counter } from './Counter'
-
-            mount(<Counter />, '#app')
-            ```
+        > Lightweight JSX runtime with fine-grained reactivity.
 
 <!-- ╚═════════════════════════════════════════════════════════════════╝ -->
 

package/dist/index.cjs

@@ -1,2 +1,2 @@
-'use strict';var signals=require('@minejs/signals');function s(e,n){return typeof e=="function"?e(n||{}):C(e,n||{})}var g=s;function f(e){let n=document.createDocumentFragment();return d(e.children).forEach(o=>{o instanceof Node&&n.appendChild(o);}),n}function C(e,n){let t=document.createElement(e);for(let[o,r]of Object.entries(n))o==="children"?x(t,r):o==="ref"?J(t,r):o.startsWith("on")?X(t,o,r):o==="className"||o==="class"?M(t,r):o==="style"?w(t,r):signals.isSignal(r)?T(t,o,r):typeof r=="boolean"?r&&t.setAttribute(o,""):r!=null&&t.setAttribute(o,String(r));return t}function x(e,n){d(n).forEach(o=>{if(o instanceof Node)e.appendChild(o);else if(signals.isSignal(o)){let r=document.createTextNode("");signals.effect(()=>{r.textContent=String(o());}),e.appendChild(r);}else o!=null&&o!==false&&e.appendChild(document.createTextNode(String(o)));});}function d(e){return e==null||e===false?[]:Array.isArray(e)?e.flatMap(d):[e]}function J(e,n){signals.isSignal(n)?n.set(e):typeof n=="function"&&n(e);}function X(e,n,t){if(typeof t!="function")return;let o=n.slice(2).toLowerCase();e.addEventListener(o,t);}function M(e,n){signals.isSignal(n)?signals.effect(()=>{let t=n();t!=null&&(e.className=String(t));}):n!=null&&(e.className=String(n));}function w(e,n){signals.isSignal(n)?signals.effect(()=>{let t=n();h(e,t);}):h(e,n);}function h(e,n){typeof n=="string"?e.style.cssText=n:typeof n=="object"&&n!=null&&Object.entries(n).forEach(([t,o])=>{if(o!=null){let r=t.replace(/[A-Z]/g,i=>`-${i.toLowerCase()}`);e.style.setProperty(r,String(o));}});}function T(e,n,t){signals.effect(()=>{let o=t();o!=null?n in e?e[n]=o:e.setAttribute(n,String(o)):e.removeAttribute(n);});}function L(e){return e}function N(e){return n=>e(n)()}function P(e){let n=document.createDocumentFragment();return e.forEach(t=>{t instanceof Node&&n.appendChild(t);}),n}function v(e){if(signals.isSignal(e.when)){let n=document.createComment("show"),t=document.createDocumentFragment();t.appendChild(n);let o=null;return signals.effect(()=>{let r=e.when,i=r();i&&!o?(o=d(e.children)[0],o instanceof Node&&n.parentNode?.insertBefore(o,n)):!i&&o&&(o.remove(),o=null);}),t}else return e.when?s(f,{children:e.children}):null}function b(e){for(let n of e.children)if(signals.isSignal(n.when)?n.when():n.when)return s(f,{children:n.children});return null}function F(e){let n=document.createDocumentFragment();if(signals.isSignal(e.each)){let t=document.createElement("div");t.style.display="contents",signals.effect(()=>{let o=e.each,r=o();t.innerHTML="",r.forEach((i,l)=>{let E=e.children(i,l);E instanceof Node&&t.appendChild(E);});}),n.appendChild(t);}else e.each.forEach((o,r)=>{let i=e.children(o,r);i instanceof Node&&n.appendChild(i);});return n}var m=[],p=false;function u(e,n,t={}){let o=typeof n=="string"?document.querySelector(n):n;if(!o)throw new Error(`Container not found: ${n}`);let r=typeof e=="function"?e():e;if(!r)throw new Error("Component returned null or undefined");switch(t.mode||"replace"){case "replace":o.innerHTML="",o.appendChild(r);break;case "append":o.appendChild(r);break;case "prepend":o.insertBefore(r,o.firstChild);break;default:o.innerHTML="",o.appendChild(r);}return t.onMount?.(),{element:r,unmount:()=>{if(r instanceof Element)r.remove();else if(r instanceof DocumentFragment)for(;r.firstChild;)r.removeChild(r.firstChild);t.onUnmount?.();},update:l=>{r instanceof Element&&l instanceof Element?r.replaceWith(l):l instanceof Element&&r instanceof DocumentFragment&&r.parentNode&&r.parentNode.replaceChild(l,r);}}}function H(e,n){return u(e,n,{mode:"replace"})}function S(e,n){let t=typeof n=="string"?document.querySelector(n):n;if(!t)throw new Error(`Portal container not found: ${n}`);let o=document.createComment("portal");return e instanceof Node&&t.appendChild(e),o}function D(e,n){let t=typeof n=="string"?document.querySelector(n):n,o=t instanceof HTMLElement?t:null;if(!o)throw new Error(`Container not found: ${n}`);return u(e,o,{mode:"replace"})}function R(e,n){let t=null,o=false,r=null;return i=>{if(t)return t(i);if(r){let l=document.createElement("div");return l.className="crux-lazy-error",l.textContent=`Error loading component: ${r.message}`,l.style.color="red",l}return o||(o=true,e().then(l=>{t=l.default;}).catch(l=>{r=l instanceof Error?l:new Error(String(l));})),n||O()}}function O(){let e=document.createElement("div");return e.textContent="Loading...",e}function j(e){try{return e.children}catch(n){return e.fallback(n)}}function q(e){if(e.children instanceof Promise){let n=document.createElement("div");return n.style.display="contents",e.fallback instanceof Node&&n.appendChild(e.fallback),e.children.then(t=>{n.innerHTML="",t instanceof Node&&n.appendChild(t);}),n}else return e.children}function A(e){return S(e.children,e.to)}function k(e){m.push(e),p||(p=true,queueMicrotask(z));}function z(){let e=m;m=[],p=false,e.forEach(n=>n());}function y(){return typeof window<"u"&&typeof document<"u"}function B(e){y()&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e());}function $(e){let n=typeof e=="string"?document.querySelector(e):e;if(!n||!(n instanceof HTMLElement))throw new Error(`Root container not found: ${e}`);let t=null;return {render(o){t&&t.unmount(),t=u(o,n);},unmount(){t&&(t.unmount(),t=null);}}}exports.ErrorBoundary=j;exports.For=F;exports.Fragment=f;exports.Show=v;exports.Suspense=q;exports.Switch=b;exports.Teleport=A;exports.component=L;exports.createElements=P;exports.createPortal=S;exports.createRoot=$;exports.defineComponent=N;exports.hydrate=D;exports.isBrowser=y;exports.jsx=s;exports.jsxs=g;exports.lazy=R;exports.mount=H;exports.onDOMReady=B;exports.queueUpdate=k;exports.render=u;//# sourceMappingURL=index.cjs.map
+'use strict';var signals=require('@minejs/signals');var d=[],u=false;function f(e,n,t={}){let o=typeof n=="string"?document.querySelector(n):n;if(!o)throw new Error(`Container not found: ${n}`);let r=typeof e=="function"?e():e;if(!r)throw new Error("Component returned null or undefined");switch(t.mode||"replace"){case "replace":o.innerHTML="",o.appendChild(r);break;case "append":o.appendChild(r);break;case "prepend":o.insertBefore(r,o.firstChild);break;default:o.innerHTML="",o.appendChild(r);}return t.onMount?.(),{element:r,unmount:()=>{if(r instanceof Element)r.remove();else if(r instanceof DocumentFragment)for(;r.firstChild;)r.removeChild(r.firstChild);t.onUnmount?.();},update:l=>{r instanceof Element&&l instanceof Element?r.replaceWith(l):l instanceof Element&&r instanceof DocumentFragment&&r.parentNode&&r.parentNode.replaceChild(l,r);}}}function N(e,n){return f(e,n,{mode:"replace"})}function S(e,n){let t=typeof n=="string"?document.querySelector(n):n;if(!t)throw new Error(`Portal container not found: ${n}`);let o=document.createComment("portal");return e instanceof Node&&t.appendChild(e),o}function v(e,n){let t=typeof n=="string"?document.querySelector(n):n,o=t instanceof HTMLElement?t:null;if(!o)throw new Error(`Container not found: ${n}`);return f(e,o,{mode:"replace"})}function b(e,n){let t=null,o=false,r=null;return i=>{if(t)return t(i);if(r){let l=document.createElement("div");return l.className="crux-lazy-error",l.textContent=`Error loading component: ${r.message}`,l.style.color="red",l}return o||(o=true,e().then(l=>{t=l.default;}).catch(l=>{r=l instanceof Error?l:new Error(String(l));})),n||y()}}function y(){let e=document.createElement("div");return e.textContent="Loading...",e}function P(e){try{return e.children}catch(n){return e.fallback(n)}}function H(e){if(e.children instanceof Promise){let n=document.createElement("div");return n.style.display="contents",e.fallback instanceof Node&&n.appendChild(e.fallback),e.children.then(t=>{n.innerHTML="",t instanceof Node&&n.appendChild(t);}),n}else return e.children}function F(e){return S(e.children,e.to)}function D(e){d.push(e),u||(u=true,queueMicrotask(g));}function g(){let e=d;d=[],u=false,e.forEach(n=>n());}function C(){return typeof window<"u"&&typeof document<"u"}function A(e){C()&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e());}function R(e){let n=typeof e=="string"?document.querySelector(e):e;if(!n||!(n instanceof HTMLElement))throw new Error(`Root container not found: ${e}`);let t=null;return {render(o){t&&t.unmount(),t=f(o,n);},unmount(){t&&(t.unmount(),t=null);}}}function m(e,n){return typeof e=="function"?e(n||{}):J(e,n||{})}var O=m;function h(e){let n=document.createDocumentFragment();return s(e.children).forEach(o=>{o instanceof Node&&n.appendChild(o);}),n}function J(e,n){let t=document.createElement(e);for(let[o,r]of Object.entries(n))o==="children"?X(t,r):o==="ref"?x(t,r):o.startsWith("on")?M(t,o,r):o==="className"||o==="class"?T(t,r):o==="style"?w(t,r):signals.isSignal(r)?L(t,o,r):typeof r=="boolean"?r&&t.setAttribute(o,""):r!=null&&t.setAttribute(o,String(r));return t}function X(e,n){s(n).forEach(o=>{if(o instanceof Node)e.appendChild(o);else if(signals.isSignal(o)){let r=document.createTextNode("");signals.effect(()=>{r.textContent=String(o());}),e.appendChild(r);}else o!=null&&o!==false&&e.appendChild(document.createTextNode(String(o)));});}function s(e){return e==null||e===false?[]:Array.isArray(e)?e.flatMap(s):[e]}function x(e,n){signals.isSignal(n)?n.set(e):typeof n=="function"&&n(e);}function M(e,n,t){if(typeof t!="function")return;let o=n.slice(2).toLowerCase();e.addEventListener(o,t);}function T(e,n){signals.isSignal(n)?signals.effect(()=>{let t=n();t!=null&&(e.className=String(t));}):n!=null&&(e.className=String(n));}function w(e,n){signals.isSignal(n)?signals.effect(()=>{let t=n();E(e,t);}):E(e,n);}function E(e,n){typeof n=="string"?e.style.cssText=n:typeof n=="object"&&n!=null&&Object.entries(n).forEach(([t,o])=>{if(o!=null){let r=t.replace(/[A-Z]/g,i=>`-${i.toLowerCase()}`);e.style.setProperty(r,String(o));}});}function L(e,n,t){signals.effect(()=>{let o=t();o!=null?n in e?e[n]=o:e.setAttribute(n,String(o)):e.removeAttribute(n);});}function $(e){return e}function j(e){return n=>e(n)()}function z(e){let n=document.createDocumentFragment();return e.forEach(t=>{t instanceof Node&&n.appendChild(t);}),n}function B(e){if(signals.isSignal(e.when)){let n=document.createComment("show"),t=document.createDocumentFragment();t.appendChild(n);let o=null;return signals.effect(()=>{let r=e.when,i=r();i&&!o?(o=s(e.children)[0],o instanceof Node&&n.parentNode?.insertBefore(o,n)):!i&&o&&(o.remove(),o=null);}),t}else return e.when?m(h,{children:e.children}):null}function U(e){for(let n of e.children)if(signals.isSignal(n.when)?n.when():n.when)return m(h,{children:n.children});return null}function W(e){let n=document.createDocumentFragment();if(signals.isSignal(e.each)){let t=document.createElement("div");t.style.display="contents",signals.effect(()=>{let o=e.each,r=o();t.innerHTML="",r.forEach((i,l)=>{let p=e.children(i,l);p instanceof Node&&t.appendChild(p);});}),n.appendChild(t);}else e.each.forEach((o,r)=>{let i=e.children(o,r);i instanceof Node&&n.appendChild(i);});return n}exports.ErrorBoundary=P;exports.For=W;exports.Fragment=h;exports.Show=B;exports.Suspense=H;exports.Switch=U;exports.Teleport=F;exports.component=$;exports.createElements=z;exports.createPortal=S;exports.createRoot=R;exports.defineComponent=j;exports.hydrate=v;exports.isBrowser=C;exports.jsx=m;exports.jsxs=O;exports.lazy=b;exports.mount=N;exports.onDOMReady=A;exports.queueUpdate=D;exports.render=f;//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map