add tsx support

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

@@ -2640,6 +2640,32 @@ exports.Display = void 0;
     Display[Display["NONE"] = 1] = "NONE";
 })(exports.Display || (exports.Display = {}));
 
+var jsx = {
+    createElement: function (constructor, config) {
+        var arguments$1 = arguments;
+
+        var children = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            children[_i - 2] = arguments$1[_i];
+        }
+        var e = new constructor();
+        if (config) {
+            for (var key in config) {
+                Reflect.set(e, key, Reflect.get(config, key, config), e);
+            }
+        }
+        if (children && children.length > 0) {
+            if (e instanceof Group) {
+                children.forEach(function (child) { return e.addChild(child); });
+            }
+            else {
+                throw new Error("Can only add child to group view, do not support " + constructor.name);
+            }
+        }
+        return e;
+    },
+};
+
 var __extends$6 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -4006,6 +4032,7 @@ exports.hlayout = hlayout;
 exports.image = image;
 exports.input = input;
 exports.internalScheme = internalScheme;
+exports.jsx = jsx;
 exports.keyboard = keyboard;
 exports.layoutConfig = layoutConfig;
 exports.list = list;

doric-js/bundle/doric-lib.js

@@ -2040,6 +2040,26 @@ exports.Display = void 0;
     Display[Display["NONE"] = 1] = "NONE";
 })(exports.Display || (exports.Display = {}));
 
+const jsx = {
+    createElement: function (constructor, config, ...children) {
+        const e = new constructor();
+        if (config) {
+            for (let key in config) {
+                Reflect.set(e, key, Reflect.get(config, key, config), e);
+            }
+        }
+        if (children && children.length > 0) {
+            if (e instanceof Group) {
+                children.forEach((child) => e.addChild(child));
+            }
+            else {
+                throw new Error(`Can only add child to group view, do not support ${constructor.name}`);
+            }
+        }
+        return e;
+    },
+};
+
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -3120,6 +3140,7 @@ exports.hlayout = hlayout;
 exports.image = image;
 exports.input = input;
 exports.internalScheme = internalScheme;
+exports.jsx = jsx;
 exports.keyboard = keyboard;
 exports.layoutConfig = layoutConfig;
 exports.list = list;

doric-js/bundle/doric-vm.js

@@ -3564,6 +3564,26 @@ exports.Display = void 0;
     Display[Display["NONE"] = 1] = "NONE";
 })(exports.Display || (exports.Display = {}));
 
+const jsx = {
+    createElement: function (constructor, config, ...children) {
+        const e = new constructor();
+        if (config) {
+            for (let key in config) {
+                Reflect.set(e, key, Reflect.get(config, key, config), e);
+            }
+        }
+        if (children && children.length > 0) {
+            if (e instanceof Group) {
+                children.forEach((child) => e.addChild(child));
+            }
+            else {
+                throw new Error(`Can only add child to group view, do not support ${constructor.name}`);
+            }
+        }
+        return e;
+    },
+};
+
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -4885,6 +4905,7 @@ exports.hlayout = hlayout;
 exports.image = image;
 exports.input = input;
 exports.internalScheme = internalScheme;
+exports.jsx = jsx;
 exports.keyboard = keyboard;
 exports.layoutConfig = layoutConfig;
 exports.list = list;

doric-js/index.d.ts

@@ -120,6 +120,7 @@ declare module 'doric/lib/src/util/index.util' {
     export * from 'doric/lib/src/util/types';
     export * from 'doric/lib/src/util/uniqueId';
     export * from 'doric/lib/src/util/flexbox';
+    export * from 'doric/lib/src/util/jsx';
 }
 
 declare module 'doric/lib/src/pattern/index.pattern' {
@@ -1390,6 +1391,28 @@ declare module 'doric/lib/src/util/flexbox' {
     export {};
 }
 
+declare module 'doric/lib/src/util/jsx' {
+    import { View } from "doric/lib/src/ui/view";
+    import { ClassType } from "doric/lib/src/util/types";
+    export const jsx: {
+        createElement: <T extends View>(constructor: ClassType<T>, config: Partial<T> | null, ...children: View[]) => T;
+    };
+    global {
+        namespace JSX {
+            interface IntrinsicElements {
+            }
+            interface ElementClass extends View {
+            }
+            interface ElementAttributesProperty {
+                props: {};
+            }
+            interface ElementChildrenAttribute {
+                children: View[];
+            }
+        }
+    }
+}
+
 declare module 'doric/lib/src/pattern/candies' {
     export function take<T>(target: T): (block: (p: T) => void) => void;
     export function takeNonNull<T, R>(target?: T): (block: (p: T) => R) => R | undefined;

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

@@ -5,3 +5,4 @@ export * from './log';
 export * from './types';
 export * from './uniqueId';
 export * from './flexbox';
+export * from './jsx';

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

@@ -20,3 +20,4 @@ export * from './log';
 export * from './types';
 export * from './uniqueId';
 export * from './flexbox';
+export * from './jsx';

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

@@ -0,0 +1,19 @@
+import { View } from "../ui/view";
+import { ClassType } from "./types";
+export declare const jsx: {
+    createElement: <T extends View>(constructor: ClassType<T>, config: Partial<T> | null, ...children: View[]) => T;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+        }
+        interface ElementClass extends View {
+        }
+        interface ElementAttributesProperty {
+            props: {};
+        }
+        interface ElementChildrenAttribute {
+            children: View[];
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+import { Group } from "../ui/view";
+export const jsx = {
+    createElement: function (constructor, config, ...children) {
+        const e = new constructor();
+        if (config) {
+            for (let key in config) {
+                Reflect.set(e, key, Reflect.get(config, key, config), e);
+            }
+        }
+        if (children && children.length > 0) {
+            if (e instanceof Group) {
+                children.forEach((child) => e.addChild(child));
+            }
+            else {
+                throw new Error(`Can only add child to group view, do not support ${constructor.name}`);
+            }
+        }
+        return e;
+    },
+};

doric-js/src/util/index.util.ts

@@ -19,4 +19,5 @@ export * from './layoutconfig'
 export * from './log'
 export * from './types'
 export * from './uniqueId'
-export * from './flexbox'
+export * from './flexbox'
+export * from './jsx'

doric-js/src/util/jsx.ts

@@ -0,0 +1,40 @@
+import { Group, View } from "../ui/view";
+import { ClassType } from "./types";
+
+export const jsx = {
+    createElement: function <T extends View>(
+        constructor: ClassType<T>,
+        config: Partial<T> | null,
+        ...children: View[]
+    ): T {
+        const e = new constructor();
+        if (config) {
+            for (let key in config) {
+                Reflect.set(e, key, Reflect.get(config, key, config), e);
+            }
+        }
+        if (children && children.length > 0) {
+            if (e instanceof Group) {
+                children.forEach((child) => e.addChild(child));
+            } else {
+                throw new Error(
+                    `Can only add child to group view, do not support ${constructor.name}`
+                );
+            }
+        }
+        return e;
+    },
+}
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements { }
+        interface ElementClass extends View { }
+        interface ElementAttributesProperty {
+            props: {};
+        }
+        interface ElementChildrenAttribute {
+            children: View[];
+        }
+    }
+}

doric-js/tsconfig.json

@@ -58,6 +58,7 @@
   },
   "include": [
     "**/*.ts",
+    "src/custom.dts",
   ],
   "exclude": [
     "**/*.es5.ts",