feat: pha cross slide

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

@@ -4,24 +4,36 @@ const openBrowser = require('react-dev-utils/openBrowser');
 const qrcode = require('qrcode-terminal');
 const path = require('path');
 const fs = require('fs-extra');
+const chokidar = require('chokidar');
 
 const logWebpackConfig = require('./utils/logWebpackConfig');
-const {
-  MINIAPP,
-  WEB,
-  WECHAT_MINIPROGRAM,
-  BYTEDANCE_MICROAPP,
-  WEEX,
-  KRAKEN,
-  DEV_URL_PREFIX,
-} = require('./constants');
+const { MINIAPP, WEB, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, WEEX, KRAKEN, DEV_URL_PREFIX } = require('./constants');
 const generateTempFile = require('./utils/generateTempFile');
 
 const highlightPrint = chalk.hex('#F4AF3D');
 
+function watchAppJson(log) {
+  const watcher = chokidar.watch(path.resolve('app.json'), {
+    ignoreInitial: true,
+  });
+
+  watcher.on('change', () => {
+    console.log('\n');
+    log.info('app.json has been changed');
+    log.info('restart dev server');
+    // add process env for mark restart dev process
+    process.send('RESTART_DEV');
+  });
+
+  watcher.on('error', (error) => {
+    log.error('fail to watch file', error);
+    process.exit(1);
+  });
+}
+
 module.exports = function (api) {
   // eslint-disable-next-line global-require
-  const { context, onHook, getValue } = api;
+  const { context, onHook, getValue, log } = api;
   const { commandArgs, rootDir } = context;
   let webEntryKeys = [];
   let weexEntryKeys = [];
@@ -31,6 +43,7 @@ module.exports = function (api) {
   let krakenMpa = false;
   let isFirstCompile = true;
   let pha = false;
+  watchAppJson(log);
   const getWebpackInfo = (configs, configName) => {
     const taskConfig = configs.find((webpackConfig) => webpackConfig.name === configName);
     if (!taskConfig) {
@@ -108,51 +121,37 @@ module.exports = function (api) {
         const miniappOutputPath = path.resolve(rootDir, outputDir, MINIAPP);
         devInfo.urls.miniapp = [miniappOutputPath];
         console.log(
-          highlightPrint(
-            '  [Alibaba Miniapp] Use ali miniapp developer tools to open the following folder:',
-          ),
-        );
-        console.log(
-          '   ',
-          chalk.underline.white(miniappOutputPath),
+          highlightPrint('  [Alibaba Miniapp] Use ali miniapp developer tools to open the following folder:'),
         );
+        console.log('   ', chalk.underline.white(miniappOutputPath));
         console.log();
       }
 
       if (targets.includes(WECHAT_MINIPROGRAM)) {
         const wechatOutputPath = path.resolve(rootDir, outputDir, WECHAT_MINIPROGRAM);
         devInfo.urls.wechat = [wechatOutputPath];
         console.log(
-          highlightPrint(
-            '  [WeChat MiniProgram] Use wechat miniprogram developer tools to open the following folder:',
-          ),
-        );
-        console.log(
-          '   ',
-          chalk.underline.white(wechatOutputPath),
+          highlightPrint('  [WeChat MiniProgram] Use wechat miniprogram developer tools to open the following folder:'),
         );
+        console.log('   ', chalk.underline.white(wechatOutputPath));
         console.log();
       }
 
       if (targets.includes(BYTEDANCE_MICROAPP)) {
         const bytedanceOutputPath = path.resolve(rootDir, outputDir, BYTEDANCE_MICROAPP);
         devInfo.urls.bytedance = [bytedanceOutputPath];
         console.log(
-          highlightPrint(
-            '  [Bytedance Microapp] Use bytedance microapp developer tools to open the following folder:',
-          ),
-        );
-        console.log(
-          '   ',
-          chalk.underline.white(bytedanceOutputPath),
+          highlightPrint('  [Bytedance Microapp] Use bytedance microapp developer tools to open the following folder:'),
         );
+        console.log('   ', chalk.underline.white(bytedanceOutputPath));
         console.log();
       }
       if (targets.includes(WEB)) {
         devInfo.urls.web = [];
         console.log(highlightPrint('  [Web] Development server at: '));
         // do not open browser when restart dev
-        const shouldOpenBrowser = !commandArgs.disableOpen && !process.env.RESTART_DEV && isFirstCompile && showLocalUrl;
+        const shouldOpenBrowser =
+          !commandArgs.disableOpen && !process.env.RESTART_DEV && isFirstCompile && showLocalUrl;
         isFirstCompile = false;
         if (webEntryKeys.length > 0) {
           let openEntries = [];

packages/plugin-rax-pha/src/__tests__/manifestHelper.js

@@ -1,6 +1,6 @@
 
 
-const { transformAppConfig, getPageManifestByPath, setRealUrlToManifest } = require('../manifestHelpers');
+const { transformAppConfig, setRealUrlToManifest } = require('../manifestHelpers');
 const cloneDeep = require('lodash.clonedeep');
 
 describe('transformAppConfig', () => {
@@ -125,48 +125,6 @@ describe('getPageManifestByPath', () => {
       },
     ],
   };
-
-  it('should get empty object when no path', () => {
-    const manifest = getPageManifestByPath({});
-
-    expect(manifest).toMatchObject({});
-  });
-
-  it('should get first page manifest', () => {
-    const manifest = getPageManifestByPath({
-      decamelizeAppConfig: config,
-    });
-
-    expect(manifest).toMatchObject({
-      path: '/',
-      name: 'home',
-      data_prefetches: [
-        { url: '/a.com', data: { id: 123 } },
-      ],
-    });
-  });
-
-  it('should generate nsr script', () => {
-    const manifest = getPageManifestByPath({
-      decamelizeAppConfig: config,
-      nsr: true,
-    });
-  });
-
-  it('should delete fields when frame page', () => {
-    const copyConfig = { ...config };
-    copyConfig.pages[0].frame = true;
-    copyConfig.pages[0].tab_bar = {
-      background_color: '#ff0000',
-    };
-
-    const manifest = getPageManifestByPath({
-      decamelizeAppConfig: copyConfig,
-    });
-
-    expect(manifest.pages.length).toBe(2);
-    expect(manifest.tab_bar).toMatchObject({ background_color: '#ff0000' });
-  });
 });
 
 describe('setRealUrlToManifest', () => {

packages/plugin-rax-pha/src/manifestHelpers.js

@@ -14,6 +14,7 @@ const retainKeys = [
   'icons',
   'appWorker',
   'window',
+  'pageHeader',
   'tabHeader',
   'tabBar',
   'pages',
@@ -32,13 +33,18 @@ function transformAppConfig(appConfig, isRoot = true) {
   if (isRoot && appConfig.routes) {
     appConfig.pages = appConfig.routes;
   }
-  for (const key in appConfig) {
+  for (let key in appConfig) {
     // filter not need key
     if (isRoot && retainKeys.indexOf(key) === -1) {
       continue;
     }
-    const transformKey = decamelize(key);
     const value = appConfig[key];
+
+    // compatible tabHeader
+    if (key === 'pageHeader') {
+      key = 'tabHeader';
+    }
+    const transformKey = decamelize(key);
     if (key === 'window') {
       Object.assign(data, transformAppConfig(value, false));
     } else if (typeof value === 'string' || typeof value === 'number') {
@@ -56,40 +62,9 @@ function transformAppConfig(appConfig, isRoot = true) {
       data[transformKey] = value;
     }
   }
-
   return data;
 }
 
-// get every page manifest
-function getPageManifestByPath(options) {
-  const { path = '/', decamelizeAppConfig = {} } = options;
-  let manifestData = {};
-  const { pages = [] } = decamelizeAppConfig;
-  const page = pages.find((item) => {
-    return item.path === path;
-  });
-
-  if (!page) {
-    return manifestData;
-  }
-
-  manifestData = {
-    ...decamelizeAppConfig,
-    ...page,
-  };
-
-  // if current page is not frame page
-  // delete tabbar/tabHeader/pages
-  if (!page.frame) {
-    delete manifestData.tab_bar;
-    delete manifestData.tab_header;
-    delete manifestData.pages;
-  }
-  delete manifestData.source;
-
-  return manifestData;
-}
-
 /*
  * change page info
  */
@@ -166,6 +141,5 @@ function setRealUrlToManifest(options, manifest) {
 
 module.exports = {
   transformAppConfig,
-  getPageManifestByPath,
   setRealUrlToManifest,
 };

packages/plugin-rax-pha/src/plugins/AppToManifestPlugin.js

@@ -57,7 +57,7 @@ module.exports = class {
         inlineStyle,
         api,
       }, manifestJSON);
-      compilation.assets['manifest.json'] = new RawSource(JSON.stringify(manifestJSON));
+      compilation.assets['manifest.json'] = new RawSource(JSON.stringify(manifestJSON, null, 2));
       callback();
     });
   }

packages/plugin-rax-store/src/generator.ts

@@ -54,6 +54,7 @@ export default class Generator {
     const srcPath = path.join(this.rootDir, this.srcDir);
 
     pageEntries.forEach((pageEntry) => {
+      console.log('pageEntry=====>', pageEntry);
       const pageName = getRaxPageName(pageEntry);
       const pagePath = path.join('pages', pageName);
       const pageNameDir = path.join(this.rootDir, this.srcDir, pagePath);

packages/plugin-rax-store/src/utils/getPath.ts

@@ -32,7 +32,22 @@ export function getRaxPagesPath(rootDir) {
   const absoluteAppJSONPath = path.join(rootDir, 'src/app.json');
   const appJSON = fse.readJSONSync(absoluteAppJSONPath);
   const { routes } = appJSON;
-  const pagesPath = routes.map((route) => route.source);
+  const pagesPath = [];
+  routes.forEach(({ source, frames, pageHeader }) => {
+    if (source) {
+      pagesPath.push(source);
+    }
+    if (pageHeader && pageHeader.source) {
+      pagesPath.push(pageHeader.source);
+    }
+    if (Array.isArray(frames)) {
+      frames.forEach(({ source: frameSource }) => {
+        if (frameSource) {
+          pagesPath.push(frameSource);
+        }
+      });
+    }
+  });
 
   return pagesPath;
 }

packages/plugin-rax-store/src/utils/modifyRoutes.ts

@@ -3,40 +3,54 @@ import * as fse from 'fs-extra';
 import { checkExportDefaultDeclarationExists } from '@builder/app-helpers';
 import { getPageStorePath } from './getPath';
 
+function modifyRoute(route, ...args) {
+  const [tempPath, filename, srcPath, projectType, mpa = false] = args;
+  let pageSource = route.source;
+  if (mpa) {
+    const exportDefaultDeclarationExists = checkExportDefaultDeclarationExists(path.join(srcPath, pageSource));
+    if (!exportDefaultDeclarationExists) {
+      return route;
+    }
+  }
+
+  const dir = path.dirname(pageSource);
+  const pageName = path.parse(dir).name;
+  const pageStorePath = getPageStorePath({ srcPath, projectType, pageName });
+  if (!fse.pathExistsSync(pageStorePath)) {
+    return route;
+  }
+
+  if (/^\/?pages/.test(pageSource) && !/app$/.test(pageSource)) {
+    if (/index$/.test(pageSource)) {
+      pageSource = pageSource.replace(/index$/, filename);
+    } else {
+      pageSource = path.join(pageSource, filename);
+    }
+
+    return {
+      ...route,
+      pageSource: path.join(tempPath, pageSource),
+    };
+  }
+  return route;
+}
+
 /**
  * @param routes the routes in staticConfig
  * @param tempPath the path of .rax/ dir
  * @param filename the filename to be replaced e.g.: /example/.rax/pages/Home/index -> /example/.rax/pages/Home/Page.tsx
+ * @param srcPath the project source path  e.g.: /Users/project/src
+ * @param projectType typescript or javascript
+ * @param mpa wheather MPA
  */
-export default function modifyRoutes(routes, tempPath, filename, srcPath, projectType, mpa = false) {
+export default function modifyRoutes(routes, ...args) {
   return routes.map((route) => {
-    let pageSource = route.source;
-    if (mpa) {
-      const exportDefaultDeclarationExists = checkExportDefaultDeclarationExists(path.join(srcPath, pageSource));
-      if (!exportDefaultDeclarationExists) {
-        return route;
-      }
+    if (route.tabHeader) {
+      route.tabHeader = modifyRoute(route.tabHeader, ...args);
     }
-
-    const dir = path.dirname(pageSource);
-    const pageName = path.parse(dir).name;
-    const pageStorePath = getPageStorePath({ srcPath, projectType, pageName });
-    if (!fse.pathExistsSync(pageStorePath)) {
-      return route;
+    if (route.frames) {
+      route.frames = modifyRoutes(route.frames, ...args);
     }
-
-    if (/^\/?pages/.test(pageSource) && !/app$/.test(pageSource)) {
-      if (/index$/.test(pageSource)) {
-        pageSource = pageSource.replace(/index$/, filename);
-      } else {
-        pageSource = path.join(pageSource, filename);
-      }
-
-      return {
-        ...route,
-        pageSource: path.join(tempPath, pageSource),
-      };
-    }
-    return route;
+    return modifyRoute(route, ...args);
   });
 }

packages/plugin-ssr/src/ssr/entryPlugin.ts

@@ -28,7 +28,7 @@ export default class EntryPlugin {
     } = api;
     const { publicPath } = compiler.options.output;
     const staticConfig = getValue(STATIC_CONFIG);
-    const pageConfig = getPageConfig(staticConfig);
+    const pageConfig = getPageConfig(api, staticConfig);
 
     let query: ILoaderQuery = {
       tempPath: getValue(TEMP_PATH),