[Feat] Multi pages support routeName

packages/rax-compile-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-compile-config",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "rax app base plugins",
   "license": "BSD-3-Clause",
   "main": "src/index.js",
@@ -13,7 +13,6 @@
   },
   "homepage": "https://github.com/alibaba/rax#readme",
   "dependencies": {
-    "@babel/runtime": "^7.2.0",
     "@babel/plugin-proposal-class-properties": "7.2.0",
     "@babel/plugin-proposal-decorators": "7.2.0",
     "@babel/plugin-proposal-export-default-from": "7.2.0",
@@ -26,6 +25,7 @@
     "@babel/preset-env": "7.2.0",
     "@babel/preset-flow": "7.0.0",
     "@babel/preset-react": "7.0.0",
+    "@babel/runtime": "^7.2.0",
     "babel-merge": "^3.0.0",
     "babel-plugin-transform-jsx-class": "^0.1.2",
     "babel-plugin-transform-jsx-condition": "^0.1.0",
@@ -36,6 +36,7 @@
     "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
     "babel-runtime-jsx-plus": "^0.1.3",
     "chalk": "^2.4.2",
+    "fs-extra": "^8.1.0",
     "loader-utils": "^1.1.0",
     "rax-hot-loader": "^0.6.5",
     "strip-ansi": "^5.0.0"

packages/rax-compile-config/src/getRouteName.js

@@ -0,0 +1,27 @@
+const path = require('path');
+const fs = require('fs-extra');
+
+module.exports = (route, rootDir) => {
+  if (route.name) {
+    return route.name;
+  }
+
+  const appConfig = fs.readJsonSync(path.resolve(rootDir, 'src/app.json'));
+
+  const routeName = appConfig.routeName ? appConfig.routeName : 'path';
+
+  if (routeName === 'path') {
+    return route.component.replace(/\//g, '_');
+  }
+
+  if (routeName === 'pages') {
+    try {
+      // get Home from pages/Home/index or pages/Home
+      const name = route.component.match(/pages\/([^\/]*)/);
+      return name[1];
+    } catch (e) {
+      console.error('"routeName": "pages" mode request routes in /pages directory');
+      process.exit(1);
+    }
+  }
+};

packages/rax-compile-config/src/index.js

@@ -1,10 +1,12 @@
 const getBabelConfig = require('./getBabelConfig');
 const setBabelAlias = require('./setBabelAlias');
 const handleWebpackErr = require('./handleWebpackErr');
+const getRouteName = require('./getRouteName');
 
 const hmrClient = require.resolve('./hmr/webpackHotDevClient.entry');
 
 module.exports = {
+  getRouteName,
   getBabelConfig,
   setBabelAlias,
   hmrClient,

packages/rax-plugin-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-plugin-app",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "rax app base plugins",
   "license": "BSD-3-Clause",
   "main": "src/index.js",
@@ -33,14 +33,15 @@
     "less-loader": "^5.0.0",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.15",
+    "mime": "^2.4.4",
     "mini-css-extract-plugin": "^0.5.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss": "^7.0.17",
     "postcss-loader": "^3.0.0",
     "postcss-plugin-rpx2vw": "^0.0.1",
     "postcss-preset-env": "^6.6.0",
     "qrcode-terminal": "^0.12.0",
-    "rax-compile-config": "^0.1.2",
+    "rax-compile-config": "^0.1.3",
     "rax-hot-loader": "^0.6.5",
     "rax-server-renderer": "^1.0.0",
     "ts-loader": "^5.3.3",

packages/rax-plugin-app/src/config/getWebpackBase.js

@@ -35,11 +35,6 @@ module.exports = (context) => {
     }
   ]);
 
-  config.module.rule('css')
-    .test(/\.css?$/)
-    .use('css')
-      .loader(require.resolve('stylesheet-loader'));
-
   config.module.rule('jsx')
     .test(/\.(js|mjs|jsx)$/)
     .use('babel')

packages/rax-plugin-app/src/config/web/setDev.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const path = require('path');
+const mime = require('mime');
 
 module.exports = (config, context) => {
   const { rootDir, userConfig } = context;
@@ -13,15 +14,16 @@ module.exports = (config, context) => {
 
     app.get('/*', function(req, res) {
       const url = req.url.lastIndexOf('/') === req.url.length - 1 ? 'web/index.html' : req.url;
-      const filePath = path.join(rootDir, outputDir, url);
+      let filePath = path.join(rootDir, outputDir, url);
 
-      if (memFs.existsSync(filePath)) {
-        const outPut = memFs.readFileSync(filePath).toString();
-        res.send(outPut);
-      } else {
-        const outPut = memFs.readFileSync(htmlPath).toString();
-        res.send(outPut);
+      if (!memFs.existsSync(filePath)) {
+        filePath = htmlPath;
       }
+
+      const outPut = memFs.readFileSync(filePath).toString();
+      const mimeType = mime.getType(filePath);
+      res.setHeader('Content-Type', `${mimeType}; charset=utf8`);
+      res.send(outPut);
     });
   });
 };

packages/rax-plugin-app/src/config/weex/setBuild.js

@@ -1,4 +1,11 @@
 'use strict';
 
 module.exports = (config, context) => {
+  config.optimization
+    .minimizer('uglify')
+      .tap((args) => {
+        args[0].sourceMap = false;
+        return args;
+      })
+      .end();
 };

packages/rax-plugin-app/src/plugins/UniversalDocumentPlugin.js

@@ -14,19 +14,33 @@ module.exports = class UniversalDocumentPlugin {
       throw new Error('Please specify document file location with the path attribute');
     }
 
-    this.documentPath = options.path ? options.path : 'src/document/index.jsx';
+    // for internal weex publish
+    if (options.publicPath) {
+      this.publicPath = options.publicPath;
+    }
+    // for internal weex publish
+    if (options.insertScript) {
+      this.insertScript = options.insertScript;
+    }
+
+    this.documentPath = options.path;
   }
 
   apply(compiler) {
     compiler.hooks.emit.tapAsync('UniversalDocumentPlugin', (compilation, callback) => {
       const config = compilation.options;
-      const publicPath = config.output.publicPath;
+      const publicPath = this.publicPath ? this.publicPath : config.output.publicPath;
 
       const filename = path.resolve(config.context, this.documentPath);
       if (!existsSync(filename)) throw new Error(`File ${filename} is not exists, please check.`);
 
       // get document code
-      const fileContent = readFileSync(filename, 'utf-8');
+      let fileContent = readFileSync(filename, 'utf-8');
+      if (this.insertScript) {
+        const insertStr = `\n<script dangerouslySetInnerHTML={{__html: "${this.insertScript}"}} />`;
+        fileContent = fileContent.replace(/<body>{1}/, '<body>' + insertStr);
+      }
+
       const { code } = babel.transformSync(fileContent, babelConfig);
 
       // code export
@@ -37,11 +51,12 @@ module.exports = class UniversalDocumentPlugin {
       const entryObj = config.entry;
       Object.keys(entryObj).forEach(entry => {
         // get document html string
-        const pageSource = renderToString(createElement(documentElement, {
+        const pageSource = '<!DOCTYPE html>' + renderToString(createElement(documentElement, {
           publicPath,
           styles: [],
-          scripts: [`web/${entry}.js`],
+          scripts: [`web/${entry}.js`]
         }));
+
         // insert html file
         compilation.assets[`web/${entry}.html`] = new RawSource(pageSource);
       });

packages/rax-plugin-multi-pages/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-plugin-multi-pages",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "rax app base plugins",
   "license": "BSD-3-Clause",
   "main": "src/index.js",

packages/rax-plugin-multi-pages/src/getEntries.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs-extra');
+const { getRouteName } = require('rax-compile-config');
 
 module.exports = (context) => {
   const { rootDir } = context;
@@ -15,7 +16,7 @@ module.exports = (context) => {
   }
 
   return routes.map((route) => {
-    const entryName = route.name || route.component.replace(/\//g, '_');
+    const entryName = getRouteName(route, rootDir);
 
     return {
       entryName,

packages/rax-plugin-multi-pages/src/index.js

@@ -25,7 +25,7 @@ module.exports = ({ context, chainWebpack, onHook }) => {
         webConfig.devServer.set('before', (app, devServer) => {
           const memFs = devServer.compiler.compilers[0].outputFileSystem;
           entries.forEach(({ entryName }) => {
-            app.get(`/web/${entryName}`, function(req, res) {
+            app.get(`/pages/${entryName}`, function(req, res) {
               const htmlPath = path.resolve(rootDir, outputDir, `web/${entryName}.html`);
               const outPut = memFs.readFileSync(htmlPath).toString();
               res.send(outPut);
@@ -56,7 +56,7 @@ module.exports = ({ context, chainWebpack, onHook }) => {
     if (~targets.indexOf('web')) {
       console.log(chalk.green('[Web] Development server at:'));
       entries.forEach(({ entryName }) => {
-        console.log('   ', chalk.underline.white(`${url}/web/${entryName}`));
+        console.log('   ', chalk.underline.white(`${url}/pages/${entryName}`));
       });
       console.log();
     }

packages/rax-plugin-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-plugin-ssr",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "rax ssr plugins",
   "license": "BSD-3-Clause",
   "main": "src/index.js",

packages/rax-plugin-ssr/src/ssr/setDev.js

@@ -1,5 +1,6 @@
 'use strict';
 const path = require('path');
+const { getRouteName } = require('rax-compile-config');
 
 module.exports = (config, context) => {
   const { rootDir, userConfig } = context;
@@ -17,10 +18,10 @@ module.exports = (config, context) => {
   const routes = [];
 
   appJSON.routes.forEach((route) => {
-    const pathName = route.name || route.component.replace(/\//g, '_');
+    const pathName = getRouteName(route, rootDir);
     let routePath = route.path;
     if (isMultiPages) {
-      routePath = `/web/${pathName}`;
+      routePath = `/pages/${pathName}`;
     }
     routes.push({
       path: routePath,

packages/universal-app-shell-loader/src/index.js

@@ -5,7 +5,7 @@ const pathToRegexp = require('path-to-regexp');
 const getDepPath = require('./getDepPath');
 const getSourceCode = require('./getSourceCode');
 const babel = require('@babel/core');
-const { getBabelConfig } = require('rax-compile-config');
+const { getBabelConfig, getRouteName } = require('rax-compile-config');
 
 const babelConfig = getBabelConfig();
 
@@ -105,7 +105,7 @@ module.exports = function(content) {
     // Second level function to support rax-use-router rule autorun function type component.
     const dynamicImportComponent =
       `() =>
-      import(/* webpackChunkName: "${route.component.replace(/\//g, '_')}" */ '${getDepPath(route.component, this.rootContext)}')
+      import(/* webpackChunkName: "${getRouteName(route, this.rootContext)}" */ '${getDepPath(route.component, this.rootContext)}')
       .then((mod) => () => interopRequire(mod))
     `;
     const importComponent = `() => () => interopRequire(require('${getDepPath(route.component, this.rootContext)}'))`;