jsx support use function as component

doric-demo/src/FunctionalComponentDemo.tsx

@@ -0,0 +1,20 @@
+import { Text, Group, Panel, jsx, VLayout, layoutConfig, HLayout } from "doric";
+
+function CellItem(props: { text: string }) {
+  return (
+    <HLayout layoutConfig={layoutConfig().mostWidth().justHeight()} height={50}>
+      <Text>{props.text}</Text>
+    </HLayout>
+  );
+}
+
+@Entry
+class FunctionalComponentDemo extends Panel {
+  build(root: Group) {
+    <VLayout layoutConfig={layoutConfig().most()} parent={root}>
+      <CellItem text="Cell0"></CellItem>
+      <CellItem text="Cell1"></CellItem>
+      <CellItem text="Cell2"></CellItem>
+    </VLayout>;
+  }
+}

doric-js/bundle/doric-lib.es5.js

@@ -68,7 +68,7 @@ var Mutable = /** @class */ (function () {
  */
 var __uniqueId__ = 0;
 function uniqueId(prefix) {
-    return "__".concat(prefix, "_").concat(__uniqueId__++, "__");
+    return "__" + prefix + "_" + __uniqueId__++ + "__";
 }
 
 function toString(message) {
@@ -92,6 +92,11 @@ function toString(message) {
 }
 function log() {
     var arguments$1 = arguments;
+
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments$1[_i];
+    }
     var out = "";
     for (var i = 0; i < arguments.length; i++) {
         if (i > 0) {
@@ -103,6 +108,11 @@ function log() {
 }
 function loge() {
     var arguments$1 = arguments;
+
+    var message = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        message[_i] = arguments$1[_i];
+    }
     var out = "";
     for (var i = 0; i < arguments.length; i++) {
         if (i > 0) {
@@ -114,6 +124,11 @@ function loge() {
 }
 function logw() {
     var arguments$1 = arguments;
+
+    var message = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        message[_i] = arguments$1[_i];
+    }
     var out = "";
     for (var i = 0; i < arguments.length; i++) {
         if (i > 0) {
@@ -162,11 +177,11 @@ var __values$5 = (undefined && undefined.__values) || function(o) {
 function Property(target, propKey) {
     Object.defineProperty(target, propKey, {
         get: function () {
-            return Reflect.get(this, "__prop__".concat(propKey), this);
+            return Reflect.get(this, "__prop__" + propKey, this);
         },
         set: function (v) {
-            var oldV = Reflect.get(this, "__prop__".concat(propKey), this);
+            var oldV = Reflect.get(this, "__prop__" + propKey, this);
-            Reflect.set(this, "__prop__".concat(propKey), v, this);
+            Reflect.set(this, "__prop__" + propKey, v, this);
             if (oldV !== v) {
                 Reflect.apply(this.onPropertyChanged, this, [propKey, oldV, v]);
             }
@@ -176,11 +191,11 @@ function Property(target, propKey) {
 function InconsistProperty(target, propKey) {
     Object.defineProperty(target, propKey, {
         get: function () {
-            return Reflect.get(this, "__prop__".concat(propKey), this);
+            return Reflect.get(this, "__prop__" + propKey, this);
         },
         set: function (v) {
-            var oldV = Reflect.get(this, "__prop__".concat(propKey), this);
+            var oldV = Reflect.get(this, "__prop__" + propKey, this);
-            Reflect.set(this, "__prop__".concat(propKey), v, this);
+            Reflect.set(this, "__prop__" + propKey, v, this);
             Reflect.apply(this.onPropertyChanged, this, [propKey, oldV, v]);
         },
     });
@@ -344,6 +359,11 @@ var View = /** @class */ (function () {
     };
     View.prototype.responseCallback = function (id) {
         var arguments$1 = arguments;
+
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments$1[_i];
+        }
         var f = this.id2Callback(id);
         if (f instanceof Function) {
             var argumentsList = [];
@@ -353,7 +373,7 @@ var View = /** @class */ (function () {
             return Reflect.apply(f, this, argumentsList);
         }
         else {
-            loge("Cannot find callback:".concat(id, " for ").concat(JSON.stringify(this.toModel())));
+            loge("Cannot find callback:" + id + " for " + JSON.stringify(this.toModel()));
         }
     };
     View.prototype.toModel = function () {
@@ -457,6 +477,9 @@ var View = /** @class */ (function () {
             }
         });
     };
+    View.isViewClass = function () {
+        return true;
+    };
     __decorate$f([
         Property,
         __metadata$f("design:type", Number)
@@ -694,7 +717,7 @@ var Group = /** @class */ (function (_super) {
             this.addChild(e);
         }
         else {
-            loge("Not allowed to add ".concat(typeof e));
+            loge("Not allowed to add " + typeof e);
         }
     };
     Object.defineProperty(Group.prototype, "innerElement", {
@@ -1209,7 +1232,7 @@ var Panel = /** @class */ (function () {
 
         var v = this.retrospectView(viewIds);
         if (v === undefined) {
-            loge("Cannot find view for ".concat(viewIds));
+            loge("Cannot find view for " + viewIds);
         }
         else {
             var argumentsList = [callbackId];
@@ -1411,7 +1434,7 @@ var Color = /** @class */ (function () {
     }
     Color.parse = function (str) {
         if (!str.startsWith("#")) {
-            throw new Error("Parse color error with ".concat(str));
+            throw new Error("Parse color error with " + str);
         }
         var val = parseInt(str.substr(1), 16);
         if (str.length === 7) {
@@ -1421,7 +1444,7 @@ var Color = /** @class */ (function () {
             return new Color(val);
         }
         else {
-            throw new Error("Parse color error with ".concat(str));
+            throw new Error("Parse color error with " + str);
         }
     };
     Color.safeParse = function (str, defVal) {
@@ -2224,7 +2247,7 @@ var MainBundleResource = /** @class */ (function (_super) {
 var BundleResource = /** @class */ (function (_super) {
     __extends$f(BundleResource, _super);
     function BundleResource(bundleName, fileName) {
-        return _super.call(this, "bundle", "".concat(bundleName, "://").concat(fileName)) || this;
+        return _super.call(this, "bundle", bundleName + "://" + fileName) || this;
     }
     return BundleResource;
 }(iOSResource));
@@ -2507,7 +2530,7 @@ var List = /** @class */ (function (_super) {
     List.prototype.getItem = function (itemIdx) {
         var view = this.renderItem(itemIdx);
         view.superview = this;
-        this.cachedViews.set("".concat(itemIdx), view);
+        this.cachedViews.set("" + itemIdx, view);
         return view;
     };
     List.prototype.renderBunchedItems = function (start, length) {
@@ -2657,7 +2680,7 @@ var Slider = /** @class */ (function (_super) {
     Slider.prototype.getItem = function (itemIdx) {
         var view = this.renderPage(itemIdx);
         view.superview = this;
-        this.cachedViews.set("".concat(itemIdx), view);
+        this.cachedViews.set("" + itemIdx, view);
         return view;
     };
     Slider.prototype.renderBunchedItems = function (start, length) {
@@ -3005,26 +3028,47 @@ exports.jsx = void 0;
         for (var _i = 2; _i < arguments.length; _i++) {
             children[_i - 2] = arguments$1[_i];
         }
-        var e = new constructor();
+        if (!!constructor.isViewClass) {
-        if (e instanceof Fragment) {
+            var e = new constructor();
-            return children;
+            if (e instanceof Fragment) {
-        }
+                return children;
-        e.layoutConfig = layoutConfig().fit();
-        if (config) {
-            e.apply(config);
-        }
-        if (children && children.length > 0) {
-            if (children.length === 1) {
-                children = children[0];
             }
-            if (Reflect.has(e, "innerElement")) {
+            e.layoutConfig = layoutConfig().fit();
-                Reflect.set(e, "innerElement", children, e);
+            if (config) {
+                e.apply(config);
             }
-            else {
+            if (children && children.length > 0) {
-                throw new Error("Do not support ".concat(constructor.name, " for ").concat(children));
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error("Do not support " + constructor.name + " for " + children);
+                }
             }
+            return e;
+        }
+        else {
+            var f = constructor;
+            var e = Reflect.apply(f, undefined, [config]);
+            if (e instanceof Fragment) {
+                return children;
+            }
+            if (children && children.length > 0) {
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error("Do not support add child for " + e.viewType());
+                }
+            }
+            return e;
         }
-        return e;
     }
     jsx.createElement = createElement;
     var Fragment = /** @class */ (function (_super) {
@@ -3139,7 +3183,7 @@ var FlowLayout = /** @class */ (function (_super) {
     FlowLayout.prototype.getItem = function (itemIdx) {
         var view = this.renderItem(itemIdx);
         view.superview = this;
-        this.cachedViews.set("".concat(itemIdx), view);
+        this.cachedViews.set("" + itemIdx, view);
         return view;
     };
     FlowLayout.prototype.renderBunchedItems = function (start, length) {
@@ -3820,7 +3864,7 @@ function navbar(context) {
 }
 
 function internalScheme(context, panelClass) {
-    return "_internal_://export?class=".concat(encodeURIComponent(panelClass.name), "&context=").concat(context.id);
+    return "_internal_://export?class=" + encodeURIComponent(panelClass.name) + "&context=" + context.id;
 }
 function navigator(context) {
     var moduleName = "navigator";
@@ -3860,9 +3904,9 @@ function transformRequest(request) {
     if (request.params !== undefined) {
         var queryStrings = [];
         for (var key in request.params) {
-            queryStrings.push("".concat(key, "=").concat(encodeURIComponent(request.params[key])));
+            queryStrings.push(key + "=" + encodeURIComponent(request.params[key]));
         }
-        request.url = "".concat(request.url).concat(url.indexOf('?') >= 0 ? '&' : '?').concat(queryStrings.join('&'));
+        request.url = "" + request.url + (url.indexOf('?') >= 0 ? '&' : '?') + queryStrings.join('&');
     }
     if (typeof request.data === 'object') {
         request.data = JSON.stringify(request.data);
@@ -4138,7 +4182,7 @@ function animate(context) {
     }
     else {
         return function (args) {
-            return Promise.reject("Cannot find panel in Context:".concat(context.id));
+            return Promise.reject("Cannot find panel in Context:" + context.id);
         };
     }
 }

doric-js/bundle/doric-lib.js

@@ -371,6 +371,9 @@ class View {
             }
         });
     }
+    static isViewClass() {
+        return true;
+    }
 }
 __decorate$f([
     Property,
@@ -2294,26 +2297,47 @@ exports.Display = void 0;
 exports.jsx = void 0;
 (function (jsx) {
     function createElement(constructor, config, ...children) {
-        const e = new constructor();
+        if (!!constructor.isViewClass) {
-        if (e instanceof Fragment) {
+            const e = new constructor();
-            return children;
+            if (e instanceof Fragment) {
-        }
+                return children;
-        e.layoutConfig = layoutConfig().fit();
-        if (config) {
-            e.apply(config);
-        }
-        if (children && children.length > 0) {
-            if (children.length === 1) {
-                children = children[0];
             }
-            if (Reflect.has(e, "innerElement")) {
+            e.layoutConfig = layoutConfig().fit();
-                Reflect.set(e, "innerElement", children, e);
+            if (config) {
+                e.apply(config);
             }
-            else {
+            if (children && children.length > 0) {
-                throw new Error(`Do not support ${constructor.name} for ${children}`);
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error(`Do not support ${constructor.name} for ${children}`);
+                }
             }
+            return e;
+        }
+        else {
+            const f = constructor;
+            const e = Reflect.apply(f, undefined, [config]);
+            if (e instanceof Fragment) {
+                return children;
+            }
+            if (children && children.length > 0) {
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error(`Do not support add child for ${e.viewType()}`);
+                }
+            }
+            return e;
         }
-        return e;
     }
     jsx.createElement = createElement;
     class Fragment extends Group {

doric-js/bundle/doric-vm.js

@@ -1899,6 +1899,9 @@ class View {
             }
         });
     }
+    static isViewClass() {
+        return true;
+    }
 }
 __decorate$f([
     Property,
@@ -3822,26 +3825,47 @@ exports.Display = void 0;
 exports.jsx = void 0;
 (function (jsx) {
     function createElement(constructor, config, ...children) {
-        const e = new constructor();
+        if (!!constructor.isViewClass) {
-        if (e instanceof Fragment) {
+            const e = new constructor();
-            return children;
+            if (e instanceof Fragment) {
-        }
+                return children;
-        e.layoutConfig = layoutConfig().fit();
-        if (config) {
-            e.apply(config);
-        }
-        if (children && children.length > 0) {
-            if (children.length === 1) {
-                children = children[0];
             }
-            if (Reflect.has(e, "innerElement")) {
+            e.layoutConfig = layoutConfig().fit();
-                Reflect.set(e, "innerElement", children, e);
+            if (config) {
+                e.apply(config);
             }
-            else {
+            if (children && children.length > 0) {
-                throw new Error(`Do not support ${constructor.name} for ${children}`);
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error(`Do not support ${constructor.name} for ${children}`);
+                }
             }
+            return e;
+        }
+        else {
+            const f = constructor;
+            const e = Reflect.apply(f, undefined, [config]);
+            if (e instanceof Fragment) {
+                return children;
+            }
+            if (children && children.length > 0) {
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error(`Do not support add child for ${e.viewType()}`);
+                }
+            }
+            return e;
         }
-        return e;
     }
     jsx.createElement = createElement;
     class Fragment extends Group {

doric-js/index.d.ts

@@ -327,6 +327,7 @@ declare module 'doric/lib/src/ui/view' {
             doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
             clearAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
             cancelAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
+            static isViewClass(): boolean;
     }
     export abstract class Superview extends View {
             subviewById(id: string): View | undefined;
@@ -1215,11 +1216,11 @@ declare module 'doric/lib/src/native/navigator' {
     export function internalScheme(context: BridgeContext, panelClass: ClassType<Panel>): string;
     export function navigator(context: BridgeContext): {
         push: (source: string | ClassType<Panel>, config?: {
-            alias?: string;
+            alias?: string | undefined;
-            animated?: boolean;
+            animated?: boolean | undefined;
-            extra?: object;
+            extra?: object | undefined;
-            singlePage?: boolean;
+            singlePage?: boolean | undefined;
-        }) => Promise<any>;
+        } | undefined) => Promise<any>;
         pop: (animated?: boolean) => Promise<any>;
         popSelf: (animated?: boolean) => Promise<any>;
         popToRoot: (animated?: boolean) => Promise<any>;
@@ -1250,19 +1251,19 @@ declare module 'doric/lib/src/native/network' {
     }
     export function network(context: BridgeContext): {
         request: (config: IRequest) => Promise<IResponse>;
-        get: (url: string, config?: IRequest) => Promise<IResponse>;
+        get: (url: string, config?: IRequest | undefined) => Promise<IResponse>;
-        post: (url: string, data?: object | string, config?: IRequest) => Promise<IResponse>;
+        post: (url: string, data?: string | object | undefined, config?: IRequest | undefined) => Promise<IResponse>;
-        put: (url: string, data?: object | string, config?: IRequest) => Promise<IResponse>;
+        put: (url: string, data?: string | object | undefined, config?: IRequest | undefined) => Promise<IResponse>;
-        delete: (url: string, data?: object | string, config?: IRequest) => Promise<IResponse>;
+        delete: (url: string, data?: string | object | undefined, config?: IRequest | undefined) => Promise<IResponse>;
     };
 }
 
 declare module 'doric/lib/src/native/storage' {
     import { BridgeContext } from "doric/lib/src/runtime/global";
     export function storage(context: BridgeContext): {
-        setItem: (key: string, value: string, zone?: string) => Promise<any>;
+        setItem: (key: string, value: string, zone?: string | undefined) => Promise<any>;
-        getItem: (key: string, zone?: string) => Promise<string>;
+        getItem: (key: string, zone?: string | undefined) => Promise<string>;
-        remove: (key: string, zone?: string) => Promise<any>;
+        remove: (key: string, zone?: string | undefined) => Promise<any>;
         clear: (zone: string) => Promise<any>;
     };
 }
@@ -1705,7 +1706,7 @@ declare module 'doric/lib/src/util/jsx' {
     import { Group, View } from "doric/lib/src/ui/view";
     import { ClassType } from "doric/lib/src/util/types";
     export namespace jsx {
-        function createElement<T extends View>(constructor: ClassType<T>, config: Partial<T> | null, ...children: any[]): any[] | T;
+        function createElement<T extends View>(constructor: ClassType<T>, config: Partial<T> | null, ...children: any[]): any;
         class Fragment extends Group {
         }
     }

doric-js/lib/src/native/navigator.d.ts

@@ -4,11 +4,11 @@ import { ClassType } from "../util/types";
 export declare function internalScheme(context: BridgeContext, panelClass: ClassType<Panel>): string;
 export declare function navigator(context: BridgeContext): {
     push: (source: string | ClassType<Panel>, config?: {
-        alias?: string;
+        alias?: string | undefined;
-        animated?: boolean;
+        animated?: boolean | undefined;
-        extra?: object;
+        extra?: object | undefined;
-        singlePage?: boolean;
+        singlePage?: boolean | undefined;
-    }) => Promise<any>;
+    } | undefined) => Promise<any>;
     pop: (animated?: boolean) => Promise<any>;
     popSelf: (animated?: boolean) => Promise<any>;
     popToRoot: (animated?: boolean) => Promise<any>;

doric-js/lib/src/native/network.d.ts

@@ -20,8 +20,8 @@ export interface IResponse {
 }
 export declare function network(context: BridgeContext): {
     request: (config: IRequest) => Promise<IResponse>;
-    get: (url: string, config?: IRequest) => Promise<IResponse>;
+    get: (url: string, config?: IRequest | undefined) => Promise<IResponse>;
-    post: (url: string, data?: object | string, config?: IRequest) => Promise<IResponse>;
+    post: (url: string, data?: string | object | undefined, config?: IRequest | undefined) => Promise<IResponse>;
-    put: (url: string, data?: object | string, config?: IRequest) => Promise<IResponse>;
+    put: (url: string, data?: string | object | undefined, config?: IRequest | undefined) => Promise<IResponse>;
-    delete: (url: string, data?: object | string, config?: IRequest) => Promise<IResponse>;
+    delete: (url: string, data?: string | object | undefined, config?: IRequest | undefined) => Promise<IResponse>;
 };

doric-js/lib/src/native/storage.d.ts

@@ -1,7 +1,7 @@
 import { BridgeContext } from "../runtime/global";
 export declare function storage(context: BridgeContext): {
-    setItem: (key: string, value: string, zone?: string) => Promise<any>;
+    setItem: (key: string, value: string, zone?: string | undefined) => Promise<any>;
-    getItem: (key: string, zone?: string) => Promise<string>;
+    getItem: (key: string, zone?: string | undefined) => Promise<string>;
-    remove: (key: string, zone?: string) => Promise<any>;
+    remove: (key: string, zone?: string | undefined) => Promise<any>;
     clear: (zone: string) => Promise<any>;
 };

doric-js/lib/src/ui/view.d.ts

@@ -145,6 +145,7 @@ export declare abstract class View implements Modeling {
     doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
     clearAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
     cancelAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
+    static isViewClass(): boolean;
 }
 export declare abstract class Superview extends View {
     subviewById(id: string): View | undefined;

doric-js/lib/src/ui/view.js

@@ -253,6 +253,9 @@ export class View {
             }
         });
     }
+    static isViewClass() {
+        return true;
+    }
 }
 __decorate([
     Property,

doric-js/lib/src/util/jsx.d.ts

@@ -1,7 +1,7 @@
 import { Group, View } from "../ui/view";
 import { ClassType } from "./types";
 export declare namespace jsx {
-    function createElement<T extends View>(constructor: ClassType<T>, config: Partial<T> | null, ...children: any[]): any[] | T;
+    function createElement<T extends View>(constructor: ClassType<T>, config: Partial<T> | null, ...children: any[]): any;
     class Fragment extends Group {
     }
 }

doric-js/lib/src/util/jsx.js

@@ -3,26 +3,47 @@ import { layoutConfig } from "./layoutconfig";
 export var jsx;
 (function (jsx) {
     function createElement(constructor, config, ...children) {
-        const e = new constructor();
+        if (!!constructor.isViewClass) {
-        if (e instanceof Fragment) {
+            const e = new constructor();
-            return children;
+            if (e instanceof Fragment) {
-        }
+                return children;
-        e.layoutConfig = layoutConfig().fit();
-        if (config) {
-            e.apply(config);
-        }
-        if (children && children.length > 0) {
-            if (children.length === 1) {
-                children = children[0];
             }
-            if (Reflect.has(e, "innerElement")) {
+            e.layoutConfig = layoutConfig().fit();
-                Reflect.set(e, "innerElement", children, e);
+            if (config) {
+                e.apply(config);
             }
-            else {
+            if (children && children.length > 0) {
-                throw new Error(`Do not support ${constructor.name} for ${children}`);
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error(`Do not support ${constructor.name} for ${children}`);
+                }
             }
+            return e;
+        }
+        else {
+            const f = constructor;
+            const e = Reflect.apply(f, undefined, [config]);
+            if (e instanceof Fragment) {
+                return children;
+            }
+            if (children && children.length > 0) {
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error(`Do not support add child for ${e.viewType()}`);
+                }
+            }
+            return e;
         }
-        return e;
     }
     jsx.createElement = createElement;
     class Fragment extends Group {

doric-js/src/ui/view.es5.ts

@@ -412,6 +412,9 @@ export abstract class View implements Modeling {
             }
         })
     }
+    static isViewClass() {
+        return true
+    }
 }
 
 export abstract class Superview extends View {

doric-js/src/ui/view.ts

@@ -420,6 +420,9 @@ export abstract class View implements Modeling {
             }
         })
     }
+    static isViewClass() {
+        return true
+    }
 }
 export abstract class Superview extends View {
     subviewById(id: string): View | undefined {

doric-js/src/util/jsx.ts

@@ -8,27 +8,49 @@ export namespace jsx {
         config: Partial<T> | null,
         ...children: any[]
     ) {
-        const e = new constructor();
+        if (!!(constructor as any).isViewClass) {
-        if (e instanceof Fragment) {
+            const e = new constructor();
-            return children
+            if (e instanceof Fragment) {
-        }
+                return children
-        e.layoutConfig = layoutConfig().fit()
-        if (config) {
-            e.apply(config)
-        }
-        if (children && children.length > 0) {
-            if (children.length === 1) {
-                children = children[0]
             }
-            if (Reflect.has(e, "innerElement")) {
+            e.layoutConfig = layoutConfig().fit()
-                Reflect.set(e, "innerElement", children, e)
+            if (config) {
-            } else {
+                e.apply(config)
-                throw new Error(
-                    `Do not support ${constructor.name} for ${children}`
-                );
             }
+            if (children && children.length > 0) {
+                if (children.length === 1) {
+                    children = children[0]
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e)
+                } else {
+                    throw new Error(
+                        `Do not support ${constructor.name} for ${children}`
+                    );
+                }
+            }
+            return e;
+        } else {
+            const f = constructor as Function
+            const e = Reflect.apply(f, undefined, [config])
+            if (e instanceof Fragment) {
+                return children
+            }
+            if (children && children.length > 0) {
+                if (children.length === 1) {
+                    children = children[0]
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e)
+                } else {
+                    throw new Error(
+                        `Do not support add child for ${e.viewType()}`
+                    );
+                }
+            }
+            return e
         }
-        return e;
+
     }
     export class Fragment extends Group { }
 }

doric-web/dist/index.js

@@ -1973,6 +1973,9 @@ class View {
             }
         });
     }
+    static isViewClass() {
+        return true;
+    }
 }
 __decorate$f([
     Property,
@@ -3896,26 +3899,47 @@ exports.Display = void 0;
 exports.jsx = void 0;
 (function (jsx) {
     function createElement(constructor, config, ...children) {
-        const e = new constructor();
+        if (!!constructor.isViewClass) {
-        if (e instanceof Fragment) {
+            const e = new constructor();
-            return children;
+            if (e instanceof Fragment) {
-        }
+                return children;
-        e.layoutConfig = layoutConfig().fit();
-        if (config) {
-            e.apply(config);
-        }
-        if (children && children.length > 0) {
-            if (children.length === 1) {
-                children = children[0];
             }
-            if (Reflect.has(e, "innerElement")) {
+            e.layoutConfig = layoutConfig().fit();
-                Reflect.set(e, "innerElement", children, e);
+            if (config) {
+                e.apply(config);
             }
-            else {
+            if (children && children.length > 0) {
-                throw new Error(`Do not support ${constructor.name} for ${children}`);
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error(`Do not support ${constructor.name} for ${children}`);
+                }
             }
+            return e;
+        }
+        else {
+            const f = constructor;
+            const e = Reflect.apply(f, undefined, [config]);
+            if (e instanceof Fragment) {
+                return children;
+            }
+            if (children && children.length > 0) {
+                if (children.length === 1) {
+                    children = children[0];
+                }
+                if (Reflect.has(e, "innerElement")) {
+                    Reflect.set(e, "innerElement", children, e);
+                }
+                else {
+                    throw new Error(`Do not support add child for ${e.viewType()}`);
+                }
+            }
+            return e;
         }
-        return e;
     }
     jsx.createElement = createElement;
     class Fragment extends Group {