nesquick 2.1.0 → 2.2.0

package/lib/NesquickComponent.js

@@ -21,21 +21,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 +89,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);

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

@@ -7,6 +7,7 @@ function getSingleIdentifier(node) {
     node.forEachChild(node => {
         if (TS.isIdentifier(node)) {
             if (identifier != null) {
+                identifier = null;
                 return node;
             }
             identifier = node;
@@ -53,6 +54,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 +71,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,19 +80,12 @@ const transformer = context => {
                     node = TS.factory.updateJsxSpreadAttribute(node, callExpression);
                 }
             }
-            else if (TS.isJsxElement(node)) {
-                const firstLetter = node.openingElement.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;
             }
-            else if (TS.isJsxOpeningLikeElement(node)) {
-                const firstLetter = node.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)) {
                 node = TS.visitEachChild(node, node => {
                     const res = visitGeneric(node, { ...options, isJsxAttribute: true });
@@ -108,6 +105,12 @@ 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 });
+                    return res.node;
+                }, context);
+            }
             else {
                 node = TS.visitEachChild(node, node => {
                     const res = visitGeneric(node, { ...options, isJsxAttribute: false });
@@ -115,6 +118,9 @@ const transformer = context => {
                     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 +138,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)) {
+                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/package.json

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