jsx-framework-test-pb 0.0.7 → 0.0.9

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { render } from './runtime';
+export { render, unmount } from './runtime';
 export { Fragment } from './jsx-runtime';
 export { isElement } from './utils';
 export type { Element, ElementProps, ElementChild, DevElement, FC, HTMLAttributes, CSSProperties } from './types';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { render } from './runtime';
+export { render, unmount } from './runtime';
 export { Fragment } from './jsx-runtime';
 export { isElement } from './utils';

package/dist/runtime/component.d.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,39 @@
+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);
+}

package/dist/runtime/index.d.ts

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

package/dist/runtime/index.js

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

package/dist/runtime/reconciler.d.ts

@@ -0,0 +1,9 @@
+interface FiberNode {
+    element: any;
+    dom: Node | null;
+    parent: FiberNode | null;
+    key: string | null;
+    index: number;
+}
+export declare function reconcile(parent: HTMLElement, newElements: any[], oldFibers?: FiberNode[]): FiberNode[];
+export {};

package/dist/runtime/reconciler.js

@@ -0,0 +1,103 @@
+import { createElement } from './createElement';
+import { isElement } from '../utils';
+const fiberMap = new WeakMap();
+export function reconcile(parent, newElements, oldFibers = []) {
+    const newFibers = [];
+    const newElementsArray = Array.isArray(newElements) ? newElements : [newElements];
+    const oldFibersByKey = new Map();
+    const oldFibersByIndex = new Map();
+    oldFibers.forEach((fiber, index) => {
+        if (fiber.key !== null) {
+            oldFibersByKey.set(fiber.key, fiber);
+        }
+        else {
+            oldFibersByIndex.set(index, fiber);
+        }
+    });
+    const anchor = document.createComment('anchor');
+    if (!parent.contains(anchor)) {
+        parent.appendChild(anchor);
+    }
+    newElementsArray.forEach((element, index) => {
+        const key = isElement(element) ? element.key : null;
+        let fiber;
+        let oldFiber;
+        if (key !== null) {
+            oldFiber = oldFibersByKey.get(key);
+            oldFibersByKey.delete(key);
+        }
+        else {
+            oldFiber = oldFibersByIndex.get(index);
+            oldFibersByIndex.delete(index);
+        }
+        if (oldFiber && canReuse(oldFiber.element, element)) {
+            fiber = {
+                element,
+                dom: oldFiber.dom,
+                parent: null,
+                key,
+                index
+            };
+            if (oldFiber.dom && isElement(element)) {
+                updateElement(oldFiber.dom, element);
+            }
+        }
+        else {
+            const dom = createElement(element);
+            fiber = {
+                element,
+                dom,
+                parent: null,
+                key,
+                index
+            };
+            if (dom) {
+                parent.insertBefore(dom, anchor);
+            }
+            if (oldFiber?.dom) {
+                parent.removeChild(oldFiber.dom);
+            }
+        }
+        newFibers.push(fiber);
+        if (fiber.dom && fiber.dom.nextSibling !== anchor) {
+            parent.insertBefore(fiber.dom, anchor);
+        }
+    });
+    [...oldFibersByKey.values(), ...oldFibersByIndex.values()].forEach(fiber => {
+        if (fiber.dom) {
+            parent.removeChild(fiber.dom);
+        }
+    });
+    return newFibers;
+}
+function canReuse(oldElement, newElement) {
+    if (typeof oldElement !== typeof newElement) {
+        return false;
+    }
+    if (typeof oldElement !== 'object' || !isElement(oldElement) || !isElement(newElement)) {
+        return false;
+    }
+    return oldElement.type === newElement.type;
+}
+function updateElement(dom, element) {
+    if (!isElement(element))
+        return;
+    const { props } = element;
+    Object.keys(props).forEach(key => {
+        if (key === 'children') {
+            return;
+        }
+        else if (key.startsWith('on') && typeof props[key] === 'function') {
+            return;
+        }
+        else if (key === 'className') {
+            dom.setAttribute('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]));
+        }
+    });
+}

package/dist/runtime/render.d.ts

@@ -1 +1,2 @@
 export declare function render(element: any, container: HTMLElement): void;
+export declare function unmount(container: HTMLElement): void;

package/dist/runtime/render.js

@@ -1,11 +1,18 @@
-import { createElement } from './createElement';
+import { mountComponent } from './component';
+const mountedContainers = new WeakMap();
 export function render(element, container) {
     if (!container) {
         throw new Error('Container element is required');
     }
-    container.innerHTML = '';
-    const domNode = createElement(element);
-    if (domNode) {
-        container.appendChild(domNode);
+    if (!mountedContainers.has(container)) {
+        container.innerHTML = '';
     }
+    const instance = mountComponent(element, container);
+    mountedContainers.set(container, instance);
+}
+export function unmount(container) {
+    if (!container)
+        return;
+    container.innerHTML = '';
+    mountedContainers.delete(container);
 }

package/dist/types.d.ts

@@ -25,7 +25,307 @@ export interface HTMLAttributes<T = HTMLElement> {
     className?: string;
     id?: string;
     style?: CSSProperties;
-    children?: ElementChild | ElementChild[];
-    [key: string]: any;
+    title?: string;
+    lang?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    hidden?: boolean;
+    tabIndex?: number;
     class?: never;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+    role?: string;
+    [key: `aria-${string}`]: string | number | boolean | undefined;
+    onClick?: (event: MouseEvent) => void;
+    onDoubleClick?: (event: MouseEvent) => void;
+    onMouseDown?: (event: MouseEvent) => void;
+    onMouseUp?: (event: MouseEvent) => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+    onMouseMove?: (event: MouseEvent) => void;
+    onMouseOver?: (event: MouseEvent) => void;
+    onMouseOut?: (event: MouseEvent) => void;
+    onChange?: (event: Event) => void;
+    onInput?: (event: Event) => void;
+    onSubmit?: (event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    onKeyPress?: (event: KeyboardEvent) => void;
+    onScroll?: (event: Event) => void;
+    onWheel?: (event: WheelEvent) => void;
+    onDrag?: (event: DragEvent) => void;
+    onDragEnd?: (event: DragEvent) => void;
+    onDragEnter?: (event: DragEvent) => void;
+    onDragLeave?: (event: DragEvent) => void;
+    onDragOver?: (event: DragEvent) => void;
+    onDragStart?: (event: DragEvent) => void;
+    onDrop?: (event: DragEvent) => void;
+    onTouchStart?: (event: TouchEvent) => void;
+    onTouchMove?: (event: TouchEvent) => void;
+    onTouchEnd?: (event: TouchEvent) => void;
+    onTouchCancel?: (event: TouchEvent) => void;
+    children?: ElementChild | ElementChild[];
+}
+export interface AnchorHTMLAttributes extends HTMLAttributes<HTMLAnchorElement> {
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+    download?: string | boolean;
+    hrefLang?: string;
+    type?: string;
+}
+export interface ButtonHTMLAttributes extends HTMLAttributes<HTMLButtonElement> {
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    value?: string;
+    autoFocus?: boolean;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+}
+export interface FormHTMLAttributes extends HTMLAttributes<HTMLFormElement> {
+    action?: string;
+    method?: 'get' | 'post';
+    encType?: string;
+    target?: string;
+    noValidate?: boolean;
+    autoComplete?: 'on' | 'off';
+}
+export interface InputHTMLAttributes extends HTMLAttributes<HTMLInputElement> {
+    accept?: string;
+    alt?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    capture?: boolean | string;
+    checked?: boolean;
+    disabled?: boolean;
+    form?: string;
+    max?: number | string;
+    maxLength?: number;
+    min?: number | string;
+    minLength?: number;
+    multiple?: boolean;
+    name?: string;
+    pattern?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: number;
+    src?: string;
+    step?: number | string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'checkbox' | 'radio' | 'file' | 'submit' | 'reset' | 'button' | 'hidden' | 'image' | 'color' | 'range';
+    value?: string | number;
+}
+export interface TextareaHTMLAttributes extends HTMLAttributes<HTMLTextAreaElement> {
+    autoComplete?: string;
+    autoFocus?: boolean;
+    cols?: number;
+    disabled?: boolean;
+    form?: string;
+    maxLength?: number;
+    minLength?: number;
+    name?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    rows?: number;
+    value?: string;
+    wrap?: 'hard' | 'soft' | 'off';
+}
+export interface SelectHTMLAttributes extends HTMLAttributes<HTMLSelectElement> {
+    autoComplete?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    multiple?: boolean;
+    name?: string;
+    required?: boolean;
+    size?: number;
+    value?: string | string[];
+}
+export interface OptionHTMLAttributes extends HTMLAttributes<HTMLOptionElement> {
+    disabled?: boolean;
+    label?: string;
+    selected?: boolean;
+    value?: string | number;
+}
+export interface ImgHTMLAttributes extends HTMLAttributes<HTMLImageElement> {
+    alt?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    decoding?: 'async' | 'auto' | 'sync';
+    height?: number | string;
+    loading?: 'eager' | 'lazy';
+    sizes?: string;
+    src?: string;
+    srcSet?: string;
+    width?: number | string;
+}
+export interface LabelHTMLAttributes extends HTMLAttributes<HTMLLabelElement> {
+    htmlFor?: string;
+    form?: string;
+}
+export interface VideoHTMLAttributes extends HTMLAttributes<HTMLVideoElement> {
+    autoPlay?: boolean;
+    controls?: boolean;
+    crossOrigin?: string;
+    height?: number | string;
+    loop?: boolean;
+    muted?: boolean;
+    poster?: string;
+    preload?: string;
+    src?: string;
+    width?: number | string;
+}
+export interface AudioHTMLAttributes extends HTMLAttributes<HTMLAudioElement> {
+    autoPlay?: boolean;
+    controls?: boolean;
+    crossOrigin?: string;
+    loop?: boolean;
+    muted?: boolean;
+    preload?: string;
+    src?: string;
+}
+export interface TableHTMLAttributes extends HTMLAttributes<HTMLTableElement> {
+    cellPadding?: number | string;
+    cellSpacing?: number | string;
+}
+export interface TdHTMLAttributes extends HTMLAttributes<HTMLTableCellElement> {
+    colSpan?: number;
+    rowSpan?: number;
+    headers?: string;
+}
+export interface ThHTMLAttributes extends HTMLAttributes<HTMLTableCellElement> {
+    colSpan?: number;
+    rowSpan?: number;
+    scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+}
+export interface IframeHTMLAttributes extends HTMLAttributes<HTMLIFrameElement> {
+    allow?: string;
+    allowFullScreen?: boolean;
+    height?: number | string;
+    loading?: 'eager' | 'lazy';
+    name?: string;
+    sandbox?: string;
+    src?: string;
+    srcDoc?: string;
+    width?: number | string;
+}
+export interface CanvasHTMLAttributes extends HTMLAttributes<HTMLCanvasElement> {
+    height?: number | string;
+    width?: number | string;
+}
+export interface SVGAttributes extends HTMLAttributes<SVGElement> {
+    viewBox?: string;
+    xmlns?: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number | string;
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+}
+declare global {
+    namespace JSX {
+        type Element = import('./types').Element;
+        interface IntrinsicElements {
+            a: AnchorHTMLAttributes;
+            abbr: HTMLAttributes<HTMLElement>;
+            address: HTMLAttributes<HTMLElement>;
+            article: HTMLAttributes<HTMLElement>;
+            aside: HTMLAttributes<HTMLElement>;
+            b: HTMLAttributes<HTMLElement>;
+            blockquote: HTMLAttributes<HTMLQuoteElement>;
+            br: HTMLAttributes<HTMLBRElement>;
+            cite: HTMLAttributes<HTMLElement>;
+            code: HTMLAttributes<HTMLElement>;
+            del: HTMLAttributes<HTMLModElement>;
+            div: HTMLAttributes<HTMLDivElement>;
+            em: HTMLAttributes<HTMLElement>;
+            figcaption: HTMLAttributes<HTMLElement>;
+            figure: HTMLAttributes<HTMLElement>;
+            footer: HTMLAttributes<HTMLElement>;
+            h1: HTMLAttributes<HTMLHeadingElement>;
+            h2: HTMLAttributes<HTMLHeadingElement>;
+            h3: HTMLAttributes<HTMLHeadingElement>;
+            h4: HTMLAttributes<HTMLHeadingElement>;
+            h5: HTMLAttributes<HTMLHeadingElement>;
+            h6: HTMLAttributes<HTMLHeadingElement>;
+            header: HTMLAttributes<HTMLElement>;
+            hr: HTMLAttributes<HTMLHRElement>;
+            i: HTMLAttributes<HTMLElement>;
+            ins: HTMLAttributes<HTMLModElement>;
+            kbd: HTMLAttributes<HTMLElement>;
+            li: HTMLAttributes<HTMLLIElement>;
+            main: HTMLAttributes<HTMLElement>;
+            mark: HTMLAttributes<HTMLElement>;
+            nav: HTMLAttributes<HTMLElement>;
+            ol: HTMLAttributes<HTMLOListElement>;
+            p: HTMLAttributes<HTMLParagraphElement>;
+            pre: HTMLAttributes<HTMLPreElement>;
+            q: HTMLAttributes<HTMLQuoteElement>;
+            s: HTMLAttributes<HTMLElement>;
+            section: HTMLAttributes<HTMLElement>;
+            small: HTMLAttributes<HTMLElement>;
+            span: HTMLAttributes<HTMLSpanElement>;
+            strong: HTMLAttributes<HTMLElement>;
+            sub: HTMLAttributes<HTMLElement>;
+            sup: HTMLAttributes<HTMLElement>;
+            u: HTMLAttributes<HTMLElement>;
+            ul: HTMLAttributes<HTMLUListElement>;
+            button: ButtonHTMLAttributes;
+            datalist: HTMLAttributes<HTMLDataListElement>;
+            fieldset: HTMLAttributes<HTMLFieldSetElement>;
+            form: FormHTMLAttributes;
+            input: InputHTMLAttributes;
+            label: LabelHTMLAttributes;
+            legend: HTMLAttributes<HTMLLegendElement>;
+            meter: HTMLAttributes<HTMLMeterElement>;
+            optgroup: HTMLAttributes<HTMLOptGroupElement>;
+            option: OptionHTMLAttributes;
+            output: HTMLAttributes<HTMLOutputElement>;
+            progress: HTMLAttributes<HTMLProgressElement>;
+            select: SelectHTMLAttributes;
+            textarea: TextareaHTMLAttributes;
+            audio: AudioHTMLAttributes;
+            canvas: CanvasHTMLAttributes;
+            img: ImgHTMLAttributes;
+            picture: HTMLAttributes<HTMLPictureElement>;
+            video: VideoHTMLAttributes;
+            caption: HTMLAttributes<HTMLTableCaptionElement>;
+            col: HTMLAttributes<HTMLTableColElement>;
+            colgroup: HTMLAttributes<HTMLTableColElement>;
+            table: TableHTMLAttributes;
+            tbody: HTMLAttributes<HTMLTableSectionElement>;
+            td: TdHTMLAttributes;
+            tfoot: HTMLAttributes<HTMLTableSectionElement>;
+            th: ThHTMLAttributes;
+            thead: HTMLAttributes<HTMLTableSectionElement>;
+            tr: HTMLAttributes<HTMLTableRowElement>;
+            details: HTMLAttributes<HTMLDetailsElement>;
+            dialog: HTMLAttributes<HTMLDialogElement>;
+            iframe: IframeHTMLAttributes;
+            menu: HTMLAttributes<HTMLMenuElement>;
+            script: HTMLAttributes<HTMLScriptElement>;
+            style: HTMLAttributes<HTMLStyleElement>;
+            summary: HTMLAttributes<HTMLElement>;
+            template: HTMLAttributes<HTMLTemplateElement>;
+            svg: SVGAttributes;
+            circle: SVGAttributes;
+            ellipse: SVGAttributes;
+            line: SVGAttributes;
+            path: SVGAttributes;
+            polygon: SVGAttributes;
+            polyline: SVGAttributes;
+            rect: SVGAttributes;
+            g: SVGAttributes;
+            defs: SVGAttributes;
+            [elemName: string]: any;
+        }
+        interface ElementChildrenAttribute {
+            children: {};
+        }
+    }
 }
+export {};

package/package.json

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