add tsx support
This commit is contained in:
parent
cde8d1726f
commit
52b2b87e1c
@ -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`,
|
||||
|
@ -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",
|
||||
"jsxFragmentFactory": "JSX.Fragment",
|
||||
"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. */
|
||||
|
@ -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. */
|
||||
|
@ -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`,
|
||||
|
@ -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",
|
||||
"jsxFragmentFactory": "JSX.Fragment",
|
||||
"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. */,
|
||||
|
@ -1,89 +1,88 @@
|
||||
import resolve from '@rollup/plugin-node-resolve'
|
||||
import commonjs from '@rollup/plugin-commonjs'
|
||||
import bundles from './build/index'
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import buble from '@rollup/plugin-buble'
|
||||
import json from "@rollup/plugin-json"
|
||||
import image from '@rollup/plugin-image'
|
||||
import resolve from "@rollup/plugin-node-resolve";
|
||||
import commonjs from "@rollup/plugin-commonjs";
|
||||
import bundles from "./build/index";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import buble from "@rollup/plugin-buble";
|
||||
import json from "@rollup/plugin-json";
|
||||
import image from "@rollup/plugin-image";
|
||||
|
||||
function searchImages(dir, images) {
|
||||
const files = fs.readdirSync(dir)
|
||||
const files = fs.readdirSync(dir);
|
||||
files.forEach((item, index) => {
|
||||
var fullPath = path.join(dir, item)
|
||||
const stat = fs.statSync(fullPath)
|
||||
var fullPath = path.join(dir, item);
|
||||
const stat = fs.statSync(fullPath);
|
||||
if (stat.isDirectory()) {
|
||||
searchImages(path.join(dir, item), images)
|
||||
searchImages(path.join(dir, item), images);
|
||||
} else {
|
||||
if (fullPath.endsWith('.png')) {
|
||||
images.push(fullPath)
|
||||
if (fullPath.endsWith(".png")) {
|
||||
images.push(fullPath);
|
||||
}
|
||||
}
|
||||
})
|
||||
return images
|
||||
});
|
||||
return images;
|
||||
}
|
||||
|
||||
const allImages = []
|
||||
searchImages('src', allImages)
|
||||
const allImages = [];
|
||||
searchImages("src", allImages);
|
||||
|
||||
function mkdirsSync(dirname) {
|
||||
if (fs.existsSync(dirname)) {
|
||||
return true
|
||||
return true;
|
||||
} else {
|
||||
if (mkdirsSync(path.dirname(dirname))) {
|
||||
fs.mkdirSync(dirname)
|
||||
return true
|
||||
fs.mkdirSync(dirname);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
allImages.forEach((value) => {
|
||||
let path = __dirname + '/build/' + value
|
||||
path = path.split("\\").join("/")
|
||||
let index = path.lastIndexOf('/')
|
||||
mkdirsSync(path.substring(0, index))
|
||||
|
||||
fs.copyFile(__dirname + '/' + value, __dirname + '/build/' + value, error => {
|
||||
if (error)
|
||||
console.log(error)
|
||||
})
|
||||
})
|
||||
let path = __dirname + "/build/" + value;
|
||||
path = path.split("\\").join("/");
|
||||
let index = path.lastIndexOf("/");
|
||||
mkdirsSync(path.substring(0, index));
|
||||
|
||||
fs.copyFile(
|
||||
__dirname + "/" + value,
|
||||
__dirname + "/build/" + value,
|
||||
(error) => {
|
||||
if (error) console.log(error);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
function readDirs(dirPath, files) {
|
||||
if (fs.statSync(dirPath).isDirectory()) {
|
||||
fs.readdirSync(dirPath).forEach(e => {
|
||||
readDirs(path.join(dirPath, e), files)
|
||||
})
|
||||
fs.readdirSync(dirPath).forEach((e) => {
|
||||
readDirs(path.join(dirPath, e), files);
|
||||
});
|
||||
} else {
|
||||
for (let bundle of bundles) {
|
||||
if (dirPath.replace("\\", "/").match(new RegExp(`^${bundle}`))) {
|
||||
files.push(dirPath)
|
||||
files.push(dirPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const dirs = fs.readdirSync('.')
|
||||
.filter(e => {
|
||||
const dirs = fs.readdirSync(".").filter((e) => {
|
||||
for (let bundle of bundles) {
|
||||
if (bundle.match(new RegExp(`^${e}/`))) {
|
||||
return true
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
const allFiles = []
|
||||
const allFiles = [];
|
||||
|
||||
dirs.forEach(e => {
|
||||
readDirs(e, allFiles)
|
||||
})
|
||||
export default
|
||||
allFiles
|
||||
.map(e => e.replace('.ts', ''))
|
||||
.map(bundle => {
|
||||
dirs.forEach((e) => {
|
||||
readDirs(e, allFiles);
|
||||
});
|
||||
export default allFiles
|
||||
.map((e) => e.replace(/.tsx*/, ""))
|
||||
.map((bundle) => {
|
||||
return {
|
||||
input: `build/${bundle}.js`,
|
||||
output: {
|
||||
@ -97,16 +96,19 @@ export default
|
||||
json(),
|
||||
image(),
|
||||
],
|
||||
external: ['reflect-metadata', 'doric'],
|
||||
external: ["reflect-metadata", "doric"],
|
||||
onwarn: function (warning) {
|
||||
if (warning.code === 'THIS_IS_UNDEFINED') { return }
|
||||
console.warn(warning.message)
|
||||
if (warning.code === "THIS_IS_UNDEFINED") {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}).concat(
|
||||
console.warn(warning.message);
|
||||
},
|
||||
};
|
||||
})
|
||||
.concat(
|
||||
allFiles
|
||||
.map(e => e.replace('.ts', ''))
|
||||
.map(bundle => {
|
||||
.map((e) => e.replace(/.tsx*/, ""))
|
||||
.map((bundle) => {
|
||||
return {
|
||||
input: `build/${bundle}.js`,
|
||||
output: {
|
||||
@ -122,14 +124,17 @@ export default
|
||||
transforms: {
|
||||
dangerousForOf: true,
|
||||
generator: false,
|
||||
}
|
||||
},
|
||||
}),
|
||||
image(),
|
||||
],
|
||||
external: ['reflect-metadata', 'doric'],
|
||||
external: ["reflect-metadata", "doric"],
|
||||
onwarn: function (warning) {
|
||||
if (warning.code === 'THIS_IS_UNDEFINED') { return }
|
||||
console.warn(warning.message)
|
||||
if (warning.code === "THIS_IS_UNDEFINED") {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}))
|
||||
console.warn(warning.message);
|
||||
},
|
||||
};
|
||||
})
|
||||
);
|
||||
|
51
doric-demo/src/TSXDemo.tsx
Normal file
51
doric-demo/src/TSXDemo.tsx
Normal file
@ -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);
|
||||
}
|
||||
}
|
@ -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",
|
||||
]
|
||||
}
|
@ -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;
|
||||
|
@ -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;
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
|
23
doric-js/index.d.ts
vendored
23
doric-js/index.d.ts
vendored
@ -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;
|
||||
|
1
doric-js/lib/src/util/index.util.d.ts
vendored
1
doric-js/lib/src/util/index.util.d.ts
vendored
@ -5,3 +5,4 @@ export * from './log';
|
||||
export * from './types';
|
||||
export * from './uniqueId';
|
||||
export * from './flexbox';
|
||||
export * from './jsx';
|
||||
|
@ -20,3 +20,4 @@ export * from './log';
|
||||
export * from './types';
|
||||
export * from './uniqueId';
|
||||
export * from './flexbox';
|
||||
export * from './jsx';
|
||||
|
19
doric-js/lib/src/util/jsx.d.ts
vendored
Normal file
19
doric-js/lib/src/util/jsx.d.ts
vendored
Normal file
@ -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[];
|
||||
}
|
||||
}
|
||||
}
|
20
doric-js/lib/src/util/jsx.js
Normal file
20
doric-js/lib/src/util/jsx.js
Normal file
@ -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;
|
||||
},
|
||||
};
|
@ -20,3 +20,4 @@ export * from './log'
|
||||
export * from './types'
|
||||
export * from './uniqueId'
|
||||
export * from './flexbox'
|
||||
export * from './jsx'
|
40
doric-js/src/util/jsx.ts
Normal file
40
doric-js/src/util/jsx.ts
Normal file
@ -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[];
|
||||
}
|
||||
}
|
||||
}
|
@ -58,6 +58,7 @@
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts",
|
||||
"src/custom.dts",
|
||||
],
|
||||
"exclude": [
|
||||
"**/*.es5.ts",
|
||||
|
Reference in New Issue
Block a user