feat(vue-demo, react-demo): remote debug, load remote bundle

docs/guide/dynamic-import.md

@@ -99,7 +99,7 @@ plugins: [
 
 ```
 
-+ 在业务代码引用分包的入口配置 `magic comment`的 `webpackChunkName`（必须） 和 `customChunkPath`（可选），如果没有配置`customChunkPath`，会默认使用全局 `publicPath`；
++ <span id="remote-bundle">在业务代码引用分包的入口配置</span> `magic comment`的 `webpackChunkName`（必须） 和 `customChunkPath`（可选），如果没有配置`customChunkPath`，会默认使用全局 `publicPath`；
 以 Hippy-Vue 为例：
 
 ```javascript

examples/hippy-react-demo/package.json

@@ -10,8 +10,6 @@
   "scripts": {
     "serve": "webpack serve --config ./scripts/hippy-webpack.web.dev.js",
     "build": "webpack --config ./scripts/hippy-webpack.web.js",
-    "hippy:local-debug": "node ../../packages/hippy-debug-server/hippy-debug.js",
-    "hippy:local-dev": "node ../../packages/hippy-debug-server/hippy-dev.js -c ./scripts/hippy-webpack.dev.js",
     "hippy:debug": "hippy-debug",
     "hippy:dev": "hippy-dev -c ./scripts/hippy-webpack.dev.js",
     "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
@@ -45,7 +43,7 @@
     "@babel/polyfill": "^7.12.0",
     "@babel/preset-env": "^7.12.0",
     "@babel/preset-react": "^7.9.4",
-    "@hippy/debug-server": "latest",
+    "@hippy/debug-server-next": "^0.2.21",
     "@hippy/hippy-dynamic-import-plugin": "^2.0.0",
     "@hippy/hippy-hmr-plugin": "^0.0.2",
     "@hippy/hippy-react-refresh-webpack-plugin": "^0.5.5",

examples/hippy-react-demo/scripts/hippy-webpack.dev.js

@@ -2,7 +2,6 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin');
-const HippyHMRPlugin = require('@hippy/hippy-hmr-plugin');
 const ReactRefreshWebpackPlugin = require('@hippy/hippy-react-refresh-webpack-plugin');
 const pkg = require('../package.json');
 
@@ -14,7 +13,12 @@ module.exports = {
     aggregateTimeout: 1500,
   },
   devServer: {
-    port: 38988,
+    // remote debug server address
+    remote: {
+      protocol: 'http',
+      host: '127.0.0.1',
+      port: 38989,
+    },
     // by default hot and liveReload option are true, you could set only liveReload to true
     // to use live reload
     hot: true,
@@ -34,8 +38,6 @@ module.exports = {
     strictModuleExceptionHandling: true,
     path: path.resolve('./dist/dev/'),
     globalObject: '(0, eval)("this")',
-    // CDN path can be configured to load children bundles from remote server
-    // publicPath: 'https://xxx/hippy/hippyReactDemo/',
   },
   plugins: [
     new webpack.DefinePlugin({
@@ -52,10 +54,6 @@ module.exports = {
     //   test: /\.(js|jsbundle|css|bundle)($|\?)/i,
     //   filename: '[file].map',
     // }),
-    new HippyHMRPlugin({
-      // HMR [hash].hot-update.json will fetch from this path
-      hotManifestPublicPath: 'http://localhost:38989/',
-    }),
     new ReactRefreshWebpackPlugin({
       overlay: false,
     }),

examples/hippy-react-demo/src/app.jsx

@@ -3,10 +3,9 @@ import {
   StyleSheet,
   View,
   Text,
-  Platform,
 } from '@hippy/react';
 import HomeEntry from './pages/entry';
-import Debug from './pages/debug';
+import RemoteDebug from './pages/remote-debug';
 import SafeAreaView from './shared/SafeAreaView';
 
 const styles = StyleSheet.create({
@@ -44,38 +43,33 @@ export default class App extends Component {
 
   render() {
     const { pageIndex } = this.state;
-    const { isSimulator, __instanceId__: instanceId } = this.props;
+    const { __instanceId__: instanceId } = this.props;
 
     const renderPage = () => {
       switch (pageIndex) {
         case 0:
           return <HomeEntry />;
         case 1:
-        case 2:
-          return <Debug instanceId={instanceId} />;
+          return <RemoteDebug instanceId={instanceId} />;
         default:
           return <View style={styles.blankPage} />;
       }
     };
 
     const renderButton = () => {
-      let buttonArray = ['API', '本地调试'];
-      // iOS 真机仅支持查看范例
-      if (Platform.OS === 'ios' && !isSimulator) {
-        buttonArray = ['API'];
-      }
+      const buttonArray = ['API', '调试'];
       return (
-        buttonArray.map((v, i) => (
+        buttonArray.map((text, i) => (
           <View
-            key={`button_${v}`}
+            key={`button_${i}`}
             style={styles.button}
             onClick={() => this.setState({ pageIndex: i })}
           >
             <Text
               style={[styles.buttonText, i === pageIndex ? { color: '#4c9afa' } : null]}
               numberOfLines={1}
             >
-              {v}
+              {text}
             </Text>
           </View>
         ))

examples/hippy-react-demo/src/externals/DyanmicImport/index.jsx

@@ -59,7 +59,7 @@ export default class DynamicImportDemo extends React.Component {
      *  import 出错时需在catch里做对应的降级方案
      */
     if (process.env.NODE_ENV === 'development') {
-      import(/* webpackMode: "lazy",customChunkPath: "http://127.0.0.1:38989/", webpackChunkName: "asyncComponentFromHttp" */'./AsyncComponentHttp')
+      import(/* webpackMode: "lazy", webpackChunkName: "asyncComponentFromHttp" */'./AsyncComponentHttp')
         .then((component) => {
           this.setState({
             AsyncComponentFromHttp: component.default || component,

examples/hippy-react-demo/src/pages/debug.jsx

@@ -4,6 +4,7 @@ import {
   Platform,
   ScrollView,
   StyleSheet,
+  TextInput,
   Text,
   View,
 } from '@hippy/react';
@@ -16,7 +17,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
+    flexDirection: 'column',
     padding: 20,
   },
   button: {
@@ -38,6 +40,22 @@ const styles = StyleSheet.create({
     marginTop: 12,
     justifyContent: 'center',
   },
+  inputStyle: {
+    width: 300,
+    marginVertical: 15,
+    placeholderTextColor: '#aaaaaa',
+    fontSize: 16,
+    color: '#242424',
+    height: 30,
+    lineHeight: 30,
+  },
+  bundleInputRow: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
 });
 
 export default class Debug extends Component {
@@ -71,9 +89,13 @@ export default class Debug extends Component {
     return (
       <ScrollView style={styles.container}>
         {renderSteps()}
+        <TextInput
+          editable={false}
+          style={styles.inputStyle}
+          defaultValue="BundleUrl: localhost:38989/index.bundle"></TextInput>
         <View style={styles.buttonContainer}>
           <View style={styles.button} onClick={this.clickToDebug}>
-            <Text style={styles.buttonText} numberOfLines={1}>点击调试</Text>
+            <Text style={styles.buttonText} numberOfLines={1}>本地调试</Text>
           </View>
         </View>
       </ScrollView>

examples/hippy-react-demo/src/pages/remote-debug.jsx

@@ -0,0 +1,100 @@
+import React, { useRef } from 'react';
+import {
+  Text,
+  View,
+  StyleSheet,
+  TextInput,
+  ScrollView,
+  callNative,
+} from '@hippy/react';
+
+const styles = StyleSheet.create({
+  stepText: {
+    color: '#242424',
+    marginBottom: 12,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    padding: 20,
+  },
+  button: {
+    width: 140,
+    height: 40,
+    borderRadius: 8,
+    backgroundColor: '#4c9afa',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+    textAlign: 'center',
+    lineHeight: 40,
+    color: '#fff',
+  },
+  buttonContainer: {
+    alignItems: 'center',
+    marginTop: 12,
+    justifyContent: 'center',
+  },
+  inputStyle: {
+    width: 350,
+    marginTop: 30,
+    marginBottom: 10,
+    placeholderTextColor: '#aaaaaa',
+    fontSize: 16,
+    color: '#242424',
+    height: 80,
+    lineHeight: 30,
+    borderColor: '#eee',
+    borderWidth: 1,
+    borderStyle: 'solid',
+  },
+});
+
+export default function RemoteBundleExample({ instanceId }) {
+  const inputBundleURL = useRef(null);
+  const openBundle = () => {
+    blur();
+    inputBundleURL.current.getValue().then((bundleURL) => {
+      if (!bundleURL) return;
+      callNative('TestModule', 'remoteDebug', instanceId, bundleURL);
+    });
+  };
+  const blur = () => {
+    inputBundleURL.current.blur();
+  };
+
+  const tips = [
+    '安装远程调试依赖： npm i -D @hippy/debug-server-next@latest',
+    '修改 webpack 配置，添加远程调试地址',
+    '运行 npm run hippy:dev 开始编译，编译结束后打印出 bundleUrl 及调试首页地址',
+    '粘贴 bundleUrl 并点击开始按钮',
+    '访问调试首页开始远程调试，远程调试支持热更新（HMR）',
+  ];
+
+  return (
+    <ScrollView style={styles.container} onClick={blur}>
+      {
+        tips.map((v, i) => (
+          <Text style={styles.stepText} key={`steps-${i}`}>{i + 1}. {v}</Text>
+        ))
+      }
+      <TextInput
+        ref={inputBundleURL}
+        style={styles.inputStyle}
+        placeholder="please input bundleUrl"
+        multiline={true}
+        numberOfLines={4}
+        defaultValue={'http://127.0.0.1:38989/index.bundle?debugUrl=ws%3A%2F%2F127.0.0.1%3A38989%2Fdebugger-proxy'}
+      />
+      <View style={styles.buttonContainer}>
+        <View style={styles.button} onClick={openBundle}>
+          <Text style={styles.buttonText} numberOfLines={1}>开始</Text>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

examples/hippy-vue-demo/package.json

@@ -12,8 +12,6 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "hippy:local-debug": "node ../../packages/hippy-debug-server/hippy-debug.js",
-    "hippy:local-dev": "node ../../packages/hippy-debug-server/hippy-dev.js -c ./scripts/hippy-webpack.dev.js",
     "hippy:debug": "hippy-debug",
     "hippy:dev": "hippy-dev -c ./scripts/hippy-webpack.dev.js",
     "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
@@ -38,7 +36,7 @@
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/polyfill": "^7.12.0",
     "@babel/preset-env": "^7.12.0",
-    "@hippy/debug-server": "latest",
+    "@hippy/debug-server-next": "^0.2.21",
     "@hippy/hippy-dynamic-import-plugin": "^2.0.0",
     "@hippy/hippy-hmr-plugin": "^0.0.2",
     "@hippy/vue-css-loader": "^2.0.1",

examples/hippy-vue-demo/scripts/hippy-webpack.dev.js

@@ -2,7 +2,6 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin');
-const HippyHMRPlugin = require('@hippy/hippy-hmr-plugin');
 const pkg = require('../package.json');
 
 let cssLoader = '@hippy/vue-css-loader';
@@ -26,7 +25,6 @@ if (fs.existsSync(hippyVueLoaderPath)) {
   VueLoaderPlugin = require('@hippy/vue-loader/lib/plugin');
 }
 
-
 module.exports = {
   mode: 'development',
   devtool: 'eval-source-map',
@@ -35,7 +33,12 @@ module.exports = {
     aggregateTimeout: 1500,
   },
   devServer: {
-    port: 38988,
+    // remote debug server address
+    remote: {
+      protocol: 'http',
+      host: '127.0.0.1',
+      port: 38989,
+    },
     // by default hot and liveReload option are true, you could set only liveReload to true
     // to use live reload
     hot: true,
@@ -56,8 +59,6 @@ module.exports = {
     strictModuleExceptionHandling: true,
     path: path.resolve('./dist/dev/'),
     globalObject: '(0, eval)("this")',
-    // CDN path can be configured to load children bundles from remote server
-    // publicPath: 'https://xxx/hippy/hippyVueDemo/',
   },
   plugins: [
     new VueLoaderPlugin(),
@@ -80,10 +81,6 @@ module.exports = {
     //   test: /\.(js|jsbundle|css|bundle)($|\?)/i,
     //   filename: '[file].map',
     // }),
-    new HippyHMRPlugin({
-      // HMR [hash].hot-update.json will fetch from this path
-      hotManifestPublicPath: 'http://localhost:38989/',
-    }),
   ],
   module: {
     rules: [