From dfaea6c108bd20507589637fa65eddb0ee47b901 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Mon, 7 Mar 2022 16:29:21 +0800
Subject: [PATCH] =?UTF-8?q?.vue=E6=96=87=E4=BB=B6=E4=B9=9F=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81defineRouteMeta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/misc/route/index.js           | 32 ++++++++----
 .../plugins/misc/route/template/routes.tpl    |  2 +-
 packages/fes-template-h5/src/pages/index.vue  | 50 ++++++++++++-------
 .../fes-template-h5/src/pages/onepiece.vue    |  2 +-
 packages/fes-template-h5/src/pages/test.tsx   |  8 +--
 packages/fes/types.d.ts                       |  7 ++-
 6 files changed, 66 insertions(+), 35 deletions(-)

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 9ff40cba..b9026770 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, parser, generator } from '@fesjs/utils';
+import { lodash, parser } from '@fesjs/utils';
 import { parse } from '@vue/compiler-sfc';
 import { Logger } from '@fesjs/compiler';
 import { runtimePath } from '../../../utils/constants';
@@ -102,7 +102,7 @@ const genRoutes = function (parentRoutes, path, parentRoutePath, config) {
             const routeName = getRouteName(parentRoutePath, fileName);
             const componentPath = getComponentPath(parentRoutePath, fileName, config);
 
-            const content = readFileSync(component, 'utf-8');
+            let content = readFileSync(component, 'utf-8');
             let routeMeta = {};
             if (ext === '.vue') {
                 const { descriptor } = parse(content);
@@ -111,23 +111,27 @@ const genRoutes = function (parentRoutes, path, parentRoutePath, config) {
                 );
                 routeMeta = routeMetaBlock?.content ? JSON.parse(routeMetaBlock.content) : {};
             }
-            if (ext === '.jsx' || ext === '.tsx') {
+            let importMeta = '';
+            if (ext === '.vue' || ext === '.jsx' || ext === '.tsx') {
+                if (ext === '.vue') {
+                    const { descriptor } = parse(content);
+                    content = descriptor.script.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 === 'defineRoute')[0];
-                if (defineRouteExpression) {
-                    const argument = generator(defineRouteExpression.expression.arguments[0]);
-                    routeMeta = JSON.parse(argument.code.replace(/'/g, '"').replace(/(\S+):/g, (global, m1) => `"${m1}":`));
+                const defineRouteMetaExpression = ast.program.body.filter(expression => expression.type === 'ExportNamedDeclaration' && expression.declaration.type === 'VariableDeclaration' && expression.declaration.declarations[0].id.name === 'meta')[0];
+                if (defineRouteMetaExpression) {
+                    importMeta = `require('${componentPath}').meta`;
                 }
             }
 
             const routeConfig = {
                 path: routePath,
                 component: componentPath,
-                name: routeMeta.name || routeName,
-                meta: routeMeta
+                name: (importMeta ? `${importMeta}.name` : routeMeta.name) || routeName,
+                meta: importMeta || routeMeta
             };
             if (hasLayout) {
                 if (fileName === 'layout') {
@@ -237,6 +241,14 @@ const getRoutesJSON = function ({ routes, config }) {
             /"component": ("(.+?)")/g,
             (global, m1, m2) => `"component": ${m2.replace(/\^/g, '"')}`
         )
+        .replace(
+            /"name": "require(.+?)"/g,
+            (global, m1) => `"name": require${m1}`
+        )
+        .replace(
+            /"meta": "require(.+?)"/g,
+            (global, m1) => `"meta": require${m1}`
+        )
         .replace(/\\r\\n/g, '\r\n')
         .replace(/\\n/g, '\r\n');
 };
@@ -319,7 +331,7 @@ export default function (api) {
 
     api.addCoreExports(() => [
         {
-            specifiers: ['getRoutes', 'getRouter', 'getHistory', 'destroyRouter', 'defineRoute'],
+            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 1e3db781..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
@@ -61,6 +61,6 @@ export const destroyRouter = ()=>{
     history = null;
 }
 
-export const defineRoute = (param)=>{
+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..d6684f83 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';
 
+export const meta = 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.tsx b/packages/fes-template-h5/src/pages/test.tsx
index 2f95063a..4b21bb18 100644
--- a/packages/fes-template-h5/src/pages/test.tsx
+++ b/packages/fes-template-h5/src/pages/test.tsx
@@ -1,13 +1,15 @@
-import { defineRoute } from '@fesjs/fes';
+import { defineRouteMeta, useRoute } from '@fesjs/fes';
 import { defineComponent } from 'vue';
 
-defineRoute({
+export const meta = 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/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 };
+});