nesquick 0.0.16 → 0.0.18

package/lib/NesquickComponent.js

@@ -10,6 +10,10 @@ 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;
@@ -25,34 +29,106 @@ class NesquickComponent {
             functionizeProps(this.props);
             const element = this._render(this.props);
             if (this._xmlns) {
-                element.inheritXmlns(this._xmlns);
+                element.setXmlns(this._xmlns);
             }
             const res = element.render(document);
             State_1.subscriptions.reset();
             return res;
         }
-        if (this.props?.xmlns != null) {
-            if (typeof this.props.xmlns === "function") {
-                this._xmlns = this.props.xmlns();
+        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 {
-                this._xmlns = this.props.xmlns;
+        }
+        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);
+                }
             }
         }
-        const element = this._xmlns ? document.createElementNS(this._xmlns, this._render) : document.createElement(this._render);
-        if (this.props != null) {
-            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);
+        if (this.props.ref != null) {
+            this.props.ref(element);
+        }
         this.props = {};
         State_1.subscriptions.reset();
         return element;
     }
-    inheritXmlns(xmlns) {
-        if (this.props?.xmlns != null) {
-            this._xmlns = xmlns;
+    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" && k !== "xmlns") {
@@ -155,7 +231,7 @@ class NesquickComponent {
             nesquickChild.component = null;
             nesquickChild.fragment = Array.isArray(child) ? new NesquickFragment_1.NesquickFragment(child) : child;
             if (this._xmlns) {
-                nesquickChild.fragment.inheritXmlns(this._xmlns);
+                nesquickChild.fragment.setXmlns(this._xmlns);
             }
             const node = nesquickChild.fragment.render(document);
             const lastChild = node.lastChild;
@@ -171,7 +247,7 @@ class NesquickComponent {
             nesquickChild.component = child;
             nesquickChild.fragment = null;
             if (this._xmlns) {
-                child.inheritXmlns(this._xmlns);
+                child.setXmlns(this._xmlns);
             }
             const node = child.render(document);
             if (nesquickChild.node) {

package/lib/types/NesquickComponent.d.ts

@@ -18,6 +18,10 @@ 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;
@@ -26,7 +30,9 @@ export declare class NesquickComponent<P extends ComponentProps = {}> {
     protected _children: NesquickChild[];
     constructor(_render: string | FunctionComponent<P>, props: P);
     render(document: VeactDocument): Node;
-    inheritXmlns(xmlns: string | null): void;
+    setXmlns(xmlns: XmlNs | null): void;
+    private _getAttributeNs;
+    private _renderPropsNs;
     private _renderProps;
     protected _renderChildren(document: VeactDocument, parent: NesquickParent, children?: Children): void;
     protected _pushChild(): NesquickChild;

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

@@ -34,6 +34,7 @@ export declare namespace JSX {
         [k: string]: any;
         style?: StyleProps;
         xmlns?: string;
+        ref?: (el: T) => void;
     }
     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.16",
+  "version": "0.0.18",
   "description": "React-like library with focus on drawing performance",
   "types": "./lib/types",
   "main": "./lib",