@griddo/ax 12.3.0-beta.0 → 12.4.0

package/config/__tests__/webpack5-migration.test.js

@@ -0,0 +1,442 @@
+/**
+ * Regression guard for the webpack 4 -> 5 migration.
+ *
+ * These tests read the build config/scripts as text and assert the webpack 5
+ * patterns are present and the webpack 4 remnants are gone. They are intentionally
+ * coarse (string/regex checks) so they stay cheap and don't need to boot webpack.
+ *
+ * Scope decisions encoded here (see docs): PostCSS stays minimal
+ * (postcss-preset-env 6.x + postcss-normalize kept, only the loader API migrated),
+ * TypeScript stays 4.9.x, and workbox is removed (no service-worker source).
+ */
+const fs = require("fs");
+const path = require("path");
+
+const configDir = path.resolve(__dirname, "..");
+const scriptsDir = path.resolve(__dirname, "../../scripts");
+const pkgJsonPath = path.resolve(__dirname, "../../package.json");
+
+const read = (filePath) => fs.readFileSync(filePath, "utf-8");
+
+const webpackConfig = read(path.join(configDir, "webpack.config.js"));
+const devServerConfig = read(path.join(configDir, "webpackDevServer.config.js"));
+const startScript = read(path.join(scriptsDir, "start.js"));
+const buildScript = read(path.join(scriptsDir, "build.js"));
+const schemasConfig = read(path.join(configDir, "webpackSchemas.config.js"));
+const syncSchemasScript = read(path.join(scriptsDir, "griddo-sync-schemas.js"));
+const pkgJson = JSON.parse(read(pkgJsonPath));
+
+// ---------------------------------------------------------------------------
+// 1. webpack.config.js — webpack 5 patterns present
+// ---------------------------------------------------------------------------
+describe("webpack.config.js — wp5 patterns", () => {
+	test("uses xxhash64 hash function (Node 17+ OpenSSL 3 compat)", () => {
+		expect(webpackConfig).toContain('hashFunction: "xxhash64"');
+	});
+
+	test("uses chunkLoadingGlobal instead of jsonpFunction", () => {
+		expect(webpackConfig).toContain("chunkLoadingGlobal");
+		expect(webpackConfig).not.toContain("jsonpFunction");
+	});
+
+	test("defines assetModuleFilename for asset modules", () => {
+		expect(webpackConfig).toContain("assetModuleFilename");
+	});
+
+	test("dev output filename uses [name].js (not bundle.js)", () => {
+		expect(webpackConfig).toContain("[name].js");
+		expect(webpackConfig).not.toMatch(/filename.*bundle\.js/);
+	});
+
+	test("has filesystem cache block", () => {
+		expect(webpackConfig).toContain('type: "filesystem"');
+		expect(webpackConfig).toContain("cacheDirectory");
+		expect(webpackConfig).toContain("createEnvironmentHash");
+	});
+
+	test("skips the filesystem cache and caps Terser workers on CI", () => {
+		// A resource-capped runner can't absorb a cache pack it never reuses, nor one
+		// Terser worker per host core (os.cpus() ignores the container's CPU quota).
+		expect(webpackConfig).toContain("cache: isCI");
+		expect(webpackConfig).toContain("parallel: isCI");
+	});
+
+	test("uses CssMinimizerPlugin (not OptimizeCSSAssetsPlugin)", () => {
+		expect(webpackConfig).toContain("CssMinimizerPlugin");
+		expect(webpackConfig).not.toContain("OptimizeCSSAssetsPlugin");
+	});
+
+	test("TerserPlugin does not set top-level sourceMap option", () => {
+		// In wp4 TerserPlugin had a `sourceMap` option at the top level.
+		// wp5 uses `devtool` instead. The word "sourceMap" may still appear
+		// inside terserOptions sub-objects — that's fine.
+		expect(webpackConfig).not.toMatch(/new TerserPlugin\(\{[^}]*sourceMap\s*:/);
+	});
+
+	test("splitChunks does not use deprecated name option", () => {
+		const splitChunksBlock = webpackConfig.match(/splitChunks:\s*\{[\s\S]*?\},/);
+		expect(splitChunksBlock).not.toBeNull();
+		expect(splitChunksBlock[0]).not.toMatch(/name\s*:/);
+	});
+
+	test("uses asset modules instead of url-loader and file-loader", () => {
+		expect(webpackConfig).toContain('type: "asset"');
+		expect(webpackConfig).toContain('type: "asset/resource"');
+		// Ensure no require/resolve references to the old loaders (comments are OK)
+		expect(webpackConfig).not.toMatch(/require\.resolve\(["']url-loader["']\)/);
+		expect(webpackConfig).not.toMatch(/require\.resolve\(["']file-loader["']\)/);
+	});
+
+	test("css-loader does not set esModule: false (breaks import * as styles)", () => {
+		// css-loader v6 with esModule: false + webpack 5 ESM namespace interop
+		// causes `import * as styles` to put the class map under .default, making
+		// styles.className === undefined. Instead, use namedExport: true.
+		expect(webpackConfig).not.toMatch(/css-loader[\s\S]*?esModule:\s*false/);
+	});
+
+	test("CSS modules use namedExport: true for import * as compat", () => {
+		// griddo-components uses `import * as styles from "./x.module.css"` extensively
+		// and is compiled by this webpack config.
+		expect(webpackConfig).toContain("namedExport: true");
+	});
+
+	test("CSS modules use exportLocalsConvention asIs (webpack 4 class names)", () => {
+		// asIs keeps the names as written in the CSS, so client projects keep
+		// reading `styles["heading-sm"]` exactly like they did under webpack 4.
+		// css-loader derives `useExportsAs` from this value (its own option is not
+		// user-settable) and emits `export { _1 as "heading-sm" }`, so hyphenated
+		// classes are valid named exports. The convention to avoid is camelCaseOnly:
+		// it turns @keyframes _in into `export var in` (reserved word).
+		expect(webpackConfig).toContain('exportLocalsConvention: "asIs"');
+	});
+
+	test("postcss-loader uses postcssOptions (not ident + plugins fn)", () => {
+		expect(webpackConfig).toContain("postcssOptions");
+		expect(webpackConfig).not.toMatch(/ident\s*:\s*["']postcss["']/);
+	});
+
+	test("keeps postcssNormalize (postcss-preset-env 6 does not bundle normalize)", () => {
+		// Minimal PostCSS scope: preset-env stays at 6.x, which unlike 9 does not
+		// include normalize, so we keep calling postcssNormalize() explicitly.
+		expect(webpackConfig).toContain("postcssNormalize");
+	});
+
+	test("does not use WorkboxWebpackPlugin (dead: no src/service-worker)", () => {
+		expect(webpackConfig).not.toContain("WorkboxWebpackPlugin");
+		expect(webpackConfig).not.toContain("workbox-webpack-plugin");
+	});
+
+	test("resolve.fallback stubs server-only Node builtins (no browser equivalent)", () => {
+		expect(webpackConfig).toContain("fallback");
+		expect(webpackConfig).toMatch(/fs:\s*false/);
+		expect(webpackConfig).toMatch(/net:\s*false/);
+		expect(webpackConfig).toMatch(/tls:\s*false/);
+		expect(webpackConfig).toMatch(/child_process:\s*false/);
+	});
+
+	test("uses NodePolyfillPlugin to restore webpack 4 browser polyfills for client builds", () => {
+		expect(webpackConfig).toContain("NodePolyfillPlugin");
+		expect(webpackConfig).toContain("node-polyfill-webpack-plugin");
+	});
+
+	test("uses WebpackManifestPlugin (not bare ManifestPlugin)", () => {
+		expect(webpackConfig).toContain("WebpackManifestPlugin");
+		// Ensure there's no wp4-style `ManifestPlugin = require(...)` import
+		expect(webpackConfig).not.toMatch(/\bManifestPlugin\b(?!.*Webpack)/);
+	});
+
+	test("IgnorePlugin uses object syntax", () => {
+		expect(webpackConfig).toContain("resourceRegExp");
+		expect(webpackConfig).toContain("contextRegExp");
+	});
+
+	test("ForkTsCheckerWebpackPlugin uses v6+ API", () => {
+		// v6+ API uses `typescript` object with `typescriptPath`
+		expect(webpackConfig).toContain("typescriptPath");
+		expect(webpackConfig).toContain("diagnosticOptions");
+		// v4 API keys should be gone
+		expect(webpackConfig).not.toContain("checkSyntacticErrors");
+		expect(webpackConfig).not.toContain("resolveModuleNameModule");
+		expect(webpackConfig).not.toContain("resolveTypeReferenceDirectiveModule");
+		expect(webpackConfig).not.toContain("reportFiles");
+	});
+});
+
+// ---------------------------------------------------------------------------
+// 2. webpack.config.js — wp4 remnants must be absent
+// ---------------------------------------------------------------------------
+describe("webpack.config.js — no wp4 remnants", () => {
+	test("does not import pnp-webpack-plugin", () => {
+		expect(webpackConfig).not.toContain("pnp-webpack-plugin");
+		expect(webpackConfig).not.toContain("PnpWebpackPlugin");
+	});
+
+	test("does not use futureEmitAssets (default in wp5)", () => {
+		expect(webpackConfig).not.toContain("futureEmitAssets");
+	});
+
+	test("does not have requireEnsure parser rule", () => {
+		expect(webpackConfig).not.toContain("requireEnsure");
+	});
+
+	test("does not use WatchMissingNodeModulesPlugin", () => {
+		expect(webpackConfig).not.toContain("WatchMissingNodeModulesPlugin");
+	});
+
+	test("does not have node polyfills block", () => {
+		// wp4 had: node: { module: "empty", dgram: "empty", ... }
+		expect(webpackConfig).not.toMatch(/node\s*:\s*\{[\s\S]*?dgram/);
+		expect(webpackConfig).not.toMatch(/node\s*:\s*\{[\s\S]*?module.*empty/);
+	});
+
+	test("does not have resolveLoader PnP block", () => {
+		expect(webpackConfig).not.toContain("resolveLoader");
+	});
+
+	test("does not import safePostCssParser", () => {
+		expect(webpackConfig).not.toContain("safePostCssParser");
+		expect(webpackConfig).not.toContain("postcss-safe-parser");
+	});
+});
+
+// ---------------------------------------------------------------------------
+// 3. webpackDevServer.config.js — WDS4 API
+// ---------------------------------------------------------------------------
+describe("webpackDevServer.config.js — WDS4 API", () => {
+	test("uses allowedHosts (not disableHostCheck)", () => {
+		expect(devServerConfig).toContain("allowedHosts");
+		expect(devServerConfig).not.toContain("disableHostCheck");
+	});
+
+	test("uses WDS4 native client with a compile-error overlay", () => {
+		// The freeze bug came from CRA's react-error-overlay (now removed), not from
+		// WDS4's native overlay. We keep the compile-error overlay and disable the
+		// runtime-error one to avoid blocking the preview iframe.
+		expect(devServerConfig).toMatch(/client\s*:\s*\{/);
+		expect(devServerConfig).toMatch(/overlay\s*:\s*\{/);
+		expect(devServerConfig).toMatch(/errors\s*:\s*true/);
+		expect(devServerConfig).toMatch(/runtimeErrors\s*:\s*false/);
+		expect(devServerConfig).not.toContain("clientLogLevel");
+	});
+
+	test("wires WDS_SOCKET_* into client.webSocketURL (HMR behind a proxy)", () => {
+		// WDS3 read these via CRA's webpackHotDevClient (removed); WDS4 reads them
+		// from client.webSocketURL instead.
+		expect(devServerConfig).toContain("webSocketURL");
+		expect(devServerConfig).toContain("WDS_SOCKET_HOST");
+	});
+
+	test("uses static (not contentBase)", () => {
+		expect(devServerConfig).toMatch(/static\s*:\s*\{/);
+		expect(devServerConfig).not.toMatch(/contentBase\s*:/);
+		expect(devServerConfig).not.toContain("watchContentBase");
+	});
+
+	test("uses webSocketServer: ws (not transportMode)", () => {
+		expect(devServerConfig).toMatch(/webSocketServer\s*:\s*["']ws["']/);
+		expect(devServerConfig).not.toContain("transportMode");
+	});
+
+	test("uses setupMiddlewares (not before/after)", () => {
+		expect(devServerConfig).toContain("setupMiddlewares");
+		// Ensure no WDS3-style before(app, server) or after(app) callbacks
+		expect(devServerConfig).not.toMatch(/\bbefore\s*\(\s*app/);
+		expect(devServerConfig).not.toMatch(/\bafter\s*\(\s*app/);
+	});
+
+	test("uses devMiddleware (not publicPath at top level)", () => {
+		expect(devServerConfig).toMatch(/devMiddleware\s*:\s*\{/);
+	});
+
+	test("setupMiddlewares uses unshift for pre-middlewares", () => {
+		expect(devServerConfig).toContain("middlewares.unshift");
+	});
+
+	test("setupMiddlewares uses push for post-middlewares", () => {
+		expect(devServerConfig).toContain("middlewares.push");
+	});
+
+	test("does not use devServer.app.use for post-middlewares", () => {
+		// devServer.app.use() runs BEFORE historyApiFallback — must not be used
+		// for redirectServedPath or noopServiceWorkerMiddleware
+		const setupBlock = devServerConfig.match(/setupMiddlewares[\s\S]*?return middlewares/);
+		expect(setupBlock).not.toBeNull();
+		expect(setupBlock[0]).not.toMatch(/devServer\.app\.use\([\s\S]*?redirectServedPath/);
+		expect(setupBlock[0]).not.toMatch(/devServer\.app\.use\([\s\S]*?noopServiceWorkerMiddleware/);
+	});
+
+	test("does not use errorOverlayMiddleware (handled by the WDS4/Fast Refresh overlay)", () => {
+		expect(devServerConfig).not.toContain("errorOverlayMiddleware");
+	});
+
+	test("does not use quiet or injectClient options", () => {
+		expect(devServerConfig).not.toMatch(/quiet\s*:/);
+		expect(devServerConfig).not.toMatch(/injectClient\s*:/);
+	});
+
+	test("hot is true (WDS4 manages HMR)", () => {
+		expect(devServerConfig).toMatch(/hot\s*:\s*true/);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// 4. scripts/start.js — WDS4 constructor + startup API
+// ---------------------------------------------------------------------------
+describe("scripts/start.js — WDS4 API", () => {
+	test("WebpackDevServer constructor: config first, compiler second", () => {
+		// WDS4: new WebpackDevServer(config, compiler)
+		expect(startScript).toMatch(/new\s+WebpackDevServer\(\s*serverConfig\s*,\s*compiler\s*\)/);
+	});
+
+	test("uses startCallback (not listen)", () => {
+		expect(startScript).toContain("startCallback");
+		expect(startScript).not.toMatch(/devServer\.listen\s*\(/);
+	});
+
+	test("does not use devSocket (removed in WDS4)", () => {
+		expect(startScript).not.toContain("devSocket");
+	});
+
+	test("does not pass devSocket to createCompiler", () => {
+		const createCompilerBlock = startScript.match(/createCompiler\(\{[\s\S]*?\}\)/);
+		expect(createCompilerBlock).not.toBeNull();
+		expect(createCompilerBlock[0]).not.toContain("devSocket");
+	});
+});
+
+// ---------------------------------------------------------------------------
+// 5. scripts/build.js — compiler.close()
+// ---------------------------------------------------------------------------
+describe("scripts/build.js — wp5 best practices", () => {
+	test("calls compiler.close() after compiler.run()", () => {
+		expect(buildScript).toContain("compiler.close(");
+	});
+});
+
+// ---------------------------------------------------------------------------
+// 6. config/webpackSchemas.config.js — compiler.close()
+// ---------------------------------------------------------------------------
+describe("config/webpackSchemas.config.js — wp5 best practices", () => {
+	test("calls compiler.close() after compiler.run()", () => {
+		expect(schemasConfig).toContain("compiler.close(");
+	});
+
+	// wp4 ignored output.library for commonjs2; wp5 appends it to the prefix, so a name
+	// would move the parsed config to module.exports.griddo and break the consumer below.
+	test("sets no library name, so the bundle stays module.exports = <exports>", () => {
+		expect(schemasConfig).toContain('libraryTarget: "commonjs2"');
+		expect(schemasConfig).not.toMatch(/library:\s*"/);
+	});
+
+	test("scripts/griddo-sync-schemas.js reads the bundle default export", () => {
+		expect(syncSchemasScript).toContain("_griddoConfig.default");
+	});
+});
+
+// ---------------------------------------------------------------------------
+// 7. package.json — dependencies
+// ---------------------------------------------------------------------------
+describe("package.json — wp5 dependencies", () => {
+	const allDeps = {
+		...pkgJson.dependencies,
+		...pkgJson.devDependencies,
+	};
+
+	test("webpack is ^5.x", () => {
+		expect(allDeps.webpack).toMatch(/^\^?5/);
+	});
+
+	test("webpack-dev-server is ^4.x", () => {
+		expect(allDeps["webpack-dev-server"]).toMatch(/^\^?4/);
+	});
+
+	test("html-webpack-plugin is ^5.x", () => {
+		expect(allDeps["html-webpack-plugin"]).toMatch(/^\^?5/);
+	});
+
+	test("mini-css-extract-plugin is ^2.x", () => {
+		expect(allDeps["mini-css-extract-plugin"]).toMatch(/^\^?2/);
+	});
+
+	test("terser-webpack-plugin is ^5.x", () => {
+		expect(allDeps["terser-webpack-plugin"]).toMatch(/^\^?5/);
+	});
+
+	test("css-minimizer-webpack-plugin is ^5.x", () => {
+		expect(allDeps["css-minimizer-webpack-plugin"]).toMatch(/^\^?5/);
+	});
+
+	test("webpack-manifest-plugin is ^5.x", () => {
+		expect(allDeps["webpack-manifest-plugin"]).toMatch(/^\^?5/);
+	});
+
+	test("react-dev-utils is ^12.x", () => {
+		expect(allDeps["react-dev-utils"]).toMatch(/^\^?12/);
+	});
+
+	test("css-loader is ^6.11.x (asIs + namedExport needs useExportsAs)", () => {
+		// Earlier 6.x rejected `exportLocalsConvention: "asIs"` alongside
+		// `namedExport: true`, so the floor is not just ^6.
+		expect(allDeps["css-loader"]).toMatch(/^\^?6\.(1[1-9]|[2-9]\d)/);
+	});
+
+	test("babel-loader is ^9.x", () => {
+		expect(allDeps["babel-loader"]).toMatch(/^\^?9/);
+	});
+
+	test("node-polyfill-webpack-plugin is present (client build polyfills)", () => {
+		expect(allDeps).toHaveProperty("node-polyfill-webpack-plugin");
+	});
+
+	test("postcss-loader is ^7.x", () => {
+		expect(allDeps["postcss-loader"]).toMatch(/^\^?7/);
+	});
+
+	test("keeps postcss-preset-env at 6.x (minimal PostCSS scope)", () => {
+		expect(allDeps["postcss-preset-env"]).toMatch(/^\^?6/);
+	});
+
+	test("keeps postcss-normalize (minimal PostCSS scope)", () => {
+		expect(allDeps).toHaveProperty("postcss-normalize");
+	});
+
+	test("keeps typescript at 4.9.x (TS bump is out of scope)", () => {
+		expect(allDeps.typescript).toMatch(/^\^?4\.9/);
+	});
+
+	test("removed wp4-only dependencies are not present", () => {
+		const removed = [
+			"optimize-css-assets-webpack-plugin",
+			"pnp-webpack-plugin",
+			"ts-pnp",
+			"url-loader",
+			"file-loader",
+			"postcss-safe-parser",
+			"workbox-webpack-plugin",
+		];
+		for (const dep of removed) {
+			expect(allDeps).not.toHaveProperty(dep);
+		}
+	});
+});
+
+// ---------------------------------------------------------------------------
+// 8. package.json — no --openssl-legacy-provider in scripts
+// ---------------------------------------------------------------------------
+describe("package.json — no openssl legacy provider", () => {
+	test("no script uses --openssl-legacy-provider", () => {
+		const scripts = Object.values(pkgJson.scripts || {});
+		for (const script of scripts) {
+			expect(script).not.toContain("--openssl-legacy-provider");
+		}
+	});
+});
+
+// ---------------------------------------------------------------------------
+// 9. Deleted files must not exist
+// ---------------------------------------------------------------------------
+describe("deleted wp4-only files", () => {
+	test("config/pnpTs.js does not exist", () => {
+		expect(fs.existsSync(path.join(configDir, "pnpTs.js"))).toBe(false);
+	});
+});

package/config/{jest/componentsMock.js → tests/componentsMock.cjs}

@@ -1,5 +1,8 @@
+// vitest exposes `vi` as a global (test.globals).
+const mockFn = vi.fn;
+
 module.exports = {
-	SiteProvider: jest.fn(),
+	SiteProvider: mockFn(),
 	config: {
 		schemas: {
 			config: {

package/config/tests/reactEasyCropMock.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+// ESM on purpose: vite treats an aliased file as source, so it does not apply
+// the CommonJS interop. With `module.exports` the default import reached the
+// consumer as a plain object instead of the component.
+const Cropper = ({ onCropComplete }) => {
+	React.useEffect(() => {
+		if (onCropComplete) {
+			onCropComplete({}, { x: 0, y: 0, width: 100, height: 100 });
+		}
+	}, []);
+	return React.createElement("div", { "data-testid": "cropper-mock" });
+};
+
+export default Cropper;

package/config/tests/reactTimezoneMock.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+// vitest exposes `vi` as a global (test.globals).
+const mockFn = vi.fn;
+
+// ESM on purpose: vite treats an aliased file as source, so it does not apply
+// the CommonJS interop. With `module.exports` the default import reached the
+// consumer as a plain object instead of the component.
+export const WorldMap = () => React.createElement("div", { "data-testid": "world-map-mock" });
+export const TimeZoneSelectDialog = () => React.createElement("div", { "data-testid": "timezone-dialog-mock" });
+export const findTimeZone = mockFn((tz) => tz);
+export const convertOffsetInMinutesToString = mockFn((offset) => String(offset));
+
+export default WorldMap;

package/config/tests/setup.ts

@@ -0,0 +1,41 @@
+import "@testing-library/jest-dom";
+import { buildToHaveStyleRule, resetStyleSheet } from "vitest-styled-components";
+
+// Unlike jest-styled-components, this package does not register itself on
+// import: it exports the matcher factory and leaves the wiring to us.
+expect.extend({ toHaveStyleRule: buildToHaveStyleRule(expect) });
+beforeEach(resetStyleSheet);
+
+// Port of config/jest/setup.js. Two things are deliberately not carried over:
+//   - the `babel-plugin-require-context-hook` registration: nothing in src uses
+//     `require.context`.
+//   - `module.exports = () => { global.IS_REACT_ACT_ENVIRONMENT = true }`: jest
+//     only required that file, it never called the exported function, so the
+//     flag was never actually set. Dropping it preserves the behaviour.
+
+// styled-components warns when a component is first imported during a React render.
+// In tests, modules are loaded lazily (on first use), so they get evaluated inside
+// a render cycle — a false positive. The components themselves are correctly defined
+// at module level; this suppressor avoids ~1800 spurious warnings per test run.
+const originalWarn = console.warn.bind(console);
+console.warn = (...args: unknown[]) => {
+	if (typeof args[0] === "string" && args[0].includes("has been created dynamically")) return;
+	originalWarn(...args);
+};
+
+window.matchMedia =
+	window.matchMedia ||
+	((): MediaQueryList =>
+		({
+			matches: false,
+			addListener: () => {},
+			removeListener: () => {},
+		}) as unknown as MediaQueryList);
+
+class ResizeObserverMock {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+}
+
+globalThis.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;