feat: support remote url in runtime and compile mode

packages/miniapp-builder-shared/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.3.1] - 2022-02-28
+
+### Changed
+
+- add `remoteRoutes` in `separateNativeRoutes`
+
 ## [0.3.0] - 2021-12-14
 
 ### Changed

packages/miniapp-builder-shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniapp-builder-shared",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "miniapp project builder shared lib",
   "author": "Rax Team",
   "homepage": "https://github.com/raxjs/miniapp#readme",

packages/miniapp-builder-shared/src/pathHelper.js

@@ -58,15 +58,21 @@ function loadAsDirectory(module) {
 function relativeModuleResolve(script, dependency, checkSourceExistence = true) {
   if (startsWithArr(dependency, ['./', '../', '/', '.\\', '..\\', '\\'])) {
     const dependencyPath = join(script, dependency);
-    const processedPath = loadAsFile(dependencyPath) || loadAsDirectory(dependencyPath);
-    if (checkSourceExistence && !processedPath) {
-      throw new Error(`The page source ${dependencyPath} doesn't exist`);
+    if (checkSourceExistence) {
+      const processedPath = loadAsFile(dependencyPath) || loadAsDirectory(dependencyPath);
+      if (!processedPath) {
+        throw new Error(`The page source ${dependencyPath} doesn't exist`);
+      }
+      return relative(
+        script,
+        processedPath || ''
+      );
+    } else {
+      return relative(
+        script,
+        dependencyPath
+      );
     }
-
-    return relative(
-      script,
-      processedPath || ''
-    );
   } else throw new Error('The page source path does not meet the requirements');
 };
 

packages/miniapp-builder-shared/src/separateNativeRoutes.js

@@ -11,7 +11,12 @@ const { getDepPath, isNativePage } = require('./pathHelper');
 module.exports = (routes, { rootDir, target }) => {
   const nativeRoutes = [];
   const normalRoutes = [];
+  const remoteRoutes = [];
   routes.forEach((route) => {
+    if (route.url) {
+      remoteRoutes.push(route);
+      return;
+    }
     const pageEntry = getDepPath(rootDir, route.source);
     if (isNativePage(pageEntry, target)) {
       nativeRoutes.push(route);
@@ -23,5 +28,6 @@ module.exports = (routes, { rootDir, target }) => {
   return {
     nativeRoutes,
     normalRoutes,
+    remoteRoutes
   };
 };

packages/miniapp-webview-config/CHANGELOG.md

@@ -1,5 +1,9 @@
 # miniapp-webview-config
 
+## 1.1.0
+
+[feat] add `setWebviewPageConfig` to support remote url
+
 ## 1.0.1
 
 [fix] compat webpack5

packages/miniapp-webview-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniapp-webview-config",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "miniapp webview project config",
   "main": "lib/index.js",
   "files": [

packages/miniapp-webview-config/src/index.ts

@@ -1,30 +1,24 @@
-import { resolve, join } from 'path';
+import { resolve, parse, dirname } from 'path';
 import * as MiniAppConfigPlugin from 'rax-miniapp-config-webpack-plugin';
 import { normalizeStaticConfig, constants } from 'miniapp-builder-shared';
 
-import MiniappWebviewPlugin from './plugin';
+import { RouteType } from './types';
+import setBaseConfig from './setBaseConfig';
 
-import setEntry from './setEntry';
-
-const { MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM } = constants;
+const { MINIAPP } = constants;
 
 export function setWebviewConfig(config, options) {
   const { api, target } = options;
   const {
     getValue,
     context: {
-      command,
       userConfig: rootUserConfig,
       rootDir,
       webpack
     },
-    applyMethod,
-    hasMethod,
     cancelTask,
-    log
   } = api;
 
-  const isWebpack4 = /^4\./.test(webpack.version);
   const userConfig = rootUserConfig[target] || {};
 
   // If using frm then do not generate miniapp webview code temporarily
@@ -36,17 +30,25 @@ export function setWebviewConfig(config, options) {
   const appConfig = normalizeStaticConfig(getValue('staticConfig'), { rootDir });
   const outputPath = options.outputPath || resolve(rootDir, 'build', target);
 
-  setEntry(config, {
-    rootDir,
-    appConfig
-  });
+  const routes = appConfig.routes.map(route => {
+    const { source, name, } = route;
 
-  config.plugin('MiniappWebviewPlugin')
-    .use(MiniappWebviewPlugin, [{
-      api,
-      target,
-      appConfig
-    }]);
+    if (name) {
+      return {
+        ...route,
+        webEntryName: name
+      };
+    }
+    if (source) {
+      const dir = dirname(source);
+      return {
+        ...route,
+        webEntryName: parse(dir).name.toLocaleLowerCase()
+      };
+    }
+  }).filter(r => !!r);
+
+  setBaseConfig(config, options, routes);
 
   config.plugin('MiniAppConfigPlugin').use(MiniAppConfigPlugin, [
     {
@@ -59,59 +61,9 @@ export function setWebviewConfig(config, options) {
       nativeConfig: userConfig.nativeConfig,
     },
   ]);
-
-  config
-    .output
-    .library(['page', '[name]'])
-    .libraryTarget('umd')
-    .globalObject('self={}');;
-
-  if (!isWebpack4) {
-    config.merge({
-      devServer: {
-        client: false,
-      }
-    })
-  } else {
-    config.devServer.inline(false);
-  }
-
-  if (command === 'start' && config.get('devtool')) {
-    config.devtool('inline-source-map');
-  }
-
-  config.devServer.hot(false);
-
-  injectJSSDK(hasMethod, applyMethod, target);
-  applyMethod('addPluginTemplate', join(__dirname, './runtime/page.js'));
-  const importDeclarations = getValue('importDeclarations');
-  importDeclarations.createWebviewPage = {
-    value: '$$framework/plugins/miniapp/page'
-  };
-  api.setValue('importDeclarations', importDeclarations);
 };
 
-function injectJSSDK(hasMethod, applyMethod, target) {
-  if (!hasMethod('rax.injectHTML')) {
-    return;
-  }
-  const UAMap = {
-    [MINIAPP]: 'AliApp',
-    [WECHAT_MINIPROGRAM]: 'miniProgram',
-    [BYTEDANCE_MICROAPP]: 'ToutiaoMicroApp',
-    [BAIDU_SMARTPROGRAM]: 'swan'
-  };
-  const JSSDKMap = {
-    [MINIAPP]: 'https://appx/web-view.min.js',
-    [WECHAT_MINIPROGRAM]: 'https://res.wx.qq.com/open/js/jweixin-1.3.2.js',
-    [BYTEDANCE_MICROAPP]: 'https://lf1-cdn-tos.bytegoofy.com/goofy/developer/jssdk/jssdk-1.0.3.js',
-    [BAIDU_SMARTPROGRAM]: 'https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js'
-  }
-  const injectedScript = `<script>
-  if (navigator.userAgent.indexOf('${UAMap[target]}') > -1) {
-    document.write('\\x3Cscript src="${JSSDKMap[target]}" type="text/javascript">\\x3C/script>');
-    window.__RAX_WEBVIEW__ = true;
-  }
-  </script>`;
-  applyMethod('rax.injectHTML', 'script', [injectedScript]);
+export function setWebviewPageConfig(config, options, remoteRoutes: RouteType[]) {
+  setBaseConfig(config, options, remoteRoutes);
 }
+

packages/miniapp-webview-config/src/plugin/index.ts

@@ -1,23 +1,22 @@
-import { dirname, parse } from 'path';
 import { DEV_URL_PREFIX } from './utils/constants';
 
 import {
   generatePageJS,
   generatePageXML
 } from './generators/page';
 import { generateAppJS } from './generators/app';
-import { AppConfigType } from 'src/types';
+import { RouteType } from 'src/types';
 
 const PluginName = 'WebViewPlugin';
 class WebViewPlugin {
   options: any;
   target: string;
-  appConfig: AppConfigType;
+  routes: RouteType[];
 
   constructor(options) {
     this.options = options;
     this.target = options.target;
-    this.appConfig = options.appConfig;
+    this.routes = options.routes;
   }
 
   apply(compiler) {
@@ -37,32 +36,17 @@ class WebViewPlugin {
 
     const getWebviewUrl = this.generateWebviewUrl({ command, userConfig, getValue, target, log });
 
-    const routes = this.appConfig.routes.map(route => {
-      const { source, name, } = route;
-
-      if (name) {
-        return {
-          ...route,
-          webEntryName: name
-        };
-      }
-      if (source) {
-        const dir = dirname(source);
-        return {
-          ...route,
-          webEntryName: parse(dir).name.toLocaleLowerCase()
-        };
-      }
-    }).filter(r => !!r);
     // todo subPackages
     let isFirstRender = true;
     compiler.hooks.emit.tapAsync(PluginName, (compilation, callback) => {
       if (isFirstRender) {
-        generateAppJS(compilation, {
-          target,
-          command
-        });
-        routes.forEach(({ entryName, webEntryName, url: originalUrl }) => {
+        if (target === 'webview') {
+          generateAppJS(compilation, {
+            target,
+            command
+          });
+        }
+        this.routes.forEach(({ entryName, webEntryName, url: originalUrl }) => {
           const url = originalUrl ? originalUrl : getWebviewUrl(webEntryName);
           generatePageXML(compilation, entryName, {
             target,

packages/miniapp-webview-config/src/setBaseConfig.ts

@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { constants } from 'miniapp-builder-shared';
+
+import MiniappWebviewPlugin from './plugin';
+import setEntry from './setEntry';
+
+const { MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM } = constants;
+
+export default function setBaseConfig(config, options, routes) {
+  const { api, target, outputPath } = options;
+  const {
+    getValue,
+    context: {
+      command,
+      rootDir,
+      webpack
+    },
+    applyMethod,
+    hasMethod,
+  } = api;
+
+  const isWebpack4 = /^4\./.test(webpack.version);
+
+  setEntry(config, {
+    rootDir,
+    routes
+  });
+
+  config.plugin('MiniappWebviewPlugin')
+    .use(MiniappWebviewPlugin, [{
+      api,
+      target,
+      routes,
+    }]);
+
+  config
+    .output
+    .library(['page', '[name]'])
+    .libraryTarget('umd')
+    .globalObject('self={}');
+
+  if (!isWebpack4) {
+    config.merge({
+      devServer: {
+        client: false,
+      }
+    });
+  } else {
+    config.devServer.inline(false);
+  }
+
+  if (command === 'start' && config.get('devtool')) {
+    config.devtool('inline-source-map');
+  }
+
+  config.devServer.hot(false);
+
+  injectJSSDK(hasMethod, applyMethod, target);
+  applyMethod('addPluginTemplate', join(__dirname, './runtime/page.js'));
+  const importDeclarations = getValue('importDeclarations');
+  importDeclarations.createWebviewPage = {
+    value: '$$framework/plugins/miniapp/page'
+  };
+  api.setValue('importDeclarations', importDeclarations);
+}
+
+function injectJSSDK(hasMethod, applyMethod, target) {
+  if (!hasMethod('rax.injectHTML')) {
+    return;
+  }
+  const UAMap = {
+    [MINIAPP]: 'AliApp',
+    [WECHAT_MINIPROGRAM]: 'miniProgram',
+    [BYTEDANCE_MICROAPP]: 'ToutiaoMicroApp',
+    [BAIDU_SMARTPROGRAM]: 'swan'
+  };
+  const JSSDKMap = {
+    [MINIAPP]: 'https://appx/web-view.min.js',
+    [WECHAT_MINIPROGRAM]: 'https://res.wx.qq.com/open/js/jweixin-1.3.2.js',
+    [BYTEDANCE_MICROAPP]: 'https://lf1-cdn-tos.bytegoofy.com/goofy/developer/jssdk/jssdk-1.0.3.js',
+    [BAIDU_SMARTPROGRAM]: 'https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js'
+  }
+  const injectedScript = `<script>
+  if (navigator.userAgent.indexOf('${UAMap[target]}') > -1) {
+    document.write('\\x3Cscript src="${JSSDKMap[target]}" type="text/javascript">\\x3C/script>');
+    window.__RAX_WEBVIEW__ = true;
+  }
+  </script>`;
+  applyMethod('rax.injectHTML', 'script', [injectedScript]);
+}

packages/miniapp-webview-config/src/setEntry.ts

@@ -4,8 +4,8 @@ import  { pathHelper } from 'miniapp-builder-shared';
 
 const { getBundlePath } = pathHelper;
 
-function setEntry(config, { rootDir, appConfig }) {
-  appConfig.routes.forEach(({ entryName }) => {
+function setEntry(config, { rootDir, routes }) {
+  routes.forEach(({ entryName }) => {
     const dirname = path.dirname(entryName);
     const pageEntry = moduleResolve(formatPath(path.join(rootDir, 'src', dirname, 'page')));
     config