@griddo/ax 12.4.0 → 12.5.1

package/config/__tests__/ModulePathInMessagesPlugin.test.js

@@ -0,0 +1,93 @@
+/**
+ * Guards the fix for webpack 5 dropping the file name from module warnings.
+ *
+ * webpack 4 gave CRA warnings as strings carrying their own `./src/Foo.tsx` header;
+ * webpack 5 moves it to a `moduleName` field that `formatWebpackMessages` ignores,
+ * which left "Attempted import error: 'x' is not exported from './styles.module.css'"
+ * pointing at no file in particular.
+ */
+const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
+
+const ModulePathInMessagesPlugin = require("../webpack/ModulePathInMessagesPlugin");
+
+/** Minimal stand-in for the two tapable hooks the plugin uses. */
+const runPlugin = ({ warnings = [], errors = [] } = {}) => {
+	const compilation = {
+		warnings,
+		errors,
+		requestShortener: {},
+		hooks: { afterSeal: { tap: (_name, fn) => fn() } },
+	};
+	const compiler = { hooks: { compilation: { tap: (_name, fn) => fn(compilation) } } };
+
+	new ModulePathInMessagesPlugin().apply(compiler);
+
+	return compilation;
+};
+
+const makeWarning = (message, { module = true, loc = { start: { line: 2, column: 12 } } } = {}) => ({
+	message,
+	loc,
+	module: module ? { readableIdentifier: () => "./src/ui/modules/Wysiwyg/index.tsx" } : undefined,
+});
+
+describe("ModulePathInMessagesPlugin", () => {
+	test("prefixes the warning with the module path and location", () => {
+		const warning = makeWarning("export 'intro' was not found in './styles.module.css'");
+
+		runPlugin({ warnings: [warning] });
+
+		expect(warning.message).toBe(
+			"./src/ui/modules/Wysiwyg/index.tsx:2:12\nexport 'intro' was not found in './styles.module.css'",
+		);
+	});
+
+	test("decorates errors too", () => {
+		const error = makeWarning("Module not found");
+
+		runPlugin({ errors: [error] });
+
+		expect(error.message).toBe("./src/ui/modules/Wysiwyg/index.tsx:2:12\nModule not found");
+	});
+
+	test("omits the location when the warning has none", () => {
+		const warning = makeWarning("boom", { loc: null });
+
+		runPlugin({ warnings: [warning] });
+
+		expect(warning.message).toBe("./src/ui/modules/Wysiwyg/index.tsx\nboom");
+	});
+
+	test("leaves warnings that are not attached to a module alone", () => {
+		const warning = makeWarning("something global", { module: false });
+
+		runPlugin({ warnings: [warning] });
+
+		expect(warning.message).toBe("something global");
+	});
+
+	test("does not prefix twice across watch-mode rebuilds", () => {
+		const warning = makeWarning("export 'intro' was not found in './styles.module.css'");
+
+		runPlugin({ warnings: [warning] });
+		const afterFirstBuild = warning.message;
+		runPlugin({ warnings: [warning] });
+
+		expect(warning.message).toBe(afterFirstBuild);
+	});
+
+	// The contract that makes the whole thing worthwhile: formatWebpackMessages
+	// rewrites the export line wholesale and strips a trailing `2:12-24` off line 0,
+	// so the header has to survive both to reach the terminal.
+	test("the path survives formatWebpackMessages", () => {
+		const warning = makeWarning("export 'intro' (imported as 'styles') was not found in './styles.module.css'");
+
+		runPlugin({ warnings: [warning] });
+		const [formatted] = formatWebpackMessages({ errors: [], warnings: [{ message: warning.message }] }).warnings;
+
+		expect(formatted).toBe(
+			"./src/ui/modules/Wysiwyg/index.tsx:2:12\n" +
+				"Attempted import error: 'intro' is not exported from './styles.module.css' (imported as 'styles').",
+		);
+	});
+});

package/config/webpack/ModulePathInMessagesPlugin.js

@@ -0,0 +1,47 @@
+const NAME = "GriddoModulePathInMessages";
+
+/**
+ * Prefixes every module-attached warning/error with the file that caused it.
+ *
+ * webpack 4 handed CRA its warnings as plain strings that already carried the
+ * `./src/Foo.tsx 2:12-24` header. webpack 5 hands them over as objects
+ * (`{ message, moduleName, loc }`), and `react-dev-utils`'s `formatWebpackMessages`
+ * only reads `.message` — so the file and location are dropped on the floor.
+ * That leaves messages like "Attempted import error: 'intro' is not exported
+ * from './styles.module.css'" with no way to tell which of the many
+ * `styles.module.css` files is at fault.
+ *
+ * Folding the location back into `.message` restores the webpack 4 shape that
+ * `formatWebpackMessages` expects (line 0 = file, line 1 = message), and it fixes
+ * both paths at once: `griddo build` (which calls the formatter directly) and
+ * `griddo start` (where `createCompiler` calls it internally, out of our reach).
+ */
+class ModulePathInMessagesPlugin {
+	apply(compiler) {
+		compiler.hooks.compilation.tap(NAME, (compilation) => {
+			// `afterSeal` runs once dependency warnings have been collected and before
+			// anything can call `stats.toJson()`.
+			compilation.hooks.afterSeal.tap(NAME, () => {
+				const decorate = (err) => {
+					const module = err.module;
+					if (!module || typeof module.readableIdentifier !== "function") {
+						return;
+					}
+					const name = module.readableIdentifier(compilation.requestShortener);
+					const loc = err.loc?.start ? `:${err.loc.start.line}:${err.loc.start.column}` : "";
+					const header = `${name}${loc}`;
+					// Guard against double-prefixing on watch-mode rebuilds that reuse errors.
+					if (typeof err.message !== "string" || err.message.startsWith(header)) {
+						return;
+					}
+					err.message = `${header}\n${err.message}`;
+				};
+
+				compilation.warnings.forEach(decorate);
+				compilation.errors.forEach(decorate);
+			});
+		});
+	}
+}
+
+module.exports = ModulePathInMessagesPlugin;

package/config/webpack.config.js

@@ -18,6 +18,7 @@ const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
 const ForkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpackPlugin");
 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const ModulePathInMessagesPlugin = require("./webpack/ModulePathInMessagesPlugin");
 const createEnvironmentHash = require("./webpack/persistentCache/createEnvironmentHash");
 
 const postcssNormalize = require("postcss-normalize");
@@ -466,6 +467,9 @@ module.exports = function (webpackEnv) {
 								importLoaders: 1,
 								sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
 								modules: {
+									// Both keys below are a contract with client projects, not an
+									// internal build detail: packages/griddo-ax/docs/adr/0001-contrato-de-css-modules-con-los-clientes.md
+									//
 									// css-loader v6 defaults `esModule: true`, so `import * as styles`
 									// only sees locals as named exports when `namedExport` is on.
 									// griddo-components relies on `import * as styles` heavily.
@@ -509,6 +513,8 @@ module.exports = function (webpackEnv) {
 									importLoaders: 3,
 									sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
 									modules: {
+										// Same client-facing contract as the CSS modules block above
+										// (ADR 0001): keep both keys in sync with it.
 										namedExport: true,
 										exportLocalsConvention: "asIs",
 										getLocalIdent: getCSSModuleLocalIdent,
@@ -543,6 +549,10 @@ module.exports = function (webpackEnv) {
 			],
 		},
 		plugins: [
+			// webpack 5 moves the offending file out of the warning text and into a
+			// separate `moduleName` field that react-dev-utils' formatter ignores. This
+			// folds it back in so messages point at a file again.
+			new ModulePathInMessagesPlugin(),
 			// Restore webpack 4's Node core-module handling for browser bundles. Clients run
 			// `griddo build` (this config) against their own instance, so this guards legacy
 			// instances against "Module not found" for Node builtins that webpack 5 no longer

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.4.0",
+	"version": "12.5.1",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -199,5 +199,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e78fd612e55753bf9a04aa1e4020b582be9026af"
+	"gitHead": "0341f4c939ce5e316e37effdaca2ef26dee8b8af"
 }

package/src/__tests__/components/ConfigPanel/Form/Form.test.tsx

@@ -1,4 +1,3 @@
-import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -113,49 +112,49 @@ const initialStore = {
 };
 const store = mockStore(initialStore);
 
-const defaultProps = mock<IFormProps>();
-
-defaultProps.schema = {
-	title: "Header",
-	component: "Header",
-	type: "header",
-	configTabs: [
+// Props por test. Los tres `const ...Mock = defaultProps.x as MockedFunction<>`
+// que había aquí no se usaban en ningún assert: solo servían, sin querer, para
+// materializar esas props en el proxy de `mock<T>()` y que el spread de JSX las
+// llevara al componente. Ahora van declaradas en la factoría.
+const makeProps = (overrides: Partial<IFormProps> = {}): IFormProps =>
+	Object.assign(
+		mock<IFormProps>(),
 		{
-			title: "content",
-			fields: [
-				{
-					title: "Name",
-					key: "title",
-					type: "TextField",
-					mandatory: true,
-				},
-			],
+			schema: {
+				title: "Header",
+				component: "Header",
+				type: "header",
+				configTabs: [
+					{
+						title: "content",
+						fields: [
+							{
+								title: "Name",
+								key: "title",
+								type: "TextField",
+								mandatory: true,
+							},
+						],
+					},
+				],
+				schemaType: "module",
+			},
+			selectedTab: "content",
+			isPage: false,
+			isGlobal: false,
+			theme: "default-theme",
+			setSelectedContent: vi.fn(),
+			setSelectedTab: vi.fn(),
+			setHistoryPush: vi.fn(),
 		},
-	],
-	schemaType: "module",
-};
-const restorePageNavigationActionMock = vi.fn();
-defaultProps.actions = {
-	restorePageNavigationAction: restorePageNavigationActionMock,
-};
-const setSelectedContentMock = defaultProps.setSelectedContent as MockedFunction<(editorID: number) => void>;
-const setSelectedTabMocked = defaultProps.setSelectedTab as MockedFunction<(tab: string) => void>;
-const setHistoryPushMocked = defaultProps.setHistoryPush as MockedFunction<
-	(path: string, isEditor: boolean) => void
->;
-defaultProps.selectedTab = "content";
-defaultProps.isPage = false;
-defaultProps.isGlobal = false;
-defaultProps.theme = "default-theme";
+		overrides,
+	);
 
 describe("Form component rendering", () => {
 	it("should render the component", () => {
-		defaultProps.isPage = true;
-		defaultProps.isGlobal = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ isPage: true, isGlobal: true })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -163,13 +162,9 @@ describe("Form component rendering", () => {
 	});
 
 	it("should render the component with no header warning text", () => {
-		defaultProps.isPage = false;
-		defaultProps.isGlobal = false;
-		defaultProps.header = 0;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0 })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -178,11 +173,11 @@ describe("Form component rendering", () => {
 	});
 
 	it("should call the function to restore the header", () => {
-		defaultProps.header = 0;
+		const restorePageNavigationAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0, actions: { restorePageNavigationAction } })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -190,16 +185,14 @@ describe("Form component rendering", () => {
 		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
 		const headerLink = screen.getByTestId("header-link");
 		fireEvent.click(headerLink);
-		expect(restorePageNavigationActionMock).toBeCalled();
-		expect(restorePageNavigationActionMock).toBeCalledWith("header");
+		expect(restorePageNavigationAction).toBeCalled();
+		expect(restorePageNavigationAction).toBeCalledWith("header");
 	});
 
 	it("should render the component with no footer warning text", () => {
-		defaultProps.footer = 0;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0, footer: 0 })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -208,11 +201,11 @@ describe("Form component rendering", () => {
 	});
 
 	it("should call the function to restore the header", () => {
-		defaultProps.header = 0;
+		const restorePageNavigationAction = vi.fn();
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ header: 0, footer: 0, actions: { restorePageNavigationAction } })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -220,17 +213,14 @@ describe("Form component rendering", () => {
 		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
 		const footerLink = screen.getByTestId("footer-link");
 		fireEvent.click(footerLink);
-		expect(restorePageNavigationActionMock).toBeCalled();
-		expect(restorePageNavigationActionMock).toBeCalledWith("footer");
+		expect(restorePageNavigationAction).toBeCalled();
+		expect(restorePageNavigationAction).toBeCalledWith("footer");
 	});
 
 	it("should render the tabs", () => {
-		defaultProps.isPage = true;
-		defaultProps.isGlobal = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Form {...defaultProps} />
+				<Form {...makeProps({ isPage: true, isGlobal: true, header: 0, footer: 0 })} />
 			</ThemeProvider>,
 			{ store },
 		);

package/src/__tests__/components/ConfigPanel/Header/Header.test.tsx

@@ -1,4 +1,3 @@
-import type { MockedFunction } from "vitest";
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
@@ -73,52 +72,57 @@ const initialStore = {
 
 const store = mockStore(initialStore);
 
-const defaultProps = mock<IHeaderProps>();
-defaultProps.actions = {
-	duplicateModuleAction: vi.fn(),
-	deleteModuleAction: vi.fn(),
-	copyModuleAction: vi.fn(),
-};
-const setSelectedContentMock = defaultProps.setSelectedContent as MockedFunction<(editorID: number) => void>;
-
-defaultProps.schema = {
-	title: "Header",
-	component: "Header",
-	type: "header",
-	configTabs: [
+const makeProps = (overrides: Partial<IHeaderProps> = {}): IHeaderProps =>
+	Object.assign(
+		mock<IHeaderProps>(),
 		{
-			title: "content",
-			fields: [
+			actions: {
+				duplicateModuleAction: vi.fn(),
+				deleteModuleAction: vi.fn(),
+				copyModuleAction: vi.fn(),
+			},
+			schema: {
+				title: "Header",
+				component: "Header",
+				type: "header",
+				configTabs: [
+					{
+						title: "content",
+						fields: [
+							{
+								title: "Name",
+								key: "title",
+								type: "TextField",
+								mandatory: true,
+							},
+						],
+					},
+				],
+				schemaType: "module",
+			},
+			breadcrumb: [
 				{
-					title: "Name",
-					key: "title",
-					type: "TextField",
-					mandatory: true,
+					editorID: 0,
+					component: "TextField",
+					displayName: "Texto",
 				},
 			],
+			activatedModules: ["TextField"],
+			headerRef: { current: { offsetHeight: 63, offsetTop: 24 } } as React.RefObject<HTMLDivElement>,
+			// El proxy de `mock<T>()` solo materializa una prop cuando se accede a
+			// ella, y el spread de JSX únicamente copia las propias: los callbacks
+			// que el componente invoca tienen que estar puestos aquí.
+			setSelectedContent: vi.fn(),
+			setHeaderHeight: vi.fn(),
 		},
-	],
-	schemaType: "module",
-};
-
-defaultProps.breadcrumb = [
-	{
-		editorID: 0,
-		component: "TextField",
-		displayName: "Texto",
-	},
-];
-
-defaultProps.activatedModules = ["TextField"];
-
-defaultProps.headerRef = { current: { offsetHeight: 63, offsetTop: 24 } } as React.RefObject<HTMLDivElement>;
-const setHeaderHeightMock = defaultProps.setHeaderHeight as MockedFunction<(height: number) => void>;
+		overrides,
+	);
 
 describe("Header component rendering", () => {
 	it("should render component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Header {...defaultProps} />
+				<Header {...makeProps()} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -129,11 +133,9 @@ describe("Header component rendering", () => {
 	});
 
 	it("should render the actions menu when clicking the more info button", () => {
-		defaultProps.selectedParent = [];
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Header {...defaultProps} />
+				<Header {...makeProps({ selectedParent: [] })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -145,9 +147,11 @@ describe("Header component rendering", () => {
 	});
 
 	it("should trigger the duplicate action", () => {
+		const setSelectedContent = vi.fn();
+
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Header {...defaultProps} />
+				<Header {...makeProps({ selectedParent: [], setSelectedContent })} />
 			</ThemeProvider>,
 			{ store },
 		);
@@ -157,6 +161,6 @@ describe("Header component rendering", () => {
 		const listItem = screen.getAllByTestId("action-menu-item");
 		expect(listItem).toHaveLength(3);
 		fireEvent.click(listItem[0]);
-		expect(setSelectedContentMock).toBeCalled();
+		expect(setSelectedContent).toBeCalled();
 	});
 });

package/src/__tests__/components/ElementsTooltip/ElementsTooltip.test.tsx

@@ -11,13 +11,14 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IElementsTooltipProps>();
+const makeProps = (overrides: Partial<IElementsTooltipProps> = {}): IElementsTooltipProps =>
+	Object.assign(mock<IElementsTooltipProps>(), overrides);
 
 describe("Tooltip component rendering", () => {
 	it("should not render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -27,13 +28,9 @@ describe("Tooltip component rendering", () => {
 	});
 
 	it("should render the component with one element visible", async () => {
-		defaultProps.elements = ["uno", "dos", "tres"];
-		defaultProps.colors = { uno: "#fff" };
-		defaultProps.rounded = true;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps({ elements: ["uno", "dos", "tres"], colors: { uno: "#fff" }, rounded: true })} />
 			</ThemeProvider>,
 		);
 
@@ -59,13 +56,9 @@ describe("Tooltip component rendering", () => {
 	});
 
 	it("should render the component with three elements visibles", () => {
-		defaultProps.elements = ["uno", "dos", "tres"];
-		defaultProps.defaultElements = 3;
-		defaultProps.maxChar = 1;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps({ elements: ["uno", "dos", "tres"], defaultElements: 3, maxChar: 1 })} />
 			</ThemeProvider>,
 		);
 
@@ -79,13 +72,9 @@ describe("Tooltip component rendering", () => {
 	});
 
 	it("should render the component with one row", async () => {
-		defaultProps.elements = ["uno", "dos", "tres"];
-		defaultProps.defaultElements = 1;
-		defaultProps.elementsPerRow = 3;
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ElementsTooltip {...defaultProps} />
+				<ElementsTooltip {...makeProps({ elements: ["uno", "dos", "tres"], defaultElements: 1, elementsPerRow: 3 })} />
 			</ThemeProvider>,
 		);
 

package/src/__tests__/components/EmptyState/EmptyState.test.tsx

@@ -12,13 +12,17 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IEmptyStateProps>();
+// Props nuevos en cada test: antes se compartía un solo objeto mutable y el
+// primer test, que comprueba el estado por defecto, fallaba en cuanto los
+// siguientes le habían puesto title, message o button.
+const makeProps = (overrides: Partial<IEmptyStateProps> = {}): IEmptyStateProps =>
+	Object.assign(mock<IEmptyStateProps>(), overrides);
 
 describe("EmptyState component rendering", () => {
 	it("should render the component", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps()} />
 			</ThemeProvider>,
 		);
 
@@ -28,10 +32,9 @@ describe("EmptyState component rendering", () => {
 	});
 
 	it("should render the component with title", () => {
-		defaultProps.title = "The title";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps({ title: "The title" })} />
 			</ThemeProvider>,
 		);
 
@@ -41,10 +44,9 @@ describe("EmptyState component rendering", () => {
 	});
 
 	it("should render the component with message", () => {
-		defaultProps.message = "A message";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps({ message: "A message" })} />
 			</ThemeProvider>,
 		);
 
@@ -57,12 +59,10 @@ describe("EmptyState component rendering", () => {
 describe("EmptyState component events", () => {
 	it("should trigger the onClick", () => {
 		const actionFunc = vi.fn();
-		defaultProps.button = "A button";
-		defaultProps.action = actionFunc;
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<EmptyState {...defaultProps} />
+				<EmptyState {...makeProps({ button: "A button", action: actionFunc })} />
 			</ThemeProvider>,
 		);