diff --git a/packages/webpack5/.gitignore b/packages/webpack5/.gitignore index f62c3253a..24729192e 100644 --- a/packages/webpack5/.gitignore +++ b/packages/webpack5/.gitignore @@ -1,2 +1,3 @@ # dist +coverage diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap index 3315feca1..bed62bfba 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap @@ -178,8 +178,7 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR 'global.isAndroid': true, 'global.isIOS': false, process: 'global.process', - profile: '() => {}', - __TEST__: 'false', + __TEST__: false, 'process.env.NODE_ENV': '\\"development\\"' } ), @@ -373,8 +372,7 @@ exports[`react configuration > android > base config 1`] = ` 'global.isAndroid': true, 'global.isIOS': false, process: 'global.process', - profile: '() => {}', - __TEST__: 'false', + __TEST__: false, 'process.env.NODE_ENV': '\\"development\\"' } ), @@ -568,8 +566,7 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena 'global.isAndroid': false, 'global.isIOS': true, process: 'global.process', - profile: '() => {}', - __TEST__: 'false', + __TEST__: false, 'process.env.NODE_ENV': '\\"development\\"' } ), @@ -766,8 +763,7 @@ exports[`react configuration > ios > base config 1`] = ` 'global.isAndroid': false, 'global.isIOS': true, process: 'global.process', - profile: '() => {}', - __TEST__: 'false', + __TEST__: false, 'process.env.NODE_ENV': '\\"development\\"' } ), diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap index 505ff166e..c85d74460 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap @@ -188,8 +188,7 @@ exports[`vue configuration for android 1`] = ` __IOS__: false, 'global.isAndroid': true, 'global.isIOS': false, - process: 'global.process', - profile: '() => {}' + process: 'global.process' } ), /* config.plugin('WatchStateLoggerPlugin') */ @@ -392,8 +391,7 @@ exports[`vue configuration for ios 1`] = ` __IOS__: true, 'global.isAndroid': false, 'global.isIOS': true, - process: 'global.process', - profile: '() => {}' + process: 'global.process' } ), /* config.plugin('WatchStateLoggerPlugin') */ diff --git a/packages/webpack5/__tests__/index.spec.ts b/packages/webpack5/__tests__/index.spec.ts index 500931f4d..de6065046 100644 --- a/packages/webpack5/__tests__/index.spec.ts +++ b/packages/webpack5/__tests__/index.spec.ts @@ -14,7 +14,6 @@ describe('@nativescript/webpack', () => { it('applies chain configs', () => { webpack.useConfig(false); - expect(webpack.chainWebpack).toBeInstanceOf(Function); const chainFn = jest.fn(); webpack.chainWebpack(chainFn); @@ -30,4 +29,72 @@ describe('@nativescript/webpack', () => { expect(chainFn).toHaveBeenCalledWith(config, {}); expect(config).toBeInstanceOf(Config); }); + + it('applies merge configs', () => { + const dummyEnv = { env: true }; + webpack.init(dummyEnv); + webpack.useConfig(false); + + const mergeFn = jest.fn(); + webpack.mergeWebpack(mergeFn); + + // mergeFn should not be called yet + expect(mergeFn).not.toHaveBeenCalled(); + + const config = webpack.resolveChainableConfig(); + + // mergeFn should not be called yet + expect(mergeFn).not.toHaveBeenCalled(); + + // mergeFn should only be called when + // resolving the final config + webpack.resolveConfig(); + + expect(mergeFn).toHaveBeenCalledTimes(1); + expect(mergeFn).toHaveBeenCalledWith(config.toConfig(), dummyEnv); + }); + + it('merges mutate config', () => { + const dummyEnv = { env: true }; + webpack.init(dummyEnv); + webpack.useConfig(false); + + webpack.mergeWebpack((config) => { + (config as any).mutated = true; + }); + + expect(webpack.resolveConfig()).toMatchObject({ + mutated: true, + }); + }); + + it('merges returned config', () => { + const dummyEnv = { env: true }; + webpack.init(dummyEnv); + webpack.useConfig(false); + + webpack.mergeWebpack(() => { + return { + returned: true, + }; + }); + + expect(webpack.resolveConfig()).toMatchObject({ + returned: true, + }); + }); + + it('merges objects', () => { + const dummyEnv = { env: true }; + webpack.init(dummyEnv); + webpack.useConfig(false); + + webpack.mergeWebpack({ + object: true, + } as any); + + expect(webpack.resolveConfig()).toMatchObject({ + object: true, + }); + }); }); diff --git a/packages/webpack5/src/configuration/react.ts b/packages/webpack5/src/configuration/react.ts index cbbd9f0b2..6810952a7 100644 --- a/packages/webpack5/src/configuration/react.ts +++ b/packages/webpack5/src/configuration/react.ts @@ -24,7 +24,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { config.plugin('DefinePlugin').tap((args) => { args[0] = merge(args[0], { /** For various libraries in the React ecosystem. */ - __TEST__: 'false', + __TEST__: false, /** * 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/helpers/temp.ts b/packages/webpack5/src/helpers/temp.ts deleted file mode 100644 index 50e422bcd..000000000 --- a/packages/webpack5/src/helpers/temp.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { existsSync } from 'fs'; -import { getPackageJson } from './project'; -import { resolve } from 'path'; - -// todo: get rid of these or reduce them to their simplest form -// no need to do magical string replacements, loops etc... - -/** - * Function to ensure the app directory exists - * - * @param appDirectory - */ -function verifyEntryModuleDirectory(appDirectory: string) { - if (!appDirectory) { - throw new Error('Path to app directory is not specified. Unable to find entry module.'); - } - - if (!existsSync(appDirectory)) { - throw new Error(`The specified path to app directory ${appDirectory} does not exist. Unable to find entry module.`); - } -} - -function getPackageJsonEntry() { - const packageJsonSource = getPackageJson(); - const entry = packageJsonSource.main; - - if (!entry) { - throw new Error(`package.json must contain a 'main' attribute!`); - } - - return entry.replace(/\.js$/i, ''); -} - -export function getEntryModule(appDirectory: string, platform: 'android' | 'ios') { - verifyEntryModuleDirectory(appDirectory); - - const entry = getPackageJsonEntry(); - - const tsEntryPath = resolve(appDirectory, `${entry}.ts`); - const jsEntryPath = resolve(appDirectory, `${entry}.js`); - let entryExists = existsSync(tsEntryPath) || existsSync(jsEntryPath); - if (!entryExists && platform) { - const platformTsEntryPath = resolve(appDirectory, `${entry}.${platform}.ts`); - const platformJsEntryPath = resolve(appDirectory, `${entry}.${platform}.js`); - entryExists = existsSync(platformTsEntryPath) || existsSync(platformJsEntryPath); - } - - if (!entryExists) { - throw new Error(`The entry module ${entry} specified in ` + `${appDirectory}/package.json doesn't exist!`); - } - - return entry; -} diff --git a/packages/webpack5/src/loaders/apply-css-loader/index.ts b/packages/webpack5/src/loaders/apply-css-loader/index.ts index 40350f4c7..966f894a2 100644 --- a/packages/webpack5/src/loaders/apply-css-loader/index.ts +++ b/packages/webpack5/src/loaders/apply-css-loader/index.ts @@ -18,14 +18,14 @@ export default function loader(content, map) { const hmrCode = this.hot ? dedent` - if(module.hot) { - module.hot.accept() - module.hot.dispose(() => { - const { removeTaggedAdditionalCSS } = require("@nativescript/core/ui/styling/style-scope"); - removeTaggedAdditionalCSS(${tag}) - }) - } - ` + if(module.hot) { + module.hot.accept() + module.hot.dispose(() => { + const { removeTaggedAdditionalCSS } = require("@nativescript/core/ui/styling/style-scope"); + removeTaggedAdditionalCSS(${tag}) + }) + } + ` : ``; if (hasLoader('apply-css-loader')) {