From 3bdc34aec312f5aaf8a268f6e7f4ca18f1f1ebbf Mon Sep 17 00:00:00 2001 From: Igor Randjelovic Date: Sun, 29 Aug 2021 18:08:05 +0200 Subject: [PATCH] refactor(webpack): drop custom flavor helper & explicitly set in each config --- .../configuration/__snapshots__/angular.spec.ts.snap | 4 ++++ .../configuration/__snapshots__/base.spec.ts.snap | 4 ++++ .../__snapshots__/javascript.spec.ts.snap | 4 ++++ .../configuration/__snapshots__/react.spec.ts.snap | 8 ++++++++ .../configuration/__snapshots__/svelte.spec.ts.snap | 4 ++++ .../__snapshots__/typescript.spec.ts.snap | 4 ++++ .../configuration/__snapshots__/vue.spec.ts.snap | 4 ++++ packages/webpack5/package.json | 2 +- packages/webpack5/src/configuration/angular.ts | 9 +++++++++ packages/webpack5/src/configuration/base.ts | 3 +-- packages/webpack5/src/configuration/react.ts | 1 + packages/webpack5/src/configuration/svelte.ts | 11 ++++++++++- packages/webpack5/src/configuration/vue.ts | 8 ++++++++ packages/webpack5/src/helpers/flavor.ts | 11 ----------- packages/webpack5/src/helpers/index.ts | 3 +-- 15 files changed, 63 insertions(+), 17 deletions(-) diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap index 5efd26808..44d96f203 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap @@ -311,6 +311,8 @@ exports[`angular configuration for android 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: true, __IOS__: false, 'global.isAndroid': true, @@ -696,6 +698,8 @@ exports[`angular configuration for ios 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: false, __IOS__: true, 'global.isAndroid': false, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap index 801d934ce..14203bb11 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap @@ -247,6 +247,8 @@ exports[`base configuration for android 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: false, __ANDROID__: true, __IOS__: false, 'global.isAndroid': true, @@ -555,6 +557,8 @@ exports[`base configuration for ios 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: false, __ANDROID__: false, __IOS__: true, 'global.isAndroid': false, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap index c4fc4fcf6..a22606bfb 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap @@ -264,6 +264,8 @@ exports[`javascript configuration for android 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: false, __ANDROID__: true, __IOS__: false, 'global.isAndroid': true, @@ -594,6 +596,8 @@ exports[`javascript configuration for ios 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: false, __ANDROID__: false, __IOS__: true, 'global.isAndroid': false, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap index 2d35a4f8a..cc9841c9c 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap @@ -262,6 +262,8 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: true, __IOS__: false, 'global.isAndroid': true, @@ -581,6 +583,8 @@ exports[`react configuration > android > base config 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: true, __IOS__: false, 'global.isAndroid': true, @@ -900,6 +904,8 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: false, __IOS__: true, 'global.isAndroid': false, @@ -1220,6 +1226,8 @@ exports[`react configuration > ios > base config 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: false, __IOS__: true, 'global.isAndroid': false, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap index c6e7d7983..173625fc9 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap @@ -273,6 +273,8 @@ exports[`svelte configuration for android 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: true, __IOS__: false, 'global.isAndroid': true, @@ -601,6 +603,8 @@ exports[`svelte configuration for ios 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: false, __IOS__: true, 'global.isAndroid': false, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap index 1b820ec3c..b4d8676d8 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap @@ -264,6 +264,8 @@ exports[`typescript configuration for android 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: false, __ANDROID__: true, __IOS__: false, 'global.isAndroid': true, @@ -594,6 +596,8 @@ exports[`typescript configuration for ios 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: false, __ANDROID__: false, __IOS__: true, 'global.isAndroid': false, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap index 97e6dd9de..1845cc4ed 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap @@ -287,6 +287,8 @@ exports[`vue configuration for android 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: true, __IOS__: false, 'global.isAndroid': true, @@ -629,6 +631,8 @@ exports[`vue configuration for ios 1`] = ` __NS_ENV_VERBOSE__: false, __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]', __CSS_PARSER__: '\\"css-tree\\"', + __UI_USE_XML_PARSER__: true, + __UI_USE_EXTERNAL_RENDERER__: true, __ANDROID__: false, __IOS__: true, 'global.isAndroid': false, diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json index ae1d09a86..cbe69cec0 100644 --- a/packages/webpack5/package.json +++ b/packages/webpack5/package.json @@ -46,7 +46,7 @@ "ts-dedent": "^2.0.0", "ts-loader": "^9.0.0", "vue-loader": "^15.0.0", - "webpack": "5.50.0", + "webpack": "^5.30.0 <= 5.50.0", "webpack-bundle-analyzer": "^4.0.0", "webpack-chain": "^6.0.0", "webpack-cli": "^4.0.0", diff --git a/packages/webpack5/src/configuration/angular.ts b/packages/webpack5/src/configuration/angular.ts index 1294e7a39..80d3608d9 100644 --- a/packages/webpack5/src/configuration/angular.ts +++ b/packages/webpack5/src/configuration/angular.ts @@ -1,4 +1,5 @@ import { extname, resolve } from 'path'; +import { merge } from 'webpack-merge'; import Config from 'webpack-chain'; import { existsSync } from 'fs'; @@ -222,6 +223,14 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { ]) ); + config.plugin('DefinePlugin').tap((args) => { + args[0] = merge(args[0], { + __UI_USE_EXTERNAL_RENDERER__: true, + }); + + return args; + }); + return config; } diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts index 47c7123e2..33069f8cb 100644 --- a/packages/webpack5/src/configuration/base.ts +++ b/packages/webpack5/src/configuration/base.ts @@ -15,7 +15,6 @@ import { applyFileReplacements } from '../helpers/fileReplacements'; import { addCopyRule, applyCopyRules } from '../helpers/copyRules'; import { WatchStatePlugin } from '../plugins/WatchStatePlugin'; import { getProjectFilePath } from '../helpers/project'; -import { projectUsesCustomFlavor } from '../helpers/flavor'; import { hasDependency } from '../helpers/dependencies'; import { applyDotEnvPlugin } from '../helpers/dotEnv'; import { env as _env, IWebpackEnv } from '../index'; @@ -354,7 +353,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { mode === 'development' ? JSON.stringify(getIPS()) : `[]`, __CSS_PARSER__: JSON.stringify(getValue('cssParser', 'css-tree')), __UI_USE_XML_PARSER__: true, - __UI_USE_EXTERNAL_RENDERER__: projectUsesCustomFlavor(), + __UI_USE_EXTERNAL_RENDERER__: false, __ANDROID__: platform === 'android', __IOS__: platform === 'ios', /* for compat only */ 'global.isAndroid': platform === 'android', diff --git a/packages/webpack5/src/configuration/react.ts b/packages/webpack5/src/configuration/react.ts index be0a552dd..2bbf05ee4 100644 --- a/packages/webpack5/src/configuration/react.ts +++ b/packages/webpack5/src/configuration/react.ts @@ -26,6 +26,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { args[0] = merge(args[0], { /** For various libraries in the React ecosystem. */ __TEST__: false, + __UI_USE_EXTERNAL_RENDERER__: true, /** * Primarily for React Fast Refresh plugin, but technically the allowHmrInProduction option could be used instead. * Worth including anyway, as there are plenty of Node libraries that use this flag. diff --git a/packages/webpack5/src/configuration/svelte.ts b/packages/webpack5/src/configuration/svelte.ts index c394cbbb4..892e2c72a 100644 --- a/packages/webpack5/src/configuration/svelte.ts +++ b/packages/webpack5/src/configuration/svelte.ts @@ -1,11 +1,12 @@ +import { merge } from 'webpack-merge'; import Config from 'webpack-chain'; import { getProjectFilePath } from '../helpers/project'; +import { hasDependency } from '../helpers/dependencies'; import { getPlatformName } from '../helpers/platform'; import { env as _env, IWebpackEnv } from '../index'; import { error } from '../helpers/log'; import base from './base'; -import { hasDependency } from '../helpers/dependencies'; export default function (config: Config, env: IWebpackEnv = _env): Config { base(config, env); @@ -84,6 +85,14 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { }); } + config.plugin('DefinePlugin').tap((args) => { + args[0] = merge(args[0], { + __UI_USE_EXTERNAL_RENDERER__: true, + }); + + return args; + }); + return config; } diff --git a/packages/webpack5/src/configuration/vue.ts b/packages/webpack5/src/configuration/vue.ts index 9c82c62b3..7ef6fc144 100644 --- a/packages/webpack5/src/configuration/vue.ts +++ b/packages/webpack5/src/configuration/vue.ts @@ -88,6 +88,14 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { // add an alias for vue, since some plugins may try to import it config.resolve.alias.set('vue', 'nativescript-vue'); + config.plugin('DefinePlugin').tap((args) => { + args[0] = merge(args[0], { + __UI_USE_EXTERNAL_RENDERER__: true, + }); + + return args; + }); + return config; } diff --git a/packages/webpack5/src/helpers/flavor.ts b/packages/webpack5/src/helpers/flavor.ts index a571c1064..87b2bd8d5 100644 --- a/packages/webpack5/src/helpers/flavor.ts +++ b/packages/webpack5/src/helpers/flavor.ts @@ -2,17 +2,6 @@ import { defaultConfigs } from '@nativescript/webpack'; import { getAllDependencies } from './dependencies'; import { error } from './log'; -/** - * Utility to determine if the project uses an external flavor/framework - */ -export function projectUsesCustomFlavor(): boolean { - const projectFlavor = determineProjectFlavor(); - - return ( - projectFlavor && - ['vue', 'angular', 'react', 'svelte'].includes(projectFlavor) - ); -} /** * Utility to determine the project flavor based on installed dependencies * (vue, angular, react, svelete, typescript, javascript...) diff --git a/packages/webpack5/src/helpers/index.ts b/packages/webpack5/src/helpers/index.ts index 082f8a5e6..56637d566 100644 --- a/packages/webpack5/src/helpers/index.ts +++ b/packages/webpack5/src/helpers/index.ts @@ -9,7 +9,7 @@ import { addVirtualEntry, addVirtualModule } from './virtualModules'; import { applyFileReplacements } from './fileReplacements'; import { addCopyRule, removeCopyRule } from './copyRules'; import { error, info, warn, warnOnce } from './log'; -import { determineProjectFlavor, projectUsesCustomFlavor } from './flavor'; +import { determineProjectFlavor } from './flavor'; import { getValue } from './config'; import { getIPS } from './host'; import { @@ -47,7 +47,6 @@ export default { }, flavor: { determineProjectFlavor, - projectUsesCustomFlavor, }, host: { getIPS,