jsx-framework-test-pb 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { Element, ElementProps, ElementChild, DevElement } from './types';
-export declare function isElement(value: any): value is Element;
-export declare function render(element: any, container: HTMLElement): void;
-import type { Element } from './types';
+export { render } 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,69 +1,3 @@
-const ELEMENT_TYPE = Symbol.for('your.framework.element');
-export function isElement(value) {
-    return value && value.$$typeof === ELEMENT_TYPE;
-}
-export function render(element, container) {
-    container.innerHTML = '';
-    const domNode = createElement(element);
-    if (domNode) {
-        container.appendChild(domNode);
-    }
-}
-function createElement(element) {
-    if (element === null ||
-        element === undefined ||
-        typeof element === 'boolean') {
-        return null;
-    }
-    if (typeof element === 'string' || typeof element === 'number') {
-        return document.createTextNode(String(element));
-    }
-    if (Array.isArray(element)) {
-        const fragment = document.createDocumentFragment();
-        element.forEach(child => {
-            const node = createElement(child);
-            if (node)
-                fragment.appendChild(node);
-        });
-        return fragment;
-    }
-    if (!isElement(element)) {
-        return null;
-    }
-    const { type, props } = element;
-    if (typeof type === 'function') {
-        const result = type(props);
-        return createElement(result);
-    }
-    if (typeof type === 'string') {
-        const domElement = document.createElement(type);
-        Object.keys(props).forEach(key => {
-            if (key === 'children') {
-                const children = Array.isArray(props.children)
-                    ? props.children
-                    : [props.children];
-                children.forEach(child => {
-                    const childNode = createElement(child);
-                    if (childNode) {
-                        domElement.appendChild(childNode);
-                    }
-                });
-            }
-            else if (key.startsWith('on') && typeof props[key] === 'function') {
-                const eventName = key.substring(2).toLowerCase();
-                domElement.addEventListener(eventName, props[key]);
-            }
-            else if (key === 'className') {
-                domElement.setAttribute('class', props[key]);
-            }
-            else if (key === 'style' && typeof props[key] === 'object') {
-                Object.assign(domElement.style, props[key]);
-            }
-            else if (key !== 'key') {
-                domElement.setAttribute(key, props[key]);
-            }
-        });
-        return domElement;
-    }
-    return null;
-}
+export { render } from './runtime';
+export { Fragment } from './jsx-runtime';
+export { isElement } from './utils';

package/dist/jsx-dev-runtime.d.ts

@@ -1,5 +1,6 @@
 import type { DevElement, ElementProps } from './types';
-export declare function jsxDEV(type: string | Function, props: ElementProps, key?: string, isStaticChildren?: boolean, source?: {
+export declare const Fragment: symbol;
+export declare function jsxDEV(type: string | Function | symbol, props: ElementProps, key?: string, isStaticChildren?: boolean, source?: {
     fileName: string;
     lineNumber: number;
     columnNumber: number;

package/dist/jsx-dev-runtime.js

@@ -1,4 +1,5 @@
-const ELEMENT_TYPE = Symbol.for('your.framework.element');
+import { ELEMENT_TYPE, FRAGMENT_TYPE } from './utils';
+export const Fragment = FRAGMENT_TYPE;
 export function jsxDEV(type, props, key, isStaticChildren, source, self) {
     return {
         $$typeof: ELEMENT_TYPE,

package/dist/jsx-runtime.d.ts

@@ -1,3 +1,4 @@
 import type { Element, ElementProps } from './types';
-export declare function jsx(type: string | Function, props: ElementProps, key?: string): Element;
+export declare const Fragment: symbol;
+export declare function jsx(type: string | Function | symbol, props: ElementProps, key?: string): Element;
 export declare const jsxs: typeof jsx;

package/dist/jsx-runtime.js

@@ -1,4 +1,5 @@
-const ELEMENT_TYPE = Symbol.for('your.framework.element');
+import { ELEMENT_TYPE, FRAGMENT_TYPE } from './utils';
+export const Fragment = FRAGMENT_TYPE;
 export function jsx(type, props, key) {
     return {
         $$typeof: ELEMENT_TYPE,

package/dist/runtime/createElement.d.ts

@@ -0,0 +1 @@
+export declare function createElement(element: any): Node | null;

package/dist/runtime/createElement.js

@@ -0,0 +1,78 @@
+import { isElement, isValidChild, FRAGMENT_TYPE } from '../utils';
+export function createElement(element) {
+    if (!isValidChild(element)) {
+        return null;
+    }
+    if (typeof element === 'string' || typeof element === 'number') {
+        return document.createTextNode(String(element));
+    }
+    if (Array.isArray(element)) {
+        return createFragment(element);
+    }
+    if (!isElement(element)) {
+        return null;
+    }
+    const { type, props } = element;
+    if (type === FRAGMENT_TYPE) {
+        return createFragment(getChildren(props));
+    }
+    if (typeof type === 'function') {
+        const result = type(props);
+        return createElement(result);
+    }
+    if (typeof type === 'string') {
+        return createHTMLElement(type, props);
+    }
+    return null;
+}
+function createFragment(children) {
+    const fragment = document.createDocumentFragment();
+    const childArray = Array.isArray(children) ? children : [children];
+    childArray.forEach(child => {
+        const node = createElement(child);
+        if (node)
+            fragment.appendChild(node);
+    });
+    return fragment;
+}
+function getChildren(props) {
+    const children = props.children;
+    return Array.isArray(children) ? children : children ? [children] : [];
+}
+function createHTMLElement(type, props) {
+    const element = document.createElement(type);
+    Object.keys(props).forEach(key => {
+        if (key === 'children') {
+            appendChildren(element, props.children);
+        }
+        else if (key.startsWith('on') && typeof props[key] === 'function') {
+            attachEvent(element, key, props[key]);
+        }
+        else if (key === 'className') {
+            element.setAttribute('class', props[key]);
+        }
+        else if (key === 'style' && typeof props[key] === 'object') {
+            applyStyles(element, props[key]);
+        }
+        else if (key !== 'key' && props[key] != null) {
+            element.setAttribute(key, String(props[key]));
+        }
+    });
+    return element;
+}
+function appendChildren(parent, children) {
+    const childArray = Array.isArray(children) ? children : [children];
+    childArray.forEach(child => {
+        const childNode = createElement(child);
+        if (childNode) {
+            parent.appendChild(childNode);
+        }
+    });
+}
+function attachEvent(element, key, handler) {
+    const eventName = key.substring(2).toLowerCase();
+    element.addEventListener(eventName, handler);
+}
+function applyStyles(element, styles) {
+    Object.assign(element.style, styles);
+}

package/dist/runtime/index.d.ts

@@ -0,0 +1,2 @@
+export { createElement } from './createElement';
+export { render } from './render';

package/dist/runtime/index.js

@@ -0,0 +1,2 @@
+export { createElement } from './createElement';
+export { render } from './render';

package/dist/runtime/render.d.ts

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

package/dist/runtime/render.js

@@ -0,0 +1,11 @@
+import { createElement } from './createElement';
+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);
+    }
+}

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 export interface Element {
     $$typeof: symbol;
-    type: string | Function;
+    type: string | Function | symbol;
     props: ElementProps;
     key: string | null;
 }
@@ -17,3 +17,14 @@ export interface ElementProps {
     [key: string]: any;
 }
 export type ElementChild = Element | string | number | boolean | null | undefined;
+export type FC<P = {}> = (props: P) => Element | null;
+export interface CSSProperties {
+    [key: string]: string | number;
+}
+export interface HTMLAttributes<T = HTMLElement> {
+    className?: string;
+    id?: string;
+    style?: CSSProperties;
+    children?: ElementChild | ElementChild[];
+    [key: string]: any;
+}

package/dist/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ELEMENT_TYPE: unique symbol;
+export declare const FRAGMENT_TYPE: unique symbol;

package/dist/utils/constants.js

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

package/dist/utils/guards.d.ts

@@ -0,0 +1,3 @@
+import type { Element } from '../types';
+export declare function isElement(value: any): value is Element;
+export declare function isValidChild(element: any): boolean;

package/dist/utils/guards.js

@@ -0,0 +1,9 @@
+import { ELEMENT_TYPE } from './constants';
+export function isElement(value) {
+    return value && value.$$typeof === ELEMENT_TYPE;
+}
+export function isValidChild(element) {
+    return element !== null &&
+        element !== undefined &&
+        typeof element !== 'boolean';
+}

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

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

package/package.json

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