feat: 🎸 Rax 出码器支持路由功能

This commit is contained in:
牧毅 2020-08-17 13:17:01 +08:00
parent acd1f0601e
commit 8ecc002f65
28 changed files with 808 additions and 65 deletions

View File

@ -24,8 +24,8 @@ interface IModuleInfo {
function getDirFromRoot(root: IResultDir, path: string[]): IResultDir {
let current: IResultDir = root;
path.forEach(p => {
const exist = current.dirs.find(d => d.name === p);
path.forEach((p) => {
const exist = current.dirs.find((d) => d.name === p);
if (exist) {
current = exist;
} else {
@ -76,7 +76,7 @@ export class ProjectBuilder implements IProjectBuilder {
// components
// pages
const containerBuildResult: IModuleInfo[] = await Promise.all<IModuleInfo>(
parseResult.containers.map(async containerInfo => {
parseResult.containers.map(async (containerInfo) => {
let builder: IModuleBuilder;
let path: string[];
if (containerInfo.containerType === 'Page') {
@ -100,9 +100,7 @@ export class ProjectBuilder implements IProjectBuilder {
// router
if (parseResult.globalRouter && builders.router) {
const { files } = await builders.router.generateModule(
parseResult.globalRouter,
);
const { files } = await builders.router.generateModule(parseResult.globalRouter);
buildResult.push({
path: this.template.slots.router.path,
@ -112,9 +110,7 @@ export class ProjectBuilder implements IProjectBuilder {
// entry
if (parseResult.project && builders.entry) {
const { files } = await builders.entry.generateModule(
parseResult.project,
);
const { files } = await builders.entry.generateModule(parseResult.project);
buildResult.push({
path: this.template.slots.entry.path,
@ -123,10 +119,8 @@ export class ProjectBuilder implements IProjectBuilder {
}
// appConfig
if (parseResult.project && builders.appConfig) {
const { files } = await builders.appConfig.generateModule(
parseResult.project,
);
if (builders.appConfig) {
const { files } = await builders.appConfig.generateModule(parseResult);
buildResult.push({
path: this.template.slots.appConfig.path,
@ -135,14 +129,8 @@ export class ProjectBuilder implements IProjectBuilder {
}
// constants?
if (
parseResult.project &&
builders.constants &&
this.template.slots.constants
) {
const { files } = await builders.constants.generateModule(
parseResult.project,
);
if (parseResult.project && builders.constants && this.template.slots.constants) {
const { files } = await builders.constants.generateModule(parseResult.project);
buildResult.push({
path: this.template.slots.constants.path,
@ -151,14 +139,8 @@ export class ProjectBuilder implements IProjectBuilder {
}
// utils?
if (
parseResult.globalUtils &&
builders.utils &&
this.template.slots.utils
) {
const { files } = await builders.utils.generateModule(
parseResult.globalUtils,
);
if (parseResult.globalUtils && builders.utils && this.template.slots.utils) {
const { files } = await builders.utils.generateModule(parseResult.globalUtils);
buildResult.push({
path: this.template.slots.utils.path,
@ -168,9 +150,7 @@ export class ProjectBuilder implements IProjectBuilder {
// i18n?
if (parseResult.globalI18n && builders.i18n && this.template.slots.i18n) {
const { files } = await builders.i18n.generateModule(
parseResult.globalI18n,
);
const { files } = await builders.i18n.generateModule(parseResult.globalI18n);
buildResult.push({
path: this.template.slots.i18n.path,
@ -180,9 +160,7 @@ export class ProjectBuilder implements IProjectBuilder {
// globalStyle
if (parseResult.project && builders.globalStyle) {
const { files } = await builders.globalStyle.generateModule(
parseResult.project,
);
const { files } = await builders.globalStyle.generateModule(parseResult.project);
buildResult.push({
path: this.template.slots.globalStyle.path,
@ -192,9 +170,7 @@ export class ProjectBuilder implements IProjectBuilder {
// htmlEntry
if (parseResult.project && builders.htmlEntry) {
const { files } = await builders.htmlEntry.generateModule(
parseResult.project,
);
const { files } = await builders.htmlEntry.generateModule(parseResult.project);
buildResult.push({
path: this.template.slots.htmlEntry.path,
@ -204,9 +180,7 @@ export class ProjectBuilder implements IProjectBuilder {
// packageJSON
if (parseResult.project && builders.packageJSON) {
const { files } = await builders.packageJSON.generateModule(
parseResult.project,
);
const { files } = await builders.packageJSON.generateModule(parseResult.project);
buildResult.push({
path: this.template.slots.packageJSON.path,
@ -217,14 +191,14 @@ export class ProjectBuilder implements IProjectBuilder {
// Post Process
// Combine Modules
buildResult.forEach(moduleInfo => {
buildResult.forEach((moduleInfo) => {
let targetDir = getDirFromRoot(projectRoot, moduleInfo.path);
if (moduleInfo.moduleName) {
const dir = new ResultDir(moduleInfo.moduleName);
targetDir.addDirectory(dir);
targetDir = dir;
}
moduleInfo.files.forEach(file => targetDir.addFile(file));
moduleInfo.files.forEach((file) => targetDir.addFile(file));
});
return projectRoot;
@ -233,7 +207,7 @@ export class ProjectBuilder implements IProjectBuilder {
private createModuleBuilders(): Record<string, IModuleBuilder> {
const builders: Record<string, IModuleBuilder> = {};
Object.keys(this.plugins).forEach(pluginName => {
Object.keys(this.plugins).forEach((pluginName) => {
if (this.plugins[pluginName].length > 0) {
const options: { mainFileName?: string } = {};
if (this.template.slots[pluginName] && this.template.slots[pluginName].fileName) {

View File

@ -25,6 +25,7 @@ import {
IProjectSchema,
ISchemaParser,
UtilItem,
IRouterInfo,
} from '../types';
const defaultContainer: IContainerInfo = {
@ -144,20 +145,21 @@ class SchemaParser implements ISchemaParser {
const containersDeps = ([] as IDependency[]).concat(...containers.map((c) => c.deps || []));
// 分析路由配置
// TODO: 低代码规范里面的路由是咋弄的?
const routes = containers
const routes: IRouterInfo['routes'] = containers
.filter((container) => container.containerType === 'Page')
.map((page) => {
const meta = (page as { meta?: IPageMeta }).meta as IPageMeta;
if (meta) {
return {
path: meta.router,
fileName: page.fileName,
componentName: page.moduleName,
};
}
return {
path: '',
fileName: page.fileName,
componentName: page.moduleName,
};
});

View File

@ -1,3 +1,4 @@
import changeCase from 'change-case';
import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
import {
@ -6,7 +7,7 @@ import {
ChunkType,
FileType,
ICodeStruct,
IRouterInfo,
IParseResult,
} from '../../../../../types';
const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
@ -15,23 +16,22 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
...pre,
};
const ir = next.ir as IRouterInfo;
const ir = next.ir as IParseResult;
const routes = ir.globalRouter?.routes?.map((route) => ({
path: route.path,
source: `pages/${changeCase.pascalCase(route.fileName)}/index`,
})) || [{ path: '/', source: 'pages/Home/index' }];
// TODO: 如何生成路由?
next.chunks.push({
type: ChunkType.STRING,
fileType: FileType.JSON,
name: COMMON_CHUNK_NAME.CustomContent,
content: `
{
"routes": [
{
"path": "/",
"source": "pages/Home/index"
}
],
"routes": ${JSON.stringify(routes, null, 2)},
"window": {
"title": "Rax App Demo"
"title": ${JSON.stringify(ir.project?.meta?.title || ir.project?.meta?.name || '')}
}
}
`,

View File

@ -25,6 +25,7 @@ export interface IUtilInfo extends IWithDependency {
export interface IRouterInfo extends IWithDependency {
routes: Array<{
path: string;
fileName: string;
componentName: string;
}>;
}

View File

@ -108,12 +108,6 @@ export function generateUnknownType(value: CompositeValue, handlers: CustomHandl
export function generateCompositeType(value: CompositeValue, handlers: CustomHandlerSet = {}): [boolean, string] {
const result = generateUnknownType(value, handlers);
// TODO什么场景下会返回这样的字符串
if (result.substr(0, 1) === "'" && result.substr(-1, 1) === "'") {
return [true, result.substring(1, result.length - 1)];
}
return [false, result];
}

View File

@ -11,7 +11,7 @@ import {
CompositeValue,
NodeSchema,
} from '../types';
import { CustomHandlerSet, generateCompositeType } from './compositeType';
import { CustomHandlerSet, generateCompositeType, generateUnknownType } from './compositeType';
import { generateExpression } from './jsExpression';
// tslint:disable-next-line: no-empty
@ -49,10 +49,18 @@ export function generateAttr(
return [];
}
const [isString, valueStr] = generateCompositeType(attrValue, customHandlers);
if (typeof attrValue === 'string') {
return [
{
value: `${attrName}=${JSON.stringify(attrValue)}`,
type: PIECE_TYPE.ATTR,
},
];
}
return [
{
value: `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`,
value: `${attrName}={${generateUnknownType(attrValue, customHandlers)}}`,
type: PIECE_TYPE.ATTR,
},
];

View File

@ -23,6 +23,9 @@
props: {},
lifeCycles: {},
fileName: 'home',
meta: {
router: '/',
},
dataSource: {
list: [],
},

View File

@ -35,6 +35,9 @@
{
componentName: 'Page',
fileName: 'home',
meta: {
router: '/',
},
state: {
clickCount: 0,
user: { name: '张三', age: 18, avatar: 'https://gw.alicdn.com/tfs/TB1Ui9BMkY2gK0jSZFgXXc5OFXa-50-50.png' },

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

View File

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

View File

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

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

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.

View File

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

View File

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

View File

@ -0,0 +1,35 @@
{
"name": "@ali/rax-app-demo",
"private": true,
"version": "1.0.0",
"scripts": {
"build": "rm -f ./dist/miniapp.tar.gz && npm run build:miniapp && cd build/miniapp && tar czf ../../dist/miniapp.tar.gz *",
"build:miniapp": "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",
"rax-link": "^1.0.0",
"rax-image": "^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"
}
}

View File

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

View File

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

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;

View File

@ -0,0 +1,9 @@
body {
-webkit-font-smoothing: antialiased;
}
page,
body {
width: 750rpx;
overflow-x: hidden;
}

View File

@ -0,0 +1,136 @@
// : "__$$" 访
// rax
import { createElement, Component } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Link from 'rax-link';
import Image from 'rax-image';
import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$projectUtils from '../../utils';
import './index.css';
class Detail$$Page extends Component {
state = {};
_methods = this._defineMethods();
_context = this._createContext();
_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 (
<View>
<View>
<Text>This is the Detail Page</Text>
</View>
<Link href="javascript:history.back();" miniappHref="navigateBack:">
<Text>Go back</Text>
</Link>
</View>
);
}
_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;
},
...this._methods,
};
return context;
}
_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 Detail$$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 : [];
}

View File

@ -0,0 +1,136 @@
// : "__$$" 访
// rax
import { createElement, Component } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Link from 'rax-link';
import Image from 'rax-image';
import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$projectUtils from '../../utils';
import './index.css';
class Home$$Page extends Component {
state = {};
_methods = this._defineMethods();
_context = this._createContext();
_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 (
<View>
<View>
<Text>This is the Home Page</Text>
</View>
<Link href="#/list" miniappHref="navigate:/pages/List/index">
<Text>Go To The List Page</Text>
</Link>
</View>
);
}
_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;
},
...this._methods,
};
return context;
}
_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 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 : [];
}

View File

@ -0,0 +1,139 @@
// : "__$$" 访
// rax
import { createElement, Component } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Link from 'rax-link';
import Image from 'rax-image';
import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
import { isMiniApp as __$$isMiniApp } from 'universal-env';
import __$$projectUtils from '../../utils';
import './index.css';
class List$$Page extends Component {
state = {};
_methods = this._defineMethods();
_context = this._createContext();
_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 (
<View>
<View>
<Text>This is the List Page</Text>
</View>
<Link href="#/detail" miniappHref="navigate:/pages/Detail/index">
<Text>Go To The Detail Page</Text>
</Link>
<Link href="javascript:history.back();" miniappHref="navigateBack:">
<Text>Go back</Text>
</Link>
</View>
);
}
_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;
},
...this._methods,
};
return context;
}
_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 List$$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 : [];
}

View File

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

View File

@ -0,0 +1,175 @@
{
// Schema 参见https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
version: '1.0.0',
componentsMap: [
{
componentName: 'View',
package: 'rax-view',
version: '^1.0.0',
destructuring: false,
exportName: 'View',
},
{
componentName: 'Text',
package: 'rax-text',
version: '^1.0.0',
destructuring: false,
exportName: 'Text',
},
{
componentName: 'Link',
package: 'rax-link',
version: '^1.0.0',
destructuring: false,
exportName: 'Link',
},
{
componentName: 'Image',
package: 'rax-image',
version: '^1.0.0',
destructuring: false,
exportName: 'Image',
},
{
componentName: 'Page',
package: 'rax-view',
version: '^1.0.0',
destructuring: false,
exportName: 'Page',
},
],
componentsTree: [
{
componentName: 'Page',
fileName: 'home',
state: {},
dataSource: {
list: [],
},
meta: {
router: '/',
},
children: [
{
componentName: 'View',
children: [
{
componentName: 'Text',
children: 'This is the Home Page',
},
],
},
{
componentName: 'Link',
props: {
href: '#/list',
miniappHref: 'navigate:/pages/List/index',
},
children: [
{
componentName: 'Text',
children: 'Go To The List Page',
},
],
},
],
},
{
componentName: 'Page',
fileName: 'list',
state: {},
dataSource: {
list: [],
},
meta: {
router: '/list',
},
children: [
{
componentName: 'View',
children: [
{
componentName: 'Text',
children: 'This is the List Page',
},
],
},
{
componentName: 'Link',
props: {
href: '#/detail',
miniappHref: 'navigate:/pages/Detail/index',
},
children: [
{
componentName: 'Text',
children: 'Go To The Detail Page',
},
],
},
{
componentName: 'Link',
props: {
href: 'javascript:history.back();',
miniappHref: 'navigateBack:',
},
children: [
{
componentName: 'Text',
children: 'Go back',
},
],
},
],
},
{
componentName: 'Page',
fileName: 'detail',
state: {},
dataSource: {
list: [],
},
meta: {
router: '/detail',
},
children: [
{
componentName: 'View',
children: [
{
componentName: 'Text',
children: 'This is the Detail Page',
},
],
},
{
componentName: 'Link',
props: {
href: 'javascript:history.back();',
miniappHref: 'navigateBack:',
},
children: [
{
componentName: 'Text',
children: 'Go back',
},
],
},
],
},
],
css: 'page,body{\n width: 750rpx;\n overflow-x: hidden;\n}',
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: '张三',
},
}