@zero-scripts/plugin-webpack-react
Version:
Ready for development React projects. With ESLint, Babel, CSS Modules and other
132 lines • 7.96 kB
JavaScript
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebpackReactPlugin = void 0;
const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
const core_1 = require("@zero-scripts/core");
const webpack_config_1 = require("@zero-scripts/webpack-config");
const hasJsxRuntime_1 = require("./hasJsxRuntime");
const WebpackReactPluginOptions_1 = require("./WebpackReactPluginOptions");
const rr = require.resolve;
let WebpackReactPlugin = class WebpackReactPlugin extends core_1.AbstractPlugin {
apply(applyContext) {
applyContext.hooks.beforeRun.tap('WebpackReactPlugin', beforeRunContext => {
const config = beforeRunContext.getConfigBuilder(webpack_config_1.WebpackConfig);
const prebuiltConfigOptions = config.optionsContainer.build();
config.hooks.beforeBuild.tap('WebpackReactPlugin::addExtensions', configOptions => {
configOptions.jsFileExtensions.push('jsx');
configOptions.moduleFileExtensions.push('jsx');
if (prebuiltConfigOptions.useTypescript) {
configOptions.jsFileExtensions.push('tsx');
configOptions.moduleFileExtensions.push('tsx');
}
});
config.hooks.beforeBuild.tap('WebpackReactPlugin', () => {
const pluginOptions = this.optionsContainer.build();
const babelPlugin = beforeRunContext.findPlugin('WebpackBabelPlugin');
const eslintPlugin = beforeRunContext.findPlugin('WebpackEslintPlugin');
const useNewJsxTransform = pluginOptions.disableNewJsxTransform
? false
: hasJsxRuntime_1.hasJsxRuntime(prebuiltConfigOptions.paths);
if (babelPlugin) {
babelPlugin.optionsContainer.hooks.beforeBuild.tap('WebpackReactPlugin', optionsContainer => {
const baseConfig = optionsContainer.baseBabelConfig;
baseConfig.env.development.presets.push([
'@babel/preset-react',
{
development: true,
useBuiltIns: true,
runtime: useNewJsxTransform ? 'automatic' : 'classic'
}
]);
baseConfig.env.production.presets.push([
'@babel/preset-react',
{
development: false,
useBuiltIns: true,
runtime: useNewJsxTransform ? 'automatic' : 'classic'
}
]);
// TODO: if prop-types package is installed,
// automatically enable this option
if (pluginOptions.propTypes) {
baseConfig.env.production.plugins.push([
'babel-plugin-transform-react-remove-prop-types',
{ removeImport: true }
]);
}
if (pluginOptions.svgReactComponent) {
baseConfig.plugins.push([
'babel-plugin-named-asset-import',
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack' + '?-svgo,+titleProp,+ref![path]'
}
}
}
]);
}
});
}
if (eslintPlugin) {
eslintPlugin.optionsContainer.hooks.beforeBuild.tap('WebpackReactPlugin', optionsContainer => {
const baseConfig = optionsContainer.baseEslintConfig;
baseConfig.extends = baseConfig.extends || [];
if (Array.isArray(baseConfig.extends)) {
baseConfig.extends.push('eslint-config-react-app');
}
if (useNewJsxTransform) {
baseConfig.rules = Object.assign(Object.assign({}, (baseConfig.rules || {})), { 'react/jsx-uses-react': 'off', 'react/react-in-jsx-scope': 'off' });
}
baseConfig.parserOptions = Object.assign(Object.assign({}, (baseConfig.parserOptions || {})), { ecmaFeatures: {
jsx: true
} });
baseConfig.settings = Object.assign(Object.assign({}, (baseConfig.settings || {})), { react: {
version: 'detect'
} });
});
}
const currentTask = core_1.getCurrentTaskMeta();
if (pluginOptions.fastRefresh && (currentTask === null || currentTask === void 0 ? void 0 : currentTask.name) === 'start') {
if (babelPlugin) {
babelPlugin.optionsContainer.hooks.beforeBuild.tap('WebpackReactPlugin::addFastRefreshLoader', optionsContainer => {
const baseConfig = optionsContainer.baseBabelConfig;
baseConfig.env.development.plugins.push('react-refresh/babel');
});
config.hooks.build.tap('WebpackReactPlugin::addReactRefresh', modifications => {
modifications.insertPlugin(new react_refresh_webpack_plugin_1.default({
overlay: {
sockIntegration: 'whm',
entry: rr('webpack-hot-middleware/client')
}
}));
// we should remove `hot-accept-webpack-plugin`
// because react refresh do the same
if (modifications.has('hot-accept-plugin')) {
modifications.remove('hot-accept-plugin');
}
});
}
else {
// eslint-disable-next-line no-console
console.log("Warning: You can't use React Refresh without @zero-scripts/plugin-webpack-babel. Please install this plugin or turn off `plugin-webpack-react.fastRefresh` option");
}
}
});
});
}
};
WebpackReactPlugin = __decorate([
core_1.ReadOptions(WebpackReactPluginOptions_1.WebpackReactPluginOptions, 'plugin-webpack-react')
], WebpackReactPlugin);
exports.WebpackReactPlugin = WebpackReactPlugin;
//# sourceMappingURL=WebpackReactPlugin.js.map