nesquick 0.0.15 → 0.0.17

package/lib/NesquickComponent.js

@@ -10,11 +10,16 @@ function functionizeProps(props) {
         }
     }
 }
+const SVGNamespaces = new Map([
+    ["xlink", "http://www.w3.org/1999/xlink"],
+    ["xml", "http://www.w3.org/XML/1998/namespace"]
+]);
 class NesquickComponent {
     constructor(_render, props) {
         this._render = _render;
         this.props = props;
         this._subscriptions = new State_1.Subscriptions();
+        this._xmlns = null;
         this._children = [];
         this.props = props;
     }
@@ -22,22 +27,108 @@ class NesquickComponent {
         State_1.subscriptions.set(this._subscriptions);
         if (typeof this._render === "function") {
             functionizeProps(this.props);
-            const res = this._render(this.props).render(document);
+            const element = this._render(this.props);
+            if (this._xmlns) {
+                element.setXmlns(this._xmlns);
+            }
+            const res = element.render(document);
             State_1.subscriptions.reset();
             return res;
         }
-        const element = document.createElement(this._render);
-        if (this.props != null) {
-            this._renderProps(element, this.props);
+        if (this.props?.xmlns != null) {
+            let namespace = typeof this.props.xmlns === "function" ? this.props.xmlns() : this.props.xmlns;
+            if (namespace != null) {
+                namespace = String(namespace);
+                this._xmlns = {
+                    ns: namespace,
+                    attributes: namespace === "http://www.w3.org/2000/svg" ? SVGNamespaces : null
+                };
+            }
+        }
+        else if (this._render === "svg") {
+            this._xmlns = {
+                ns: "http://www.w3.org/2000/svg",
+                attributes: SVGNamespaces
+            };
+        }
+        let element;
+        if (this._xmlns?.ns) {
+            element = document.createElementNS(this._xmlns.ns, this._render);
+            if (this.props != null) {
+                if (this._xmlns.attributes) {
+                    this._renderPropsNs(this._xmlns.attributes, element, this.props);
+                }
+                else {
+                    this._renderProps(element, this.props);
+                }
+            }
+        }
+        else {
+            element = document.createElement(this._render);
+            if (this.props != null) {
+                this._renderProps(element, this.props);
+            }
         }
         this._renderChildren(document, element, this.props.children);
         this.props = {};
         State_1.subscriptions.reset();
         return element;
     }
+    setXmlns(xmlns) {
+        this._xmlns = xmlns;
+    }
+    _getAttributeNs(attributes, k) {
+        const index = k.indexOf(":");
+        if (index > -1) {
+            const ns = k.substring(0, index);
+            const name = k.substring(index + 1);
+            const namespace = attributes.get(ns);
+            if (namespace != null) {
+                return {
+                    namespace: namespace,
+                    name: name
+                };
+            }
+        }
+        return null;
+    }
+    _renderPropsNs(attributes, element, props) {
+        for (const k in props) {
+            if (k !== "children" && k !== "xmlns") {
+                if (typeof props[k] === "function") {
+                    if (k.startsWith("on")) {
+                        element[k.toLowerCase()] = props[k];
+                    }
+                    else {
+                        const attribute = this._getAttributeNs(attributes, k);
+                        if (attribute) {
+                            (0, State_1.useRender)(props[k], v => {
+                                element.setAttributeNS(attribute.namespace, attribute.name, String(v));
+                            });
+                        }
+                        else {
+                            (0, State_1.useRender)(props[k], v => {
+                                element.setAttribute(k, String(v));
+                            });
+                        }
+                    }
+                }
+                else {
+                    const attribute = this._getAttributeNs(attributes, k);
+                    if (attribute) {
+                        element.setAttributeNS(attribute.namespace, attribute.name, String(props[k]));
+                    }
+                    else {
+                        element.setAttribute(k, String(props[k]));
+                    }
+                }
+            }
+        }
+    }
+    ;
     _renderProps(element, props) {
         for (const k in props) {
-            if (k !== "children") {
+            if (k !== "children" && k !== "xmlns") {
                 if (typeof props[k] === "function") {
                     if (k.startsWith("on")) {
                         element[k.toLowerCase()] = props[k];
@@ -136,6 +227,9 @@ class NesquickComponent {
         if (child instanceof NesquickFragment_1.NesquickFragment || Array.isArray(child)) {
             nesquickChild.component = null;
             nesquickChild.fragment = Array.isArray(child) ? new NesquickFragment_1.NesquickFragment(child) : child;
+            if (this._xmlns) {
+                nesquickChild.fragment.setXmlns(this._xmlns);
+            }
             const node = nesquickChild.fragment.render(document);
             const lastChild = node.lastChild;
             if (nesquickChild.node) {
@@ -149,6 +243,9 @@ class NesquickComponent {
         else if (child instanceof NesquickComponent) {
             nesquickChild.component = child;
             nesquickChild.fragment = null;
+            if (this._xmlns) {
+                child.setXmlns(this._xmlns);
+            }
             const node = child.render(document);
             if (nesquickChild.node) {
                 parent.replaceChild(node, nesquickChild.node);

package/lib/types/NesquickComponent.d.ts

@@ -3,6 +3,7 @@ export type Children = Child | Child[];
 export type ChildFunc = () => Exclude<Child, ChildFunc> | Exclude<Child, ChildFunc>[];
 export type ComponentProps = Record<string, any>;
 export type FunctionComponent<P extends ComponentProps = {}> = (props: P) => NesquickComponent<P>;
+export type VeactDocument = Pick<Document, "createElement" | "createElementNS" | "createTextNode" | "createDocumentFragment" | "createComment">;
 type NesquickChild = {
     node: Node | null;
 } & ({
@@ -17,20 +18,28 @@ export type NesquickParent = {
     replaceChild(newChild: Node, oldChild: Node): void;
     insertBefore(node: Node, child: Node | null): void;
 };
+type XmlNs = {
+    ns: string;
+    attributes: Map<string, string> | null;
+};
 export declare class NesquickComponent<P extends ComponentProps = {}> {
     private _render;
     protected props: P;
     private _subscriptions;
+    private _xmlns;
     protected _children: NesquickChild[];
     constructor(_render: string | FunctionComponent<P>, props: P);
-    render(document: Document): Node;
+    render(document: VeactDocument): Node;
+    setXmlns(xmlns: XmlNs | null): void;
+    private _getAttributeNs;
+    private _renderPropsNs;
     private _renderProps;
-    protected _renderChildren(document: Document, parent: NesquickParent, children?: Children): void;
+    protected _renderChildren(document: VeactDocument, parent: NesquickParent, children?: Children): void;
     protected _pushChild(): NesquickChild;
     protected _spliceChild(i: number): NesquickChild;
     protected _swapChilds(parent: NesquickParent, i1: number, i2: number): void;
     protected _removeChild(i: number): void;
-    protected _renderChild(document: Document, parent: NesquickParent, nesquickChild: NesquickChild, child: Exclude<Child, ChildFunc> | Exclude<Child, ChildFunc>[]): void;
+    protected _renderChild(document: VeactDocument, parent: NesquickParent, nesquickChild: NesquickChild, child: Exclude<Child, ChildFunc> | Exclude<Child, ChildFunc>[]): void;
     dispose(): void;
 }
 import { NesquickFragment } from "./NesquickFragment";

package/lib/types/NesquickFragment.d.ts

@@ -1,12 +1,12 @@
 import { JSX } from "./jsx-runtime";
-import { NesquickComponent, NesquickParent } from "./NesquickComponent";
+import { NesquickComponent, NesquickParent, VeactDocument } from "./NesquickComponent";
 export declare class NesquickFragment extends NesquickComponent<{
     children: any[];
 }> implements NesquickParent {
     private _lastNode;
     private _fragment;
     constructor(children: any[]);
-    render(document: Document): Node;
+    render(document: VeactDocument): Node;
     getDocument(): Document | null;
     getParent(): Node | null;
     appendChild(child: Node): void;

package/lib/types/jsx-runtime.d.ts

@@ -11,14 +11,11 @@ type UserProp<T> = T extends (...args: infer A) => infer R ? (((...args: A) => R
 type ComponentProp<T> = T extends {
     readonly [WrappedFunctionType]?: infer R;
 } ? (T | R) : T extends (...args: any[]) => any ? T : (T | (() => T));
-type UnFunction<T> = T extends {
-    readonly [WrappedFunctionType]?: infer R;
-} ? (T | R) : T;
 type UserProps<T> = {
-    [K in keyof T]: K extends "children" ? T[K] : UserProp<T[K]>;
+    [K in keyof T]: UserProp<T[K]>;
 };
 type JSXProps<T> = keyof T extends never ? {} : {
-    [K in keyof T]: K extends "children" ? UnFunction<T[K]> : ComponentProp<T[K]>;
+    [K in keyof T]: ComponentProp<T[K]>;
 };
 export type Generic<T> = T extends (...args: any) => infer R ? R : T;
 export { UserProps as Props };
@@ -33,9 +30,10 @@ export declare namespace JSX {
     export type JSXSVGEvent<T extends EventTarget> = {
         [K in keyof SVGElementEventMap as `on${Capitalize<K>}`]?: (e: JSXEvent<SVGElementEventMap[K], T>) => void;
     };
-    export interface Props<T extends EventTarget = HTMLElement> extends JSXHTMLEvent<T> {
+    export interface Props<T extends EventTarget = HTMLElement> extends JSXHTMLEvent<T>, JSXSVGEvent<T> {
         [k: string]: any;
         style?: StyleProps;
+        xmlns?: string;
     }
     export type StyleProps = {
         [K in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[K] extends Function ? never : CSSStyleDeclaration[K] | (() => CSSStyleDeclaration[K]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nesquick",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "React-like library with focus on drawing performance",
   "types": "./lib/types",
   "main": "./lib",