feat: support set html info by app.json

raxjs · Dec 11, 2020 · 6eb247d · 6eb247d
1 parent db8b69d
commit 6eb247d
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 30 deletions.
diff --git a/examples/with-rax/src/app.json b/examples/with-rax/src/app.json
@@ -6,7 +6,10 @@
     },
     {
       "path": "/about",
-      "source": "pages/About/index"
+      "source": "pages/About/index",
+      "window": {
+        "title": "About Page"
+      }
     }
   ],
   "window": {

diff --git a/examples/with-rax/src/document/index.jsx b/examples/with-rax/src/document/index.jsx
@@ -7,7 +7,7 @@ function Document(props) {
       <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>@ali/demo-app</title>
+        <title>{props.title}</title>
         <Style />
       </head>
       <body>

diff --git a/examples/with-rax/tsconfig.json b/examples/with-rax/tsconfig.json
@@ -1,20 +1,33 @@
 {
+  "compileOnSave": false,
+  "buildOnSave": false,
   "compilerOptions": {
-    "module": "esNext",
-    "target": "es2015",
+    "baseUrl": ".",
     "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
     "jsx": "preserve",
     "jsxFactory": "createElement",
     "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
     "sourceMap": true,
-    "alwaysStrict": true,
-    "baseUrl": ".",
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
     "paths": {
       "@/*": ["./src/*"],
-      "rax-app": [".rax/index.ts"],
-      "rax": ["node_modules/@types/rax"]
+      "rax-app": [".rax/index.ts"]
     }
   },
-  "include": ["src/*", ".rax"],
-  "exclude": ["build"]
+  "include": ["src", ".rax"],
+  "exclude": ["node_modules", "build", "public"]
 }
diff --git a/packages/platform-loader/package.json b/packages/platform-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rax-platform-loader",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "rax platform loader for helping remove other platform code",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",

diff --git a/packages/platform-loader/src/TraverseImport.js b/packages/platform-loader/src/TraverseImport.js
@@ -3,7 +3,7 @@ const babelParser = require('@babel/parser');
 const traverse = require('@babel/traverse').default;
 const types = require('@babel/types');
 const generate = require('@babel/generator').default;
-const { codeFrameColumns } = require('@babel/code-frame').default;
+const { codeFrameColumns } = require('@babel/code-frame');
 
 module.exports = function traverseImport(options, inputSource, sourceMapOption) {
   let specified; // Collector import specifiers

diff --git a/packages/plugin-rax-app/src/index.js b/packages/plugin-rax-app/src/index.js
@@ -8,11 +8,13 @@ const setBuild = require('./setBuild');
 const customConfigs = require('./config/user.config');
 const customOptionConfig = require('./config/options.config');
 const modifyTargets = require('./utils/modifyTargets');
+const setStaicConfig = require('./utils/setStaticConfig');
 
 module.exports = (api) => {
   const { onGetWebpackConfig, context, setValue } = api;
   const { command, rootDir } = context;
   setValue(GET_RAX_APP_WEBPACK_CONFIG, getBase);
+  setStaicConfig(api);
   // register cli option
   applyCliOption(api, { customOptionConfig });
 

diff --git a/packages/plugin-rax-app/src/utils/setStaticConfig.js b/packages/plugin-rax-app/src/utils/setStaticConfig.js
@@ -0,0 +1,13 @@
+const path = require('path');
+const fs = require('fs-extra');
+
+module.exports = (api) => {
+  const { setValue, context } = api;
+  const { rootDir } = context;
+  try {
+    const appJSONContent = fs.readFileSync(path.join(rootDir, 'src/app.json'));
+    setValue('staticConfig', JSON.parse(appJSONContent));
+  } catch (err) {
+    throw new Error('There need app.json in root dir.');
+  }
+};
diff --git a/packages/plugin-rax-web/src/DocumentPlugin/index.js b/packages/plugin-rax-web/src/DocumentPlugin/index.js
@@ -48,6 +48,7 @@ module.exports = class DocumentPlugin {
 
     // Merge the page info from options
     if (options.pages) {
+      console.log('options.pages', options.pages);
       options.pages.forEach((page) => {
         const pageInfo = pages[page.entryName];
         if (pageInfo) {
@@ -73,12 +74,19 @@ module.exports = class DocumentPlugin {
       const pageInfo = pages[entryName];
       const { tempFile, source, pagePath } = pageInfo;
 
-      const absolutePagePath = options.staticExport && source ? getAbsoluteFilePath(rootDir, path.join('src', source)) : '';
+      const absolutePagePath =
+        options.staticExport && source ? getAbsoluteFilePath(rootDir, path.join('src', source)) : '';
+
+      const targetPage = source && options.staticConfig.routes.find((route) => route.source === source);
+      const htmlInfo = {
+        ...options.htmlInfo,
+        title: (targetPage && targetPage.window && targetPage.window.title) || options.htmlInfo.title,
+      };
       const query = {
         absoluteDocumentPath,
         absolutePagePath,
         pagePath,
-        doctype: options.doctype,
+        htmlInfo,
       };
 
       if (manifestString) {
@@ -212,7 +220,7 @@ async function generateHtml(compilation, options) {
 function getPathInfoFromFileName(fileName) {
   const paths = fileName.split('/');
   paths.pop();
-  return paths.length ? `${paths.join('/') }/` : '';
+  return paths.length ? `${paths.join('/')}/` : '';
 }
 
 /**

diff --git a/packages/plugin-rax-web/src/DocumentPlugin/loader.js b/packages/plugin-rax-web/src/DocumentPlugin/loader.js
@@ -20,37 +20,27 @@ module.exports = function () {
   const query = typeof this.query === 'string' ? qs.parse(this.query.substr(1)) : this.query;
   const {
     absoluteDocumentPath,
-    absoluteShellPath,
     absolutePagePath,
     pagePath,
-    doctype,
+    htmlInfo,
     manifests,
   } = query;
+  const { doctype, title } = htmlInfo;
 
-  const formatedShellPath = absoluteShellPath ? formatPath(absoluteShellPath) : null;
   const formatedPagePath = absolutePagePath ? formatPath(absolutePagePath) : null;
 
-  const shellStr = formatedShellPath && fs.existsSync(formatedShellPath) ? `import Shell from '${formatedShellPath}';` : 'const Shell = null;';
   const pageStr = formatedPagePath && fs.existsSync(formatedPagePath) ? `import Page from '${formatedPagePath}';` : 'const Page = null;';
   const doctypeStr = doctype === null || doctype === '' ? '' : `${doctype || '<!DOCTYPE html>'}`;
 
   const source = `
     import { createElement } from 'rax';
     import renderer from 'rax-server-renderer';
     import Document from '${formatPath(absoluteDocumentPath)}';
-    ${shellStr}
     ${pageStr}
 
     function renderToHTML(assets) {
       let contentElement;
-
-      if (Shell) {
-        if (Page) {
-          contentElement = createElement(Shell, {}, createElement(Page, {}));
-        } else {
-          contentElement = createElement(Shell, {});
-        }
-      } else if (Page) {
+      if (Page) {
         contentElement = createElement(Page, {})
       }
 
@@ -71,7 +61,9 @@ module.exports = function () {
       };
 
       DocumentContextProvider.prototype.render = function() {
-        return createElement(Document, {});
+        return createElement(Document, {
+          title: '${title}'
+        });
       };
 
       const DocumentContextProviderElement = createElement(DocumentContextProvider);

diff --git a/packages/plugin-rax-web/src/index.js b/packages/plugin-rax-web/src/index.js
@@ -35,6 +35,7 @@ module.exports = (api) => {
     const { rootDir, command } = context;
     const { outputDir } = userConfig;
     const webConfig = userConfig.web || {};
+    const staticConfig = getValue('staticConfig');
 
     // Set output dir
     const outputPath = path.resolve(rootDir, outputDir, target);
@@ -68,9 +69,13 @@ module.exports = (api) => {
             path: '/',
           },
         ],
-        doctype: webConfig.doctype,
         staticExport: webConfig.staticExport,
         webpackConfig,
+        staticConfig,
+        htmlInfo: {
+          title: staticConfig.window && staticConfig.window.title,
+          doctype: webConfig.doctype,
+        },
       },
     ]);
     if (webConfig.mpa || webConfig.pha) {