jsx-framework-test-pb 0.3.2 → 0.4.0

package/dist/context.d.ts

@@ -0,0 +1,15 @@
+import type { FC, ElementChild } from './types.js';
+export interface Context<T> {
+    Provider: FC<{
+        value: T;
+        children?: ElementChild | ElementChild[];
+    }>;
+    /** @internal */ _id: symbol;
+    /** @internal */ _defaultValue: T;
+}
+export declare function createContext<T>(defaultValue: T): Context<T>;
+export declare function useContext<T>(context: Context<T>): T;
+/** @internal — called by createElement when processing CONTEXT_PROVIDER_TYPE */
+export declare function pushContextValue(id: symbol, value: unknown): void;
+/** @internal — called by createElement after children are rendered */
+export declare function popContextValue(id: symbol): void;

package/dist/context.js

@@ -0,0 +1,29 @@
+import { ELEMENT_TYPE, CONTEXT_PROVIDER_TYPE } from './utils/constants.js';
+// Stack per context id — supports nested providers
+const contextStacks = new Map();
+export function createContext(defaultValue) {
+    const id = Symbol('context');
+    const Provider = ({ value, children }) => ({
+        $$typeof: ELEMENT_TYPE,
+        type: CONTEXT_PROVIDER_TYPE,
+        props: { _contextId: id, _value: value, children },
+        key: null,
+    });
+    return { Provider, _id: id, _defaultValue: defaultValue };
+}
+export function useContext(context) {
+    const stack = contextStacks.get(context._id);
+    return stack && stack.length > 0 ? stack[stack.length - 1] : context._defaultValue;
+}
+/** @internal — called by createElement when processing CONTEXT_PROVIDER_TYPE */
+export function pushContextValue(id, value) {
+    const stack = contextStacks.get(id) ?? [];
+    contextStacks.set(id, [...stack, value]);
+}
+/** @internal — called by createElement after children are rendered */
+export function popContextValue(id) {
+    const stack = contextStacks.get(id);
+    if (stack && stack.length > 0) {
+        contextStacks.set(id, stack.slice(0, -1));
+    }
+}

package/dist/index.d.ts

@@ -2,6 +2,10 @@ export { render, unmount } from './runtime/index.js';
 export { renderToString, hydrate } from './ssr/index.js';
 export { Fragment } from './jsx-runtime.js';
 export { isElement } from './utils/index.js';
+export { isState } from './reactivity/index.js';
 export { state, computed, effect } from './reactivity/index.js';
 export type { StateObject } from './reactivity/index.js';
-export type { Element, ElementProps, ElementChild, DevElement, FC, HTMLAttributes, CSSProperties, ValidElement } from './types';
+export { createContext, useContext } from './context.js';
+export type { Context } from './context.js';
+export { createPortal } from './portal.js';
+export type { Element, ElementProps, ElementChild, DevElement, FC, HTMLAttributes, CSSProperties, ValidElement, } from './types.js';

package/dist/index.js

@@ -2,4 +2,7 @@ export { render, unmount } from './runtime/index.js';
 export { renderToString, hydrate } from './ssr/index.js';
 export { Fragment } from './jsx-runtime.js';
 export { isElement } from './utils/index.js';
+export { isState } from './reactivity/index.js';
 export { state, computed, effect } from './reactivity/index.js';
+export { createContext, useContext } from './context.js';
+export { createPortal } from './portal.js';

package/dist/portal.d.ts

@@ -0,0 +1,9 @@
+import type { Element, ElementChild } from './types.js';
+/**
+ * Renders `children` into a different DOM node (`container`) while keeping
+ * them logically part of the component tree for cleanup purposes.
+ *
+ * @example
+ * return createPortal(<PopoverContent />, document.body);
+ */
+export declare function createPortal(children: ElementChild | ElementChild[], container: HTMLElement): Element;

package/dist/portal.js

@@ -0,0 +1,16 @@
+import { ELEMENT_TYPE, PORTAL_TYPE } from './utils/constants.js';
+/**
+ * Renders `children` into a different DOM node (`container`) while keeping
+ * them logically part of the component tree for cleanup purposes.
+ *
+ * @example
+ * return createPortal(<PopoverContent />, document.body);
+ */
+export function createPortal(children, container) {
+    return {
+        $$typeof: ELEMENT_TYPE,
+        type: PORTAL_TYPE,
+        props: { children, _portalContainer: container },
+        key: null,
+    };
+}

package/dist/runtime/createElement.d.ts

@@ -1,2 +1,3 @@
 export declare function cleanupNode(node: Node): void;
+export declare function cleanupTree(node: Node): void;
 export declare function createElement(element: any): Node | null;

package/dist/runtime/createElement.js

@@ -1,5 +1,6 @@
-import { isElement, isValidChild, FRAGMENT_TYPE } from '../utils';
-import { effect } from '../reactivity';
+import { isElement, isValidChild, FRAGMENT_TYPE, CONTEXT_PROVIDER_TYPE, PORTAL_TYPE } from '../utils/index.js';
+import { effect } from '../reactivity/index.js';
+import { pushContextValue, popContextValue } from '../context.js';
 // Track cleanups per node for proper disposal
 const nodeCleanups = new WeakMap();
 function trackCleanup(node, cleanup) {
@@ -17,26 +18,59 @@ export function cleanupNode(node) {
         cleanups.clear();
     }
 }
+export function cleanupTree(node) {
+    cleanupNode(node);
+    node.childNodes.forEach(child => cleanupTree(child));
+}
 export function createElement(element) {
-    if (!isValidChild(element)) {
+    if (!isValidChild(element))
         return null;
-    }
-    if (typeof element === 'function') {
+    if (typeof element === 'function')
         return createReactiveChild(element);
-    }
     if (typeof element === 'string' || typeof element === 'number') {
         return document.createTextNode(String(element));
     }
-    if (Array.isArray(element)) {
+    if (Array.isArray(element))
         return createFragment(element);
-    }
-    if (!isElement(element)) {
+    if (!isElement(element))
         return null;
-    }
     const { type, props } = element;
     if (type === FRAGMENT_TYPE) {
         return createFragment(getChildren(props));
     }
+    if (type === CONTEXT_PROVIDER_TYPE) {
+        const { _contextId, _value } = props;
+        pushContextValue(_contextId, _value);
+        const fragment = createFragment(getChildren(props));
+        popContextValue(_contextId);
+        return fragment;
+    }
+    if (type === PORTAL_TYPE) {
+        const { _portalContainer } = props;
+        const children = getChildren(props);
+        const portalNodes = [];
+        children.forEach((child) => {
+            const node = createElement(child);
+            if (!node)
+                return;
+            if (node instanceof DocumentFragment) {
+                portalNodes.push(...Array.from(node.childNodes));
+            }
+            else {
+                portalNodes.push(node);
+            }
+            _portalContainer.appendChild(node);
+        });
+        // Return an anchor in the current tree position — cleanup removes portal nodes
+        const anchor = document.createTextNode('');
+        trackCleanup(anchor, () => {
+            portalNodes.forEach(node => {
+                cleanupTree(node);
+                node.parentNode?.removeChild(node);
+            });
+        });
+        return anchor;
+    }
     if (typeof type === 'function') {
         const result = type(props);
         return createElement(result);
@@ -47,14 +81,11 @@ export function createElement(element) {
     return null;
 }
 function createReactiveChild(fn) {
-    // Use an empty text node as a stable anchor point (invisible in DOM)
     const anchor = document.createTextNode('');
-    // Track actual inserted nodes (not the DocumentFragment which empties on insert)
     let currentNodes = [];
     let isFirstRun = true;
     const cleanup = effect(() => {
         const value = fn();
-        // Clean up previous nodes (skip on first run)
         if (!isFirstRun) {
             currentNodes.forEach(node => {
                 cleanupTree(node);
@@ -62,7 +93,6 @@ function createReactiveChild(fn) {
             });
             currentNodes = [];
         }
-        // Handle different return types
         let newNode = null;
         if (value == null || value === false) {
             newNode = null;
@@ -76,7 +106,6 @@ function createReactiveChild(fn) {
         else {
             newNode = document.createTextNode(String(value));
         }
-        // Track the actual nodes before a DocumentFragment empties on insertion
         if (newNode) {
             if (newNode instanceof DocumentFragment) {
                 currentNodes = Array.from(newNode.childNodes);
@@ -85,7 +114,6 @@ function createReactiveChild(fn) {
                 currentNodes = [newNode];
             }
         }
-        // Insert new node after anchor (skip on first run - handled by fragment)
         if (!isFirstRun && newNode && anchor.parentNode) {
             anchor.parentNode.insertBefore(newNode, anchor.nextSibling);
         }
@@ -98,20 +126,14 @@ function createReactiveChild(fn) {
             node.parentNode?.removeChild(node);
         });
     });
-    // Return fragment with anchor and initial nodes
     const fragment = document.createDocumentFragment();
     fragment.appendChild(anchor);
     currentNodes.forEach(node => fragment.appendChild(node));
     return fragment;
 }
-function cleanupTree(node) {
-    cleanupNode(node);
-    node.childNodes.forEach(child => cleanupTree(child));
-}
 function createFragment(children) {
     const fragment = document.createDocumentFragment();
-    const childArray = Array.isArray(children) ? children : [children];
-    childArray.forEach(child => {
+    children.forEach(child => {
         const node = createElement(child);
         if (node)
             fragment.appendChild(node);
@@ -120,65 +142,104 @@ function createFragment(children) {
 }
 function getChildren(props) {
     const children = props.children;
-    return Array.isArray(children) ? children : children ? [children] : [];
+    return Array.isArray(children) ? children : children != null ? [children] : [];
 }
 function createHTMLElement(type, props) {
     const element = document.createElement(type);
     Object.keys(props).forEach(key => {
+        const value = props[key];
         if (key === 'children') {
-            appendChildren(element, props.children);
+            appendChildren(element, value);
         }
-        else if (key.startsWith('on') && typeof props[key] === 'function') {
-            attachEvent(element, key, props[key]);
+        else if (key.startsWith('on') && typeof value === 'function') {
+            attachEvent(element, key, value);
         }
-        else if (key === 'className') {
-            handleReactiveProp(element, 'class', props[key]);
+        else if (key === 'style' && typeof value === 'object' && value !== null) {
+            applyStyles(element, value);
         }
-        else if (key === 'style' && typeof props[key] === 'object') {
-            applyStyles(element, props[key]);
+        else if (key === 'key') {
+            // internal — skip
         }
-        else if (key !== 'key' && props[key] != null) {
-            handleReactiveProp(element, key, props[key]);
+        else if (value != null) {
+            applyProp(element, key, value);
         }
     });
     return element;
 }
-function handleReactiveProp(element, attrName, value) {
-    if (typeof value === 'function' && !attrName.startsWith('on')) {
-        const cleanup = effect(() => {
-            element.setAttribute(attrName, String(value()));
-        });
+function applyProp(element, key, value) {
+    const apply = (v) => {
+        if (v === false || v === null || v === undefined) {
+            // Remove boolean attributes; skip non-attribute falsy values
+            const attrName = propToAttr(key);
+            element.removeAttribute(attrName);
+            return;
+        }
+        switch (key) {
+            case 'className':
+                element.setAttribute('class', String(v));
+                break;
+            case 'htmlFor':
+                element.htmlFor = String(v);
+                break;
+            case 'tabIndex':
+                element.tabIndex = Number(v);
+                break;
+            case 'disabled':
+            case 'checked':
+            case 'selected':
+            case 'readOnly':
+            case 'multiple':
+            case 'required':
+            case 'autoFocus':
+            case 'hidden':
+            case 'controls':
+            case 'autoPlay':
+            case 'loop':
+            case 'muted':
+                // Set as DOM property (boolean-like)
+                element[key] = Boolean(v);
+                break;
+            default: {
+                const attrName = propToAttr(key);
+                element.setAttribute(attrName, v === true ? '' : String(v));
+            }
+        }
+    };
+    if (typeof value === 'function') {
+        const cleanup = effect(() => apply(value()));
         trackCleanup(element, cleanup);
     }
     else {
-        element.setAttribute(attrName, String(value));
+        apply(value);
     }
 }
+/** Convert camelCase prop names to lowercase attribute names where needed */
+function propToAttr(key) {
+    // Already lowercase or data-/aria- attributes
+    if (key === key.toLowerCase() || key.startsWith('data-') || key.startsWith('aria-'))
+        return key;
+    // camelCase → kebab-case for HTML attributes
+    return key.replace(/([A-Z])/g, c => `-${c.toLowerCase()}`);
+}
 function appendChildren(parent, children) {
     const childArray = Array.isArray(children) ? children : [children];
     childArray.forEach(child => {
-        const childNode = createElement(child);
-        if (childNode) {
-            parent.appendChild(childNode);
-        }
+        const node = createElement(child);
+        if (node)
+            parent.appendChild(node);
     });
 }
 function attachEvent(element, key, handler) {
     const eventName = key.substring(2).toLowerCase();
     const listener = handler;
     element.addEventListener(eventName, listener);
-    // Track for cleanup on unmount
-    trackCleanup(element, () => {
-        element.removeEventListener(eventName, listener);
-    });
+    trackCleanup(element, () => element.removeEventListener(eventName, listener));
 }
 function applyStyles(element, styles) {
     Object.keys(styles).forEach(key => {
         const value = styles[key];
         if (typeof value === 'function') {
-            const cleanup = effect(() => {
-                element.style[key] = value();
-            });
+            const cleanup = effect(() => { element.style[key] = value(); });
             trackCleanup(element, cleanup);
         }
         else {

package/dist/runtime/index.d.ts

@@ -1,4 +1,4 @@
-export type { FiberNode } from './types';
-export { reconcile } from './reconciler';
-export { render, unmount } from './render';
-export { createElement, cleanupNode } from './createElement';
+export type { FiberNode } from './types.js';
+export { reconcile } from './reconciler.js';
+export { render, unmount } from './render.js';
+export { createElement, cleanupNode, cleanupTree } from './createElement.js';

package/dist/runtime/index.js

@@ -1,3 +1,3 @@
-export { reconcile } from './reconciler';
-export { render, unmount } from './render';
-export { createElement, cleanupNode } from './createElement';
+export { reconcile } from './reconciler.js';
+export { render, unmount } from './render.js';
+export { createElement, cleanupNode, cleanupTree } from './createElement.js';

package/dist/runtime/reconciler.d.ts

@@ -1,2 +1,2 @@
-import type { FiberNode } from "./types";
+import type { FiberNode } from "./types.js";
 export declare function reconcile(parent: HTMLElement, newElements: any[] | any, oldFibers?: FiberNode[]): FiberNode[];

package/dist/runtime/reconciler.js

@@ -1,6 +1,6 @@
-import { createElement, cleanupNode } from "./createElement";
-import { isElement } from "../utils";
-import { effect } from "../reactivity";
+import { createElement, cleanupTree } from "./createElement.js";
+import { isElement } from "../utils/index.js";
+import { effect } from "../reactivity/index.js";
 function canReuse(oldElement, newElement) {
     if (typeof oldElement !== typeof newElement)
         return false;
@@ -40,10 +40,6 @@ function setAttr(el, name, value) {
 function getInsertionPoint(parent, targetIndex) {
     return parent.childNodes.item(targetIndex) ?? null;
 }
-function cleanupTree(node) {
-    cleanupNode(node);
-    node.childNodes.forEach(child => cleanupTree(child));
-}
 export function reconcile(parent, newElements, oldFibers = []) {
     const newFibers = [];
     const newElementsArray = Array.isArray(newElements) ? newElements : [newElements];

package/dist/runtime/render.js

@@ -1,6 +1,6 @@
-import { reconcile } from './reconciler';
-import { isElement } from '../utils';
-import { cleanupNode } from './createElement';
+import { reconcile } from './reconciler.js';
+import { isElement } from '../utils/index.js';
+import { cleanupTree } from './createElement.js';
 const instances = new WeakMap();
 export function render(element, container) {
     if (!container)
@@ -17,14 +17,9 @@ export function render(element, container) {
     const newFibers = reconcile(container, children, oldFibers);
     instances.set(container, newFibers);
 }
-function cleanupTree(node) {
-    cleanupNode(node);
-    node.childNodes.forEach(child => cleanupTree(child));
-}
 export function unmount(container) {
     if (!container)
         return;
-    // Clean up all nodes recursively before removing
     cleanupTree(container);
     container.replaceChildren();
     instances.delete(container);

package/dist/utils/constants.d.ts

@@ -1,2 +1,4 @@
 export declare const ELEMENT_TYPE: unique symbol;
 export declare const FRAGMENT_TYPE: unique symbol;
+export declare const CONTEXT_PROVIDER_TYPE: unique symbol;
+export declare const PORTAL_TYPE: unique symbol;

package/dist/utils/constants.js

@@ -1,2 +1,4 @@
 export const ELEMENT_TYPE = Symbol.for('uraniyum.element');
 export const FRAGMENT_TYPE = Symbol.for('uraniyum.fragment');
+export const CONTEXT_PROVIDER_TYPE = Symbol.for('uraniyum.contextProvider');
+export const PORTAL_TYPE = Symbol.for('uraniyum.portal');

package/dist/utils/index.d.ts

@@ -1,2 +1,2 @@
-export { ELEMENT_TYPE, FRAGMENT_TYPE } from './constants';
-export { isElement, isValidChild } from './guards';
+export { ELEMENT_TYPE, FRAGMENT_TYPE, CONTEXT_PROVIDER_TYPE, PORTAL_TYPE, } from './constants.js';
+export { isElement, isValidChild } from './guards.js';

package/dist/utils/index.js

@@ -1,2 +1,2 @@
-export { ELEMENT_TYPE, FRAGMENT_TYPE } from './constants';
-export { isElement, isValidChild } from './guards';
+export { ELEMENT_TYPE, FRAGMENT_TYPE, CONTEXT_PROVIDER_TYPE, PORTAL_TYPE, } from './constants.js';
+export { isElement, isValidChild } from './guards.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsx-framework-test-pb",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",