Merge pull request #1014 from raxjs/feat/pha_qyy

answershuto · web-flow · commit b819b27272c3 · 2022-08-30T13:48:14.000+08:00
feat: support html template for tabbar
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
     steps:
     - uses: actions/checkout@v2
     - name: Set branch name
diff --git a/__tests__/build-cases/with-rax-pha.test.ts b/__tests__/build-cases/with-rax-pha.test.ts
@@ -8,7 +8,9 @@ buildFixture(example, true);
 
 describe('should build manifest.json: ', () => {
   test('manifest.json content', async () => {
+
     const manifestJSON = fs.readJSONSync(path.join(process.cwd(), 'examples', example, 'build/web/manifest.json'));
+
     expect(manifestJSON).toEqual({
       app_worker: { url: 'pha-worker.js' },
       links: [],
@@ -31,7 +33,35 @@ describe('should build manifest.json: ', () => {
       scripts: [
         '<script src="https://g.alicdn.com/mtb/lib-promise/3.1.3/polyfillB.js"  crossorigin="anonymous" ></script>',
       ],
-      tab_bar: { custom: true, list: ['home', 'about-single'], source: '/components/CustomTabBar/index' },
+      tab_bar: {
+        custom: true,
+        list: ['home', 'about-single'],
+        source: '/components/CustomTabBar/index',
+        html: '\n' +
+          '  <!DOCTYPE html>\n' +
+          '  <html>\n' +
+          '    <head>\n' +
+          '      <meta charset="utf-8" />\n' +
+          '      \n' +
+          '      <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />\n' +
+          '      <meta name="release-info" content="version=12,app-id=123" />\n' +
+          '\n' +
+          '      <title>PHA Demo</title>\n' +
+          '      \n' +
+          '      <link rel="stylesheet" href="/customtabbar.css" />\n' +
+          '\n' +
+          '    </head>\n' +
+          '    <body >\n' +
+          '      \n' +
+          '      <div id="root"></div>\n' +
+          '      <script src="https://g.alicdn.com/mtb/lib-promise/3.1.3/polyfillB.js"  crossorigin="anonymous" ></script>\n' +
+          '\n' +
+          '      \n' +
+          '      <script crossorigin="anonymous" type="application/javascript" src="/customtabbar.js"></script>\n' +
+          '\n' +
+          '    </body>\n' +
+          '  </html>\n'
+      },
       title: 'PHA Demo',
     });
   });
diff --git a/packages/plugin-rax-pha/package.json b/packages/plugin-rax-pha/package.json
@@ -1,6 +1,6 @@
 {
   "name": "build-plugin-rax-pha",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Rax PHA plugins",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",
@@ -20,4 +20,4 @@
   "devDependencies": {
     "webpack": ">=4.0.0"
   }
-}
+}
diff --git a/packages/plugin-rax-pha/src/manifestHelpers.js b/packages/plugin-rax-pha/src/manifestHelpers.js
@@ -60,6 +60,7 @@ function transformAppConfig(appConfig, isRoot = true, parentKey) {
       data[transformKey] = value;
     }
   }
+
   return data;
 }
 
diff --git a/packages/plugin-rax-pha/src/plugins/AppToManifestPlugin.js b/packages/plugin-rax-pha/src/plugins/AppToManifestPlugin.js
@@ -44,6 +44,7 @@ module.exports = class {
     }, ({ compilation, callback, assets }) => {
       const assetNames = Object.keys(assets);
       const appConfig = getValue('staticConfig');
+
       const { scripts, metas, links } = applyMethod('rax.getInjectedHTML');
       let manifestJSON = transformAppConfig(appConfig);
       const devUrls = [];
@@ -72,8 +73,14 @@ module.exports = class {
         manifestJSON.scripts,
       ) || [];
 
-      // if has tabBar, do not generate multiple manifest.json
       if (manifestJSON.tab_bar) {
+        // Try save html string of custom tabbar to html of tab_bar.
+        const { document } = applyMethod('rax.getDocument', { name: 'customtabbar' }) || {};
+        if (document && !manifestJSON.html) {
+          manifestJSON.tab_bar.html = document;
+        }
+
+        // If has tabBar, do not generate multiple manifest.json
         manifestJSON = setRealUrlToManifest(
           {
             urlPrefix: pagePrefix,
@@ -104,14 +111,15 @@ module.exports = class {
           })
           .forEach(({ source, entryName, __frameIndex }) => {
             let copyManifestJSON = cloneDeep(manifestJSON);
-            copyManifestJSON.pages = copyManifestJSON.pages.filter((page) => {
-              // has frames
-              if (__frameIndex === 0) {
-                return !!(page.frames && page.frames[0] && page.frames[0].source === source);
-              } else {
-                return page.source === source;
+
+            // Move current page to pages[0].
+            for (let i = 0; i < copyManifestJSON.pages.length; i++) {
+              const page = copyManifestJSON.pages[i];
+              if (page.source === source || (__frameIndex === 0 && (page.frames && page.frames[0] && page.frames[0].source === source))) {
+                copyManifestJSON.pages.unshift(copyManifestJSON.pages.splice(i, 1)[0]);
+                break;
               }
-            });
+            }
 
             const { pages } = copyManifestJSON;
             // take out the page data prefetch and assign it to the root node

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "build-plugin-rax-pha",`
`3`		`- "version": "2.1.3",`
	`3`	`+ "version": "2.1.4",`
`4`	`4`	`"description": "Rax PHA plugins",`
`5`	`5`	`"license": "BSD-3-Clause",`
`6`	`6`	`"main": "lib/index.js",`
`@@ -20,4 +20,4 @@`
`20`	`20`	`"devDependencies": {`
`21`	`21`	`"webpack": ">=4.0.0"`
`22`	`22`	`}`
`23`		`-}`
	`23`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,7 @@ function transformAppConfig(appConfig, isRoot = true, parentKey) {`
`60`	`60`	`data[transformKey] = value;`
`61`	`61`	`}`
`62`	`62`	`}`
	`63`	`+`
`63`	`64`	`return data;`
`64`	`65`	`}`
`65`	`66`