From b11f8c186fcf1865ec183046f6cfb33ca33d6398 Mon Sep 17 00:00:00 2001 From: huhuanming Date: Thu, 9 Jan 2025 13:29:03 +0800 Subject: [PATCH] fix: fix the issue where web-embed does not work in older versions of Android WebView. (#6455) --- development/babelTools.js | 4 + development/webpack/webpack.base.config.js | 95 +++++----- .../webpack/webpack.web-embed.config.js | 174 +++++++++++++++++- package.json | 1 + .../src/endpoints/{index.tsx => index.ts} | 0 .../scopes/market/{index.tsx => index.ts} | 0 .../scopes/token/{index.tsx => index.ts} | 0 .../modules3rdParty/sentry/index.webEmbed.ts | 2 + yarn.lock | 30 +++ 9 files changed, 263 insertions(+), 43 deletions(-) rename packages/kit-bg/src/endpoints/{index.tsx => index.ts} (100%) rename packages/shared/src/logger/scopes/market/{index.tsx => index.ts} (100%) rename packages/shared/src/logger/scopes/token/{index.tsx => index.ts} (100%) create mode 100644 packages/shared/src/modules3rdParty/sentry/index.webEmbed.ts diff --git a/development/babelTools.js b/development/babelTools.js index 25da9178d3c..e0d127b5126 100644 --- 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 index da71b040445..281b41b46d6 100644 --- 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 index 5fe7aade1d2..1296fc368cd 100644 --- 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 index 09661c75656..3e86791b453 100644 --- 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 b/packages/kit-bg/src/endpoints/index.ts similarity index 100% rename from packages/kit-bg/src/endpoints/index.tsx rename to packages/kit-bg/src/endpoints/index.ts diff --git a/packages/shared/src/logger/scopes/market/index.tsx b/packages/shared/src/logger/scopes/market/index.ts similarity index 100% rename from packages/shared/src/logger/scopes/market/index.tsx rename to packages/shared/src/logger/scopes/market/index.ts diff --git a/packages/shared/src/logger/scopes/token/index.tsx b/packages/shared/src/logger/scopes/token/index.ts similarity index 100% rename from packages/shared/src/logger/scopes/token/index.tsx rename to packages/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 new file mode 100644 index 00000000000..0dfc099e379 --- /dev/null +++ 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 index 963765ea18e..4c2b17fb880 100644 --- 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"