raxjs · SoloJiang · Sep 27, 2021 · Sep 27, 2021 · Oct 27, 2021 · Nov 1, 2021
diff --git a/examples/with-rax-mpa/build.json b/examples/with-rax-mpa/build.json
@@ -1,14 +1,9 @@
 {
-  "targets": ["web", "weex", "kraken"],
-  "weex": {
+  "targets": ["harmony"],
+  "harmony": {
     "mpa": true
   },
-  "kraken": {
-    "mpa": true
-  },
-  "web": {
-    "mpa": true
-  },
-  "swc": true,
+  "minify": false,
+  "compileDependencies": [],
   "webpack5": true
 }
diff --git a/examples/with-rax-mpa/src/app-worker.ts b/examples/with-rax-mpa/src/app-worker.ts
@@ -0,0 +1,5 @@
+export default {
+  onCreate() {
+    console.info('app created');
+  }
+}
diff --git a/examples/with-rax-mpa/src/app.json b/examples/with-rax-mpa/src/app.json
@@ -4,10 +4,6 @@
       "name": "home",
       "source": "pages/Home/index",
       "spm": "b456"
-    },
-    {
-      "name": "about",
-      "source": "pages/About/app"
     }
   ],
   "spm": "a123",

diff --git a/examples/with-rax-mpa/src/components/Logo/index.tsx b/examples/with-rax-mpa/src/components/Logo/index.tsx
@@ -1,17 +1,13 @@
 import { createElement, PureComponent } from 'rax';
-import Image from 'rax-image';
 
 import './index.css';
 
 class Logo extends PureComponent {
   render() {
-    const source = {
-      uri: `${process.env.PUBLIC_URL}/rax.png`,
-    };
     return (
-      <Image
+      <image
         className="logo"
-        source={source}
+        src={'https://img.alicdn.com/imgextra/i4/O1CN0145ZaIM1QEObAAbKa1_!!6000000001944-2-tps-1701-1535.png'}
       />
     );
   }

diff --git a/examples/with-rax-mpa/src/pages/About/app.json b/examples/with-rax-mpa/src/pages/About/app.json
diff --git a/examples/with-rax-mpa/src/pages/About/app.ts b/examples/with-rax-mpa/src/pages/About/app.ts
diff --git a/examples/with-rax-mpa/src/pages/About/index.css b/examples/with-rax-mpa/src/pages/About/index.css
diff --git a/examples/with-rax-mpa/src/pages/About/index.tsx b/examples/with-rax-mpa/src/pages/About/index.tsx
diff --git a/examples/with-rax-mpa/src/pages/Home/index.css b/examples/with-rax-mpa/src/pages/Home/index.css
@@ -1,16 +1,24 @@
 .home {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  align-content: flex-start;
   align-items: center;
   margin-top: 200rpx;
+  width: 100%;
 }
 
 .title {
   font-size: 35rpx;
   font-weight: bold;
   margin: 20rpx 0;
+  display: block;
 }
 
 .info {
   font-size: 36rpx;
   margin: 8rpx 0;
   color: #555;
+  display: block;
 }
diff --git a/examples/with-rax-mpa/src/pages/Home/index.tsx b/examples/with-rax-mpa/src/pages/Home/index.tsx
@@ -1,16 +1,14 @@
 import { createElement } from 'rax';
-import View from 'rax-view';
-import Text from 'rax-text';
 import Logo from '@/components/Logo';
 
 import './index.css';
 
 export default function Home(props) {
   return (
-    <View className="home">
-      <Logo />
-      <Text className="title">Welcome to Your Rax App</Text>
-      <Text className="info">More information about Rax</Text>
-    </View>
+    <div className="home">
+      <Logo/>
+      <text className="title">Welcome to Your Rax App</text>
+      <text className="info">More information about Rax</text>
+    </div>
   );
 }
diff --git a/packages/platform-loader/src/TraverseImport.js b/packages/platform-loader/src/TraverseImport.js
@@ -20,6 +20,7 @@ module.exports = function traverseImport(options, inputSource, sourceMapOption)
     'bytedance-microapp': ['isByteDanceMicroApp'],
     'kuaishou-miniprogram': ['isKuaiShouMiniProgram'],
     'baidu-smartprogram': ['isBaiduSmartProgram'],
+    harmony: ['isHarmony'],
   };
 
   /**

diff --git a/packages/plugin-rax-app/src/constants.js b/packages/plugin-rax-app/src/constants.js
@@ -6,6 +6,7 @@ module.exports = {
   SSR: 'ssr',
   WEEX: 'weex',
   KRAKEN: 'kraken',
+  HARMONY: 'harmony',
   MINIAPP,
   WECHAT_MINIPROGRAM,
   BYTEDANCE_MICROAPP,

diff --git a/packages/plugin-rax-app/src/launch/setupBuild.ts b/packages/plugin-rax-app/src/launch/setupBuild.ts
@@ -9,6 +9,7 @@ import {
   WEB,
   WEEX,
   KRAKEN,
+  HARMONY,
 } from '../constants';
 
 const highlightPrint = chalk.hex('#F4AF3D');
@@ -74,6 +75,15 @@ export default (api) => {
           console.log();
         }
       });
+
+      if (targets.includes(HARMONY)) {
+        console.log(highlightPrint('[HARMONY] Bundle at:'));
+        console.log(
+          '   ',
+          chalk.underline.white(path.resolve(rootDir, outputDir, HARMONY)),
+        );
+        console.log();
+      }
     }
   });
 };

diff --git a/packages/plugin-rax-app/src/launch/setupDev.ts b/packages/plugin-rax-app/src/launch/setupDev.ts
@@ -8,7 +8,7 @@ import chokidar from 'chokidar';
 import { platformMap } from 'miniapp-builder-shared';
 
 import logWebpackConfig from '../utils/logWebpackConfig';
-import { MINIAPP_PLATFORMS, MINIAPP, WEB, WEEX, KRAKEN, DEV_URL_PREFIX } from '../constants';
+import { MINIAPP_PLATFORMS, MINIAPP, WEB, WEEX, KRAKEN, DEV_URL_PREFIX, HARMONY } from '../constants';
 import generateTempFile from '../utils/generateTempFile';
 
 const highlightPrint = chalk.hex('#F4AF3D');
@@ -20,6 +20,7 @@ interface IDevInfo {
     weex?: string[];
     kraken?: string[];
     pha?: string[];
+    harmony?: string[];
   };
   compiledTime?: number;
   publicPath?: string;
@@ -51,9 +52,11 @@ export default function (api) {
   let webEntryKeys = [];
   let weexEntryKeys = [];
   let krakenEntryKeys = [];
+  let harmonyEntryKeys = [];
   let webMpa = false;
   let weexMpa = false;
   let krakenMpa = false;
+  let harmonyMpa = false;
   let isFirstCompile = true;
   let pha = false;
   watchAppJson(rootDir, log);
@@ -78,16 +81,19 @@ export default function (api) {
     const webWebpackInfo = getWebpackInfo(configs, 'web');
     const weexWebpackInfo = getWebpackInfo(configs, 'weex');
     const krakenWebpackInfo = getWebpackInfo(configs, 'kraken');
+    const harmonyWebpackInfo = getWebpackInfo(configs, 'harmony');
 
     devInfo.publicPath = webWebpackInfo.publicPath;
 
     webEntryKeys = Object.keys(webWebpackInfo.entry);
     weexEntryKeys = Object.keys(weexWebpackInfo.entry);
     krakenEntryKeys = Object.keys(krakenWebpackInfo.entry);
+    harmonyEntryKeys = Object.keys(harmonyWebpackInfo.entry);
 
     webMpa = userConfig.web && userConfig.web.mpa;
     weexMpa = userConfig.weex && userConfig.weex.mpa;
     krakenMpa = userConfig.kraken && userConfig.kraken.mpa;
+    harmonyMpa = userConfig.harmony && userConfig.harmony.mpa;
     pha = userConfig.web && userConfig.web.pha;
 
     // Remove outputDir when start devServer
@@ -212,6 +218,18 @@ export default function (api) {
         });
       }
 
+      if (targets.includes(HARMONY)) {
+        devInfo.urls.harmony = [];
+        // Use Weex App to scan ip address (mobile phone can't visit localhost).
+        console.log(highlightPrint('  [Harmony] Development server at: '));
+        weexEntryKeys.forEach((entryKey) => {
+          const harmonyUrl = `${urlPrefix}/harmony/${harmonyMpa ? entryKey : 'index'}.js`;
+          devInfo.urls.weex.push(harmonyUrl);
+          console.log(`  ${chalk.underline.white(harmonyUrl)}`);
+          console.log();
+        });
+      }
+
       /**
        * @TODO: Delete it first, and then open it after the PHA supports it
        */

diff --git a/packages/plugin-rax-app/src/userConfig/atoms/inlineStyle.js b/packages/plugin-rax-app/src/userConfig/atoms/inlineStyle.js
@@ -1,4 +1,4 @@
-const { WEB, WEEX, DOCUMENT, SSR, KRAKEN, MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM, KUAISHOU_MINIPROGRAM } = require('../../constants');
+const { WEB, WEEX, DOCUMENT, SSR, KRAKEN, MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM, KUAISHOU_MINIPROGRAM, HARMONY } = require('../../constants');
 const { createCSSRule } = require('rax-webpack-config');
 const { isWebpack4 } = require('@builder/compat-webpack4');
 const getPostCssPlugin = require('../../getPostCssPlugin');
@@ -8,7 +8,9 @@ const webStandardList = [
 ];
 
 const inlineStandardList = [
-  WEEX, KRAKEN,
+  WEEX,
+  KRAKEN,
+  HARMONY,
 ];
 
 const miniappStandardList = [

diff --git a/packages/plugin-rax-harmony/CHANGELOG.md b/packages/plugin-rax-harmony/CHANGELOG.md
@@ -0,0 +1,3 @@
+# Changelog
+
+## v1.0.0
diff --git a/packages/plugin-rax-harmony/package.json b/packages/plugin-rax-harmony/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "build-plugin-rax-harmony",
+  "version": "1.0.0",
+  "description": "rax harmony app plugin",
+  "main": "lib/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": [
+    "lib",
+    "!lib/**/*.map"
+  ],
+  "keywords": [
+    "plugin",
+    "rax"
+  ],
+  "author": "Rax Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "build-scripts": "^1.0.0",
+    "rax": "^1.0.0"
+  },
+  "dependencies": {
+    "@builder/mpa-config": "^4.0.0",
+    "fs-extra": "^9.0.1",
+    "@builder/app-helpers": "^2.1.0",
+    "react-dev-utils": "^11.0.0",
+    "loader-utils": "^2.0.0",
+    "@builder/compat-webpack4": "^1.0.0"
+  }
+}
diff --git a/packages/plugin-rax-harmony/src/BundleShellPlugin/LiteShell.ts b/packages/plugin-rax-harmony/src/BundleShellPlugin/LiteShell.ts
@@ -0,0 +1,17 @@
+import BaseShell from './Shell';
+
+const requireModuleMethod = `
+function requireModule(moduleName) {
+  return requireNative(moduleName.slice(1));
+}
+`;
+
+export default class LiteShell extends BaseShell {
+  generateApp() {
+    return `${requireModuleMethod}
+    var options = ${this.content};
+
+    new ViewModule(options);
+  `;
+  }
+}