fix: test workability with webpack configs in popular tools and fix a…

…s needed (#21)

e2e/works-with-webpack-configs-in-popular-tools.spec.ts

@@ -0,0 +1,103 @@
+import {
+  autoChWebpackProject,
+  chdir,
+  depVerWebpack,
+  depVerWebpackCli,
+  exec,
+  execNode,
+  execWebpack,
+  expectCommonDirToIncludeAllFilesAnd,
+  rootPath,
+  writeFiles,
+} from '../support-helpers';
+
+it('works with webpack config in facebook/create-react-app', () => {
+  autoChWebpackProject();
+  exec('npm', 'init', '-y');
+  exec('npm', 'i', '-D', 'create-react-app');
+  exec('npx', 'create-react-app', 'the-app');
+  chdir('the-app');
+  writeFiles({
+    'webpack.config.js': `
+const Plugin = require('${rootPath}');
+
+const envInQuestion = 'production';
+
+process.env.NODE_ENV = envInQuestion;
+const webpackConfig = require('react-scripts/config/webpack.config')(envInQuestion);
+
+webpackConfig.entry = './src/server.js';
+
+webpackConfig.plugins = webpackConfig.plugins.filter(
+  (p) => !['HtmlWebpackPlugin', 'WebpackManifestPlugin'].includes(p.constructor.name)
+);
+
+webpackConfig.plugins.push(new Plugin());
+
+module.exports = webpackConfig;
+`,
+    'src/server.js': `
+import { renderToString } from 'react-dom/server';
+import App from './App';
+
+console.log(renderToString(<App />));
+`,
+  });
+  exec('npm', 'i', `webpack@${depVerWebpack}`, `webpack-cli@${depVerWebpackCli}`);
+  expect(execWebpack().status).toBe(0);
+  expectCommonDirToIncludeAllFilesAnd({
+    'build/App.js': (t) => expect(t).toInclude('Learn React'),
+    'build/logo.svg': (t) => expect(t).toInclude('static/media/logo'),
+    'build/server.js': (t) =>
+      expect(t).not.toIncludeAnyMembers(['Learn React', 'static/media/logo']),
+  });
+  const { stdout, status } = execNode('build/server.js');
+  expect(status).toBe(0);
+  expect(stdout).toIncludeMultiple(['Learn React', 'static/media/logo']);
+});
+
+it('works with webpack config in vue/vue-cli', () => {
+  autoChWebpackProject();
+  exec('npm', 'init', '-y');
+  exec('npm', 'i', '-D', '@vue/cli');
+  exec('npx', 'vue', 'create', '-d', '-m', 'npm', 'the-app');
+  chdir('the-app');
+  writeFiles({
+    'webpack.config.js': `
+const Plugin = require('${rootPath}');
+
+const envInQuestion = 'production';
+
+process.env.NODE_ENV = envInQuestion;
+const webpackConfig = require('@vue/cli-service/webpack.config');
+
+webpackConfig.entry = './src/server.js';
+
+webpackConfig.plugins = webpackConfig.plugins.filter(
+  (p) => !['HtmlWebpackPlugin'].includes(p.constructor.name)
+);
+
+webpackConfig.plugins.push(new Plugin());
+
+module.exports = webpackConfig;
+`,
+    'src/server.js': `
+import { createSSRApp } from 'vue';
+import { renderToString } from 'vue/server-renderer';
+import App from './App.vue';
+const app = createSSRApp(App);
+renderToString(app).then(console.log);
+`,
+  });
+  exec('npm', 'i', `webpack@${depVerWebpack}`, `webpack-cli@${depVerWebpackCli}`);
+  expect(execWebpack().status).toBe(0);
+  expectCommonDirToIncludeAllFilesAnd({
+    'dist/App.vue': (t) => expect(t).toInclude('Vue.js App'),
+    'dist/assets/logo.png': (t) => expect(t).toInclude('data:image/png;base64'),
+    'dist/server.js': (t) =>
+      expect(t).not.toIncludeAnyMembers(['Vue.js App', 'data:image/png;base64']),
+  });
+  const { stdout, status } = execNode('dist/server.js');
+  expect(status).toBe(0);
+  expect(stdout).toIncludeMultiple(['Vue.js App', 'data:image/png;base64']);
+});

src/Plugin.ts

@@ -19,6 +19,7 @@ import {
 import { Condition, createConditionTest } from './conditionTest';
 import {
   baseNodeModules,
+  extJs,
   extJson,
   moduleType,
   pluginName,
@@ -306,7 +307,10 @@ export class TranspileWebpackPlugin {
           } else {
             assignEntry(entryBundleRelPath, entryDep);
 
-            if (resolveExtensions.includes(entryBundleRelPathParsed.ext)) {
+            if (
+              entryBundleRelPathParsed.ext !== extJs &&
+              resolveExtensions.includes(entryBundleRelPathParsed.ext)
+            ) {
               assignEntry(
                 path.format({
                   ...entryBundleRelPathParsed,

src/constants.ts

@@ -15,6 +15,7 @@ export const baseNodeModules = 'node_modules';
 
 export const moduleType = 'commonjs-module';
 
+export const extJs = '.js';
 export const extJson = '.json';
 
 export const sourceTypeAsset = 'asset';

src/readJson.ts

@@ -3,5 +3,5 @@ import fs, { PathLike } from 'node:fs';
 export function readJsonSync<
   T extends Record<string, string | number | boolean | null | undefined>
 >(p: PathLike): T {
-  return JSON.parse(fs.readFileSync(p, 'utf-8')) as T;
+  return JSON.parse(fs.readFileSync(p, 'utf8')) as T;
 }

support-helpers/constants.ts

@@ -4,12 +4,15 @@ export const rootPath = path.resolve(__dirname, '..');
 
 export const encodingText = 'utf8';
 
+export const depVerWebpack = process.env.E2E_DEP_VER_WEBPACK ?? '^5';
+export const depVerWebpackCli = process.env.E2E_DEP_VER_WEBPACK_CLI ?? '^4';
+
 export const webpackConfigDefaultFileName = 'webpack.config.js';
 export const webpackProjectParentDirName = '__projects__';
 export const webpackProjectMustHavePackageJson = {
   ['devDependencies']: {
-    ['webpack']: process.env.E2E_DEP_VER_WEBPACK ?? '^5',
-    ['webpack-cli']: process.env.E2E_DEP_VER_WEBPACK_CLI ?? '^4',
+    ['webpack']: depVerWebpack,
+    ['webpack-cli']: depVerWebpackCli,
   },
 };
 export const webpackProjectMustHaveFiles = {

support-helpers/webpackProject.ts

@@ -20,6 +20,21 @@ import { logStdout } from './logging';
 export function setupWebpackProject(
   files: Record<string, string> & { [webpackConfigDefaultFileName]: string }
 ): void {
+  autoChWebpackProject();
+
+  writeFiles({ ...webpackProjectMustHaveFiles, ...files });
+
+  const { status } = crossSpawn.sync('npm', ['i'], { encoding: encodingText, stdio: 'ignore' });
+  expect(status).toBe(0);
+
+  logStdout(
+    `Did setup webpack project with package.json: ${dim(
+      JSON.stringify(JSON.parse(fs.readFileSync('package.json', encodingText)), null, 0)
+    )}`
+  );
+}
+
+export function autoChWebpackProject(): string {
   const { testPath } = expect.getState();
 
   if (!testPath) {
@@ -30,28 +45,22 @@ export function setupWebpackProject(
 
   fs.mkdirSync(projectPath, { recursive: true });
 
-  process.chdir(projectPath);
+  chdir(projectPath);
 
-  let packageJsonText: string = '{}';
-  for (const [filePath, fileText] of Object.entries({
-    ...webpackProjectMustHaveFiles,
-    ...files,
-  })) {
+  return projectPath;
+}
+
+export function chdir(targetPath: string): void {
+  targetPath = path.resolve(targetPath);
+  process.chdir(targetPath);
+  logStdout(`Did change into dir: ${blueBright(path.relative(rootPath, targetPath))}`);
+}
+
+export function writeFiles(files: Record<string, string>): void {
+  for (const [filePath, fileText] of Object.entries(files)) {
     fs.mkdirSync(path.dirname(filePath), { recursive: true });
     fs.writeFileSync(filePath, fileText, encodingText);
-    if (filePath === 'package.json') {
-      packageJsonText = fileText;
-    }
   }
-
-  const { status } = crossSpawn.sync('npm', ['i'], { encoding: encodingText, stdio: 'ignore' });
-  expect(status).toBe(0);
-
-  logStdout(
-    `Did setup webpack project in: ${blueBright(
-      path.relative(rootPath, projectPath)
-    )}, with package.json ${dim(JSON.stringify(JSON.parse(packageJsonText), null, 0))}`
-  );
 }
 
 export function cleanAllWebpackProjects() {