javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: make react config functional

Browse Source
This commit is contained in:
Igor Randjelovic
2020-11-22 15:51:12 +01:00
parent 403fa6b30f
commit 241c4102f7
6 changed files with 107 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap
View File

@ -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',
'~': '<TODO>appFullPath',
'@': '<TODO>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',
'~': '<TODO>appFullPath',
'@': '<TODO>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',
'~': '<TODO>appFullPath',
'@': '<TODO>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',
'~': '<TODO>appFullPath',
'@': '<TODO>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': [

30
packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap
View File

@ -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',
'~': '<TODO>appFullPath',
'@': '<TODO>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',
'~': '<TODO>appFullPath',
'@': '<TODO>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': [

2
packages/webpack5/package.json
View File

@ -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",

9
packages/webpack5/src/configuration/base.ts
View File

@ -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

25
packages/webpack5/src/configuration/react.ts
View File

@ -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.

3
packages/webpack5/src/configuration/vue.ts
View File

@ -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();