diff --git a/driver/js/examples/hippy-react-demo/package.json b/driver/js/examples/hippy-react-demo/package.json index d9e627eb039..f89ba6b9c8d 100644 --- a/driver/js/examples/hippy-react-demo/package.json +++ b/driver/js/examples/hippy-react-demo/package.json @@ -15,7 +15,9 @@ "hippy:vendor": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js", "hippy:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js", "web:dev": "npm run hippy:dev & node ./scripts/env-polyfill.js webpack serve --config ./scripts/hippy-webpack.web-renderer.dev.js", - "web:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.web-renderer.js" + "web:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.web-renderer.js", + "hippy:vendor:hermes": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.hermes.ios-vendor.js --config ./scripts/hippy-webpack.hermes.android-vendor.js", + "hippy:build:hermes": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.hermes.ios.js --config ./scripts/hippy-webpack.hermes.android.js" }, "keywords": [ "Hippy", diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.android-vendor.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.android-vendor.js new file mode 100644 index 00000000000..56085678b87 --- /dev/null +++ b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.android-vendor.js @@ -0,0 +1,80 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); + +const platform = 'android'; +const engine = 'hermes'; + +module.exports = { + mode: 'production', + bail: true, + entry: { + vendor: [path.resolve(__dirname, './vendor.js')], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + library: 'hippyReactBase', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new webpack.DllPlugin({ + context: path.resolve(__dirname, '..'), + path: path.resolve(__dirname, `../dist/${platform}/[name]-manifest.json`), + name: 'hippyReactBase', + }), + ], + module: { + rules: [ + { + test: /\.(js)$/, + use: [ + { + loader: 'babel-loader', + options: { + presets: [ + [ + '@babel/preset-env', + { + targets: { + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ], + }, + }, + ], + }, + ], + }, + resolve: { + extensions: ['.js', '.jsx', '.json'], + // if node_modules path listed below is not your repo directory, change it. + modules: [path.resolve(__dirname, '../node_modules')], + alias: (() => { + const aliases = {}; + // If hippy-react was built exist then make a alias + // Remove the section if you don't use it + const hippyReactPath = path.resolve(__dirname, '../../../packages/hippy-react'); + if (fs.existsSync(path.resolve(hippyReactPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/react in ${hippyReactPath}`); + aliases['@hippy/react'] = hippyReactPath; + } else { + console.warn('* Using the @hippy/react defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.android.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.android.js new file mode 100644 index 00000000000..2ea78d374e2 --- /dev/null +++ b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.android.js @@ -0,0 +1,113 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin'); +const pkg = require('../package.json'); +const manifest = require('../dist/android/vendor-manifest.json'); + +const platform = 'android'; +const engine = 'hermes'; + +module.exports = { + mode: 'production', + bail: true, + entry: { + index: ['regenerator-runtime', path.resolve(pkg.main)], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + // CDN path can be configured to load children bundles from remote server + // publicPath: 'https://xxx/hippy/hippyReactDemo/', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new webpack.DllReferencePlugin({ + context: path.resolve(__dirname, '..'), + manifest, + }), + new HippyDynamicImportPlugin(), + // LimitChunkCountPlugin can control dynamic import ability + // Using 1 will prevent any additional chunks from being added + // new webpack.optimize.LimitChunkCountPlugin({ + // maxChunks: 1, + // }), + // use SourceMapDevToolPlugin can generate sourcemap file + // new webpack.SourceMapDevToolPlugin({ + // test: /\.(js|jsbundle|css|bundle)($|\?)/i, + // filename: '[file].map', + // }), + ], + module: { + rules: [ + { + test: /\.(jsx?)$/, + use: [ + { + loader: 'babel-loader', + options: { + sourceType: 'unambiguous', + presets: [ + '@babel/preset-react', + [ + '@babel/preset-env', + { + targets: { + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ['@babel/plugin-proposal-decorators', { legacy: true }], + ['@babel/plugin-transform-runtime', { regenerator: true }], + ], + }, + }, + ], + }, + { + test: /\.(png|jpe?g|gif)$/i, + use: [{ + loader: 'url-loader', + options: { + // if you would like to use base64 for picture, uncomment limit: true + // limit: true, + limit: 8192, + fallback: 'file-loader', + name: '[name].[ext]', + outputPath: 'assets/', + }, + }], + }, + ], + }, + resolve: { + extensions: ['.js', '.jsx', '.json'], + // if node_modules path listed below is not your repo directory, change it. + modules: [path.resolve(__dirname, '../node_modules')], + alias: (() => { + const aliases = {}; + + // If hippy-react was built exist then make a alias + // Remove the section if you don't use it + const hippyReactPath = path.resolve(__dirname, '../../../packages/hippy-react'); + if (fs.existsSync(path.resolve(hippyReactPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/react in ${hippyReactPath}`); + aliases['@hippy/react'] = hippyReactPath; + } else { + console.warn('* Using the @hippy/react defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.ios-vendor.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.ios-vendor.js new file mode 100644 index 00000000000..f1c66d1308f --- /dev/null +++ b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.ios-vendor.js @@ -0,0 +1,81 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); + +const platform = 'ios'; +const engine = 'hermes'; + +module.exports = { + mode: 'production', + bail: true, + entry: { + vendor: [path.resolve(__dirname, './vendor.js')], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + library: 'hippyReactBase', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new webpack.DllPlugin({ + context: path.resolve(__dirname, '..'), + path: path.resolve(__dirname, `../dist/${platform}/[name]-manifest.json`), + name: 'hippyReactBase', + }), + ], + module: { + rules: [ + { + test: /\.(jsx?)$/, + use: [ + { + loader: 'babel-loader', + options: { + presets: [ + [ + '@babel/preset-env', + { + targets: { + ios: 8, + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ], + }, + }, + ], + }, + ], + }, + resolve: { + extensions: ['.js', '.jsx', '.json'], + // if node_modules path listed below is not your repo directory, change it. + modules: [path.resolve(__dirname, '../node_modules')], + alias: (() => { + const aliases = {}; + // If hippy-react was built exist then make a alias + // Remove the section if you don't use it + const hippyReactPath = path.resolve(__dirname, '../../../packages/hippy-react'); + if (fs.existsSync(path.resolve(hippyReactPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/react in ${hippyReactPath}`); + aliases['@hippy/react'] = hippyReactPath; + } else { + console.warn('* Using the @hippy/react defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.ios.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.ios.js new file mode 100644 index 00000000000..f0a32b6b002 --- /dev/null +++ b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.hermes.ios.js @@ -0,0 +1,114 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin'); +const pkg = require('../package.json'); +const manifest = require('../dist/ios/vendor-manifest.json'); + +const platform = 'ios'; +const engine = 'hermes'; + +module.exports = { + mode: 'production', + bail: true, + entry: { + index: ['@hippy/rejection-tracking-polyfill', 'regenerator-runtime', path.resolve(pkg.main)], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + // CDN path can be configured to load children bundles from remote server + // publicPath: 'https://xxx/hippy/hippyReactDemo/', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new webpack.DllReferencePlugin({ + context: path.resolve(__dirname, '..'), + manifest, + }), + new HippyDynamicImportPlugin(), + // LimitChunkCountPlugin can control dynamic import ability + // Using 1 will prevent any additional chunks from being added + // new webpack.optimize.LimitChunkCountPlugin({ + // maxChunks: 1, + // }), + // use SourceMapDevToolPlugin can generate sourcemap file + // new webpack.SourceMapDevToolPlugin({ + // test: /\.(js|jsbundle|css|bundle)($|\?)/i, + // filename: '[file].map', + // }), + ], + module: { + rules: [ + { + test: /\.(jsx?)$/, + use: [ + { + loader: 'babel-loader', + options: { + sourceType: 'unambiguous', + presets: [ + '@babel/preset-react', + [ + '@babel/preset-env', + { + targets: { + ios: 8, + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ['@babel/plugin-proposal-decorators', { legacy: true }], + ['@babel/plugin-transform-runtime', { regenerator: true }], + ], + }, + }, + ], + }, + { + test: /\.(png|jpe?g|gif)$/i, + use: [{ + loader: 'url-loader', + options: { + // if you would like to use base64 for picture, uncomment limit: true + // limit: true, + limit: 8192, + fallback: 'file-loader', + name: '[name].[ext]', + outputPath: 'assets/', + }, + }], + }, + ], + }, + resolve: { + extensions: ['.js', '.jsx', '.json'], + // if node_modules path listed below is not your repo directory, change it. + modules: [path.resolve(__dirname, '../node_modules')], + alias: (() => { + const aliases = {}; + + // If hippy-react was built exist then make a alias + // Remove the section if you don't use it + const hippyReactPath = path.resolve(__dirname, '../../../packages/hippy-react'); + if (fs.existsSync(path.resolve(hippyReactPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/react in ${hippyReactPath}`); + aliases['@hippy/react'] = hippyReactPath; + } else { + console.warn('* Using the @hippy/react defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-vue-demo/package.json b/driver/js/examples/hippy-vue-demo/package.json index 419e63ee5fa..4df011ac33e 100644 --- a/driver/js/examples/hippy-vue-demo/package.json +++ b/driver/js/examples/hippy-vue-demo/package.json @@ -13,7 +13,9 @@ "hippy:vendor": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js", "hippy:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js", "web:dev": "npm run hippy:dev & node ./scripts/env-polyfill.js webpack serve --config ./scripts/hippy-webpack.web-renderer.dev.js", - "web:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.web-renderer.js" + "web:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.web-renderer.js", + "hippy:vendor:hermes": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.hermes.ios-vendor.js --config ./scripts/hippy-webpack.hermes.android-vendor.js", + "hippy:build:hermes": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.hermes.ios.js --config ./scripts/hippy-webpack.hermes.android.js" }, "dependencies": { "@hippy/vue": "v3.0-dev", diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.android-vendor.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.android-vendor.js new file mode 100644 index 00000000000..58f0cb806b7 --- /dev/null +++ b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.android-vendor.js @@ -0,0 +1,132 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); + +const platform = 'android'; +const engine = 'hermes'; + +let vueLoader = '@hippy/vue-loader'; +let VueLoaderPlugin; +const hippyVueLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-loader/lib'); +const hippyVueLoaderNodeModulesPath = path.resolve(__dirname, '../../../packages/hippy-vue-loader/node_modules'); +if (fs.existsSync(hippyVueLoaderNodeModulesPath) && fs.existsSync(hippyVueLoaderPath)) { + console.warn(`* Using the @hippy/vue-loader in ${hippyVueLoaderPath}`); + vueLoader = hippyVueLoaderPath; + VueLoaderPlugin = require(path.resolve(__dirname, '../../../packages/hippy-vue-loader/lib/plugin')); +} else { + console.warn('* Using the @hippy/vue-loader defined in package.json'); + VueLoaderPlugin = require('@hippy/vue-loader/lib/plugin'); +} + +module.exports = { + mode: 'production', + bail: true, + entry: { + vendor: [path.resolve(__dirname, './vendor.js')], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + library: 'hippyVueBase', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new VueLoaderPlugin(), + new webpack.DllPlugin({ + context: path.resolve(__dirname, '..'), + path: path.resolve(__dirname, `../dist/${platform}/[name]-manifest.json`), + name: 'hippyVueBase', + }), + ], + module: { + rules: [ + { + test: /\.vue$/, + use: [ + { + loader: vueLoader, + options: { + compilerOptions: { + // whitespace handler, default is 'preserve' + whitespace: 'condense', + }, + }, + }, + ], + }, + { + test: /\.(js)$/, + use: [ + { + loader: 'babel-loader', + options: { + presets: [ + [ + '@babel/preset-env', + { + targets: { + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ], + }, + }, + ], + }, + ], + }, + resolve: { + extensions: ['.js', '.vue', '.json'], + // if node_modules path listed below is not your repo directory, change it. + modules: [path.resolve(__dirname, '../node_modules')], + alias: (() => { + const aliases = { + vue: '@hippy/vue', + '@': path.resolve('./src'), + 'vue-router': '@hippy/vue-router', + }; + // If hippy-vue was built exist then make a alias + // Remove the section if you don't use it + const hippyVuePath = path.resolve(__dirname, '../../../packages/hippy-vue'); + if (fs.existsSync(path.resolve(hippyVuePath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue in ${hippyVuePath} as vue alias`); + aliases.vue = hippyVuePath; + aliases['@hippy/vue'] = hippyVuePath; + } else { + console.warn('* Using the @hippy/vue defined in package.json'); + } + // If hippy-vue-router was built exist then make a alias + // Remove the section if you don't use it + const hippyVueRouterPath = path.resolve(__dirname, '../../../packages/hippy-vue-router'); + if (fs.existsSync(path.resolve(hippyVueRouterPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue-router in ${hippyVueRouterPath} as vue-router alias`); + aliases['vue-router'] = hippyVueRouterPath; + } else { + console.warn('* Using the @hippy/vue-router defined in package.json'); + } + + // If hippy-vue-native-components was built exist then make a alias + // Remove the section if you don't use it + const hippyVueNativeComponentsPath = path.resolve(__dirname, '../../../packages/hippy-vue-native-components'); + if (fs.existsSync(path.resolve(hippyVueNativeComponentsPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue-native-components in ${hippyVueNativeComponentsPath}`); + aliases['@hippy/vue-native-components'] = hippyVueNativeComponentsPath; + } else { + console.warn('* Using the @hippy/vue-native-components defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.android.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.android.js new file mode 100644 index 00000000000..6e8b318a6ac --- /dev/null +++ b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.android.js @@ -0,0 +1,180 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin'); +const pkg = require('../package.json'); +const manifest = require('../dist/android/vendor-manifest.json'); + +const platform = 'android'; +const engine = 'hermes'; + +let cssLoader = '@hippy/vue-css-loader'; +const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js'); +if (fs.existsSync(hippyVueCssLoaderPath)) { + console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`); + cssLoader = hippyVueCssLoaderPath; +} else { + console.warn('* Using the @hippy/vue-css-loader defined in package.json'); +} + +let vueLoader = '@hippy/vue-loader'; +let VueLoaderPlugin; +const hippyVueLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-loader/lib'); +const hippyVueLoaderNodeModulesPath = path.resolve(__dirname, '../../../packages/hippy-vue-loader/node_modules'); +if (fs.existsSync(hippyVueLoaderNodeModulesPath) && fs.existsSync(hippyVueLoaderPath)) { + console.warn(`* Using the @hippy/vue-loader in ${hippyVueLoaderPath}`); + vueLoader = hippyVueLoaderPath; + VueLoaderPlugin = require(path.resolve(__dirname, '../../../packages/hippy-vue-loader/lib/plugin')); +} else { + console.warn('* Using the @hippy/vue-loader defined in package.json'); + VueLoaderPlugin = require('@hippy/vue-loader/lib/plugin'); +} + +module.exports = { + mode: 'production', + bail: true, + entry: { + index: [path.resolve(pkg.nativeMain)], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + // CDN path can be configured to load children bundles from remote server + // publicPath: 'https://xxx/hippy/hippyVueDemo/', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new VueLoaderPlugin(), + new webpack.DllReferencePlugin({ + context: path.resolve(__dirname, '..'), + manifest, + }), + new HippyDynamicImportPlugin(), + // LimitChunkCountPlugin can control dynamic import ability + // Using 1 will prevent any additional chunks from being added + // new webpack.optimize.LimitChunkCountPlugin({ + // maxChunks: 1, + // }), + // use SourceMapDevToolPlugin can generate sourcemap file + // new webpack.SourceMapDevToolPlugin({ + // test: /\.(js|jsbundle|css|bundle)($|\?)/i, + // filename: '[file].map', + // }), + ], + module: { + rules: [ + { + test: /\.vue$/, + use: [ + { + loader: vueLoader, + options: { + compilerOptions: { + // whitespace handler, default is 'preserve' + whitespace: 'condense', + }, + }, + }, + ], + }, + { + test: /\.css$/, + use: [ + cssLoader, + ], + }, + { + test: /\.(js)$/, + use: [ + { + loader: 'babel-loader', + options: { + sourceType: 'unambiguous', + presets: [ + [ + '@babel/preset-env', + { + targets: { + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ['@babel/plugin-proposal-decorators', { legacy: true }], + ['@babel/plugin-transform-runtime', { regenerator: true }], + ], + }, + }, + ], + }, + { + test: /\.(png|jpe?g|gif)$/i, + use: [{ + loader: 'url-loader', + options: { + // if you would like to use base64 for picture, uncomment limit: true + // limit: true, + limit: 8192, + fallback: 'file-loader', + name: '[name].[ext]', + outputPath: 'assets/', + }, + }], + }, + ], + }, + resolve: { + extensions: ['.js', '.vue', '.json'], + // if node_modules path listed below is not your repo directory, change it. + modules: [path.resolve(__dirname, '../node_modules')], + alias: (() => { + const aliases = { + vue: '@hippy/vue', + '@': path.resolve('./src'), + 'vue-router': '@hippy/vue-router', + }; + + // If hippy-vue was built exist in packages directory then make a alias + // Remove the section if you don't use it + const hippyVuePath = path.resolve(__dirname, '../../../packages/hippy-vue'); + if (fs.existsSync(path.resolve(hippyVuePath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue in ${hippyVuePath} as vue alias`); + aliases.vue = hippyVuePath; + aliases['@hippy/vue'] = hippyVuePath; + } else { + console.warn('* Using the @hippy/vue defined in package.json'); + } + + // If hippy-vue-router was built exist in packages directory then make a alias + // Remove the section if you don't use it + const hippyVueRouterPath = path.resolve(__dirname, '../../../packages/hippy-vue-router'); + if (fs.existsSync(path.resolve(hippyVueRouterPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue-router in ${hippyVueRouterPath} as vue-router alias`); + aliases['vue-router'] = hippyVueRouterPath; + } else { + console.warn('* Using the @hippy/vue-router defined in package.json'); + } + + // If hippy-vue-native-components was built in packages directory exist then make a alias + // Remove the section if you don't use it + const hippyVueNativeComponentsPath = path.resolve(__dirname, '../../../packages/hippy-vue-native-components'); + if (fs.existsSync(path.resolve(hippyVueNativeComponentsPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue-native-components in ${hippyVueNativeComponentsPath}`); + aliases['@hippy/vue-native-components'] = hippyVueNativeComponentsPath; + } else { + console.warn('* Using the @hippy/vue-native-components defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.ios-vendor.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.ios-vendor.js new file mode 100644 index 00000000000..61abefb63b1 --- /dev/null +++ b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.ios-vendor.js @@ -0,0 +1,133 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); + +const platform = 'ios'; +const engine = 'hermes'; + +let vueLoader = '@hippy/vue-loader'; +let VueLoaderPlugin; +const hippyVueLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-loader/lib'); +const hippyVueLoaderNodeModulesPath = path.resolve(__dirname, '../../../packages/hippy-vue-loader/node_modules'); +if (fs.existsSync(hippyVueLoaderNodeModulesPath) && fs.existsSync(hippyVueLoaderPath)) { + console.warn(`* Using the @hippy/vue-loader in ${hippyVueLoaderPath}`); + vueLoader = hippyVueLoaderPath; + VueLoaderPlugin = require(path.resolve(__dirname, '../../../packages/hippy-vue-loader/lib/plugin')); +} else { + console.warn('* Using the @hippy/vue-loader defined in package.json'); + VueLoaderPlugin = require('@hippy/vue-loader/lib/plugin'); +} + +module.exports = { + mode: 'production', + bail: true, + entry: { + vendor: [path.resolve(__dirname, './vendor.js')], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + library: 'hippyVueBase', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new VueLoaderPlugin(), + new webpack.DllPlugin({ + context: path.resolve(__dirname, '..'), + path: path.resolve(__dirname, `../dist/${platform}/[name]-manifest.json`), + name: 'hippyVueBase', + }), + ], + module: { + rules: [ + { + test: /\.vue$/, + use: [ + { + loader: vueLoader, + options: { + compilerOptions: { + // whitespace handler, default is 'preserve' + whitespace: 'condense', + }, + }, + }, + ], + }, + { + test: /\.(js)$/, + use: [ + { + loader: 'babel-loader', + options: { + presets: [ + [ + '@babel/preset-env', + { + targets: { + ios: 8, + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ], + }, + }, + ], + }, + ], + }, + resolve: { + extensions: ['.js', '.vue', '.json'], + // if node_modules path listed below is not your repo directory, change it. + modules: [path.resolve(__dirname, '../node_modules')], + alias: (() => { + const aliases = { + vue: '@hippy/vue', + '@': path.resolve('./src'), + 'vue-router': '@hippy/vue-router', + }; + // If hippy-vue was built exist in packages directory then make a alias + // Remove the section if you don't use it + const hippyVuePath = path.resolve(__dirname, '../../../packages/hippy-vue'); + if (fs.existsSync(path.resolve(hippyVuePath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue in ${hippyVuePath} as vue alias`); + aliases.vue = hippyVuePath; + aliases['@hippy/vue'] = hippyVuePath; + } else { + console.warn('* Using the @hippy/vue defined in package.json'); + } + // If hippy-vue-router was built in packages directory exist then make a alias + // Remove the section if you don't use it + const hippyVueRouterPath = path.resolve(__dirname, '../../../packages/hippy-vue-router'); + if (fs.existsSync(path.resolve(hippyVueRouterPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue-router in ${hippyVueRouterPath} as vue-router alias`); + aliases['vue-router'] = hippyVueRouterPath; + } else { + console.warn('* Using the @hippy/vue-router defined in package.json'); + } + + // If hippy-vue-native-components was built in packages directory exist then make a alias + // Remove the section if you don't use it + const hippyVueNativeComponentsPath = path.resolve(__dirname, '../../../packages/hippy-vue-native-components'); + if (fs.existsSync(path.resolve(hippyVueNativeComponentsPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue-native-components in ${hippyVueNativeComponentsPath}`); + aliases['@hippy/vue-native-components'] = hippyVueNativeComponentsPath; + } else { + console.warn('* Using the @hippy/vue-native-components defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.ios.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.ios.js new file mode 100644 index 00000000000..e598bfd5e38 --- /dev/null +++ b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.hermes.ios.js @@ -0,0 +1,181 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin'); +const pkg = require('../package.json'); +const manifest = require('../dist/ios/vendor-manifest.json'); + +const platform = 'ios'; +const engine = 'hermes'; + +let cssLoader = '@hippy/vue-css-loader'; +const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js'); +if (fs.existsSync(hippyVueCssLoaderPath)) { + console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`); + cssLoader = hippyVueCssLoaderPath; +} else { + console.warn('* Using the @hippy/vue-css-loader defined in package.json'); +} + +let vueLoader = '@hippy/vue-loader'; +let VueLoaderPlugin; +const hippyVueLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-loader/lib'); +const hippyVueLoaderNodeModulesPath = path.resolve(__dirname, '../../../packages/hippy-vue-loader/node_modules'); +if (fs.existsSync(hippyVueLoaderNodeModulesPath) && fs.existsSync(hippyVueLoaderPath)) { + console.warn(`* Using the @hippy/vue-loader in ${hippyVueLoaderPath}`); + vueLoader = hippyVueLoaderPath; + VueLoaderPlugin = require(path.resolve(__dirname, '../../../packages/hippy-vue-loader/lib/plugin')); +} else { + console.warn('* Using the @hippy/vue-loader defined in package.json'); + VueLoaderPlugin = require('@hippy/vue-loader/lib/plugin'); +} + +module.exports = { + mode: 'production', + bail: true, + entry: { + index: ['@hippy/rejection-tracking-polyfill', path.resolve(pkg.nativeMain)], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + // CDN path can be configured to load children bundles from remote server + // publicPath: 'https://xxx/hippy/hippyVueDemo/', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new VueLoaderPlugin(), + new webpack.DllReferencePlugin({ + context: path.resolve(__dirname, '..'), + manifest, + }), + new HippyDynamicImportPlugin(), + // LimitChunkCountPlugin can control dynamic import ability + // Using 1 will prevent any additional chunks from being added + // new webpack.optimize.LimitChunkCountPlugin({ + // maxChunks: 1, + // }), + // use SourceMapDevToolPlugin can generate sourcemap file + // new webpack.SourceMapDevToolPlugin({ + // test: /\.(js|jsbundle|css|bundle)($|\?)/i, + // filename: '[file].map', + // }), + ], + module: { + rules: [ + { + test: /\.vue$/, + use: [ + { + loader: vueLoader, + options: { + compilerOptions: { + // whitespace handler, default is 'preserve' + whitespace: 'condense', + }, + }, + }, + ], + }, + { + test: /\.css$/, + use: [ + cssLoader, + ], + }, + { + test: /\.(js)$/, + use: [ + { + loader: 'babel-loader', + options: { + sourceType: 'unambiguous', + presets: [ + [ + '@babel/preset-env', + { + targets: { + ios: 8, + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ['@babel/plugin-proposal-decorators', { legacy: true }], + ['@babel/plugin-transform-runtime', { regenerator: true }], + ], + }, + }, + ], + }, + { + test: /\.(png|jpe?g|gif)$/i, + use: [{ + loader: 'url-loader', + options: { + // if you would like to use base64 for picture, uncomment limit: true + // limit: true, + limit: 8192, + fallback: 'file-loader', + name: '[name].[ext]', + outputPath: 'assets/', + }, + }], + }, + ], + }, + resolve: { + extensions: ['.js', '.vue', '.json'], + // if node_modules path listed below is not your repo directory, change it. + modules: [path.resolve(__dirname, '../node_modules')], + alias: (() => { + const aliases = { + vue: '@hippy/vue', + '@': path.resolve('./src'), + 'vue-router': '@hippy/vue-router', + }; + + // If hippy-vue was built exist in packages directory then make a alias + // Remove the section if you don't use it + const hippyVuePath = path.resolve(__dirname, '../../../packages/hippy-vue'); + if (fs.existsSync(path.resolve(hippyVuePath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue in ${hippyVuePath} as vue alias`); + aliases.vue = hippyVuePath; + aliases['@hippy/vue'] = hippyVuePath; + } else { + console.warn('* Using the @hippy/vue defined in package.json'); + } + + // If hippy-vue-router was built exist in packages directory then make a alias + // Remove the section if you don't use it + const hippyVueRouterPath = path.resolve(__dirname, '../../../packages/hippy-vue-router'); + if (fs.existsSync(path.resolve(hippyVueRouterPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue-router in ${hippyVueRouterPath} as vue-router alias`); + aliases['vue-router'] = hippyVueRouterPath; + } else { + console.warn('* Using the @hippy/vue-router defined in package.json'); + } + + // If hippy-vue-native-components was built exist in packages directory then make a alias + // Remove the section if you don't use it + const hippyVueNativeComponentsPath = path.resolve(__dirname, '../../../packages/hippy-vue-native-components'); + if (fs.existsSync(path.resolve(hippyVueNativeComponentsPath, 'dist/index.js'))) { + console.warn(`* Using the @hippy/vue-native-components in ${hippyVueNativeComponentsPath}`); + aliases['@hippy/vue-native-components'] = hippyVueNativeComponentsPath; + } else { + console.warn('* Using the @hippy/vue-native-components defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-vue-next-demo/package.json b/driver/js/examples/hippy-vue-next-demo/package.json index e5dc6e09c2b..6777f1ade6d 100644 --- a/driver/js/examples/hippy-vue-next-demo/package.json +++ b/driver/js/examples/hippy-vue-next-demo/package.json @@ -13,7 +13,9 @@ "hippy:vendor": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js", "hippy:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js", "web:dev": "npm run hippy:dev & node ./scripts/env-polyfill.js webpack serve --config ./scripts/hippy-webpack.web-renderer.dev.js", - "web:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.web-renderer.js" + "web:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.web-renderer.js", + "hippy:vendor:hermes": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.hermes.ios-vendor.js --config ./scripts/hippy-webpack.hermes.android-vendor.js", + "hippy:build:hermes": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.hermes.ios.js --config ./scripts/hippy-webpack.hermes.android.js" }, "dependencies": { "@hippy/vue-next": "latest", diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.android-vendor.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.android-vendor.js new file mode 100644 index 00000000000..ee26b466b70 --- /dev/null +++ b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.android-vendor.js @@ -0,0 +1,109 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const { VueLoaderPlugin } = require('vue-loader'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); + +const platform = 'android'; +const engine = 'hermes'; + +module.exports = { + mode: 'production', + bail: true, + entry: { + vendor: [path.resolve(__dirname, './vendor.js')], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + library: 'hippyVueBase', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new VueLoaderPlugin(), + new webpack.DllPlugin({ + context: path.resolve(__dirname, '..'), + path: path.resolve(__dirname, `../dist/${platform}/[name]-manifest.json`), + name: 'hippyVueBase', + }), + ], + module: { + rules: [ + { + test: /\.vue$/, + use: [ + { + loader: 'vue-loader', + options: { + compilerOptions: { + // disable vue3 dom patch flag，because hippy do not support innerHTML + hoistStatic: false, + // whitespace handler, default is 'condense', it can be set 'preserve' + whitespace: 'condense', + }, + }, + }, + ], + }, + { + test: /\.(js)$/, + use: [ + { + loader: 'babel-loader', + options: { + presets: [ + [ + '@babel/preset-env', + { + targets: { + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ], + }, + }, + ], + }, + ], + }, + resolve: { + extensions: ['.js', '.vue', '.json', '.ts'], + alias: (() => { + const aliases = { + src: path.resolve('./src'), + }; + + // If @vue/runtime-core was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../packages/hippy-vue-next/node_modules/@vue/runtime-core'); + if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) { + console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`); + aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath; + } else { + console.warn('* Using the @vue/runtime-core defined in package.json'); + } + + // If @hippy/vue-next was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextPath = path.resolve(__dirname, '../../../packages/hippy-vue-next/dist'); + if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`); + aliases['@hippy/vue-next'] = hippyVueNextPath; + } else { + console.warn('* Using the @hippy/vue-next defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.android.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.android.js new file mode 100644 index 00000000000..baf441057ba --- /dev/null +++ b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.android.js @@ -0,0 +1,171 @@ +const path = require('path'); +const fs = require('fs'); +const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const { VueLoaderPlugin } = require('vue-loader'); +const webpack = require('webpack'); + +const platform = 'android'; +const engine = 'hermes'; + +const pkg = require('../package.json'); +const manifest = require('../dist/android/vendor-manifest.json'); +let cssLoader = '@hippy/vue-css-loader'; +const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js'); +if (fs.existsSync(hippyVueCssLoaderPath)) { + console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`); + cssLoader = hippyVueCssLoaderPath; +} else { + console.warn('* Using the @hippy/vue-css-loader defined in package.json'); +} + +module.exports = { + mode: 'production', + bail: true, + entry: { + index: [path.resolve(pkg.nativeMain)], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + // CDN path can be configured to load children bundles from remote server + // publicPath: 'https://xxx/hippy/hippyVueNextDemo/', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new VueLoaderPlugin(), + new webpack.DllReferencePlugin({ + context: path.resolve(__dirname, '..'), + manifest, + }), + new HippyDynamicImportPlugin(), + // LimitChunkCountPlugin can control dynamic import ability + // Using 1 will prevent any additional chunks from being added + // new webpack.optimize.LimitChunkCountPlugin({ + // maxChunks: 1, + // }), + // use SourceMapDevToolPlugin can generate sourcemap file + // new webpack.SourceMapDevToolPlugin({ + // test: /\.(js|jsbundle|css|bundle)($|\?)/i, + // filename: '[file].map', + // }), + ], + module: { + rules: [ + { + test: /\.vue$/, + use: [ + { + loader: 'vue-loader', + options: { + compilerOptions: { + // disable vue3 dom patch flag，because hippy do not support innerHTML + hoistStatic: false, + // whitespace handler, default is 'condense', it can be set 'preserve' + whitespace: 'condense', + }, + }, + }, + ], + }, + { + test: /\.(le|c)ss$/, + use: [cssLoader, 'less-loader'], + }, + { + test: /\.t|js$/, + use: [ + { + loader: 'babel-loader', + options: { + sourceType: 'unambiguous', + presets: [ + [ + '@babel/preset-env', + { + targets: { + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ['@babel/plugin-proposal-decorators', { legacy: true }], + ['@babel/plugin-transform-runtime', { regenerator: true }], + ], + }, + }, + ], + }, + { + test: /\.(png|jpe?g|gif)$/i, + use: [{ + loader: 'url-loader', + options: { + // if you would like to use base64 for picture, uncomment limit: true + // limit: true, + limit: 8192, + fallback: 'file-loader', + name: '[name].[ext]', + outputPath: 'assets/', + }, + }], + }, + { + test: /\.(ts)$/, + use: [ + { + loader: 'ts-loader', + options: { + transpileOnly: true, + appendTsSuffixTo: [/\.vue$/], + }, + }, + ], + exclude: /node_modules/, + }, + { + test: /\.mjs$/, + include: /node_modules/, + type: 'javascript/auto', + }, + ], + }, + resolve: { + extensions: ['.js', '.vue', '.json', '.ts'], + alias: (() => { + const aliases = { + src: path.resolve('./src'), + }; + + // If @vue/runtime-core was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../packages/hippy-vue-next/node_modules/@vue/runtime-core'); + if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) { + console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`); + aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath; + } else { + console.warn('* Using the @vue/runtime-core defined in package.json'); + } + + // If @hippy/vue-next was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextPath = path.resolve(__dirname, '../../../packages/hippy-vue-next/dist'); + if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`); + aliases['@hippy/vue-next'] = hippyVueNextPath; + } else { + console.warn('* Using the @hippy/vue-next defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.ios-vendor.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.ios-vendor.js new file mode 100644 index 00000000000..d7480b8e81b --- /dev/null +++ b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.ios-vendor.js @@ -0,0 +1,110 @@ +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const { VueLoaderPlugin } = require('vue-loader'); + +const platform = 'ios'; +const engine = 'hermes'; + +module.exports = { + mode: 'production', + bail: true, + entry: { + vendor: [path.resolve(__dirname, './vendor.js')], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + library: 'hippyVueBase', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new VueLoaderPlugin(), + new webpack.DllPlugin({ + context: path.resolve(__dirname, '..'), + path: path.resolve(__dirname, `../dist/${platform}/[name]-manifest.json`), + name: 'hippyVueBase', + }), + ], + module: { + rules: [ + { + test: /\.vue$/, + use: [ + { + loader: 'vue-loader', + options: { + compilerOptions: { + // disable vue3 dom patch flag，because hippy do not support innerHTML + hoistStatic: false, + // whitespace handler, default is 'condense', it can be set 'preserve' + whitespace: 'condense', + }, + }, + }, + ], + }, + { + test: /\.(js)$/, + use: [ + { + loader: 'babel-loader', + options: { + presets: [ + [ + '@babel/preset-env', + { + targets: { + ios: 8, + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ], + }, + }, + ], + }, + ], + }, + resolve: { + extensions: ['.js', '.vue', '.json', '.ts'], + alias: (() => { + const aliases = { + src: path.resolve('./src'), + }; + + // If @vue/runtime-core was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../packages/hippy-vue-next/node_modules/@vue/runtime-core'); + if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) { + console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`); + aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath; + } else { + console.warn('* Using the @vue/runtime-core defined in package.json'); + } + + // If @hippy/vue-next was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextPath = path.resolve(__dirname, '../../../packages/hippy-vue-next/dist'); + if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`); + aliases['@hippy/vue-next'] = hippyVueNextPath; + } else { + console.warn('* Using the @hippy/vue-next defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.ios.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.ios.js new file mode 100644 index 00000000000..19800565466 --- /dev/null +++ b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.hermes.ios.js @@ -0,0 +1,172 @@ +const path = require('path'); +const fs = require('fs'); +const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const { VueLoaderPlugin } = require('vue-loader'); +const webpack = require('webpack'); + +const platform = 'ios'; +const engine = 'hermes'; + +const pkg = require('../package.json'); +const manifest = require('../dist/ios/vendor-manifest.json'); +let cssLoader = '@hippy/vue-css-loader'; +const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js'); +if (fs.existsSync(hippyVueCssLoaderPath)) { + console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`); + cssLoader = hippyVueCssLoaderPath; +} else { + console.warn('* Using the @hippy/vue-css-loader defined in package.json'); +} + +module.exports = { + mode: 'production', + bail: true, + entry: { + index: ['@hippy/rejection-tracking-polyfill', path.resolve(pkg.nativeMain)], + }, + output: { + filename: `[name].${platform}.js`, + path: path.resolve(`./dist/${platform}_${engine}/`), + globalObject: '(0, eval)("this")', + // CDN path can be configured to load children bundles from remote server + // publicPath: 'https://xxx/hippy/hippyVueNextDemo/', + }, + plugins: [ + new webpack.NamedModulesPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + __PLATFORM__: JSON.stringify(platform), + }), + new CaseSensitivePathsPlugin(), + new VueLoaderPlugin(), + new webpack.DllReferencePlugin({ + context: path.resolve(__dirname, '..'), + manifest, + }), + new HippyDynamicImportPlugin(), + // LimitChunkCountPlugin can control dynamic import ability + // Using 1 will prevent any additional chunks from being added + // new webpack.optimize.LimitChunkCountPlugin({ + // maxChunks: 1, + // }), + // use SourceMapDevToolPlugin can generate sourcemap file + // new webpack.SourceMapDevToolPlugin({ + // test: /\.(js|jsbundle|css|bundle)($|\?)/i, + // filename: '[file].map', + // }), + ], + module: { + rules: [ + { + test: /\.vue$/, + use: [ + { + loader: 'vue-loader', + options: { + compilerOptions: { + // disable vue3 dom patch flag，because hippy do not support innerHTML + hoistStatic: false, + // whitespace handler, default is 'condense', it can be set 'preserve' + whitespace: 'condense', + }, + }, + }, + ], + }, + { + test: /\.(le|c)ss$/, + use: [cssLoader, 'less-loader'], + }, + { + test: /\.t|js$/, + use: [ + { + loader: 'babel-loader', + options: { + sourceType: 'unambiguous', + presets: [ + [ + '@babel/preset-env', + { + targets: { + ios: 9, + chrome: 41, + }, + }, + ], + ], + plugins: [ + ['@babel/plugin-proposal-class-properties'], + ['@babel/plugin-proposal-decorators', { legacy: true }], + ['@babel/plugin-transform-runtime', { regenerator: true }], + ], + }, + }, + ], + }, + { + test: /\.(png|jpe?g|gif)$/i, + use: [{ + loader: 'url-loader', + options: { + // if you would like to use base64 for picture, uncomment limit: true + // limit: true, + limit: 8192, + fallback: 'file-loader', + name: '[name].[ext]', + outputPath: 'assets/', + }, + }], + }, + { + test: /\.(ts)$/, + use: [ + { + loader: 'ts-loader', + options: { + transpileOnly: true, + appendTsSuffixTo: [/\.vue$/], + }, + }, + ], + exclude: /node_modules/, + }, + { + test: /\.mjs$/, + include: /node_modules/, + type: 'javascript/auto', + }, + ], + }, + resolve: { + extensions: ['.js', '.vue', '.json', '.ts'], + alias: (() => { + const aliases = { + src: path.resolve('./src'), + }; + + // If @vue/runtime-core was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../packages/hippy-vue-next/node_modules/@vue/runtime-core'); + if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) { + console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`); + aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath; + } else { + console.warn('* Using the @vue/runtime-core defined in package.json'); + } + + // If @hippy/vue-next was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextPath = path.resolve(__dirname, '../../../packages/hippy-vue-next/dist'); + if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`); + aliases['@hippy/vue-next'] = hippyVueNextPath; + } else { + console.warn('* Using the @hippy/vue-next defined in package.json'); + } + + return aliases; + })(), + }, +}; diff --git a/driver/js/scripts/build-example.js b/driver/js/scripts/build-example.js index a9dc7d7231c..0f0c5cb9c9c 100644 --- a/driver/js/scripts/build-example.js +++ b/driver/js/scripts/build-example.js @@ -19,6 +19,7 @@ */ /* eslint-disable no-console */ +const fs = require('fs'); const path = require('path'); const { cp, @@ -28,13 +29,17 @@ const { test, } = require('shelljs'); -const cmdExample = 'please execute command like \'npm run buildexample hippy-react-demo\' or \'npm run buildexample hippy-vue-demo|hippy-vue-next-demo\''; +const cmdExample = 'please execute command like \'npm run buildexample hippy-react-demo [hermes]\' or \'npm run buildexample hippy-vue-demo|hippy-vue-next-demo [hermes]\''; const example = process.argv[2]; if (!example) { console.error(`❌ No example argument found, ${cmdExample}.`); process.exit(1); return; } + +const use_hermes_engine = process.argv[3] === 'hermes'; +const engine = process.argv[3]; + const BASE_PATH = process.cwd(); // Target demo project path const DEMO_PATH = path.join(BASE_PATH, 'examples', example); @@ -44,6 +49,28 @@ if (!test('-d', DEMO_PATH)) { return; } +const TOOLS_PATH = path.join(BASE_PATH, '/tools'); +async function BuildHBCFile(platform) { + const sourcePath = path.join(DEMO_PATH, `dist/${platform}_${engine}`); + const destPath = path.join(DEMO_PATH, `dist/${platform}_hbc`) + if (fs.existsSync(destPath)) fs.rmdirSync(destPath, { recursive: true }); + fs.mkdirSync(`${destPath}`, { recursive: true }); + cp('-Rf', `${sourcePath}/*`, `${destPath}/`); // copy to dest path + + const files = await fs.readdirSync(destPath, { recursive: true }); + for (const file of files) { + let filePath = path.join(destPath, file); + let stats = fs.statSync(filePath); + if (stats.isDirectory()) { + continue; + } else if (path.extname(file) === '.js') { + const basename = path.basename(file, '.js'); + runScript(`${TOOLS_PATH}/hermes -emit-binary -out ${destPath}/${basename}.js ${destPath}/${file}`) + console.log(`convert file ${destPath}/${file} format form js to hbc`); + } + } +} + pushd(DEMO_PATH); const execOptions = { stdio: 'inherit' }; @@ -59,22 +86,47 @@ console.log(`1/3 Start to install ${example} dependencies.`); runScript('npm install --legacy-peer-deps'); console.log(`2/3 Start to build project ${example}.`); -runScript('npm run hippy:vendor'); // Build vendor js -runScript('npm run hippy:build'); // Build index js +if (!use_hermes_engine) { + runScript('npm run hippy:vendor'); // Build vendor js + runScript('npm run hippy:build'); // Build index js -console.log('3/3 Copy the built files to native.'); -let jsPath = ''; -if (example === 'hippy-react-demo') { - jsPath = 'react/'; -} else if (example === 'hippy-vue-demo') { - jsPath = 'vue2/'; -} else if (example === 'hippy-vue-next-demo') { - jsPath = 'vue3/'; -} + console.log('3/3 Copy the built files to native.'); + let jsPath = ''; + if (example === 'hippy-react-demo') { + jsPath = 'react/'; + } else if (example === 'hippy-vue-demo') { + jsPath = 'vue2/'; + } else if (example === 'hippy-vue-next-demo') { + jsPath = 'vue3/'; + } + + cp('-Rf', './dist/ios/*', `../../../../framework/examples/ios-demo/res/${jsPath}`); // Update the ios demo project + cp('-Rf', './dist/android/*', `../../../../framework/examples/android-demo/res/${jsPath}`); // # Update the android project + cp('-Rf', './dist/android/*', `../../../../framework/voltron/example/assets/jsbundle/${jsPath}`); // # Update the flutter project, ios and android use same bundle -cp('-Rf', './dist/ios/*', `../../../../framework/examples/ios-demo/res/${jsPath}`); // Update the ios demo project -cp('-Rf', './dist/android/*', `../../../../framework/examples/android-demo/res/${jsPath}`); // # Update the android project -cp('-Rf', './dist/android/*', `../../../../framework/voltron/example/assets/jsbundle/${jsPath}`); // # Update the flutter project, ios and android use same bundle + console.log('👌 All done, you can open your native app now, enjoy.'); + popd(); +} else { + runScript('npm run hippy:vendor:hermes'); // Build vendor js + runScript('npm run hippy:build:hermes'); // Build index js + BuildHBCFile('android').then(()=> { + return BuildHBCFile('ios') + }).then(()=> { + console.log('3/3 Copy the built files to native.'); + let jsPath = ''; + if (example === 'hippy-react-demo') { + jsPath = 'react/'; + } else if (example === 'hippy-vue-demo') { + jsPath = 'vue2/'; + } else if (example === 'hippy-vue-next-demo') { + jsPath = 'vue3/'; + } -console.log('👌 All done, you can open your native app now, enjoy.'); -popd(); + cp('-Rf', './dist/ios_hbc/*', `../../../../framework/examples/ios-demo/res/${jsPath}`); // Update the ios demo project + cp('-Rf', './dist/android_hbc/*', `../../../../framework/examples/android-demo/res/${jsPath}`); // # Update the android project + cp('-Rf', './dist/android_hbc/*', `../../../../framework/voltron/example/assets/jsbundle/${jsPath}`); // # Update the flutter project, ios and android use same bundle + + console.log('👌 All done, you can open your native app now, enjoy.'); + popd(); + }); +} diff --git a/driver/js/tools/hermes b/driver/js/tools/hermes new file mode 100755 index 00000000000..96a2c8dfb49 Binary files /dev/null and b/driver/js/tools/hermes differ diff --git a/modules/vfs/android/src/main/cpp/src/handler/asset_handler.cc b/modules/vfs/android/src/main/cpp/src/handler/asset_handler.cc index 2373576efa1..0b56b9cf1ec 100644 --- a/modules/vfs/android/src/main/cpp/src/handler/asset_handler.cc +++ b/modules/vfs/android/src/main/cpp/src/handler/asset_handler.cc @@ -71,9 +71,7 @@ bool ReadAsset(const string_view& path, bytes.back() = '\0'; } AAsset_close(asset); - FOOTSTONE_DLOG(INFO) << "path = " << path << ", len = " << bytes.length() - << ", file_data = " - << reinterpret_cast(bytes.c_str()); + FOOTSTONE_DLOG(INFO) << "path = " << path << ", len = " << bytes.length(); return true; } FOOTSTONE_DLOG(INFO) << "ReadFile fail, file_path = " << file_path;