add tsx support

This commit is contained in:
pengfei.zhou 2021-09-01 10:47:40 +08:00 committed by osborn
parent cde8d1726f
commit 52b2b87e1c
20 changed files with 6856 additions and 6762 deletions

View File

@ -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`,

View File

@ -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. */

View 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. */

View 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`,

View File

@ -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. */,

View File

@ -1,135 +1,140 @@
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)
files.forEach((item, index) => {
var fullPath = path.join(dir, item)
const stat = fs.statSync(fullPath)
if (stat.isDirectory()) {
searchImages(path.join(dir, item), images)
} else {
if (fullPath.endsWith('.png')) {
images.push(fullPath)
}
}
})
return images
const files = fs.readdirSync(dir);
files.forEach((item, index) => {
var fullPath = path.join(dir, item);
const stat = fs.statSync(fullPath);
if (stat.isDirectory()) {
searchImages(path.join(dir, item), images);
} else {
if (fullPath.endsWith(".png")) {
images.push(fullPath);
}
}
});
return images;
}
const allImages = []
searchImages('src', allImages)
const allImages = [];
searchImages("src", allImages);
function mkdirsSync(dirname) {
if (fs.existsSync(dirname)) {
return true
} else {
if (mkdirsSync(path.dirname(dirname))) {
fs.mkdirSync(dirname)
return true
}
if (fs.existsSync(dirname)) {
return true;
} else {
if (mkdirsSync(path.dirname(dirname))) {
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)
})
} else {
for (let bundle of bundles) {
if (dirPath.replace("\\", "/").match(new RegExp(`^${bundle}`))) {
files.push(dirPath)
}
}
if (fs.statSync(dirPath).isDirectory()) {
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);
}
}
}
}
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('.')
.filter(e => {
for (let bundle of bundles) {
if (bundle.match(new RegExp(`^${e}/`))) {
return true
}
const allFiles = [];
dirs.forEach((e) => {
readDirs(e, allFiles);
});
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
})
const allFiles = []
dirs.forEach(e => {
readDirs(e, allFiles)
})
export default
console.warn(warning.message);
},
};
})
.concat(
allFiles
.map(e => e.replace('.ts', ''))
.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 }
console.warn(warning.message)
}
.map((e) => e.replace(/.tsx*/, ""))
.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;
}
}).concat(
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)
}
}
}))
console.warn(warning.message);
},
};
})
);

View 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);
}
}

View 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. */
@ -58,5 +60,6 @@
},
"include": [
"**/*.ts",
"**/*.tsx",
]
}

View File

@ -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;

View File

@ -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

View File

@ -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
View File

@ -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;

View File

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

View File

@ -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
View 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[];
}
}
}

View 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;
},
};

View File

@ -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'

40
doric-js/src/util/jsx.ts Normal file
View 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[];
}
}
}

View File

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