@shopgate/webpack 7.32.2-alpha.6 → 7.32.2-alpha.7

package/locales/en.json

@@ -25,14 +25,6 @@
     "INVALID": "... invalid:",
     "VALID": "... theme configuration is valid"
   },
-  "plugins/ShopgateTypeCheckPlugin": {
-    "CHECKING": "Type checking {name} ...",
-    "ERRORS": "Type errors: {count}",
-    "NO_ERRORS": "No type errors",
-    "NO_TYPESCRIPT": "Type check skipped for {name}: TypeScript is not installed there",
-    "FAILED": "Type check of {name} could not be started: {message}",
-    "STOPPED": "Type check of {name} stopped unexpectedly ({reason}). Restart the frontend to check it again. Its last output:"
-  },
   "webpack.config": {
     "WEBPACK_PROGRESS": "building [{bar}] [{message}] {percent} ({elapsed} seconds)"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/webpack",
-  "version": "7.32.2-alpha.6",
+  "version": "7.32.2-alpha.7",
   "description": "The webpack configuration for Shopgate's Engage.",
   "main": "webpack.config.js",
   "license": "Apache-2.0",

package/webpack.config.js

@@ -13,7 +13,6 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 const rxPaths = require('rxjs/_esm5/path-mapping');
 const ShopgateIndexerPlugin = require('./plugins/ShopgateIndexerPlugin');
 const ShopgateThemeConfigValidatorPlugin = require('./plugins/ShopgateThemeConfigValidatorPlugin');
-const ShopgateTypeCheckPlugin = require('./plugins/ShopgateTypeCheckPlugin');
 const { ENV, isDev, PUBLIC_FOLDER } = require('./lib/variables');
 const getAppSettings = require('./lib/getAppSettings');
 const convertLanguageToISO = require('./lib/convertLanguageToISO');
@@ -36,10 +35,6 @@ const t = i18n(__filename);
 const devtool = isDev ? sourceMap : (process.env.SOURCE_MAPS || false);
 const fileSuffix = devtool ? '.sm' : '';
 const addBundleAnalyzer = !!process.env.BUNDLE_ANALYZER;
-const typeCheck = ['0', 'false'].includes(process.env.TYPE_CHECK) ? '' : process.env.TYPE_CHECK;
-const typeCheckPlugin = isDev && typeCheck
-  ? new ShopgateTypeCheckPlugin({ overlay: typeCheck === 'overlay' })
-  : null;
 
 /**
  * @type {import('webpack').Configuration}
@@ -218,7 +213,6 @@ const config = {
     ...(isDev ? [new ReactRefreshWebpackPlugin({
       overlay: false,
     })] : []),
-    ...(typeCheckPlugin ? [typeCheckPlugin] : []),
     ...(!isDev ? [
       new CompressionWebpackPlugin({
         filename: '[path][base].gz[query]',
@@ -312,15 +306,9 @@ const config = {
       directory: path.resolve(themePath, PUBLIC_FOLDER),
     },
     client: {
-      overlay: typeCheckPlugin && typeCheckPlugin.overlay ? {
-        errors: true,
-        warnings: false,
-        runtimeErrors: false,
-      } : false,
+      // Deactivate full-screen error overlay in dev server
+      overlay: false,
     },
-    ...(typeCheckPlugin ? {
-      onListening: devServer => typeCheckPlugin.setDevServer(devServer),
-    } : {}),
     host: '0.0.0.0',
     port: process.env.optionsPort,
     historyApiFallback: true,

package/lib/createTypeCheckParser.js

@@ -1,67 +0,0 @@
-const ERROR_IN_FILE = /^(.+?)\((\d+),(\d+)\): error (TS\d+): (.*)$/;
-const ERROR_WITHOUT_FILE = /^error (TS\d+): (.*)$/;
-const CHECK_STARTED = /Starting (incremental )?compilation/;
-const CHECK_FINISHED = /Found \d+ errors?\. Watching for file changes/;
-
-/**
- * @typedef {Object} TypeCheckError
- * @property {string|null} file The file as the compiler printed it, relative to the project.
- * @property {number|null} line The line of the error.
- * @property {number|null} column The column of the error.
- * @property {string} code The error code, e.g. "TS2322".
- * @property {string} message The error message.
- */
-
-/**
- * @typedef {Object} TypeCheckEvent
- * @property {'started'|'finished'} type Whether a check started or finished.
- * @property {TypeCheckError[]} [errors] The errors of a finished check.
- */
-
-/**
- * Creates a parser for the output of "tsc --watch --pretty false". It takes the output line by
- * line and returns an event when a check starts or finishes.
- * @return {function(string): TypeCheckEvent|null}
- */
-module.exports = function createTypeCheckParser() {
-  let errors = [];
-
-  return (line) => {
-    if (CHECK_STARTED.test(line)) {
-      errors = [];
-      return { type: 'started' };
-    }
-
-    if (CHECK_FINISHED.test(line)) {
-      return {
-        type: 'finished',
-        errors,
-      };
-    }
-
-    const inFile = line.match(ERROR_IN_FILE);
-    const withoutFile = line.match(ERROR_WITHOUT_FILE);
-
-    if (inFile) {
-      errors.push({
-        file: inFile[1],
-        line: Number(inFile[2]),
-        column: Number(inFile[3]),
-        code: inFile[4],
-        message: inFile[5],
-      });
-    } else if (withoutFile) {
-      errors.push({
-        file: null,
-        line: null,
-        column: null,
-        code: withoutFile[1],
-        message: withoutFile[2],
-      });
-    } else if (/^\s+\S/.test(line) && errors.length > 0) {
-      errors[errors.length - 1].message += `\n${line}`;
-    }
-
-    return null;
-  };
-};

package/lib/createTypeCheckParser.spec.js

@@ -1,76 +0,0 @@
-const createTypeCheckParser = require('./createTypeCheckParser');
-
-/**
- * Feeds lines to a new parser and returns the events it emits.
- * @param {string[]} lines The compiler output.
- * @return {Object[]}
- */
-const parseLines = (lines) => {
-  const parse = createTypeCheckParser();
-
-  return lines.map(line => parse(line)).filter(Boolean);
-};
-
-describe('createTypeCheckParser', () => {
-  it('reports the start and the errors of a check', () => {
-    expect(parseLines([
-      '2:36:55 PM - Starting compilation in watch mode...',
-      '',
-      "portals/Banner/index.tsx(33,68): error TS2322: Type 'false' is not assignable to type 'true'.",
-      'error TS6053: File not found.',
-      '',
-      '2:36:58 PM - Found 2 errors. Watching for file changes.',
-    ])).toEqual([
-      { type: 'started' },
-      {
-        type: 'finished',
-        errors: [
-          {
-            file: 'portals/Banner/index.tsx',
-            line: 33,
-            column: 68,
-            code: 'TS2322',
-            message: "Type 'false' is not assignable to type 'true'.",
-          },
-          {
-            file: null,
-            line: null,
-            column: null,
-            code: 'TS6053',
-            message: 'File not found.',
-          },
-        ],
-      },
-    ]);
-  });
-
-  it('adds indented lines to the message of the error before', () => {
-    const [, finished] = parseLines([
-      '02:36:48 PM - Starting compilation in watch mode...',
-      "a.ts(1,14): error TS2345: Argument of type 'A' is not assignable to parameter of type 'B'.",
-      "  Property 'id' is missing in type 'A'.",
-      '02:36:49 PM - Found 1 error. Watching for file changes.',
-    ]);
-
-    expect(finished.errors).toHaveLength(1);
-    expect(finished.errors[0].message).toBe([
-      "Argument of type 'A' is not assignable to parameter of type 'B'.",
-      "  Property 'id' is missing in type 'A'.",
-    ].join('\n'));
-  });
-
-  it('forgets the errors of the check before when a new one starts', () => {
-    const events = parseLines([
-      '2:36:55 PM - Starting compilation in watch mode...',
-      "a.ts(1,14): error TS2322: Type 'string' is not assignable to type 'number'.",
-      '2:36:58 PM - Found 1 error. Watching for file changes.',
-      '2:37:10 PM - File change detected. Starting incremental compilation...',
-      '2:37:11 PM - Found 0 errors. Watching for file changes.',
-    ]);
-
-    expect(events[3]).toEqual({
-      type: 'finished',
-      errors: [],
-    });
-  });
-});

package/lib/getTypeCheckProjects.js

@@ -1,55 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-/**
- * @typedef {Object} TypeCheckProject
- * @property {string} name The name that is shown in front of the output of the project.
- * @property {string} path The folder that contains the tsconfig.json of the project.
- * @property {boolean} isTheme Whether the project is the theme.
- * @property {string|null} tsc The TypeScript compiler of the project, when it has one installed.
- */
-
-/**
- * Resolves the TypeScript compiler that a project has installed.
- * @param {string} projectPath The folder of the project.
- * @return {string|null}
- */
-function resolveCompiler(projectPath) {
-  try {
-    const packagePath = require.resolve('typescript/package.json', { paths: [projectPath] });
-    // eslint-disable-next-line global-require, import/no-dynamic-require
-    const { bin } = require(packagePath);
-
-    return path.resolve(path.dirname(packagePath), bin.tsc);
-  } catch (error) {
-    return null;
-  }
-}
-
-/**
- * Returns the theme and the frontends of the attached extensions that have a tsconfig.json.
- * @param {string} themePath The folder of the theme.
- * @param {Object} [extensions={}] The attached extensions.
- * @return {TypeCheckProject[]}
- */
-module.exports = function getTypeCheckProjects(themePath, extensions = {}) {
-  const extensionsPath = path.resolve(themePath, '..', '..', 'extensions');
-
-  return [
-    {
-      name: path.basename(themePath),
-      path: themePath,
-      isTheme: true,
-    },
-    ...Object.keys(extensions).map(id => ({
-      name: id,
-      path: path.resolve(extensionsPath, extensions[id].path, 'frontend'),
-      isTheme: false,
-    })),
-  ]
-    .filter(project => fs.existsSync(path.join(project.path, 'tsconfig.json')))
-    .map(project => ({
-      ...project,
-      tsc: resolveCompiler(project.path),
-    }));
-};

package/lib/getTypeCheckProjects.spec.js

@@ -1,83 +0,0 @@
-const fs = require('fs');
-const os = require('os');
-const path = require('path');
-const getTypeCheckProjects = require('./getTypeCheckProjects');
-
-describe('getTypeCheckProjects', () => {
-  let root;
-  let themePath;
-
-  const write = (file, content = '{}') => {
-    const target = path.join(root, file);
-    fs.mkdirSync(path.dirname(target), { recursive: true });
-    fs.writeFileSync(target, content);
-  };
-
-  beforeEach(() => {
-    root = fs.realpathSync(fs.mkdtempSync(path.join(os.tmpdir(), 'type-check-')));
-    themePath = path.join(root, 'themes', 'theme-test');
-    fs.mkdirSync(themePath, { recursive: true });
-  });
-
-  afterEach(() => {
-    fs.rmSync(root, {
-      recursive: true,
-      force: true,
-    });
-  });
-
-  it('returns the theme and the attached extensions that have a tsconfig', () => {
-    write('themes/theme-test/tsconfig.json');
-    write('extensions/typed/frontend/tsconfig.json');
-    write('extensions/untyped/frontend/index.js', '');
-    write('extensions/detached/frontend/tsconfig.json');
-
-    const projects = getTypeCheckProjects(themePath, {
-      '@acme/typed': { path: 'typed' },
-      '@acme/untyped': { path: 'untyped' },
-    });
-
-    expect(projects.map(({ name, path: projectPath, isTheme }) => ({
-      name,
-      path: projectPath,
-      isTheme,
-    }))).toEqual([
-      {
-        name: 'theme-test',
-        path: themePath,
-        isTheme: true,
-      },
-      {
-        name: '@acme/typed',
-        path: path.join(root, 'extensions', 'typed', 'frontend'),
-        isTheme: false,
-      },
-    ]);
-  });
-
-  it('leaves out a theme without a tsconfig', () => {
-    expect(getTypeCheckProjects(themePath)).toEqual([]);
-  });
-
-  it('resolves the compiler that the project has installed', () => {
-    write('extensions/typed/frontend/tsconfig.json');
-    write(
-      'extensions/typed/frontend/node_modules/typescript/package.json',
-      JSON.stringify({ bin: { tsc: './bin/tsc' } })
-    );
-
-    const [project] = getTypeCheckProjects(themePath, { '@acme/typed': { path: 'typed' } });
-
-    expect(project.tsc).toBe(path.join(
-      root, 'extensions', 'typed', 'frontend', 'node_modules', 'typescript', 'bin', 'tsc'
-    ));
-  });
-
-  it('reports no compiler when the project has none installed', () => {
-    write('extensions/typed/frontend/tsconfig.json');
-
-    const [project] = getTypeCheckProjects(themePath, { '@acme/typed': { path: 'typed' } });
-
-    expect(project.tsc).toBeNull();
-  });
-});

package/lib/typeCheckWatcher.js

@@ -1,48 +0,0 @@
-const { spawn, spawnSync } = require('child_process');
-
-const isWindows = process.platform === 'win32';
-const STOP_SIGNALS = ['SIGINT', 'SIGTERM', 'SIGHUP'];
-
-const child = spawn(process.execPath, process.argv.slice(2), {
-  stdio: ['ignore', 'inherit', 'inherit'],
-  detached: !isWindows,
-  windowsHide: true,
-});
-
-/**
- * Stops the compiler together with every process it started, then exits without an error.
- */
-function stop() {
-  try {
-    if (isWindows) {
-      const { error, status } = spawnSync('taskkill', ['/pid', String(child.pid), '/T', '/F'], {
-        windowsHide: true,
-      });
-
-      if (error || status !== 0) {
-        child.kill();
-      }
-    } else {
-      process.kill(-child.pid, 'SIGTERM');
-    }
-  } catch (error) {
-    child.kill();
-  }
-
-  process.exit(0);
-}
-
-process.stdin.on('end', stop);
-process.stdin.on('error', stop);
-process.stdin.resume();
-STOP_SIGNALS.forEach(signal => process.on(signal, stop));
-
-child.on('exit', (code, signal) => {
-  if (signal) {
-    process.removeAllListeners(signal);
-    process.kill(process.pid, signal);
-    return;
-  }
-
-  process.exit(code || 1);
-});

package/plugins/ShopgateTypeCheckPlugin.js

@@ -1,242 +0,0 @@
-const { spawn } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-const readline = require('readline');
-const {
-  blue, cyan, green, grey, red, yellow,
-} = require('chalk');
-const logger = require('../lib/logger');
-const i18n = require('../lib/i18n');
-const getTypeCheckProjects = require('../lib/getTypeCheckProjects');
-const createTypeCheckParser = require('../lib/createTypeCheckParser');
-
-const t = i18n(__filename);
-const LAST_LINES = 20;
-const WATCHER = path.resolve(__dirname, '..', 'lib', 'typeCheckWatcher.js');
-const NODE_MODULES = `${path.sep}node_modules${path.sep}`;
-
-/**
- * Reads the attached extensions from the environment.
- * @return {Object}
- */
-function getAttachedExtensions() {
-  try {
-    return JSON.parse(process.env.extensions);
-  } catch (error) {
-    return {};
-  }
-}
-
-/**
- * Prints the result of a check to the console.
- * @param {Object} project The project.
- * @param {Object[]} errors The errors of the project.
- */
-function report(project, errors) {
-  const prefix = blue(`[${project.name}]`);
-
-  errors.forEach((error) => {
-    const location = error.file
-      ? `${cyan(path.relative(process.cwd(), error.file))}:${error.line}:${error.column} - `
-      : '';
-
-    logger.log(`${prefix} ${location}${red('error')} ${grey(`${error.code}:`)} ${error.message}`);
-  });
-
-  logger.log(`${prefix} ${errors.length > 0
-    ? red(t('ERRORS', { count: errors.length }))
-    : green(t('NO_ERRORS'))}`);
-}
-
-/**
- * Type checks the theme and the attached extensions next to a watching build. The errors are
- * printed to the console and optionally shown in the overlay of the dev server; they never fail
- * the build.
- */
-class ShopgateTypeCheckPlugin {
-  /**
-   * @param {Object} [options={}] The plugin options.
-   * @param {boolean} [options.overlay=false] Whether the errors are also shown in the browser.
-   */
-  constructor({ overlay = false } = {}) {
-    this.overlay = overlay;
-    this.started = false;
-    this.results = new Map();
-    this.buildErrors = [];
-    this.devServer = null;
-    this.overlayShown = false;
-  }
-
-  /**
-   * @param {Object} compiler The webpack compiler
-   */
-  apply(compiler) {
-    compiler.hooks.watchRun.tap('ShopgateTypeCheckPlugin', () => {
-      if (this.started) {
-        return;
-      }
-
-      this.started = true;
-      this.start();
-    });
-
-    compiler.hooks.done.tap('ShopgateTypeCheckPlugin', (stats) => {
-      this.buildErrors = stats.toJson({
-        all: false,
-        errors: true,
-      }).errors || [];
-      setImmediate(() => this.updateOverlay());
-    });
-  }
-
-  /**
-   * Connects the plugin with the dev server, so that it can show the errors in the browser.
-   * @param {Object} devServer The dev server.
-   */
-  setDevServer(devServer) {
-    if (!this.overlay || !devServer.webSocketServer) {
-      return;
-    }
-
-    this.devServer = devServer;
-    devServer.webSocketServer.implementation.on('connection', (client) => {
-      setImmediate(() => this.updateOverlay([client]));
-    });
-  }
-
-  /**
-   * Starts a TypeScript compiler in watch mode for every project.
-   */
-  start() {
-    const projects = getTypeCheckProjects(process.cwd(), getAttachedExtensions());
-
-    projects.forEach((project) => {
-      if (!project.tsc) {
-        logger.warn(yellow(`  ${t('NO_TYPESCRIPT', { name: project.name })}`));
-        return;
-      }
-
-      logger.log(blue(`  ${t('CHECKING', { name: project.name })}`));
-      this.watch(project);
-    });
-  }
-
-  /**
-   * Runs the TypeScript compiler of a project in watch mode and collects its errors.
-   * @param {Object} project The project.
-   */
-  watch(project) {
-    const projectPath = fs.realpathSync(project.path);
-    const child = spawn(process.execPath, [
-      WATCHER,
-      project.tsc,
-      '--project',
-      projectPath,
-      '--noEmit',
-      '--watch',
-      '--preserveWatchOutput',
-      '--pretty',
-      'false',
-    ], {
-      cwd: projectPath,
-      stdio: ['pipe', 'pipe', 'pipe'],
-    });
-    const parse = createTypeCheckParser();
-    const lastLines = [];
-
-    [child.stdout, child.stderr].forEach((stream) => {
-      readline.createInterface({ input: stream }).on('line', (line) => {
-        if (line.trim()) {
-          lastLines.push(line);
-          lastLines.splice(0, lastLines.length - LAST_LINES);
-        }
-
-        const event = parse(line);
-
-        if (!event) {
-          return;
-        }
-
-        if (event.type === 'started') {
-          this.results.delete(project.name);
-          return;
-        }
-
-        const errors = event.errors
-          .map(error => ({
-            ...error,
-            file: error.file && path.resolve(projectPath, error.file),
-          }))
-          .filter(error => project.isTheme || !error.file || (
-            error.file.startsWith(`${projectPath}${path.sep}`)
-            && !error.file.slice(projectPath.length).includes(NODE_MODULES)
-          ));
-
-        this.results.set(project.name, errors);
-        report(project, errors);
-        this.updateOverlay();
-      });
-    });
-
-    child.on('error', (error) => {
-      logger.warn(yellow(`  ${t('FAILED', {
-        name: project.name,
-        message: error.message,
-      })}`));
-    });
-
-    child.on('exit', (code, signal) => {
-      if (code === 0) {
-        return;
-      }
-
-      logger.warn(yellow(`  ${t('STOPPED', {
-        name: project.name,
-        reason: signal || code,
-      })}`));
-      lastLines.forEach(line => logger.warn(`${blue(`[${project.name}]`)} ${line}`));
-      this.results.delete(project.name);
-      this.updateOverlay();
-    });
-  }
-
-  /**
-   * Shows the errors of all finished checks in the overlay of the dev server, together with the
-   * errors of the build, since the overlay only holds one set of errors. Without type errors the
-   * overlay is handed back to the dev server.
-   * @param {Object[]} [clients] The browser connections to update. Defaults to all.
-   */
-  updateOverlay(clients) {
-    if (!this.devServer) {
-      return;
-    }
-
-    const receivers = clients || this.devServer.webSocketServer.clients;
-    const typeErrors = [];
-
-    this.results.forEach((errors, name) => {
-      errors.forEach((error) => {
-        typeErrors.push({
-          moduleName: error.file ? path.relative(process.cwd(), error.file) : name,
-          loc: error.file ? `${error.line}:${error.column}` : '',
-          message: `${error.code}: ${error.message}`,
-        });
-      });
-    });
-
-    if (typeErrors.length > 0) {
-      this.overlayShown = true;
-      this.devServer.sendMessage(receivers, 'errors', [...this.buildErrors, ...typeErrors]);
-    } else if (this.overlayShown && !clients) {
-      this.overlayShown = false;
-
-      if (this.buildErrors.length > 0) {
-        this.devServer.sendMessage(receivers, 'errors', this.buildErrors);
-      } else {
-        this.devServer.sendMessage(receivers, 'still-ok');
-      }
-    }
-  }
-}
-
-module.exports = ShopgateTypeCheckPlugin;

package/plugins/ShopgateTypeCheckPlugin.spec.js

@@ -1,77 +0,0 @@
-const ShopgateTypeCheckPlugin = require('./ShopgateTypeCheckPlugin');
-
-const TYPE_ERROR = {
-  file: null,
-  line: null,
-  column: null,
-  code: 'TS2322',
-  message: 'Wrong type.',
-};
-const BUILD_ERROR = { message: 'Module not found.' };
-
-describe('ShopgateTypeCheckPlugin', () => {
-  let plugin;
-  let devServer;
-
-  beforeEach(() => {
-    devServer = {
-      sendMessage: jest.fn(),
-      webSocketServer: {
-        clients: ['tab'],
-        implementation: { on: jest.fn() },
-      },
-    };
-    plugin = new ShopgateTypeCheckPlugin({ overlay: true });
-    plugin.setDevServer(devServer);
-  });
-
-  it('sends nothing as long as there are no type errors', () => {
-    plugin.buildErrors = [BUILD_ERROR];
-    plugin.updateOverlay();
-
-    expect(devServer.sendMessage).not.toHaveBeenCalled();
-  });
-
-  it('shows type errors together with the errors of the build', () => {
-    plugin.buildErrors = [BUILD_ERROR];
-    plugin.results.set('theme', [TYPE_ERROR]);
-    plugin.updateOverlay();
-
-    expect(devServer.sendMessage).toHaveBeenCalledWith(['tab'], 'errors', [
-      BUILD_ERROR,
-      {
-        moduleName: 'theme',
-        loc: '',
-        message: 'TS2322: Wrong type.',
-      },
-    ]);
-  });
-
-  it('removes the overlay when the last type error is fixed', () => {
-    plugin.results.set('theme', [TYPE_ERROR]);
-    plugin.updateOverlay();
-    plugin.results.set('theme', []);
-    plugin.updateOverlay();
-
-    expect(devServer.sendMessage).toHaveBeenLastCalledWith(['tab'], 'still-ok');
-  });
-
-  it('keeps the errors of the build in the overlay when the last type error is fixed', () => {
-    plugin.results.set('theme', [TYPE_ERROR]);
-    plugin.updateOverlay();
-    plugin.results.set('theme', []);
-    plugin.buildErrors = [BUILD_ERROR];
-    plugin.updateOverlay();
-
-    expect(devServer.sendMessage).toHaveBeenLastCalledWith(['tab'], 'errors', [BUILD_ERROR]);
-  });
-
-  it('does not show anything without the overlay option', () => {
-    plugin = new ShopgateTypeCheckPlugin();
-    plugin.setDevServer(devServer);
-    plugin.results.set('theme', [TYPE_ERROR]);
-    plugin.updateOverlay();
-
-    expect(devServer.sendMessage).not.toHaveBeenCalled();
-  });
-});