fix: fix the issue where web-embed does not work in older versions of…

… Android WebView. (#6455)
OneKeyHQ · Jan 9, 2025 · b11f8c1 · b11f8c1
1 parent 631bb84
commit b11f8c1
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 43 deletions.
diff --git a/development/babelTools.js b/development/babelTools.js
@@ -154,6 +154,10 @@ function normalizeConfig({ platform, config }) {
     ['@babel/plugin-proposal-export-namespace-from'],
     ['@babel/plugin-proposal-nullish-coalescing-operator'],
     ['@babel/plugin-proposal-class-static-block'],
+    [
+      developmentConsts.platforms.web,
+      developmentConsts.platforms.webEmbed,
+    ].includes(platform) && ['@babel/plugin-transform-optional-chaining'],
     isDev && !isJest && !isNative && ['react-refresh/babel'],
     // Need to adapt to the new version of the metro build system.
     isDev &&

diff --git a/development/webpack/webpack.base.config.js b/development/webpack/webpack.base.config.js
@@ -37,6 +37,44 @@ class BuildDoneNotifyPlugin {
   }
 }
 
+const baseResolve = ({ platform, configName }) => ({
+  mainFields: ['browser', 'module', 'main'],
+  aliasFields: ['browser', 'module', 'main'],
+  extensions: createResolveExtensions({ platform, configName }),
+  symlinks: true,
+  alias: {
+    'react-native$': 'react-native-web',
+    'react-native/Libraries/Components/View/ViewStylePropTypes$':
+      'react-native-web/dist/exports/View/ViewStylePropTypes',
+    'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$':
+      'react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter',
+    'react-native/Libraries/vendor/emitter/EventEmitter$':
+      'react-native-web/dist/vendor/react-native/emitter/EventEmitter',
+    'react-native/Libraries/vendor/emitter/EventSubscriptionVendor$':
+      'react-native-web/dist/vendor/react-native/emitter/EventSubscriptionVendor',
+    'react-native/Libraries/EventEmitter/NativeEventEmitter$':
+      'react-native-web/dist/vendor/react-native/NativeEventEmitter',
+  },
+  fallback: {
+    'crypto': require.resolve(
+      '@onekeyhq/shared/src/modules3rdParty/cross-crypto/index.js',
+    ),
+    stream: require.resolve('stream-browserify'),
+    path: false,
+    https: false,
+    http: false,
+    net: false,
+    zlib: false,
+    tls: false,
+    child_process: false,
+    process: false,
+    fs: false,
+    util: false,
+    os: false,
+    buffer: require.resolve('buffer/'),
+  },
+});
+
 const basePlugins = [
   isDev && new ProgressBarPlugin(),
   new webpack.DefinePlugin({
@@ -55,6 +93,15 @@ const basePlugins = [
   isDev && new BuildDoneNotifyPlugin(),
 ].filter(Boolean);
 
+const baseExperiments = {
+  asyncWebAssembly: true,
+};
+
+const basePerformance = {
+  maxAssetSize: 600_000,
+  maxEntrypointSize: 600_000,
+};
+
 module.exports = ({ platform, basePath, configName }) => ({
   entry: path.join(basePath, 'index.js'),
   context: path.resolve(basePath),
@@ -315,47 +362,13 @@ module.exports = ({ platform, basePath, configName }) => ({
       },
     ],
   },
-  resolve: {
-    mainFields: ['browser', 'module', 'main'],
-    aliasFields: ['browser', 'module', 'main'],
-    extensions: createResolveExtensions({ platform, configName }),
-    symlinks: true,
-    alias: {
-      'react-native$': 'react-native-web',
-      'react-native/Libraries/Components/View/ViewStylePropTypes$':
-        'react-native-web/dist/exports/View/ViewStylePropTypes',
-      'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$':
-        'react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter',
-      'react-native/Libraries/vendor/emitter/EventEmitter$':
-        'react-native-web/dist/vendor/react-native/emitter/EventEmitter',
-      'react-native/Libraries/vendor/emitter/EventSubscriptionVendor$':
-        'react-native-web/dist/vendor/react-native/emitter/EventSubscriptionVendor',
-      'react-native/Libraries/EventEmitter/NativeEventEmitter$':
-        'react-native-web/dist/vendor/react-native/NativeEventEmitter',
-    },
-    fallback: {
-      'crypto': require.resolve(
-        '@onekeyhq/shared/src/modules3rdParty/cross-crypto/index.js',
-      ),
-      stream: require.resolve('stream-browserify'),
-      path: false,
-      https: false,
-      http: false,
-      net: false,
-      zlib: false,
-      tls: false,
-      child_process: false,
-      process: false,
-      fs: false,
-      util: false,
-      os: false,
-      buffer: require.resolve('buffer/'),
-    },
-  },
-  experiments: {
-    asyncWebAssembly: true,
-  },
-  performance: { maxAssetSize: 600_000, maxEntrypointSize: 600_000 },
+  resolve: baseResolve({ platform, configName }),
+  experiments: baseExperiments,
+  performance: basePerformance,
 });
 
 module.exports.basePlugins = basePlugins;
+module.exports.baseResolve = baseResolve;
+module.exports.basePlugins = basePlugins;
+module.exports.baseExperiments = baseExperiments;
+module.exports.basePerformance = basePerformance;
diff --git a/development/webpack/webpack.web-embed.config.js b/development/webpack/webpack.web-embed.config.js
@@ -1,11 +1,181 @@
 const { merge } = require('webpack-merge');
 
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
-const baseConfig = require('./webpack.base.config');
 const developmentConfig = require('./webpack.development.config');
 const productionConfig = require('./webpack.prod.config');
 const babelTools = require('../babelTools');
-const { NODE_ENV } = require('./constant');
+const { isDev, PUBLIC_URL, NODE_ENV } = require('./constant');
+const BaseConfig = require('./webpack.base.config');
+
+const baseConfig = ({ platform, basePath, configName }) => {
+  const baseLoaderOption = {
+    babelrc: false,
+    configFile: true,
+    sourceType: 'unambiguous',
+    root: basePath,
+    compact: !isDev,
+    sourceMaps: isDev,
+    inputSourceMap: isDev,
+    cacheCompression: false,
+    cacheDirectory: path.resolve(basePath, 'node_modules/.cache/babel-loader'),
+  };
+  return {
+    entry: path.join(basePath, 'index.js'),
+    context: path.resolve(basePath),
+    bail: false,
+    target: ['web'],
+    watchOptions: {
+      aggregateTimeout: 5,
+      ignored: [
+        '**/.git/**',
+        '**/node_modules/**',
+        '**/.expo/**',
+        '**/.expo-shared/**',
+        '**/web-build/**',
+        '**/.#*',
+      ],
+    },
+    stats: 'errors-warnings',
+    infrastructureLogging: { 'debug': false, 'level': 'none' },
+    output: {
+      publicPath: PUBLIC_URL || '/',
+      path: path.join(basePath, 'web-build'),
+      assetModuleFilename: isDev
+        ? 'static/media/[name].[ext]'
+        : 'static/media/[name].[hash][ext]',
+      uniqueName: 'web',
+      filename: isDev ? '[name].bundle.js' : '[name].[chunkhash:10].bundle.js',
+      chunkFilename: isDev
+        ? 'static/js/[name].chunk.js'
+        : 'static/js/[name].[chunkhash:10].chunk.js',
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        title: platform,
+        minify: !isDev,
+        inject: true,
+        filename: path.join(basePath, 'web-build/index.html'),
+        template: `!!ejs-loader?esModule=false!${path.join(
+          __dirname,
+          '../../packages/shared/src/web/index.html',
+        )}`,
+        favicon: path.join(
+          basePath,
+          'public/static/images/icons/favicon/favicon.png',
+        ),
+        templateParameters: {
+          filename: '',
+          browser: '',
+          platform,
+          isDev,
+          htmlHeadPreloadCode: '',
+          WEB_PUBLIC_URL: PUBLIC_URL || '/',
+          WEB_TITLE: platform,
+          LANG_ISO_CODE: 'en',
+          NO_SCRIPT: '',
+          ROOT_ID: 'root',
+        },
+      }),
+      ...BaseConfig.basePlugins,
+    ],
+    module: {
+      strictExportPresence: false,
+      rules: [
+        {
+          exclude: [/@babel(?:\/|\\{1,2})runtime/],
+          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
+        {
+          'oneOf': [
+            {
+              test: /\.wasm$/,
+              type: 'webassembly/async',
+            },
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
+              type: 'asset',
+              parser: { dataUrlCondition: { maxSize: 1000 } },
+            },
+            {
+              test: /\.(js|mjs|ts)$/,
+              exclude: [/node_modules/],
+              use: [
+                {
+                  loader: 'babel-loader',
+                  options: baseLoaderOption,
+                },
+              ],
+              resolve: { fullySpecified: false },
+            },
+            {
+              test: /lru-cache.*\.(ts|js)x?$/,
+              use: {
+                loader: 'babel-loader',
+                options: baseLoaderOption,
+              },
+              resolve: { fullySpecified: false },
+            },
+            {
+              test: /(@?react-(navigation|native)).*\.(ts|js)x?$/,
+              use: {
+                loader: 'babel-loader',
+                options: baseLoaderOption,
+              },
+              resolve: { fullySpecified: false },
+            },
+            {
+              test: /(@?expo).*\.(ts|js)x?$/,
+              use: {
+                loader: 'babel-loader',
+                options: baseLoaderOption,
+              },
+              resolve: { fullySpecified: false },
+            },
+            {
+              exclude: [
+                /^$/,
+                /\.(js|mjs|cjs|jsx|ts|tsx)$/,
+                /\.html$/,
+                /\.json$/,
+              ],
+              type: 'asset/resource',
+            },
+          ],
+        },
+        {
+          test: /@polkadot/,
+          // test: /[\s\S]*node_modules[/\\]@polkadot[\s\S]*.c?js$/,
+          loader: require.resolve('@open-wc/webpack-import-meta-loader'),
+        },
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
+        {
+          test: /\.ejs$/i,
+          use: ['html-loader', 'template-ejs-loader'],
+        },
+        {
+          test: /\.worker\.(js|ts)$/,
+          use: {
+            loader: 'worker-loader',
+            options: {
+              inline: 'fallback',
+            },
+          },
+        },
+      ],
+    },
+    resolve: BaseConfig.baseResolve({ platform, configName }),
+    experiments: BaseConfig.baseExperiments,
+    performance: BaseConfig.basePerformance,
+  };
+};
 
 module.exports = ({
   basePath,

diff --git a/package.json b/package.json
@@ -139,6 +139,7 @@
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-optional-chaining": "^7.25.9",
     "@babel/preset-env": "^7.22.9",
     "@emurgo/cardano-message-signing-nodejs": "^1.0.1",
     "@emurgo/cardano-serialization-lib-nodejs": "^11.5.0",

diff --git a/packages/kit-bg/src/endpoints/index.tsx → packages/kit-bg/src/endpoints/index.ts b/packages/kit-bg/src/endpoints/index.tsx → packages/kit-bg/src/endpoints/index.ts
diff --git a/...shared/src/logger/scopes/market/index.tsx → .../shared/src/logger/scopes/market/index.ts b/...shared/src/logger/scopes/market/index.tsx → .../shared/src/logger/scopes/market/index.ts
diff --git a/.../shared/src/logger/scopes/token/index.tsx → ...s/shared/src/logger/scopes/token/index.ts b/.../shared/src/logger/scopes/token/index.tsx → ...s/shared/src/logger/scopes/token/index.ts
diff --git a/packages/shared/src/modules3rdParty/sentry/index.webEmbed.ts b/packages/shared/src/modules3rdParty/sentry/index.webEmbed.ts
@@ -0,0 +1,2 @@
+export const initSentry = () => {};
+export const nativeCrash = () => {};
diff --git a/yarn.lock b/yarn.lock
@@ -438,6 +438,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-plugin-utils@npm:7.25.9"
+  checksum: 10/e347d87728b1ab10b6976d46403941c8f9008c045ea6d99997a7ffca7b852dc34b6171380f7b17edf94410e0857ff26f3a53d8618f11d73744db86e8ca9b8c64
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.18.9, @babel/helper-remap-async-to-generator@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20"
@@ -482,6 +489,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-skip-transparent-expression-wrappers@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.25.9"
+  dependencies:
+    "@babel/traverse": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10/fdbb5248932198bc26daa6abf0d2ac42cab9c2dbb75b7e9f40d425c8f28f09620b886d40e7f9e4e08ffc7aaa2cefe6fc2c44be7c20e81f7526634702fb615bdc
+  languageName: node
+  linkType: hard
+
 "@babel/helper-split-export-declaration@npm:^7.22.6":
   version: 7.22.6
   resolution: "@babel/helper-split-export-declaration@npm:7.22.6"
@@ -1482,6 +1499,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-optional-chaining@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.25.9"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/bc838a499fd9892e163b8bc9bfbc4bf0b28cc3232ee0a6406ae078257c8096518f871d09b4a32c11f4a2d6953c3bc1984619ef748f7ad45aed0b0d9689a8eb36
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-parameters@npm:^7.0.0, @babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-parameters@npm:7.23.3"
@@ -6616,6 +6645,7 @@ __metadata:
     "@babel/plugin-proposal-export-namespace-from": "npm:^7.18.9"
     "@babel/plugin-proposal-private-methods": "npm:^7.18.6"
     "@babel/plugin-proposal-private-property-in-object": "npm:^7.21.11"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.25.9"
     "@babel/preset-env": "npm:^7.22.9"
     "@benfen/bfc.js": "npm:0.2.7"
     "@emurgo/cardano-message-signing-nodejs": "npm:^1.0.1"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const initSentry = () => {};
		export const nativeCrash = () => {};