add tsx support

doric-cli/assets-lib/example/rollup.config.js

@@ -107,7 +107,7 @@ export default allFiles
 // If need ES5 support enable following configs
 // .concat(
 //     allFiles
-//         .map(e => e.replace('.ts', ''))
+//         .map(e => e.replace(/.tsx*/, ''))
 //         .map(bundle => {
 //             return {
 //                 input: `build/${bundle}.js`,

doric-cli/assets-lib/example/tsconfig.json

@@ -8,8 +8,8 @@
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    "jsxFactory": "JSX.createElement",
+    "jsxFactory": "jsx.createElement",
-    "jsxFragmentFactory": "JSX.Fragment",
+    "jsxFragmentFactory": "jsx.Fragment",
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true, /* Generates corresponding '.map' file. */

doric-cli/assets-lib/tsconfig.json

@@ -7,7 +7,9 @@
     "lib": [], /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "jsxFactory": "jsx.createElement",
+    "jsxFragmentFactory": "jsx.Fragment",
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true, /* Generates corresponding '.map' file. */

doric-cli/assets/_rollup.config.js

@@ -108,7 +108,7 @@ export default allFiles
 // If need ES5 support enable following configs
 // .concat(
 //     allFiles
-//         .map(e => e.replace('.ts', ''))
+//         .map(e => e.replace(/.tsx*/, ''))
 //         .map(bundle => {
 //             return {
 //                 input: `build/${bundle}.js`,

doric-cli/assets/_tsconfig.json

@@ -8,8 +8,8 @@
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
-    "jsxFactory": "JSX.createElement",
+    "jsxFactory": "jsx.createElement",
-    "jsxFragmentFactory": "JSX.Fragment",
+    "jsxFragmentFactory": "jsx.Fragment",
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true /* Generates corresponding '.map' file. */,

doric-demo/rollup.config.js

@@ -1,135 +1,140 @@
-import resolve from '@rollup/plugin-node-resolve'
+import resolve from "@rollup/plugin-node-resolve";
-import commonjs from '@rollup/plugin-commonjs'
+import commonjs from "@rollup/plugin-commonjs";
-import bundles from './build/index'
+import bundles from "./build/index";
-import fs from 'fs'
+import fs from "fs";
-import path from 'path'
+import path from "path";
-import buble from '@rollup/plugin-buble'
+import buble from "@rollup/plugin-buble";
-import json from "@rollup/plugin-json"
+import json from "@rollup/plugin-json";
-import image from '@rollup/plugin-image'
+import image from "@rollup/plugin-image";
 
 function searchImages(dir, images) {
-    const files = fs.readdirSync(dir)
+  const files = fs.readdirSync(dir);
-    files.forEach((item, index) => {
+  files.forEach((item, index) => {
-        var fullPath = path.join(dir, item)
+    var fullPath = path.join(dir, item);
-        const stat = fs.statSync(fullPath)
+    const stat = fs.statSync(fullPath);
-        if (stat.isDirectory()) {
+    if (stat.isDirectory()) {
-            searchImages(path.join(dir, item), images)
+      searchImages(path.join(dir, item), images);
-        } else {
+    } else {
-            if (fullPath.endsWith('.png')) {
+      if (fullPath.endsWith(".png")) {
-                images.push(fullPath)
+        images.push(fullPath);
-            }
+      }
-        }
+    }
-    })
+  });
-    return images
+  return images;
 }
 
-const allImages = []
+const allImages = [];
-searchImages('src', allImages)
+searchImages("src", allImages);
 
 function mkdirsSync(dirname) {
-    if (fs.existsSync(dirname)) {
+  if (fs.existsSync(dirname)) {
-        return true
+    return true;
-    } else {
+  } else {
-        if (mkdirsSync(path.dirname(dirname))) {
+    if (mkdirsSync(path.dirname(dirname))) {
-            fs.mkdirSync(dirname)
+      fs.mkdirSync(dirname);
-            return true
+      return true;
-        }
     }
+  }
 }
 
 allImages.forEach((value) => {
-    let path = __dirname + '/build/' + value
+  let path = __dirname + "/build/" + value;
-    path = path.split("\\").join("/")
+  path = path.split("\\").join("/");
-    let index = path.lastIndexOf('/')
+  let index = path.lastIndexOf("/");
-    mkdirsSync(path.substring(0, index))
+  mkdirsSync(path.substring(0, index));
-
-    fs.copyFile(__dirname + '/' + value, __dirname + '/build/' + value, error => {
-        if (error)
-            console.log(error)
-    })
-})
 
+  fs.copyFile(
+    __dirname + "/" + value,
+    __dirname + "/build/" + value,
+    (error) => {
+      if (error) console.log(error);
+    }
+  );
+});
 
 function readDirs(dirPath, files) {
-    if (fs.statSync(dirPath).isDirectory()) {
+  if (fs.statSync(dirPath).isDirectory()) {
-        fs.readdirSync(dirPath).forEach(e => {
+    fs.readdirSync(dirPath).forEach((e) => {
-            readDirs(path.join(dirPath, e), files)
+      readDirs(path.join(dirPath, e), files);
-        })
+    });
-    } else {
+  } else {
-        for (let bundle of bundles) {
+    for (let bundle of bundles) {
-            if (dirPath.replace("\\", "/").match(new RegExp(`^${bundle}`))) {
+      if (dirPath.replace("\\", "/").match(new RegExp(`^${bundle}`))) {
-                files.push(dirPath)
+        files.push(dirPath);
-            }
+      }
-        }
     }
+  }
 }
 
+const dirs = fs.readdirSync(".").filter((e) => {
+  for (let bundle of bundles) {
+    if (bundle.match(new RegExp(`^${e}/`))) {
+      return true;
+    }
+  }
+  return false;
+});
 
-const dirs = fs.readdirSync('.')
+const allFiles = [];
-    .filter(e => {
+
-        for (let bundle of bundles) {
+dirs.forEach((e) => {
-            if (bundle.match(new RegExp(`^${e}/`))) {
+  readDirs(e, allFiles);
-                return true
+});
-            }
+export default allFiles
+  .map((e) => e.replace(/.tsx*/, ""))
+  .map((bundle) => {
+    return {
+      input: `build/${bundle}.js`,
+      output: {
+        format: "cjs",
+        file: `bundle/${bundle}.js`,
+        sourcemap: true,
+      },
+      plugins: [
+        resolve({ mainFields: ["jsnext"] }),
+        commonjs(),
+        json(),
+        image(),
+      ],
+      external: ["reflect-metadata", "doric"],
+      onwarn: function (warning) {
+        if (warning.code === "THIS_IS_UNDEFINED") {
+          return;
         }
-        return false
+        console.warn(warning.message);
-    })
+      },
-
+    };
-const allFiles = []
+  })
-
+  .concat(
-dirs.forEach(e => {
-    readDirs(e, allFiles)
-})
-export default
     allFiles
-        .map(e => e.replace('.ts', ''))
+      .map((e) => e.replace(/.tsx*/, ""))
-        .map(bundle => {
+      .map((bundle) => {
-            return {
+        return {
-                input: `build/${bundle}.js`,
+          input: `build/${bundle}.js`,
-                output: {
+          output: {
-                    format: "cjs",
+            format: "cjs",
-                    file: `bundle/${bundle}.js`,
+            file: `bundle/${bundle}.es5.js`,
-                    sourcemap: true,
+            sourcemap: true,
-                },
+          },
-                plugins: [
+          plugins: [
-                    resolve({ mainFields: ["jsnext"] }),
+            resolve({ mainFields: ["jsnext"] }),
-                    commonjs(),
+            commonjs(),
-                    json(),
+            json(),
-                    image(),
+            buble({
-                ],
+              transforms: {
-                external: ['reflect-metadata', 'doric'],
+                dangerousForOf: true,
-                onwarn: function (warning) {
+                generator: false,
-                    if (warning.code === 'THIS_IS_UNDEFINED') { return }
+              },
-                    console.warn(warning.message)
+            }),
-                }
+            image(),
+          ],
+          external: ["reflect-metadata", "doric"],
+          onwarn: function (warning) {
+            if (warning.code === "THIS_IS_UNDEFINED") {
+              return;
             }
-        }).concat(
+            console.warn(warning.message);
-            allFiles
+          },
-                .map(e => e.replace('.ts', ''))
+        };
-                .map(bundle => {
+      })
-                    return {
+  );
-                        input: `build/${bundle}.js`,
-                        output: {
-                            format: "cjs",
-                            file: `bundle/${bundle}.es5.js`,
-                            sourcemap: true,
-                        },
-                        plugins: [
-                            resolve({ mainFields: ["jsnext"] }),
-                            commonjs(),
-                            json(),
-                            buble({
-                                transforms: {
-                                    dangerousForOf: true,
-                                    generator: false,
-                                }
-                            }),
-                            image(),
-                        ],
-                        external: ['reflect-metadata', 'doric'],
-                        onwarn: function (warning) {
-                            if (warning.code === 'THIS_IS_UNDEFINED') { return }
-                            console.warn(warning.message)
-                        }
-                    }
-                }))

doric-demo/src/TSXDemo.tsx

@@ -0,0 +1,51 @@
+import {
+  Panel,
+  Group,
+  VLayout,
+  layoutConfig,
+  Gravity,
+  Text,
+  Color,
+  navbar,
+  jsx,
+} from "doric";
+
+@Entry
+class Example extends Panel {
+  onShow() {
+    navbar(context).setTitle("Example");
+  }
+  build(rootView: Group) {
+    let count = 0;
+    (
+      <VLayout
+        layoutConfig={layoutConfig().just().configAlignment(Gravity.Center)}
+        width={200}
+        height={200}
+        space={20}
+        border={{ color: Color.BLUE, width: 1 }}
+        gravity={Gravity.Center}
+      >
+        <Text
+          tag="Label"
+          text={`${count}`}
+          textSize={40}
+          layoutConfig={layoutConfig().fit()}
+        />
+        <Text
+          text="Click to count"
+          textSize={20}
+          backgroundColor={Color.parse("#70a1ff")}
+          textColor={Color.WHITE}
+          onClick={() => {
+            count++;
+            const label = rootView.findViewByTag("Label") as Text;
+            label.text = `${count}`;
+          }}
+          width={200}
+          height={50}
+        />
+      </VLayout>
+    ).in(rootView);
+  }
+}

doric-demo/tsconfig.json

@@ -7,7 +7,9 @@
     "lib": [], /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "jsxFactory": "jsx.createElement",
+    "jsxFragmentFactory": "jsx.Fragment",
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true, /* Generates corresponding '.map' file. */
@@ -58,5 +60,6 @@
   },
   "include": [
     "**/*.ts",
+    "**/*.tsx",
   ]
 }

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",