nesquick 2.1.0 → 2.2.1

package/lib/NesquickComponent.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NesquickComponent = void 0;
 const State_1 = require("./State");
+const util_1 = require("./util");
 const SVGNamespaces = new Map([
     ["xlink", "http://www.w3.org/1999/xlink"],
     ["xml", "http://www.w3.org/XML/1998/namespace"]
@@ -21,21 +22,65 @@ function getAttributeNs(attributes, k) {
     }
     return null;
 }
-function getterFromFunctions(props) {
-    const res = Object.create(null);
+function getterFromFunctionsSingleChildren(props) {
+    const res = {};
     for (const k in props) {
-        Object.defineProperty(res, k, {
-            get() {
-                return props[k]();
+        if (k === "children") {
+            const v = props.children;
+            if (typeof v === "function" && !(v instanceof NesquickComponent)) {
+                Object.defineProperty(res, "children", {
+                    get() {
+                        return v();
+                    }
+                });
             }
-        });
+            else {
+                res.children = v;
+            }
+        }
+        else {
+            const v = props[k];
+            Object.defineProperty(res, k, {
+                get() {
+                    return v();
+                }
+            });
+        }
+    }
+    return res;
+}
+function getterFromFunctionsArrayChildren(props) {
+    const res = {};
+    for (const k in props) {
+        if (k === "children") {
+            res.children = props.children;
+            for (let i = 0; i < props.children.length; i++) {
+                const v = props.children[i];
+                if (typeof v === "function" && !(v instanceof NesquickComponent)) {
+                    Object.defineProperty(res.children, i, {
+                        get() {
+                            return v();
+                        }
+                    });
+                }
+            }
+        }
+        else {
+            const v = props[k];
+            Object.defineProperty(res, k, {
+                get() {
+                    return v();
+                }
+            });
+        }
     }
     return res;
 }
 class NesquickComponent {
-    constructor(_render, props) {
+    constructor(_render, props, jsxs = false) {
         this._render = _render;
         this.props = props;
+        this.jsxs = jsxs;
         this._subscriptions = new State_1.Subscriptions();
         this._styleSubscriptions = null;
         this._xmlns = null;
@@ -45,7 +90,7 @@ class NesquickComponent {
     render(document) {
         State_1.subscriptions.set(this._subscriptions);
         if (typeof this._render === "function") {
-            this.props = getterFromFunctions(this.props);
+            this.props = this.jsxs ? getterFromFunctionsArrayChildren(this.props) : getterFromFunctionsSingleChildren(this.props);
             const element = this._render(this.props);
             if (this._xmlns) {
                 element.setXmlns(this._xmlns);
@@ -122,23 +167,23 @@ class NesquickComponent {
                     this._renderStyle(element, props[k]);
                 }
                 else if (typeof props[k] === "function") {
-                    if (k.startsWith("on")) {
-                        element[k.toLowerCase()] = props[k];
+                    const attribute = getAttributeNs(attributes, k);
+                    if (attribute) {
+                        (0, State_1.useRender)(props[k], v => {
+                            element.setAttributeNS(attribute.namespace, attribute.name, String(v));
+                            this._onUpdated();
+                        });
+                    }
+                    else if ((0, util_1.isEvent)(k)) {
+                        (0, State_1.useRender)(props[k], v => {
+                            element[k.toLowerCase()] = v;
+                        });
                     }
                     else {
-                        const attribute = getAttributeNs(attributes, k);
-                        if (attribute) {
-                            (0, State_1.useRender)(props[k], v => {
-                                element.setAttributeNS(attribute.namespace, attribute.name, String(v));
-                                this._onUpdated();
-                            });
-                        }
-                        else {
-                            (0, State_1.useRender)(props[k], v => {
-                                element.setAttribute(k, String(v));
-                                this._onUpdated();
-                            });
-                        }
+                        (0, State_1.useRender)(props[k], v => {
+                            element.setAttribute(k, String(v));
+                            this._onUpdated();
+                        });
                     }
                 }
                 else {
@@ -161,8 +206,10 @@ class NesquickComponent {
                     this._renderStyle(element, props[k]);
                 }
                 else if (typeof props[k] === "function") {
-                    if (k.startsWith("on")) {
-                        element[k.toLowerCase()] = props[k];
+                    if ((0, util_1.isEvent)(k)) {
+                        (0, State_1.useRender)(props[k], v => {
+                            element[k.toLowerCase()] = v;
+                        });
                     }
                     else {
                         (0, State_1.useRender)(props[k], v => {

package/lib/NesquickFragment.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NesquickFragment = void 0;
 const NesquickComponent_1 = require("./NesquickComponent");
 class NesquickFragment extends NesquickComponent_1.NesquickComponent {
-    constructor(children) {
-        super("", { children });
+    constructor(children, jsxs = false) {
+        super("", { children }, jsxs);
         this._lastNode = null;
         this._fragment = null;
     }

package/lib/cli/transformer.js

@@ -2,11 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformer = void 0;
 const TS = require("typescript");
+const util_1 = require("../util");
 function getSingleIdentifier(node) {
     let identifier = null;
     node.forEachChild(node => {
         if (TS.isIdentifier(node)) {
             if (identifier != null) {
+                identifier = null;
                 return node;
             }
             identifier = node;
@@ -53,6 +55,9 @@ function createSpreadCheckFunction(fName) {
         TS.factory.createReturnStatement(res)
     ], true));
 }
+function arrowify(node) {
+    return TS.factory.createArrowFunction(void 0, void 0, [], void 0, TS.factory.createToken(TS.SyntaxKind.EqualsGreaterThanToken), node);
+}
 const transformer = context => {
     return sourceFile => {
         let hasSpreadChecker = false;
@@ -67,7 +72,7 @@ const transformer = context => {
             return { node, hasCallExpression };
         };
         const visitGeneric = (node, options) => {
-            let hasCallExpression = TS.isCallExpression(node);
+            let hasCallExpression = TS.isCallExpression(node) || TS.isElementAccessExpression(node) || TS.isPropertyAccessExpression(node);
             if (TS.isJsxSpreadAttribute(node)) {
                 hasSpreadChecker = true;
                 const expression = visitGeneric(node.expression, {}).node;
@@ -76,22 +81,16 @@ const transformer = context => {
                     node = TS.factory.updateJsxSpreadAttribute(node, callExpression);
                 }
             }
-            else if (TS.isJsxElement(node)) {
-                const firstLetter = node.openingElement.tagName.getText()[0];
-                const userComponent = firstLetter !== firstLetter.toLowerCase();
-                const res = processNode(node, { userComponent });
-                node = res.node;
-            }
-            else if (TS.isJsxOpeningLikeElement(node)) {
-                const firstLetter = node.tagName.getText()[0];
+            else if (TS.isJsxElement(node) || TS.isJsxSelfClosingElement(node)) {
+                const firstLetter = TS.isJsxSelfClosingElement(node) ? node.tagName.getText()[0] : node.openingElement.tagName.getText()[0];
                 const userComponent = firstLetter !== firstLetter.toLowerCase();
                 const res = processNode(node, { userComponent });
                 node = res.node;
-                hasCallExpression = hasCallExpression || res.hasCallExpression;
             }
             else if (TS.isJsxAttribute(node)) {
+                const propIsEvent = TS.isIdentifier(node.name) && (0, util_1.isEvent)(node.name.text);
                 node = TS.visitEachChild(node, node => {
-                    const res = visitGeneric(node, { ...options, isJsxAttribute: true });
+                    const res = visitGeneric(node, { ...options, isJsxAttribute: true, isEvent: propIsEvent });
                     hasCallExpression = hasCallExpression || res.hasCallExpression;
                     return res.node;
                 }, context);
@@ -100,7 +99,7 @@ const transformer = context => {
                 node = TS.visitEachChild(node, node => visitorExpression(node, { ...options, isJsxAttribute: false }), context);
             }
             else if (options.isJsxAttribute && TS.isStringLiteral(node)) {
-                const returnNode = TS.visitNode(node, node => visitorExpression(node, { ...options, isJsxAttribute: false }), TS.isExpression);
+                const returnNode = TS.visitNode(node, node => visitorExpression(node, { ...options, isJsxAttribute: false, isEvent: false }), TS.isExpression);
                 if (TS.isStringLiteral(returnNode)) {
                     node = returnNode;
                 }
@@ -108,13 +107,22 @@ const transformer = context => {
                     node = TS.factory.createJsxExpression(void 0, returnNode);
                 }
             }
+            else if (TS.isFunctionLike(node)) {
+                node = TS.visitEachChild(node, node => {
+                    const res = visitGeneric(node, { ...options, isJsxAttribute: false, isEvent: false });
+                    return res.node;
+                }, context);
+            }
             else {
                 node = TS.visitEachChild(node, node => {
-                    const res = visitGeneric(node, { ...options, isJsxAttribute: false });
+                    const res = visitGeneric(node, { ...options, isJsxAttribute: false, isEvent: false });
                     hasCallExpression = hasCallExpression || res.hasCallExpression;
                     return res.node;
                 }, context);
             }
+            if (TS.isJsxChild(node) && !TS.isJsxText(node) && !TS.isJsxExpression(node) && options.userComponent) {
+                node = TS.factory.createJsxExpression(void 0, arrowify(node));
+            }
             return { node, hasCallExpression };
         };
         const visitorExpression = (node, options) => {
@@ -132,10 +140,8 @@ const transformer = context => {
             }
             const res = visitGeneric(node, {});
             node = res.node;
-            if (TS.isExpression(node)) {
-                if (options.userComponent || (res.hasCallExpression && !TS.isFunctionLike(node) && !TS.isJsxElement(node) && !TS.isJsxOpeningLikeElement(node))) {
-                    node = TS.factory.createArrowFunction(void 0, void 0, [], void 0, TS.factory.createToken(TS.SyntaxKind.EqualsGreaterThanToken), node);
-                }
+            if (TS.isConciseBody(node) && (options.userComponent || res.hasCallExpression || options.isEvent)) {
+                node = arrowify(node);
             }
             return node;
         };

package/lib/jsx-runtime.js

@@ -7,22 +7,16 @@ const NesquickComponent_1 = require("./NesquickComponent");
 const NesquickFragment_1 = require("./NesquickFragment");
 exports.Fragment = Symbol();
 function jsxs(type, props, key) {
-    if (type === exports.Fragment) {
-        return new NesquickFragment_1.NesquickFragment(props.children);
-    }
-    if (key !== undefined) {
-        props.key = key;
-    }
-    return new NesquickComponent_1.NesquickComponent(type, props);
+    return jsx(type, props, key, true);
 }
-function jsx(type, props, key) {
+function jsx(type, props, key, jsxs = false) {
     if (type === exports.Fragment) {
-        return new NesquickFragment_1.NesquickFragment([props.children]);
+        return new NesquickFragment_1.NesquickFragment([props.children], jsxs);
     }
     if (key !== undefined) {
         props.key = key;
     }
-    return new NesquickComponent_1.NesquickComponent(type, props);
+    return new NesquickComponent_1.NesquickComponent(type, props, jsxs);
 }
 var JSX;
 (function (JSX) {

package/lib/types/NesquickComponent.d.ts

@@ -2,8 +2,8 @@ export type Child = NesquickComponent<any> | NesquickFragment | string | boolean
 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">;
+export type FunctionComponent<P extends ComponentProps = {}> = (props: P) => NesquickComponent<any>;
+export type NesquickDocument = Pick<Document, "createElement" | "createElementNS" | "createTextNode" | "createDocumentFragment" | "createComment">;
 type NesquickChild = {
     node: Node | null;
 } & ({
@@ -25,25 +25,26 @@ type XmlNs = {
 export declare class NesquickComponent<P extends ComponentProps = {}> {
     private _render;
     protected props: P;
+    protected jsxs: boolean;
     private _subscriptions;
     private _styleSubscriptions;
     private _xmlns;
     private _onUpdate;
     protected _children: NesquickChild[];
-    constructor(_render: string | FunctionComponent<P>, props: P);
-    render(document: VeactDocument): Node;
+    constructor(_render: string | FunctionComponent<P>, props: P, jsxs?: boolean);
+    render(document: NesquickDocument): Node;
     setXmlns(xmlns: XmlNs | null): void;
     private _onUpdated;
     private _renderPropsNs;
     private _renderProps;
     private _renderStyles;
     private _renderStyle;
-    protected _renderChildren(document: VeactDocument, parent: NesquickParent, children?: Children): void;
+    protected _renderChildren(document: NesquickDocument, 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: VeactDocument, parent: NesquickParent, nesquickChild: NesquickChild, child: Exclude<Child, ChildFunc> | Exclude<Child, ChildFunc>[]): void;
+    protected _renderChild(document: NesquickDocument, 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 "./Nesquick";
-import { Child, NesquickComponent, NesquickParent, VeactDocument } from "./NesquickComponent";
+import { Child, NesquickComponent, NesquickParent, NesquickDocument } from "./NesquickComponent";
 export declare class NesquickFragment extends NesquickComponent<{
     children: Child[];
 }> implements NesquickParent {
     private _lastNode;
     private _fragment;
-    constructor(children: Child[]);
-    render(document: VeactDocument): Node;
+    constructor(children: Child[], jsxs?: boolean);
+    render(document: NesquickDocument): Node;
     getDocument(): Document | null;
     getParent(): Node | null;
     appendChild(child: Node): void;

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

@@ -2,7 +2,7 @@ import { FunctionComponent, ComponentProps, NesquickComponent } from "./Nesquick
 import { NesquickFragment } from "./NesquickFragment";
 export declare const Fragment: unique symbol;
 export declare function jsxs<P extends ComponentProps>(type: string | FunctionComponent<P> | typeof Fragment, props: P, key?: string | number | null): NesquickFragment | NesquickComponent<P>;
-export declare function jsx<P extends ComponentProps>(type: string | FunctionComponent<P> | typeof Fragment, props: P, key?: string | number | null): NesquickFragment | NesquickComponent<P>;
+export declare function jsx<P extends ComponentProps>(type: string | FunctionComponent<P> | typeof Fragment, props: P, key?: string | number | null, jsxs?: boolean): NesquickFragment | NesquickComponent<P>;
 export type Component<P extends Record<any, any> = {}> = (props: P) => JSX.Element;
 export declare namespace JSX {
     export type JSXEvent<T extends Event, T2 extends EventTarget> = T & {

package/lib/types/util.d.ts

@@ -0,0 +1 @@
+export declare function isEvent(name: string): boolean;

package/lib/util.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isEvent = isEvent;
+function isEvent(name) {
+    return name.startsWith("on") && name.length > 2 && name[2] === name[2].toUpperCase();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nesquick",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "React-like library with focus on drawing performance",
   "types": "./lib/types/index.d.ts",
   "main": "./lib/index.js",