jsx-framework-test-pb 0.1.3 → 0.1.6

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { render, unmount } from './runtime';
+export { renderToString, hydrate } from './ssr';
 export { Fragment } from './jsx-runtime';
 export { isElement } from './utils';
-export { State, computed, effect } from './reactivity';
+export { state, computed, effect } from './reactivity';
 export type { StateObject } from './reactivity';
 export type { Element, ElementProps, ElementChild, DevElement, FC, HTMLAttributes, CSSProperties } from './types';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { render, unmount } from './runtime';
+export { renderToString, hydrate } from './ssr';
 export { Fragment } from './jsx-runtime';
 export { isElement } from './utils';
-export { State, computed, effect } from './reactivity';
+export { state, computed, effect } from './reactivity';

package/dist/reactivity/effect.d.ts

@@ -1,2 +1,3 @@
-import type { Effect } from './state';
+import type { Effect, StateObject } from './types';
 export declare function effect(fn: Effect): void;
+export declare function computed<T>(fn: () => T): StateObject<T>;

package/dist/reactivity/effect.js

@@ -1,4 +1,4 @@
-import { setActiveEffect } from './state';
+import { setActiveEffect, state } from './state';
 export function effect(fn) {
     const runner = () => {
         setActiveEffect(runner);
@@ -7,3 +7,8 @@ export function effect(fn) {
     };
     runner();
 }
+export function computed(fn) {
+    const s = state(undefined);
+    effect(() => { s.val = fn(); });
+    return s;
+}

package/dist/reactivity/index.d.ts

@@ -1,3 +1,3 @@
-export { State, computed, isState, setActiveEffect } from './state';
-export { effect } from './effect';
-export type { Effect, StateObject } from './state';
+export type { Effect, StateObject } from './types';
+export { state, isState } from './state';
+export { effect, computed } from './effect';

package/dist/reactivity/index.js

@@ -1,2 +1,2 @@
-export { State, computed, isState, setActiveEffect } from './state';
-export { effect } from './effect';
+export { state, isState } from './state';
+export { effect, computed } from './effect';

package/dist/reactivity/state.d.ts

@@ -1,8 +1,5 @@
-export type Effect = () => void;
-export interface StateObject<T> {
-    val: T;
-}
-export declare function State<T>(initial: T): StateObject<T>;
+import type { Effect, StateObject } from './types';
 export declare function setActiveEffect(effect: Effect | null): void;
-export declare function isState(value: any): value is StateObject<any>;
-export declare function computed<T>(fn: () => T): StateObject<T>;
+export declare function getActiveEffect(): Effect | null;
+export declare function state<T>(initial: T): StateObject<T>;
+export declare function isState(value: unknown): value is StateObject<unknown>;

package/dist/reactivity/state.js

@@ -1,12 +1,17 @@
 let activeEffect = null;
-export function State(initial) {
+export function setActiveEffect(effect) {
+    activeEffect = effect;
+}
+export function getActiveEffect() {
+    return activeEffect;
+}
+export function state(initial) {
     let value = initial;
     const subscribers = new Set();
     return {
         get val() {
-            if (activeEffect) {
+            if (activeEffect)
                 subscribers.add(activeEffect);
-            }
             return value;
         },
         set val(next) {
@@ -17,19 +22,6 @@ export function State(initial) {
         }
     };
 }
-export function setActiveEffect(effect) {
-    activeEffect = effect;
-}
 export function isState(value) {
-    return value && typeof value === 'object' && 'val' in value;
-}
-export function computed(fn) {
-    const state = State(undefined);
-    const runner = () => {
-        setActiveEffect(runner);
-        state.val = fn();
-        setActiveEffect(null);
-    };
-    runner();
-    return state;
+    return value !== null && typeof value === 'object' && 'val' in value;
 }

package/dist/reactivity/types.d.ts

@@ -0,0 +1,4 @@
+export type Effect = () => void;
+export interface StateObject<T> {
+    val: T;
+}

package/dist/reactivity/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/index.d.ts

@@ -1,4 +1,4 @@
-export { mountComponent, unmountComponent } from './component';
-export { createElement } from './createElement';
+export type { FiberNode } from './types';
 export { reconcile } from './reconciler';
 export { render, unmount } from './render';
+export { createElement } from './createElement';

package/dist/runtime/index.js

@@ -1,4 +1,3 @@
-export { mountComponent, unmountComponent } from './component';
-export { createElement } from './createElement';
 export { reconcile } from './reconciler';
 export { render, unmount } from './render';
+export { createElement } from './createElement';

package/dist/runtime/reconciler.d.ts

@@ -1,9 +1,2 @@
-interface FiberNode {
-    element: any;
-    dom: Node | null;
-    parent: FiberNode | null;
-    key: string | null;
-    index: number;
-}
+import type { FiberNode } from "./types";
 export declare function reconcile(parent: HTMLElement, newElements: any[] | any, oldFibers?: FiberNode[]): FiberNode[];
-export {};

package/dist/runtime/reconciler.js

@@ -1,5 +1,6 @@
 import { createElement } from "./createElement";
 import { isElement } from "../utils";
+import { effect } from "../reactivity";
 function canReuse(oldElement, newElement) {
     if (typeof oldElement !== typeof newElement)
         return false;
@@ -13,23 +14,29 @@ function updateElement(dom, element) {
         return;
     const { props } = element;
     Object.keys(props).forEach((key) => {
-        if (key === "children") {
+        if (key === "children" || key === "key")
             return;
-        }
-        else if (key.startsWith("on") && typeof props[key] === "function") {
+        if (key.startsWith("on"))
             return;
-        }
-        else if (key === "className") {
-            dom.setAttribute("class", props[key]);
+        if (key === "className") {
+            setAttr(dom, "class", props[key]);
         }
         else if (key === "style" && typeof props[key] === "object") {
             Object.assign(dom.style, props[key]);
         }
-        else if (key !== "key" && props[key] != null) {
-            dom.setAttribute(key, String(props[key]));
+        else if (props[key] != null) {
+            setAttr(dom, key, props[key]);
         }
     });
 }
+function setAttr(el, name, value) {
+    if (typeof value === "function") {
+        effect(() => el.setAttribute(name, String(value())));
+    }
+    else {
+        el.setAttribute(name, String(value));
+    }
+}
 function getInsertionPoint(parent, targetIndex) {
     return parent.childNodes.item(targetIndex) ?? null;
 }
@@ -60,13 +67,7 @@ export function reconcile(parent, newElements, oldFibers = []) {
         }
         let fiber;
         if (oldFiber && canReuse(oldFiber.element, element)) {
-            fiber = {
-                element,
-                dom: oldFiber.dom,
-                parent: null,
-                key,
-                index,
-            };
+            fiber = { element, dom: oldFiber.dom, key, index };
             if (fiber.dom)
                 reusedOldDoms.add(fiber.dom);
             if (oldFiber.dom && isElement(element)) {
@@ -75,14 +76,8 @@ export function reconcile(parent, newElements, oldFibers = []) {
         }
         else {
             const dom = createElement(element);
-            fiber = {
-                element,
-                dom,
-                parent: null,
-                key,
-                index,
-            };
-            if (oldFiber?.dom && oldFiber.dom.parentNode === parent) {
+            fiber = { element, dom, key, index };
+            if (oldFiber?.dom?.parentNode === parent) {
                 parent.removeChild(oldFiber.dom);
             }
             if (dom) {
@@ -99,7 +94,7 @@ export function reconcile(parent, newElements, oldFibers = []) {
         newFibers.push(fiber);
     });
     [...oldFibersByKey.values(), ...oldFibersByIndex.values()].forEach((fiber) => {
-        if (fiber.dom && fiber.dom.parentNode === parent && !reusedOldDoms.has(fiber.dom)) {
+        if (fiber.dom?.parentNode === parent && !reusedOldDoms.has(fiber.dom)) {
             parent.removeChild(fiber.dom);
         }
     });

package/dist/runtime/render.js

@@ -1,12 +1,24 @@
-import { mountComponent } from './component';
+import { reconcile } from './reconciler';
+import { isElement } from '../utils';
+const instances = new WeakMap();
 export function render(element, container) {
     if (!container)
         throw new Error('Container element is required');
-    container.replaceChildren();
-    mountComponent(element, container);
+    const oldFibers = instances.get(container) ?? [];
+    let children;
+    if (isElement(element) && typeof element.type === 'function') {
+        const result = element.type(element.props);
+        children = Array.isArray(result) ? result : [result];
+    }
+    else {
+        children = [element];
+    }
+    const newFibers = reconcile(container, children, oldFibers);
+    instances.set(container, newFibers);
 }
 export function unmount(container) {
     if (!container)
         return;
     container.replaceChildren();
+    instances.delete(container);
 }

package/dist/runtime/types.d.ts

@@ -0,0 +1,6 @@
+export interface FiberNode {
+    element: any;
+    dom: Node | null;
+    key: string | null;
+    index: number;
+}

package/dist/runtime/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ssr/hydrate.d.ts

@@ -0,0 +1 @@
+export declare function hydrate(element: any, container: Document | HTMLElement): void;

package/dist/ssr/hydrate.js

@@ -0,0 +1,45 @@
+import { isElement } from '../utils';
+const instances = new WeakMap();
+export function hydrate(element, container) {
+    const target = container === document ? document.documentElement : container;
+    if (!target) {
+        throw new Error('Hydration target not found');
+    }
+    const fibers = hydrateNode(element, target);
+    instances.set(target, fibers);
+}
+function hydrateNode(element, dom) {
+    if (!isElement(element)) {
+        return [];
+    }
+    const { type, props } = element;
+    if (typeof type === 'function') {
+        const result = type(props);
+        return hydrateNode(result, dom);
+    }
+    if (typeof type === 'string' && dom instanceof HTMLElement) {
+        Object.keys(props).forEach(key => {
+            if (key.startsWith('on') && typeof props[key] === 'function') {
+                const eventName = key.substring(2).toLowerCase();
+                dom.addEventListener(eventName, props[key]);
+            }
+        });
+        const children = Array.isArray(props.children)
+            ? props.children
+            : props.children
+                ? [props.children]
+                : [];
+        const childNodes = Array.from(dom.childNodes).filter(node => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE);
+        children.forEach((child, i) => {
+            if (childNodes[i]) {
+                hydrateNode(child, childNodes[i]);
+            }
+        });
+    }
+    return [{
+            element,
+            dom,
+            key: element.key ?? null,
+            index: 0
+        }];
+}

package/dist/ssr/index.d.ts

@@ -0,0 +1,2 @@
+export { renderToString } from './renderToString';
+export { hydrate } from './hydrate';

package/dist/ssr/index.js

@@ -0,0 +1,2 @@
+export { renderToString } from './renderToString';
+export { hydrate } from './hydrate';

package/dist/ssr/renderToString.d.ts

@@ -0,0 +1 @@
+export declare function renderToString(element: any): string;

package/dist/ssr/renderToString.js

@@ -0,0 +1,69 @@
+import { isElement, isValidChild, FRAGMENT_TYPE } from '../utils';
+const VOID_ELEMENTS = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'link', 'meta', 'param', 'source', 'track', 'wbr'
+]);
+export function renderToString(element) {
+    if (!isValidChild(element)) {
+        return '';
+    }
+    if (typeof element === 'string' || typeof element === 'number') {
+        return escapeHtml(String(element));
+    }
+    if (typeof element === 'function') {
+        return escapeHtml(String(element()));
+    }
+    if (Array.isArray(element)) {
+        return element.map(renderToString).join('');
+    }
+    if (!isElement(element)) {
+        return '';
+    }
+    const { type, props } = element;
+    if (type === FRAGMENT_TYPE) {
+        return renderToString(props.children);
+    }
+    if (typeof type === 'function') {
+        const result = type(props);
+        return renderToString(result);
+    }
+    if (typeof type === 'string') {
+        const attrs = propsToAttributes(props);
+        if (VOID_ELEMENTS.has(type)) {
+            return `<${type}${attrs}>`;
+        }
+        const children = renderToString(props.children);
+        return `<${type}${attrs}>${children}</${type}>`;
+    }
+    return '';
+}
+function propsToAttributes(props) {
+    if (!props)
+        return '';
+    const attrs = Object.entries(props)
+        .filter(([key, value]) => {
+        if (key === 'children' || key === 'key')
+            return false;
+        if (key.startsWith('on'))
+            return false;
+        if (value == null || value === false)
+            return false;
+        return true;
+    })
+        .map(([key, value]) => {
+        const attrName = key === 'className' ? 'class' : key;
+        if (value === true)
+            return attrName;
+        const attrValue = typeof value === 'function' ? value() : value;
+        return `${attrName}="${escapeHtml(String(attrValue))}"`;
+    })
+        .join(' ');
+    return attrs ? ` ${attrs}` : '';
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}

package/dist/types.d.ts

@@ -226,10 +226,34 @@ export interface SVGAttributes extends HTMLAttributes<SVGElement> {
     strokeLinecap?: 'butt' | 'round' | 'square';
     strokeLinejoin?: 'miter' | 'round' | 'bevel';
 }
+export interface MetaHTMLAttributes extends HTMLAttributes<HTMLMetaElement> {
+    charSet?: string;
+    content?: string;
+    httpEquiv?: string;
+    name?: string;
+}
+export interface LinkHTMLAttributes extends HTMLAttributes<HTMLLinkElement> {
+    href?: string;
+    rel?: string;
+    type?: string;
+    media?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+}
+export interface BaseHTMLAttributes extends HTMLAttributes<HTMLBaseElement> {
+    href?: string;
+    target?: string;
+}
 declare global {
     namespace JSX {
         type Element = import('./types').Element;
         interface IntrinsicElements {
+            html: HTMLAttributes<HTMLHtmlElement>;
+            head: HTMLAttributes<HTMLHeadElement>;
+            body: HTMLAttributes<HTMLBodyElement>;
+            title: HTMLAttributes<HTMLTitleElement>;
+            meta: MetaHTMLAttributes;
+            link: LinkHTMLAttributes;
+            base: BaseHTMLAttributes;
             a: AnchorHTMLAttributes;
             abbr: HTMLAttributes<HTMLElement>;
             address: HTMLAttributes<HTMLElement>;

package/dist/utils/constants.js

@@ -1,2 +1,2 @@
-export const ELEMENT_TYPE = Symbol.for('your.framework.element');
-export const FRAGMENT_TYPE = Symbol.for('your.framework.fragment');
+export const ELEMENT_TYPE = Symbol.for('uraniyum.element');
+export const FRAGMENT_TYPE = Symbol.for('uraniyum.fragment');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsx-framework-test-pb",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,7 +17,10 @@
     "./jsx-dev-runtime": {
       "types": "./dist/jsx-dev-runtime.d.ts",
       "default": "./dist/jsx-dev-runtime.js"
-    }
+    },
+    "./utils/*": "./dist/utils/*",
+    "./runtime/*": "./dist/runtime/*",
+    "./ssr/*": "./dist/ssr/*"
   },
   "scripts": {
     "build": "tsc",

package/dist/runtime/component.d.ts

@@ -1,11 +0,0 @@
-interface ComponentInstance {
-    element: any;
-    container: HTMLElement;
-    fibers: any[];
-    props: any;
-    state: any;
-    setState: (updater: any) => void;
-}
-export declare function mountComponent(element: any, container: HTMLElement): ComponentInstance;
-export declare function unmountComponent(container: HTMLElement): void;
-export {};

package/dist/runtime/component.js

@@ -1,39 +0,0 @@
-import { reconcile } from './reconciler';
-import { isElement } from '../utils';
-const instances = new WeakMap();
-export function mountComponent(element, container) {
-    const instance = {
-        element,
-        container,
-        fibers: [],
-        props: isElement(element) ? element.props : {},
-        state: {},
-        setState: (updater) => {
-            if (typeof updater === 'function') {
-                instance.state = updater(instance.state);
-            }
-            else {
-                instance.state = { ...instance.state, ...updater };
-            }
-            updateComponent(instance);
-        }
-    };
-    instances.set(container, instance);
-    updateComponent(instance);
-    return instance;
-}
-function updateComponent(instance) {
-    const { element, container } = instance;
-    let children;
-    if (isElement(element) && typeof element.type === 'function') {
-        const result = element.type(element.props);
-        children = Array.isArray(result) ? result : [result];
-    }
-    else {
-        children = [element];
-    }
-    instance.fibers = reconcile(container, children, instance.fibers);
-}
-export function unmountComponent(container) {
-    instances.delete(container);
-}