fix(build): 'bugfix/transform-v8-static-class-fields-redefine-readonly' is not a babel plugin module name

use in-memory webpack transform of "@babel/preset-env/lib/available-plugins.js" in order to extract real plugin module names

Author: Franck Freiburger

build/requiredBabelPluginsNamesByBrowserTarget.js

@@ -1,4 +1,54 @@
-module.exports = function(targetsBrowsersString) {
+const path = require('path');
+
+const webpack = require('webpack');
+const MemoryFileSystem = require('memory-fs')
+
+/**
+ * here we extract plugin module names from @babel/preset-env/lib/available-plugins.js
+ * example:
+ *   getPluginModuleName('bugfix/transform-v8-static-class-fields-redefine-readonly') -> '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly'
+ * 
+ * if you find a better way to convert plugin name? to plugin module name
+ *  -> https://github.com/FranckFreiburger/vue3-sfc-loader/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=better+than+getPluginModuleName
+ */
+const initGetPluginModuleName = new Promise((resolve, reject) => {
+
+  const compiler = webpack({
+    entry: path.join(__dirname, '../node_modules/@babel/preset-env/lib/available-plugins.js'),
+    output: {
+      path: '/',
+      filename: 'bundle.js',
+      library: {
+          type: 'commonjs', // doc: https://webpack.js.org/configuration/output/#type-commonjs
+      }
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'require': '__require',
+      }),
+    ]
+  });
+  
+  compiler.outputFileSystem = new MemoryFileSystem();
+  compiler.run(err => {
+
+    if (err)
+        return reject(err)
+
+    const script = compiler.outputFileSystem.readFileSync(`${compiler.options.output.path}/${compiler.options.output.filename}`).toString();
+    const data = Function('__require', 'exports = {};' +script + '; return exports.default')(id => ({ default: id }));
+    function getPluginModuleName(id) {
+
+        const tmp = data[id]();
+        return tmp.default ?? data[id]();
+    }
+    resolve(getPluginModuleName);
+  });
+
+})
+
+
+module.exports = async function(targetsBrowsersString) {
 
   const browserslist = require('browserslist')
   const pluginsCompatData = require('@babel/preset-env/lib/plugins-compat-data');
@@ -7,6 +57,8 @@ module.exports = function(targetsBrowsersString) {
 
   const browsers = browserslist(targetsBrowsersString);
 
+  const getPluginModuleName = await initGetPluginModuleName;
+
   // see @babel/preset-env/lib/index.js:307
-  return [...filterItems(pluginsCompatData.plugins, new Set(), new Set(), helperCompilationTargets({ browsers }), []) ];
+  return [...filterItems(pluginsCompatData.plugins, new Set(), new Set(), helperCompilationTargets({ browsers }), []) ].map(getPluginModuleName);
 }

build/webpack.config.js

@@ -57,7 +57,7 @@ const caniuse = require('./caniuse-isSupported.js')
 
 const pkg = require('../package.json');
 
-const configure = ({name, vueTarget, libraryTargetModule}) => (env = {}, { mode = 'production', configName }) => {
+const configure = ({name, vueTarget, libraryTargetModule}) => async (env = {}, { mode = 'production', configName }) => {
 	if (configName && !configName.includes(name)) {
 		return {name}
 	}
@@ -104,16 +104,17 @@ const configure = ({name, vueTarget, libraryTargetModule}) => (env = {}, { mode
 	if ( browserslist(actualTargetsBrowsers).length === 0 )
 		throw new RangeError('browserslist(' + actualTargetsBrowsers + ') selects no browsers');
 
-	let pluginNameList = requiredBabelPluginsNamesByBrowserTarget(actualTargetsBrowsers);
+	let pluginNameList = await requiredBabelPluginsNamesByBrowserTarget(actualTargetsBrowsers);
 	// now, exclude some plugins
 	const excludeBabelPlugins = [
-		'transform-unicode-sets-regex', // exclude because it indirectly imports regenerate-unicode-properties (about 500KB)
+		'@babel/plugin-transform-unicode-sets-regex', // exclude because it indirectly imports regenerate-unicode-properties (about 500KB)
 	]
 
 	pluginNameList = pluginNameList.filter(e => !excludeBabelPlugins.includes(e) );
 	console.log('requiredBabelPluginsNamesByBrowserTarget', pluginNameList);
 
-	const ___targetBrowserBabelPlugins = '{' + pluginNameList.map(e => `'${ e }': require('@babel/plugin-${ e }'),\n`).join('') + '}';
+
+	const ___targetBrowserBabelPlugins = '{' + pluginNameList.map(e => `'${ e }': require('${ e }'),\n`).join('') + '}';
 
 	return {
 		name,