From 930541e7265602e37d07deb2b7b576e619078a58 Mon Sep 17 00:00:00 2001
From: harrywan <445436867@qq.com>
Date: Wed, 9 Mar 2022 10:27:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E6=94=AF=E6=8C=81tsx?=
=?UTF-8?q?=EF=BC=8C=E6=8F=90=E4=BE=9BdefineRoute=E9=85=8D=E7=BD=AEtsx?=
=?UTF-8?q?=E5=92=8Cjsx=E7=9A=84route=20(#106)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: 页面支持tsx，提供defineRoute配置tsx和jsx的route
* .vue文件也支持defineRouteMeta
* feat: 改回声明用法
---
.../src/plugins/misc/route/index.js | 44 ++++++++++++----
.../plugins/misc/route/template/routes.tpl | 4 ++
packages/fes-template-h5/src/pages/index.vue | 50 ++++++++++++-------
.../fes-template-h5/src/pages/onepiece.vue | 2 +-
packages/fes-template-h5/src/pages/test.jsx | 7 ---
packages/fes-template-h5/src/pages/test.tsx | 15 ++++++
packages/fes-utils/package.json | 1 +
packages/fes-utils/src/index.js | 4 +-
packages/fes/types.d.ts | 7 ++-
9 files changed, 96 insertions(+), 38 deletions(-)
delete mode 100644 packages/fes-template-h5/src/pages/test.jsx
create mode 100644 packages/fes-template-h5/src/pages/test.tsx
diff --git a/packages/fes-preset-built-in/src/plugins/misc/route/index.js b/packages/fes-preset-built-in/src/plugins/misc/route/index.js
index 272d662e..f963cb00 100644
--- a/packages/fes-preset-built-in/src/plugins/misc/route/index.js
+++ b/packages/fes-preset-built-in/src/plugins/misc/route/index.js
@@ -2,7 +2,7 @@ import { readdirSync, statSync, readFileSync } from 'fs';
import {
join, extname, posix, basename
} from 'path';
-import { lodash } from '@fesjs/utils';
+import { lodash, parser, generator } from '@fesjs/utils';
import { parse } from '@vue/compiler-sfc';
import { Logger } from '@fesjs/compiler';
import { runtimePath } from '../../../utils/constants';
@@ -21,7 +21,7 @@ const logger = new Logger('fes:router');
const isProcessFile = function (path) {
const ext = extname(path);
- return statSync(path).isFile() && ['.vue', '.jsx'].includes(ext);
+ return statSync(path).isFile() && ['.vue', '.jsx', '.tsx'].includes(ext);
};
const isProcessDirectory = function (path, item) {
@@ -71,6 +71,19 @@ const getRoutePath = function (parentRoutePath, fileName) {
return posix.join(parentRoutePath, fileName);
};
+function getRouteMeta(content) {
+ const ast = parser.parse(content, {
+ sourceType: 'module',
+ plugins: ['jsx', 'typescript']
+ });
+ const defineRouteExpression = ast.program.body.filter(expression => expression.type === 'ExpressionStatement' && expression.expression.type === 'CallExpression' && expression.expression.callee.name === 'defineRouteMeta')[0];
+ if (defineRouteExpression) {
+ const argument = generator(defineRouteExpression.expression.arguments[0]);
+ return JSON.parse(argument.code.replace(/'/g, '"').replace(/(\S+):/g, (global, m1) => `"${m1}":`));
+ }
+ return null;
+}
+
let cacheGenRoutes = {};
// TODO 约定 layout 目录作为布局文件夹，
@@ -88,16 +101,12 @@ const genRoutes = function (parentRoutes, path, parentRoutePath, config) {
// 文件或者目录的绝对路径
const component = join(path, item);
if (isProcessFile(component)) {
- const { descriptor } = parse(readFileSync(component, 'utf-8'));
- const routeMetaBlock = descriptor.customBlocks.find(
- b => b.type === 'config'
- );
const ext = extname(item);
const fileName = basename(item, ext);
// 路由的path
const routePath = getRoutePath(parentRoutePath, fileName);
if (cacheGenRoutes[routePath]) {
- logger.warn(`[WARNING]: The file path: ${routePath}(.jsx/.vue) conflict in router，will only use ${routePath}.jsx，please remove one of.`);
+ logger.warn(`[WARNING]: The file path: ${routePath}(.jsx/.tsx/.vue) conflict in router，will only use ${routePath}.tsx or ${routePath}.jsx，please remove one of.`);
return;
}
cacheGenRoutes[routePath] = true;
@@ -105,7 +114,24 @@ const genRoutes = function (parentRoutes, path, parentRoutePath, config) {
// 路由名称
const routeName = getRouteName(parentRoutePath, fileName);
const componentPath = getComponentPath(parentRoutePath, fileName, config);
- const routeMeta = routeMetaBlock?.content ? JSON.parse(routeMetaBlock.content) : {};
+
+ let content = readFileSync(component, 'utf-8');
+ let routeMeta = {};
+ if (ext === '.vue') {
+ const { descriptor } = parse(content);
+ const routeMetaBlock = descriptor.customBlocks.find(
+ b => b.type === 'config'
+ );
+ routeMeta = routeMetaBlock?.content ? JSON.parse(routeMetaBlock.content) : {};
+ if (descriptor.script) {
+ content = descriptor.script.content;
+ routeMeta = getRouteMeta(content) || routeMeta;
+ }
+ }
+ if (ext === '.jsx' || ext === '.tsx') {
+ routeMeta = getRouteMeta(content) || {};
+ }
+
const routeConfig = {
path: routePath,
component: componentPath,
@@ -302,7 +328,7 @@ export default function (api) {
api.addCoreExports(() => [
{
- specifiers: ['getRoutes', 'getRouter', 'getHistory', 'destroyRouter'],
+ specifiers: ['getRoutes', 'getRouter', 'getHistory', 'destroyRouter', 'defineRouteMeta'],
source: absCoreFilePath
}
]);
diff --git a/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl b/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl
index e6a6c6aa..6d2083d4 100644
--- a/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl
+++ b/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl
@@ -60,3 +60,7 @@ export const destroyRouter = ()=>{
router = null;
history = null;
}
+
+export const defineRouteMeta = (param)=>{
+ return param
+}
diff --git a/packages/fes-template-h5/src/pages/index.vue b/packages/fes-template-h5/src/pages/index.vue
index 8cf4ebc3..7d6479dc 100644
--- a/packages/fes-template-h5/src/pages/index.vue
+++ b/packages/fes-template-h5/src/pages/index.vue
@@ -1,26 +1,30 @@
<template>
<div class="onepiece m-10px text-green">
fes h5 & 拉夫德鲁<br />
- <fes-icon :spin="true" class="one-icon" type="smile" @click="clickIcon" />
+ <fes-icon
+ :spin="true"
+ class="one-icon"
+ type="smile"
+ @click="clickIcon"
+ />
<HelloWorld />
<HelloTSX />
<helloTS />
</div>
</template>
-<config>
-{
- "title": "首页",
- "name": "testIndex",
- "layout": "false"
-}
-</config>
<script>
import { ref } from 'vue';
-import { request } from '@fesjs/fes';
+import { request, defineRouteMeta, useRoute } from '@fesjs/fes';
import HelloWorld from '@/components/helloWorld';
import HelloTSX from '@/components/helloTSX';
import helloTS from '@/components/helloTS';
+defineRouteMeta({
+ title: '首页',
+ name: 'testIndex',
+ layout: false
+});
+
export default {
components: {
HelloWorld,
@@ -33,6 +37,7 @@ export default {
const clickIcon = () => {
console.log('click Icon');
};
+ console.log(useRoute());
// request('/api', null, {
// }).then((res) => {
// console.log(res);
@@ -59,15 +64,23 @@ export default {
// });
const get = (id) => {
- request('/get/api', { id }, {
- method: 'get'
- });
+ request(
+ '/get/api',
+ { id },
+ {
+ method: 'get'
+ }
+ );
};
const post = (id) => {
- request('/api', { id }, {
- responseType: 'blob'
- }).then((data) => {
+ request(
+ '/api',
+ { id },
+ {
+ responseType: 'blob'
+ }
+ ).then((data) => {
console.log(data);
});
};
@@ -80,7 +93,6 @@ export default {
// post(2);
post(3);
-
// setTimeout(() => {
// request('/api', null, {
// throttle: 3000,
@@ -138,8 +150,8 @@ export default {
</script>
<style lang="less" scoped>
-@import "~@/styles/mixins/hairline";
-@import "~@/styles/mixins/hover";
+@import '~@/styles/mixins/hairline';
+@import '~@/styles/mixins/hover';
div {
padding: 20px;
@@ -154,6 +166,6 @@ div {
}
.onepiece {
text-align: center;
- .hairline("top");
+ .hairline('top');
}
</style>
diff --git a/packages/fes-template-h5/src/pages/onepiece.vue b/packages/fes-template-h5/src/pages/onepiece.vue
index bcf8dafd..e8c335c6 100644
--- a/packages/fes-template-h5/src/pages/onepiece.vue
+++ b/packages/fes-template-h5/src/pages/onepiece.vue
@@ -5,7 +5,7 @@
<config>
{
"title": "onepiece",
- "layout": "true"
+ "layout": true
}
</config>
<script>
diff --git a/packages/fes-template-h5/src/pages/test.jsx b/packages/fes-template-h5/src/pages/test.jsx
deleted file mode 100644
index 84472aed..00000000
--- a/packages/fes-template-h5/src/pages/test.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
- setup() {
- return () => <div>hello jsx</div>;
- }
-});
diff --git a/packages/fes-template-h5/src/pages/test.tsx b/packages/fes-template-h5/src/pages/test.tsx
new file mode 100644
index 00000000..07efe642
--- /dev/null
+++ b/packages/fes-template-h5/src/pages/test.tsx
@@ -0,0 +1,15 @@
+import { defineRouteMeta, useRoute } from '@fesjs/fes';
+import { defineComponent } from 'vue';
+
+defineRouteMeta({
+ title: 'test',
+ name: 'test'
+})
+
+export default defineComponent({
+ setup() {
+ const route = useRoute();
+ console.log(route)
+ return () => <div>hello tsx</div>;
+ }
+});
diff --git a/packages/fes-utils/package.json b/packages/fes-utils/package.json
index e1020935..ac5bbe32 100644
--- a/packages/fes-utils/package.json
+++ b/packages/fes-utils/package.json
@@ -25,6 +25,7 @@
},
"dependencies": {
"@babel/parser": "^7.15.0",
+ "@babel/generator": "^7.15.0",
"@babel/traverse": "^7.15.0",
"chalk": "^4.1.2",
"chokidar": "^3.5.2",
diff --git a/packages/fes-utils/src/index.js b/packages/fes-utils/src/index.js
index 816691c2..c7967646 100644
--- a/packages/fes-utils/src/index.js
+++ b/packages/fes-utils/src/index.js
@@ -8,6 +8,7 @@ import glob from 'glob';
import createDebug from 'debug';
import * as parser from '@babel/parser';
import traverse from '@babel/traverse';
+import generator from '@babel/generator';
import rimraf from 'rimraf';
import mkdirp from 'mkdirp';
import pkgUp from 'pkg-up';
@@ -40,7 +41,8 @@ export {
traverse,
pkgUp,
portfinder,
- resolve
+ resolve,
+ generator
};
export {
diff --git a/packages/fes/types.d.ts b/packages/fes/types.d.ts
index 89ad8bf8..1a880b6b 100644
--- a/packages/fes/types.d.ts
+++ b/packages/fes/types.d.ts
@@ -1,5 +1,10 @@
-
// @ts-ignore
export * from '@@/core/coreExports';
// @ts-ignore
export * from '@@/core/pluginExports';
+
+export declare function defineRouteMeta(routeMeta: {
+ name?: string;
+ title?: string;
+ layout?: boolean | { sidebar?: boolean; header?: boolean; logo?: boolean };
+});