From 241c4102f78557154ae7e10ca74b7a2107f3538c Mon Sep 17 00:00:00 2001 From: Igor Randjelovic Date: Sun, 22 Nov 2020 15:51:12 +0100 Subject: [PATCH] feat: make react config functional --- .../__snapshots__/react.spec.ts.snap | 98 +++++++++++-------- .../__snapshots__/vue.spec.ts.snap | 30 ++++-- packages/webpack5/package.json | 2 + packages/webpack5/src/configuration/base.ts | 9 +- packages/webpack5/src/configuration/react.ts | 25 ++--- packages/webpack5/src/configuration/vue.ts | 3 +- 6 files changed, 107 insertions(+), 60 deletions(-) diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap index 6b3878a5e..3315feca1 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap @@ -4,7 +4,8 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR "{ mode: 'development', externals: [ - 'package.json' + 'package.json', + '~/package.json' ], devtool: 'inline-source-map', target: 'node', @@ -18,7 +19,6 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR resolve: { symlinks: true, alias: { - '~/package.json': 'package.json', '~': 'appFullPath', '@': 'appFullPath', 'react-dom': 'react-nativescript' @@ -82,10 +82,18 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR /* config.module.rule('js') */ { test: /\\\\.js$/, + exclude: [ + /node_modules/ + ], use: [ /* config.module.rule('js').use('babel-loader') */ { - loader: 'babel-loader' + loader: 'babel-loader', + options: { + generatorOpts: { + compact: false + } + } } ] }, @@ -179,16 +187,19 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR new WatchStateLoggerPlugin(), /* config.plugin('HotModuleReplacementPlugin') */ new HotModuleReplacementPlugin(), - /* config.plugin('ReactRefreshWebpackPlugin') */ - new ReactRefreshWebpackPlugin( + /* config.plugin('ReactRefreshPlugin') */ + new ReactRefreshPlugin( { overlay: false, - forceEnable: false + forceEnable: false, + exclude: /node_modules/i, + include: /\\\\.([jt]sx?|flow)$/i } ) ], entry: { bundle: [ + '@nativescript/core/globals/index.js', 'src/app.js' ] } @@ -199,7 +210,8 @@ exports[`react configuration > android > base config 1`] = ` "{ mode: 'development', externals: [ - 'package.json' + 'package.json', + '~/package.json' ], devtool: 'inline-source-map', target: 'node', @@ -213,7 +225,6 @@ exports[`react configuration > android > base config 1`] = ` resolve: { symlinks: true, alias: { - '~/package.json': 'package.json', '~': 'appFullPath', '@': 'appFullPath', 'react-dom': 'react-nativescript' @@ -248,17 +259,6 @@ exports[`react configuration > android > base config 1`] = ` /\\\\.tsx$/ ], use: [ - /* config.module.rule('ts').use('babel-loader|react-refresh') */ - { - loader: 'babel-loader', - options: { - sourceMaps: 'inline', - babelrc: false, - plugins: [ - 'react-refresh/babel' - ] - } - }, /* config.module.rule('ts').use('ts-loader') */ { loader: 'ts-loader', @@ -277,10 +277,18 @@ exports[`react configuration > android > base config 1`] = ` /* config.module.rule('js') */ { test: /\\\\.js$/, + exclude: [ + /node_modules/ + ], use: [ /* config.module.rule('js').use('babel-loader') */ { - loader: 'babel-loader' + loader: 'babel-loader', + options: { + generatorOpts: { + compact: false + } + } } ] }, @@ -375,6 +383,7 @@ exports[`react configuration > android > base config 1`] = ` ], entry: { bundle: [ + '@nativescript/core/globals/index.js', 'src/app.js' ] } @@ -385,7 +394,8 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena "{ mode: 'development', externals: [ - 'package.json' + 'package.json', + '~/package.json' ], devtool: 'inline-source-map', target: 'node', @@ -399,7 +409,6 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena resolve: { symlinks: true, alias: { - '~/package.json': 'package.json', '~': 'appFullPath', '@': 'appFullPath', 'react-dom': 'react-nativescript' @@ -463,10 +472,18 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena /* config.module.rule('js') */ { test: /\\\\.js$/, + exclude: [ + /node_modules/ + ], use: [ /* config.module.rule('js').use('babel-loader') */ { - loader: 'babel-loader' + loader: 'babel-loader', + options: { + generatorOpts: { + compact: false + } + } } ] }, @@ -560,16 +577,19 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena new WatchStateLoggerPlugin(), /* config.plugin('HotModuleReplacementPlugin') */ new HotModuleReplacementPlugin(), - /* config.plugin('ReactRefreshWebpackPlugin') */ - new ReactRefreshWebpackPlugin( + /* config.plugin('ReactRefreshPlugin') */ + new ReactRefreshPlugin( { overlay: false, - forceEnable: false + forceEnable: false, + exclude: /node_modules/i, + include: /\\\\.([jt]sx?|flow)$/i } ) ], entry: { bundle: [ + '@nativescript/core/globals/index.js', 'src/app.js' ], 'tns_modules/@nativescript/core/inspector_modules': [ @@ -583,7 +603,8 @@ exports[`react configuration > ios > base config 1`] = ` "{ mode: 'development', externals: [ - 'package.json' + 'package.json', + '~/package.json' ], devtool: 'inline-source-map', target: 'node', @@ -597,7 +618,6 @@ exports[`react configuration > ios > base config 1`] = ` resolve: { symlinks: true, alias: { - '~/package.json': 'package.json', '~': 'appFullPath', '@': 'appFullPath', 'react-dom': 'react-nativescript' @@ -632,17 +652,6 @@ exports[`react configuration > ios > base config 1`] = ` /\\\\.tsx$/ ], use: [ - /* config.module.rule('ts').use('babel-loader|react-refresh') */ - { - loader: 'babel-loader', - options: { - sourceMaps: 'inline', - babelrc: false, - plugins: [ - 'react-refresh/babel' - ] - } - }, /* config.module.rule('ts').use('ts-loader') */ { loader: 'ts-loader', @@ -661,10 +670,18 @@ exports[`react configuration > ios > base config 1`] = ` /* config.module.rule('js') */ { test: /\\\\.js$/, + exclude: [ + /node_modules/ + ], use: [ /* config.module.rule('js').use('babel-loader') */ { - loader: 'babel-loader' + loader: 'babel-loader', + options: { + generatorOpts: { + compact: false + } + } } ] }, @@ -759,6 +776,7 @@ exports[`react configuration > ios > base config 1`] = ` ], entry: { bundle: [ + '@nativescript/core/globals/index.js', 'src/app.js' ], 'tns_modules/@nativescript/core/inspector_modules': [ diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap index 4c9c8f317..505ff166e 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap @@ -4,7 +4,8 @@ exports[`vue configuration for android 1`] = ` "{ mode: 'development', externals: [ - 'package.json' + 'package.json', + '~/package.json' ], devtool: 'inline-source-map', target: 'node', @@ -18,7 +19,6 @@ exports[`vue configuration for android 1`] = ` resolve: { symlinks: true, alias: { - '~/package.json': 'package.json', '~': 'appFullPath', '@': 'appFullPath', vue: 'nativescript-vue' @@ -73,10 +73,18 @@ exports[`vue configuration for android 1`] = ` /* config.module.rule('js') */ { test: /\\\\.js$/, + exclude: [ + /node_modules/ + ], use: [ /* config.module.rule('js').use('babel-loader') */ { - loader: 'babel-loader' + loader: 'babel-loader', + options: { + generatorOpts: { + compact: false + } + } } ] }, @@ -189,6 +197,7 @@ exports[`vue configuration for android 1`] = ` ], entry: { bundle: [ + '@nativescript/core/globals/index.js', 'src/app.js' ] } @@ -199,7 +208,8 @@ exports[`vue configuration for ios 1`] = ` "{ mode: 'development', externals: [ - 'package.json' + 'package.json', + '~/package.json' ], devtool: 'inline-source-map', target: 'node', @@ -213,7 +223,6 @@ exports[`vue configuration for ios 1`] = ` resolve: { symlinks: true, alias: { - '~/package.json': 'package.json', '~': 'appFullPath', '@': 'appFullPath', vue: 'nativescript-vue' @@ -268,10 +277,18 @@ exports[`vue configuration for ios 1`] = ` /* config.module.rule('js') */ { test: /\\\\.js$/, + exclude: [ + /node_modules/ + ], use: [ /* config.module.rule('js').use('babel-loader') */ { - loader: 'babel-loader' + loader: 'babel-loader', + options: { + generatorOpts: { + compact: false + } + } } ] }, @@ -384,6 +401,7 @@ exports[`vue configuration for ios 1`] = ` ], entry: { bundle: [ + '@nativescript/core/globals/index.js', 'src/app.js' ], 'tns_modules/@nativescript/core/inspector_modules': [ diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json index 7b50a757c..488dfcac7 100644 --- a/packages/webpack5/package.json +++ b/packages/webpack5/package.json @@ -14,12 +14,14 @@ }, "dependencies": { "@babel/core": "^7.12.3", + "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "babel-loader": "^8.2.1", "clean-webpack-plugin": "^3.0.0", "cli-highlight": "^2.1.8", "css": "^3.0.0", "css-loader": "^5.0.1", "loader-utils": "^2.0.0", + "react-refresh": "^0.9.0", "scss": "^0.2.4", "scss-loader": "^0.0.1", "source-map": "^0.7.3", diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts index 937462b3a..c2acc4169 100644 --- a/packages/webpack5/src/configuration/base.ts +++ b/packages/webpack5/src/configuration/base.ts @@ -134,8 +134,15 @@ export default function (config: Config, env: IWebpackEnv): Config { config.module .rule('js') .test(/\.js$/) + .exclude.add(/node_modules/) + .end() .use('babel-loader') - .loader('babel-loader'); + .loader('babel-loader') + .options({ + generatorOpts: { + compact: false, + }, + }); // set up css config.module diff --git a/packages/webpack5/src/configuration/react.ts b/packages/webpack5/src/configuration/react.ts index 95b74b971..cbbd9f0b2 100644 --- a/packages/webpack5/src/configuration/react.ts +++ b/packages/webpack5/src/configuration/react.ts @@ -19,15 +19,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { config.module .rule('ts') - .test([...config.module.rule('ts').get('test'), /\.tsx$/]) - .use('babel-loader|react-refresh') - .loader('babel-loader') - .before('ts-loader') - .options({ - sourceMaps: isAnySourceMapEnabled ? 'inline' : false, - babelrc: false, - plugins: ['react-refresh/babel'], - }); + .test([...config.module.rule('ts').get('test'), /\.tsx$/]); config.plugin('DefinePlugin').tap((args) => { args[0] = merge(args[0], { @@ -45,9 +37,20 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { // todo: env flag to forceEnable? config.when(env.hmr && !production, (config) => { + config.module + .rule('ts') + .use('babel-loader|react-refresh') + .loader('babel-loader') + .before('ts-loader') + .options({ + sourceMaps: isAnySourceMapEnabled ? 'inline' : false, + babelrc: false, + plugins: ['react-refresh/babel'], + }); + config - .plugin('ReactRefreshWebpackPlugin') - .use(function ReactRefreshWebpackPlugin() {}, [ + .plugin('ReactRefreshPlugin') + .use(require('@pmmmwh/react-refresh-webpack-plugin'), [ { /** * Maybe one day we'll implement an Error Overlay, but the work involved is too daunting for now. diff --git a/packages/webpack5/src/configuration/vue.ts b/packages/webpack5/src/configuration/vue.ts index 726b972dd..feb232897 100644 --- a/packages/webpack5/src/configuration/vue.ts +++ b/packages/webpack5/src/configuration/vue.ts @@ -1,4 +1,3 @@ -import * as compiler from 'nativescript-vue-template-compiler'; import { VueLoaderPlugin } from 'vue-loader'; import { merge } from 'webpack-merge'; import Config from 'webpack-chain'; @@ -24,7 +23,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { .tap((options) => { return { ...options, - compiler, + compiler: require('nativescript-vue-template-compiler'), }; }) .end();