github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-13 09:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge commit '94bd602d091fb8ac4274e3918378d46664af33a0' into feat/merge-rax-generator

Browse Source
This commit is contained in:
春希 2020-08-21 19:44:41 +08:00
commit fe327f4e19
41 changed files with 828 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/code-generator/src/generator/ProjectBuilder.ts
View File

@ -158,8 +158,8 @@ export class ProjectBuilder implements IProjectBuilder {
}
// i18n?
if (parseResult.globalI18n && builders.i18n && this.template.slots.i18n) {
const { files } = await builders.i18n.generateModule(parseResult.globalI18n);
if (builders.i18n && this.template.slots.i18n) {
const { files } = await builders.i18n.generateModule(parseResult.project);
buildResult.push({
path: this.template.slots.i18n.path,

8
packages/code-generator/src/index.ts
View File

@ -6,8 +6,9 @@ import { createProjectBuilder } from './generator/ProjectBuilder';
import { createModuleBuilder } from './generator/ModuleBuilder';
import { createDiskPublisher } from './publisher/disk';
import { createZipPublisher } from './publisher/zip';
// import createIceJsProjectBuilder from './solutions/icejs';
import createIceJsProjectBuilder from './solutions/icejs';
// import createRecoreProjectBuilder from './solutions/recore';
import createRaxAppProjectBuilder from './solutions/rax-app';
// 引入说明
import { REACT_CHUNK_NAME } from './plugins/component/react/const';
@ -42,6 +43,7 @@ import * as utilsValidate from './utils/validate';
// 引入内置解决方案模块
import icejs from './plugins/project/framework/icejs';
import rax from './plugins/project/framework/rax';
export * from './types';
@ -49,11 +51,13 @@ export default {
createProjectBuilder,
createModuleBuilder,
solutions: {
// icejs: createIceJsProjectBuilder,
icejs: createIceJsProjectBuilder,
// recore: createRecoreProjectBuilder,
rax: createRaxAppProjectBuilder,
},
solutionParts: {
icejs,
rax,
},
publishers: {
disk: createDiskPublisher,

47
packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
View File

@ -32,6 +32,15 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
});
// TODO: i18n 是可选的，如果没有 i18n 这个文件怎么办？该怎么判断？
next.chunks.push({
type: ChunkType.STRING,
fileType: cfg.fileType,
name: COMMON_CHUNK_NAME.InternalDepsImport,
content: `import * as __$$i18n from '../../i18n';`,
linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
});
next.chunks.push({
type: ChunkType.STRING,
fileType: cfg.fileType,
@ -78,6 +87,16 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
get constants() {
return __$$constants;
},
get i18n() {
return self._i18n;
},
getLocale() {
return __$$i18n.getLocale();
},
setLocale(locale) {
__$$i18n.setLocale(locale);
self.forceUpdate();
},
...this._methods,
};
@ -87,6 +106,34 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
});
next.chunks.push({
type: ChunkType.STRING,
fileType: cfg.fileType,
name: CLASS_DEFINE_CHUNK_NAME.InsVar,
content: `
_i18n = this._createI18nDelegate();
`,
linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
});
next.chunks.push({
type: ChunkType.STRING,
fileType: cfg.fileType,
name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
content: `
_createI18nDelegate() {
return new Proxy(
{},
{
get(target, prop) {
return __$$i18n.i18n(prop);
},
},
);
}
`,
linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
});
return next;
};
return plugin;

2
packages/code-generator/src/plugins/component/rax/containerInjectUtils.ts
View File

@ -43,14 +43,12 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
});
// TODO: Page methods...
next.chunks.push({
type: ChunkType.STRING,
fileType: cfg.fileType,
name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
// 绑定下上下文，这样在所有的 utils 里面都能通过 this.xxx 来访问上下文了
// TODO: 要不要优化为通过 Proxy 的方式懒绑定？
content: `
_defineUtils() {
const utils = {

98
packages/code-generator/src/plugins/component/rax/jsx.ts
View File

@ -1,7 +1,8 @@
import { NodeSchema, JSExpression, NpmInfo, CompositeValue } from '@ali/lowcode-types';
import { NodeSchema, JSExpression, NpmInfo, CompositeValue, isJSExpression } from '@ali/lowcode-types';
import _ from 'lodash';
import changeCase from 'change-case';
import { Expression } from '@babel/types';
import {
BuilderComponentPlugin,
BuilderComponentPluginFactory,
@ -23,7 +24,11 @@ import { createNodeGenerator, generateReactCtrlLine, generateAttr } from '../../
import { generateCompositeType } from '../../../utils/compositeType';
import { IScopeBindings, ScopeBindings } from '../../../utils/ScopeBindings';
import { parseExpressionConvertThis2Context, parseExpressionGetGlobalVariables } from '../../../utils/expressionParser';
import {
parseExpression,
parseExpressionConvertThis2Context,
parseExpressionGetGlobalVariables,
} from '../../../utils/expressionParser';
type PluginConfig = {
fileType: string;
@ -37,23 +42,6 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
...config,
};
// 什么都不做的的话，会有 3 个问题：
// 1. 小程序出码的时候，循环变量没法拿到
// 2. 小程序出码的时候，很容易出现 Uncaught TypeError: Cannot read property 'avatar' of undefined 这样的异常(如下图的 50 行) -- 因为若直接出码，Rax 构建到小程序的时候会立即计算所有在视图中用到的变量
// 3. 通过 this.xxx 能拿到的东西太多了，而且自定义的 methods 可能会无意间破坏 Rax 框架或小程序框架在页面 this 上的东东
// const transformers = {
// transformThis2Context: (expr: string) => expr,
// transformJsExpr: (expr: string) => expr,
// transformLoopExpr: (expr: string) => expr,
// };
// 不转换 this.xxx 到 __$$context.xxx 的话，依然会有上述的 1 和 3 的问题。
// const transformers = {
// transformThis2Context: (expr: string) => expr,
// transformJsExpr: (expr: string) => (isLiteralAtomicExpr(expr) ? expr : `__$$eval(() => (${expr}))`),
// transformLoopExpr: (expr: string) => `__$$evalArray(() => (${expr}))`,
// };
const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
const next: ICodeStruct = {
...pre,
@ -70,12 +58,17 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
}
});
// 注意：这里其实隐含了一个假设：schema 中的 componentName 应该是一个有效的 JS 标识符，而且是大写字母打头的
const mapComponentNameToAliasOrKeepIt = (componentName: string) =>
componentsNameAliasMap.get(componentName) || componentName;
// 然后过滤掉所有的别名 chunks
next.chunks = next.chunks.filter((chunk) => !isImportAliasDefineChunk(chunk));
// 如果直接按目前的 React 的方式之间出码 JSX 的话，会有 3 个问题：
// 1. 小程序出码的时候，循环变量没法拿到
// 2. 小程序出码的时候，很容易出现 Uncaught TypeError: Cannot read property 'avatar' of undefined 这样的异常(如下图的 50 行) -- 因为若直接出码，Rax 构建到小程序的时候会立即计算所有在视图中用到的变量
// 3. 通过 this.xxx 能拿到的东西太多了，而且自定义的 methods 可能会无意间破坏 Rax 框架或小程序框架在页面 this 上的东东
const customHandlers: HandlerSet<string> = {
expression(this: CustomHandlerSet, input: JSExpression) {
return transformJsExpr(generateExpression(input), this);
@ -176,7 +169,49 @@ function transformLoopExpr(expr: string, handlers: CustomHandlerSet) {
}
function transformJsExpr(expr: string, handlers: CustomHandlerSet) {
return isLiteralAtomicExpr(expr) ? expr : `__$$eval(() => (${transformThis2Context(expr, handlers)}))`;
if (!expr) {
return 'undefined';
}
if (isLiteralAtomicExpr(expr)) {
return expr;
}
const exprAst = parseExpression(expr);
// 对于下面这些比较安全的字面值，可以直接返回对应的表达式，而非包一层
if (isSimpleStraightLiteral(exprAst)) {
return expr;
}
switch (exprAst.type) {
// 对于直接写个函数的，则不用再包下，因为这样不会抛出异常的
case 'ArrowFunctionExpression':
case 'FunctionExpression':
return transformThis2Context(exprAst, handlers);
default:
break;
}
// 其他的都需要包一层
return `__$$eval(() => (${transformThis2Context(exprAst, handlers)}))`;
}
/** 判断是非是一些简单直接的字面值 */
function isSimpleStraightLiteral(expr: Expression): boolean {
switch (expr.type) {
case 'BigIntLiteral':
case 'BooleanLiteral':
case 'DecimalLiteral':
case 'NullLiteral':
case 'NumericLiteral':
case 'RegExpLiteral':
case 'StringLiteral':
return true;
default:
return false;
}
}
function isImportAliasDefineChunk(
@ -201,14 +236,15 @@ function isImportAliasDefineChunk(
* 判断是否是原子类型的表达式
*/
function isLiteralAtomicExpr(expr: string): boolean {
return expr === 'null' || expr === 'undefined' || expr === 'true' || expr === 'false' || /^\d+$/.test(expr);
return expr === 'null' || expr === 'undefined' || expr === 'true' || expr === 'false' || /^-?\d+(\.\d+)?$/.test(expr);
}
/**
* 将所有的 this.xxx 替换为 __$$context.xxx
* @param expr
*/
function transformThis2Context(expr: string, customHandlers: CustomHandlerSet): string {
function transformThis2Context(expr: string | Expression, customHandlers: CustomHandlerSet): string {
// 下面这种字符串替换的方式虽然简单直接，但是对于复杂场景会误匹配，故后期改成了解析 AST 然后修改 AST 最后再重新生成代码的方式
// return expr
// .replace(/\bthis\.item\./g, () => 'item.')
// .replace(/\bthis\.index\./g, () => 'index.')
@ -224,12 +260,24 @@ function generateNodeAttrForRax(this: CustomHandlerSet, attrName: string, attrVa
nodeAttr: undefined,
});
}
// else: onXxx 的都是事件处理函数需要特殊处理下
// 先出个码
const valueExpr = generateCompositeType(attrValue, this);
return generateEventHandlerAttrForRax(attrName, attrValue, this);
}
function generateEventHandlerAttrForRax(
attrName: string,
attrValue: CompositeValue,
handlers: CustomHandlerSet,
): CodePiece[] {
// -- 事件处理函数中 JSExpression 转成 JSFunction 来处理，避免当 JSExpression 处理的时候多包一层 eval 而导致 Rax 转码成小程序的时候出问题
const valueExpr = generateCompositeType(
isJSExpression(attrValue) ? { type: 'JSFunction', value: attrValue.value } : attrValue,
handlers,
);
// 查询当前作用域下的变量
const currentScopeVariables = this.scopeBindings?.getAllBindings() || [];
const currentScopeVariables = handlers.scopeBindings?.getAllBindings() || [];
if (currentScopeVariables.length <= 0) {
return [
{

19
packages/code-generator/src/plugins/project/framework/rax/plugins/globalStyle.ts
View File

@ -9,7 +9,18 @@ import {
IProjectInfo,
} from '../../../../../types';
const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
export type GlobalStylePluginConfig = {
fileType: string;
};
const pluginFactory: BuilderComponentPluginFactory<GlobalStylePluginConfig> = (
config?: Partial<GlobalStylePluginConfig>,
) => {
const cfg: GlobalStylePluginConfig = {
fileType: FileType.SCSS,
...config,
};
const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
const next: ICodeStruct = {
...pre,
@ -19,7 +30,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
next.chunks.push({
type: ChunkType.STRING,
fileType: FileType.SCSS, // TODO: 样式文件的类型定制化？
fileType: cfg.fileType,
name: COMMON_CHUNK_NAME.StyleDepsImport,
content: ``,
linkAfter: [],
@ -27,7 +38,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
next.chunks.push({
type: ChunkType.STRING,
fileType: FileType.SCSS,
fileType: cfg.fileType,
name: COMMON_CHUNK_NAME.StyleCssContent,
content: `
body {
@ -39,7 +50,7 @@ body {
next.chunks.push({
type: ChunkType.STRING,
fileType: FileType.SCSS,
fileType: cfg.fileType,
name: COMMON_CHUNK_NAME.StyleCssContent,
content: ir.css || '',
linkAfter: [COMMON_CHUNK_NAME.StyleDepsImport],

87
packages/code-generator/src/plugins/project/i18n.ts
View File

@ -1,5 +1,5 @@
import { COMMON_CHUNK_NAME } from '../../const/generator';
import { generateCompositeType } from '../../utils/compositeType';
import {
BuilderComponentPlugin,
BuilderComponentPluginFactory,
@ -16,53 +16,54 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
};
const ir = next.ir as IProjectInfo;
if (ir.i18n) {
const i18nStr = generateCompositeType(ir.i18n);
const i18nStr = ir.i18n ? JSON.stringify(ir.i18n, null, 2) : '{}';
next.chunks.push({
type: ChunkType.STRING,
fileType: FileType.JS,
name: COMMON_CHUNK_NAME.FileMainContent,
content: `
const i18nConfig = ${i18nStr};
let locale = 'en_US';
next.chunks.push({
type: ChunkType.STRING,
fileType: FileType.JS,
name: COMMON_CHUNK_NAME.FileMainContent,
content: `
const i18nConfig = ${i18nStr};
const changeLocale = (target) => {
locale = target;
};
let locale = 'en-US';
const i18n = key => i18nConfig && i18nConfig[locale] && i18nConfig[locale][key] || '';
`,
linkAfter: [
COMMON_CHUNK_NAME.ExternalDepsImport,
COMMON_CHUNK_NAME.InternalDepsImport,
COMMON_CHUNK_NAME.ImportAliasDefine,
COMMON_CHUNK_NAME.FileVarDefine,
COMMON_CHUNK_NAME.FileUtilDefine,
],
});
const getLocale = () => locale;
next.chunks.push({
type: ChunkType.STRING,
fileType: FileType.JS,
name: COMMON_CHUNK_NAME.FileExport,
content: `
export {
changeLocale,
i18n,
};
`,
linkAfter: [
COMMON_CHUNK_NAME.ExternalDepsImport,
COMMON_CHUNK_NAME.InternalDepsImport,
COMMON_CHUNK_NAME.ImportAliasDefine,
COMMON_CHUNK_NAME.FileVarDefine,
COMMON_CHUNK_NAME.FileUtilDefine,
COMMON_CHUNK_NAME.FileMainContent,
],
});
}
const setLocale = (target) => {
locale = target;
};
const i18n = key => i18nConfig && i18nConfig[locale] && i18nConfig[locale][key] || '';
`,
linkAfter: [
COMMON_CHUNK_NAME.ExternalDepsImport,
COMMON_CHUNK_NAME.InternalDepsImport,
COMMON_CHUNK_NAME.ImportAliasDefine,
COMMON_CHUNK_NAME.FileVarDefine,
COMMON_CHUNK_NAME.FileUtilDefine,
],
});
next.chunks.push({
type: ChunkType.STRING,
fileType: FileType.JS,
name: COMMON_CHUNK_NAME.FileExport,
content: `
export {
getLocale,
setLocale,
i18n,
};
`,
linkAfter: [
COMMON_CHUNK_NAME.ExternalDepsImport,
COMMON_CHUNK_NAME.InternalDepsImport,
COMMON_CHUNK_NAME.ImportAliasDefine,
COMMON_CHUNK_NAME.FileVarDefine,
COMMON_CHUNK_NAME.FileUtilDefine,
COMMON_CHUNK_NAME.FileMainContent,
],
});
return next;
};
return plugin;

19
packages/code-generator/src/utils/expressionParser.ts
View File

@ -7,8 +7,8 @@ import { isIdentifier, Node } from '@babel/types';
import { OrderedSet } from './OrderedSet';
export class ParseError extends Error {
constructor(readonly expr: string, readonly detail: unknown) {
super(`Failed to parse expression "${expr}"`);
constructor(readonly expr: string | t.Expression, readonly detail: unknown) {
super(`Failed to parse expression "${typeof expr === 'string' ? expr : generate(expr)}"`);
Object.setPrototypeOf(this, new.target.prototype);
}
}
@ -159,7 +159,7 @@ export function parseExpressionGetGlobalVariables(
}
export function parseExpressionConvertThis2Context(
expr: string,
expr: string | t.Expression,
contextName = '__$$context',
localVariables: string[] = [],
): string {
@ -168,7 +168,7 @@ export function parseExpressionConvertThis2Context(
}
try {
const exprAst = parser.parseExpression(expr);
const exprAst = typeof expr === 'string' ? parser.parseExpression(expr) : expr;
const exprWrapAst = t.expressionStatement(exprAst);
const fileAst = t.file(t.program([exprWrapAst]));
@ -229,11 +229,14 @@ export function parseExpressionConvertThis2Context(
const { code } = generate(exprWrapAst.expression, { sourceMaps: false });
return code;
} catch (e) {
// throw new ParseError(expr, e);
throw e;
throw new ParseError(expr, e);
}
}
function indent(level: number) {
return ' '.repeat(level);
export function parseExpression(expr: string) {
try {
return parser.parseExpression(expr);
} catch (e) {
throw new ParseError(expr, e);
}
}

13
packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js Normal file
View File

@ -0,0 +1,13 @@
const i18nConfig = {};
let locale = 'en-US';
const getLocale = () => locale;
const setLocale = (target) => {
locale = target;
};
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
export { getLocale, setLocale, i18n };

25
packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
View File

@ -13,6 +13,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$constants from '../../constants';
import * as __$$i18n from '../../i18n';
import __$$projectUtils from '../../utils';
import './index.css';
@ -22,6 +24,8 @@ class Home$$Page extends Component {
_context = this._createContext();
_i18n = this._createI18nDelegate();
_dataSourceConfig = this._defineDataSourceConfig();
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
@ -74,12 +78,33 @@ class Home$$Page extends Component {
get constants() {
return __$$constants;
},
get i18n() {
return self._i18n;
},
getLocale() {
return __$$i18n.getLocale();
},
setLocale(locale) {
__$$i18n.setLocale(locale);
self.forceUpdate();
},
...this._methods,
};
return context;
}
_createI18nDelegate() {
return new Proxy(
{},
{
get(target, prop) {
return __$$i18n.i18n(prop);
},
},
);
}
_defineDataSourceConfig() {
const __$$context = this._context;
return { list: [] };

1
packages/code-generator/test-cases/rax-app/demo1/schema.json5
View File

@ -1,4 +1,5 @@
{
// 本例是一个非常简单的 Hello world 页面
// Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
version: '1.0.0',
componentsMap: [

13
packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js Normal file
View File

@ -0,0 +1,13 @@
const i18nConfig = {};
let locale = 'en-US';
const getLocale = () => locale;
const setLocale = (target) => {
locale = target;
};
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
export { getLocale, setLocale, i18n };

25
packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
View File

@ -19,6 +19,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$constants from '../../constants';
import * as __$$i18n from '../../i18n';
import __$$projectUtils from '../../utils';
import './index.css';
@ -45,6 +47,8 @@ class Home$$Page extends Component {
_context = this._createContext();
_i18n = this._createI18nDelegate();
_dataSourceConfig = this._defineDataSourceConfig();
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
runtimeConfig: true,
@ -171,12 +175,33 @@ class Home$$Page extends Component {
get constants() {
return __$$constants;
},
get i18n() {
return self._i18n;
},
getLocale() {
return __$$i18n.getLocale();
},
setLocale(locale) {
__$$i18n.setLocale(locale);
self.forceUpdate();
},
...this._methods,
};
return context;
}
_createI18nDelegate() {
return new Proxy(
{},
{
get(target, prop) {
return __$$i18n.i18n(prop);
},
},
);
}
_defineDataSourceConfig() {
const __$$context = this._context;
return {

17
packages/code-generator/test-cases/rax-app/demo2/schema.json5
View File

@ -1,4 +1,5 @@
{
// 本例是一个比较复杂的，带有循环和条件渲染的，以及有各种事件处理函数的页面
// Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
version: '1.0.0',
componentsMap: [
@ -87,7 +88,7 @@
isSync: true,
},
dataHandler: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function (response) {\nif (!response.success){\n throw new Error(response.message);\n }\n return response.data;\n}',
},
},
@ -104,13 +105,13 @@
isSync: true,
},
dataHandler: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function (response) {\nif (!response.success){\n throw new Error(response.message);\n }\n return response.data.result;\n}',
},
},
],
dataHandler: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function (dataMap) {\n console.info("All datasources loaded:", dataMap);\n}',
},
},
@ -164,7 +165,7 @@
componentName: 'View',
props: {
onClick: {
type: 'JSFunction',
type: 'JSExpression',
value: 'this.hello',
},
},
@ -210,7 +211,7 @@
props: {
style: { flexDirection: 'row' },
onClick: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function(){ this.utils.recordEvent(`CLICK_ORDER`, this.order.title) }',
},
},
@ -260,7 +261,7 @@
componentName: 'View',
props: {
onClick: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function (){ this.setState({ clickCount: this.state.clickCount + 1 }) }',
},
},
@ -312,7 +313,7 @@
name: 'formatPrice',
type: 'function',
content: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function formatPrice(price, unit) { return Number(price).toFixed(2) + unit; }',
},
},
@ -321,7 +322,7 @@
name: 'recordEvent',
type: 'function',
content: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function recordEvent(eventName, eventDetail) { \n this.utils.Toast.show(`[EVENT]: ${eventName} ${eventDetail}`);\n console.log(`[EVENT]: ${eventName} (detail: %o) (user: %o)`, eventDetail, this.state.user); }',
},
},

13
packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js Normal file
View File

@ -0,0 +1,13 @@
const i18nConfig = {};
let locale = 'en-US';
const getLocale = () => locale;
const setLocale = (target) => {
locale = target;
};
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
export { getLocale, setLocale, i18n };

25
packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
View File

@ -17,6 +17,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$constants from '../../constants';
import * as __$$i18n from '../../i18n';
import __$$projectUtils from '../../utils';
import './index.css';
@ -28,6 +30,8 @@ class Detail$$Page extends Component {
_context = this._createContext();
_i18n = this._createI18nDelegate();
_dataSourceConfig = this._defineDataSourceConfig();
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
@ -85,12 +89,33 @@ class Detail$$Page extends Component {
get constants() {
return __$$constants;
},
get i18n() {
return self._i18n;
},
getLocale() {
return __$$i18n.getLocale();
},
setLocale(locale) {
__$$i18n.setLocale(locale);
self.forceUpdate();
},
...this._methods,
};
return context;
}
_createI18nDelegate() {
return new Proxy(
{},
{
get(target, prop) {
return __$$i18n.i18n(prop);
},
},
);
}
_defineDataSourceConfig() {
const __$$context = this._context;
return { list: [] };

25
packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
View File

@ -17,6 +17,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$constants from '../../constants';
import * as __$$i18n from '../../i18n';
import __$$projectUtils from '../../utils';
import './index.css';
@ -28,6 +30,8 @@ class Home$$Page extends Component {
_context = this._createContext();
_i18n = this._createI18nDelegate();
_dataSourceConfig = this._defineDataSourceConfig();
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
@ -85,12 +89,33 @@ class Home$$Page extends Component {
get constants() {
return __$$constants;
},
get i18n() {
return self._i18n;
},
getLocale() {
return __$$i18n.getLocale();
},
setLocale(locale) {
__$$i18n.setLocale(locale);
self.forceUpdate();
},
...this._methods,
};
return context;
}
_createI18nDelegate() {
return new Proxy(
{},
{
get(target, prop) {
return __$$i18n.i18n(prop);
},
},
);
}
_defineDataSourceConfig() {
const __$$context = this._context;
return { list: [] };

25
packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
View File

@ -17,6 +17,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$constants from '../../constants';
import * as __$$i18n from '../../i18n';
import __$$projectUtils from '../../utils';
import './index.css';
@ -28,6 +30,8 @@ class List$$Page extends Component {
_context = this._createContext();
_i18n = this._createI18nDelegate();
_dataSourceConfig = this._defineDataSourceConfig();
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
@ -88,12 +92,33 @@ class List$$Page extends Component {
get constants() {
return __$$constants;
},
get i18n() {
return self._i18n;
},
getLocale() {
return __$$i18n.getLocale();
},
setLocale(locale) {
__$$i18n.setLocale(locale);
self.forceUpdate();
},
...this._methods,
};
return context;
}
_createI18nDelegate() {
return new Proxy(
{},
{
get(target, prop) {
return __$$i18n.i18n(prop);
},
},
);
}
_defineDataSourceConfig() {
const __$$context = this._context;
return { list: [] };

1
packages/code-generator/test-cases/rax-app/demo3/schema.json5
View File

@ -1,4 +1,5 @@
{
// 本例是一个路由测试页面，里面有几个页面，相互之间有跳转关系的
// Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
version: '1.0.0',
componentsMap: [

13
packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js Normal file
View File

@ -0,0 +1,13 @@
const i18nConfig = {};
let locale = 'en-US';
const getLocale = () => locale;
const setLocale = (target) => {
locale = target;
};
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
export { getLocale, setLocale, i18n };

25
packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
View File

@ -17,6 +17,8 @@ import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$constants from '../../constants';
import * as __$$i18n from '../../i18n';
import __$$projectUtils from '../../utils';
import './index.css';
@ -28,6 +30,8 @@ class Home$$Page extends Component {
_context = this._createContext();
_i18n = this._createI18nDelegate();
_dataSourceConfig = this._defineDataSourceConfig();
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
@ -82,12 +86,33 @@ class Home$$Page extends Component {
get constants() {
return __$$constants;
},
get i18n() {
return self._i18n;
},
getLocale() {
return __$$i18n.getLocale();
},
setLocale(locale) {
__$$i18n.setLocale(locale);
self.forceUpdate();
},
...this._methods,
};
return context;
}
_createI18nDelegate() {
return new Proxy(
{},
{
get(target, prop) {
return __$$i18n.i18n(prop);
},
},
);
}
_defineDataSourceConfig() {
const __$$context = this._context;
return { list: [] };

1
packages/code-generator/test-cases/rax-app/demo4/schema.json5
View File

@ -1,4 +1,5 @@
{
// 本例是为了测试一下小程序的 runtime 模式
version: '1.0.0',
componentsMap: [
{

12
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.editorconfig Normal file
View File

@ -0,0 +1,12 @@
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

11
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintignore Normal file
View File

@ -0,0 +1,11 @@
# 忽略目录
build/
tests/
demo/
# node 覆盖率文件
coverage/
# 忽略文件
**/*-min.js
**/*.min.js

3
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.eslintrc.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
extends: ['rax'],
};

17
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/.gitignore vendored Normal file
View File

@ -0,0 +1,17 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
*~
*.swp
*.log
.DS_Store
.idea/
.temp/
build/
dist/
lib/
coverage/
node_modules/
template.yml

15
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/README.md Normal file
View File

@ -0,0 +1,15 @@
# @ali/rax-component-demo
## Getting Started
### `npm run start`
Runs the app in development mode.
Open [http://localhost:9999](http://localhost:9999) to view it in the browser.
The page will reload if you make edits.
### `npm run build`
Builds the app for production to the `build` folder.

7
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/abc.json Normal file
View File

@ -0,0 +1,7 @@
{
"type": "rax",
"builder": "@ali/builder-rax-v1",
"info": {
"raxVersion": "1.x"
}
}

12
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/build.json Normal file
View File

@ -0,0 +1,12 @@
{
"inlineStyle": false,
"plugins": [
[
"build-plugin-rax-app",
{
"targets": ["web", "miniapp"]
}
],
"@ali/build-plugin-rax-app-def"
]
}

32
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "@ali/rax-app-demo",
"private": true,
"version": "1.0.0",
"scripts": {
"build": "build-scripts build",
"start": "build-scripts start",
"lint": "eslint --ext .js --ext .jsx ./"
},
"dependencies": {
"@ali/lowcode-datasource-engine": "^0.1.0",
"universal-env": "^3.2.0",
"rax": "^1.1.0",
"rax-app": "^2.0.0",
"rax-document": "^0.1.0",
"rax-view": "^1.0.0",
"rax-text": "^1.0.0"
},
"devDependencies": {
"build-plugin-rax-app": "^5.0.0",
"@alib/build-scripts": "^0.1.0",
"@typescript-eslint/eslint-plugin": "^2.11.0",
"@typescript-eslint/parser": "^2.11.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.8.0",
"eslint-config-rax": "^0.1.0",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-module": "^0.1.0",
"eslint-plugin-react": "^7.18.0",
"@ali/build-plugin-rax-app-def": "^1.0.0"
}
}

6
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.js Normal file
View File

@ -0,0 +1,6 @@
import { runApp } from 'rax-app';
import appConfig from './app.json';
import './global.scss';
runApp(appConfig);

11
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/app.json Normal file
View File

@ -0,0 +1,11 @@
{
"routes": [
{
"path": "/",
"source": "pages/Home/index"
}
],
"window": {
"title": "Rax App Demo"
}
}

3
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/constants.js Normal file
View File

@ -0,0 +1,3 @@
const __$$constants = {};
export default __$$constants;

25
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/document/index.jsx Normal file
View File

@ -0,0 +1,25 @@
import { createElement } from 'rax';
import { Root, Style, Script } from 'rax-document';
function Document() {
return (
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
/>
<title>Rax App Demo</title>
<Style />
</head>
<body>
{/* root container */}
<Root />
<Script />
</body>
</html>
);
}
export default Document;

3
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/global.scss Normal file
View File

@ -0,0 +1,3 @@
body {
-webkit-font-smoothing: antialiased;
}

20
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js Normal file
View File

@ -0,0 +1,20 @@
const i18nConfig = {
'zh-CN': {
'hello-world': '你好，世界！',
},
'en-US': {
'hello-world': 'Hello world!',
},
};
let locale = 'en-US';
const getLocale = () => locale;
const setLocale = (target) => {
locale = target;
};
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
export { getLocale, setLocale, i18n };

0
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.css Normal file
View File

162
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx Normal file
View File

@ -0,0 +1,162 @@
// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
// 例外：rax 框架的导出名和各种组件名除外。
import { createElement, Component } from 'rax';
import { withRouter as __$$withRouter } from 'rax-app';
import Page from 'rax-view';
import Text from 'rax-text';
import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$constants from '../../constants';
import * as __$$i18n from '../../i18n';
import __$$projectUtils from '../../utils';
import './index.css';
class Home$$Page extends Component {
_methods = this._defineMethods();
_context = this._createContext();
_i18n = this._createI18nDelegate();
_dataSourceConfig = this._defineDataSourceConfig();
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
_utils = this._defineUtils();
componentDidMount() {
this._dataSourceEngine.reloadDataSource();
}
componentWillUnmount() {}
render() {
const __$$context = this._context;
return (
<Page>
<Text
onClick={function () {
__$$context.setLocale(__$$context.getLocale() === 'en-US' ? 'zh-CN' : 'en-US');
}}
>
{__$$eval(() => __$$context.i18n['hello-world'])}
</Text>
</Page>
);
}
_createContext() {
const self = this;
const context = {
get state() {
return self.state;
},
setState(newState) {
self.setState(newState);
},
get dataSourceMap() {
return self._dataSourceEngine.dataSourceMap || {};
},
async reloadDataSource() {
await self._dataSourceEngine.reloadDataSource();
},
get utils() {
return self._utils;
},
get page() {
return context;
},
get component() {
return context;
},
get props() {
return self.props;
},
get constants() {
return __$$constants;
},
get i18n() {
return self._i18n;
},
getLocale() {
return __$$i18n.getLocale();
},
setLocale(locale) {
__$$i18n.setLocale(locale);
self.forceUpdate();
},
...this._methods,
};
return context;
}
_createI18nDelegate() {
return new Proxy(
{},
{
get(target, prop) {
return __$$i18n.i18n(prop);
},
},
);
}
_defineDataSourceConfig() {
const __$$context = this._context;
return { list: [] };
}
_defineUtils() {
const utils = {
...__$$projectUtils,
};
Object.entries(utils).forEach(([name, util]) => {
if (typeof util === 'function') {
utils[name] = util.bind(this._context);
}
});
return utils;
}
_defineMethods() {
const __$$methods = {};
// 为所有的方法绑定上下文
Object.entries(__$$methods).forEach(([methodName, method]) => {
if (typeof method === 'function') {
__$$methods[methodName] = (...args) => {
return method.apply(this._context, args);
};
}
});
return __$$methods;
}
}
export default __$$withRouter(Home$$Page);
function __$$eval(expr) {
try {
return expr();
} catch (err) {
console.warn('Failed to evaluate: ', expr, err);
}
}
function __$$evalArray(expr) {
const res = __$$eval(expr);
return Array.isArray(res) ? res : [];
}

1
packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/utils.js Normal file
View File

@ -0,0 +1 @@
export default {};

73
packages/code-generator/test-cases/rax-app/demo5/schema.json5 Normal file
View File

@ -0,0 +1,73 @@
{
// 这是一个关于国际化的 schema 示例
// Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
version: '1.0.0',
componentsMap: [
{
componentName: 'Page',
package: 'rax-view',
version: '^1.0.0',
destructuring: false,
exportName: 'Page',
},
{
componentName: 'Text',
package: 'rax-text',
version: '^1.0.0',
destructuring: false,
exportName: 'Text',
},
],
componentsTree: [
{
componentName: 'Page',
props: {},
lifeCycles: {},
fileName: 'home',
meta: {
router: '/',
},
dataSource: {
list: [],
},
children: [
{
componentName: 'Text',
props: {
onClick: {
type: 'JSFunction',
value: "function () {\n this.setLocale(this.getLocale() === 'en-US' ? 'zh-CN' : 'en-US');\n}",
},
},
children: [
{
type: 'JSExpression',
value: 'this.i18n["hello-world"]',
},
],
},
],
},
],
i18n: {
'zh-CN': {
'hello-world': '你好，世界！',
},
'en-US': {
'hello-world': 'Hello world!',
},
},
config: {
sdkVersion: '1.0.3',
historyMode: 'hash',
targetRootID: 'root',
},
meta: {
name: 'Rax App Demo',
git_group: 'demo-group',
project_name: 'demo-project',
description: '这是一个示例应用',
spma: 'spmademo',
creator: '张三',
},
}

6
packages/code-generator/test/rax-app.test.ts
View File

@ -7,8 +7,8 @@ import path from 'path';
import chalk from 'chalk';
import CodeGenerator from '../src';
import createRaxAppBuilder from '../src/solutions/rax-app';
import { IProjectSchema } from '../src/types/schema';
import type { IProjectSchema } from '../src/types/schema';
const TEST_CASES_DIR = path.join(__dirname, '../test-cases/rax-app');
@ -42,7 +42,7 @@ function defineTest(caseDirName: string) {
}
async function exportProject(schemaJson: IProjectSchema, targetPath: string, projectName: string) {
const raxAppBuilder = createRaxAppBuilder();
const raxAppBuilder = CodeGenerator.solutions.rax();
const result = await raxAppBuilder.generateProject(schemaJson);
const publisher = CodeGenerator.publishers.disk();
await publisher.publish({