@webiny/build-tools 0.0.0-unstable.81ae05e56b → 0.0.0-unstable.a4f3e4ea8b

package/bundling/admin/createBuildAdmin.js

@@ -1,4 +1,3 @@
-import { createRsbuild } from "@rsbuild/core";
 import { createRsbuildConfig } from "./createRsbuildConfig.js";
 import { printBuildStats } from "../printBuildStats.js";
 
@@ -7,6 +6,8 @@ export const createBuildAdmin =
     async ({ cwd }) => {
         process.env.NODE_ENV = "production";
 
+        // Must be a dynamic import — see rslibCompile.js for the reason.
+        const { createRsbuild } = await import("@rsbuild/core");
         const rsbuildConfig = createRsbuildConfig({ cwd });
 
         const rsbuild = await createRsbuild({ rsbuildConfig });

package/bundling/admin/createRsbuildConfig.js

@@ -19,12 +19,6 @@ export const createRsbuildConfig = ({ cwd }) => {
             },
             define: envVars
         },
-        resolve: {
-            alias: {
-                // This is a temporary fix, until we sort out the `react-butterfiles` dependency.
-                "react-butterfiles": "@webiny/app/react-butterfiles"
-            }
-        },
         output: { distPath: { root: paths.admin.outputFolder } },
         mode,
         dev: { hmr: true },
@@ -33,11 +27,15 @@ export const createRsbuildConfig = ({ cwd }) => {
         },
         tools: {
             postcss: (_, { addPlugins }) => {
-                addPlugins(
+                addPlugins([
+                    createInjectTailwindSourcePlugin(
+                        path.join(paths.projectRootFolder, "extensions")
+                    ),
                     tailwindcss({
                         base: getTailwindBasePath(paths.projectRootFolder)
-                    })
-                );
+                    }),
+                    createStripTailwindSourceLeftoverPlugin()
+                ]);
             },
             rspack: {
                 watchOptions: {
@@ -47,7 +45,7 @@ export const createRsbuildConfig = ({ cwd }) => {
                 }
             }
         },
-        server: { port: 3001 },
+        server: { port: process.env.PORT || 3001, host: "0.0.0.0" },
         html: {
             template: paths.projectRootFolder + "/public/index.html"
         },
@@ -111,6 +109,31 @@ const getTailwindBasePath = projectRootFolderPath => {
     return path.join(projectRootFolderPath, "node_modules", "@webiny");
 };
 
+/*
+    Injects an `@source` directive into the Tailwind CSS AST at build time, pointing to the
+    given absolute path. https://tailwindcss.com/docs/functions-and-directives#source-directive
+*/
+const createInjectTailwindSourcePlugin = sourcePath => ({
+    postcssPlugin: "inject-tailwind-source",
+    Once(root) {
+        root.prepend(`@source "${sourcePath}";`);
+    }
+});
+
+/*
+    Removes any leftover `@source` at-rule from the output. Tailwind v4 strips the
+    directive from files it processes, but `@tailwindcss/postcss` only processes
+    files containing one of its trigger at-rules; for other files (e.g., pre-bundled
+    component CSS imported through JS), the injected directive would otherwise
+    survive into the production bundle, exposing the absolute build-machine path.
+*/
+const createStripTailwindSourceLeftoverPlugin = () => ({
+    postcssPlugin: "strip-tailwind-source-leftover",
+    Once(root) {
+        root.walkAtRules("source", node => node.remove());
+    }
+});
+
 const getEnvVars = () => {
     const raw = Object.keys(process.env)
         .filter(key => {

package/bundling/admin/createWatchAdmin.js

@@ -1,4 +1,3 @@
-import { createRsbuild } from "@rsbuild/core";
 import { createRsbuildConfig } from "./createRsbuildConfig.js";
 
 export const createWatchAdmin =
@@ -6,6 +5,8 @@ export const createWatchAdmin =
     async ({ cwd }) => {
         process.env.NODE_ENV = "development";
 
+        // Must be a dynamic import — see rslibCompile.js for the reason.
+        const { createRsbuild } = await import("@rsbuild/core");
         const rsbuildConfig = createRsbuildConfig({ cwd });
 
         const rsbuild = await createRsbuild({ rsbuildConfig });

package/bundling/function/createBuildFunction.js

@@ -1,4 +1,3 @@
-import { createRsbuild } from "@rsbuild/core";
 import { createRsbuildConfig } from "./createRsbuildConfig.js";
 import { printBuildStats } from "../printBuildStats.js";
 
@@ -7,7 +6,9 @@ export const createBuildFunction =
     async ({ cwd }) => {
         process.env.NODE_ENV = "production";
 
-        const rsbuildConfig = createRsbuildConfig({ cwd });
+        // Must be a dynamic import — see rslibCompile.js for the reason.
+        const { createRsbuild } = await import("@rsbuild/core");
+        const rsbuildConfig = await createRsbuildConfig({ cwd, enforceMaxBundleSize: true });
 
         const rsbuild = await createRsbuild({ rsbuildConfig });
 

package/bundling/function/createRsbuildConfig.js

@@ -1,19 +1,30 @@
 import path from "path";
-import rspack from "@rspack/core";
 import { pluginTypeCheck } from "@rsbuild/plugin-type-check";
 import { createImportValidatorPlugin } from "../importValidatorPlugin.js";
 
-export const createRsbuildConfig = ({ cwd }) => {
+const DEFAULT_WEBINY_INFRA_API_MAX_BUNDLE_SIZE = 6_291_456; // 6 MB
+
+export const createRsbuildConfig = async ({ cwd, enforceMaxBundleSize }) => {
+    // Must be a dynamic import — see rslibCompile.js for the reason.
+    const { default: rspack } = await import("@rspack/core");
     const paths = getPaths(cwd);
     const mode = getMode();
+    const isDebugEnabled = process.env.DEBUG === "true";
+
+    // Configurable via WEBINY_INFRA_API_MAX_BUNDLE_SIZE (bytes).
+    // Only enforced during build — watch mode skips size checks.
+    const maxBundleSize =
+        parseInt(process.env.WEBINY_INFRA_API_MAX_BUNDLE_SIZE) ||
+        DEFAULT_WEBINY_INFRA_API_MAX_BUNDLE_SIZE;
 
     return /** @type {import("@rsbuild/core").RsbuildConfig} */ ({
         source: { entry: { index: paths.fn.entryFile } },
         output: {
             module: true,
             target: "node",
+            minify: true,
             sourceMap: {
-                js: process.env.DEBUG === "true" ? "source-map" : false
+                js: isDebugEnabled || mode === "development" ? "source-map" : false
             },
             filename: {
                 js: pathData => {
@@ -30,13 +41,33 @@ export const createRsbuildConfig = ({ cwd }) => {
         },
         tools: {
             rspack: {
-                externals: [/^@aws-sdk/, /^sharp$/],
+                ...(enforceMaxBundleSize && {
+                    performance: {
+                        hints: "error",
+                        maxEntrypointSize: maxBundleSize,
+                        maxAssetSize: maxBundleSize
+                    }
+                }),
+                externals: [
+                    /^@aws-sdk/,
+                    /^aws-sdk$/,
+                    /^sharp$/,
+                    // knex is a runtime-polymorphic package: its source statically require()s a
+                    // driver for EVERY SQL dialect (pg, mysql, mariadb, mssql, sqlite, ...) and
+                    // picks one at runtime from the configured `client`. Bundling it forces the
+                    // bundler to resolve drivers that aren't installed (the mariadb/tedious/pg
+                    // "Module not found" errors). The server flavour runs as a Node process with
+                    // node_modules present, so we externalize knex and let Node load it — knex then
+                    // lazily require()s ONLY the configured dialect's driver (e.g. better-sqlite3),
+                    // never the others.
+                    /^knex(\/|$)/
+                ],
                 plugins: [
-                    // This is necessary to enable JSDOM usage in Lambda.
+                    // Ignore optional `canvas` native module required by jsdom.
                     // https://rspack.dev/plugins/webpack/ignore-plugin
                     new rspack.IgnorePlugin({
-                        resourceRegExp: /canvas/,
-                        contextRegExp: /jsdom$/
+                        resourceRegExp: /^canvas$/,
+                        contextRegExp: /jsdom/
                     })
                 ],
                 resolve: {

package/bundling/function/createWatchFunction.js

@@ -1,4 +1,3 @@
-import { createRsbuild } from "@rsbuild/core";
 import { createRsbuildConfig } from "./createRsbuildConfig.js";
 
 export const createWatchFunction =
@@ -6,7 +5,9 @@ export const createWatchFunction =
     async ({ cwd }) => {
         process.env.NODE_ENV = "development";
 
-        const rsbuildConfig = createRsbuildConfig({ cwd });
+        // Must be a dynamic import — see rslibCompile.js for the reason.
+        const { createRsbuild } = await import("@rsbuild/core");
+        const rsbuildConfig = await createRsbuildConfig({ cwd, enforceMaxBundleSize: false });
 
         const rsbuild = await createRsbuild({ rsbuildConfig });
 

package/bundling/importValidatorPlugin.js

@@ -5,7 +5,17 @@ const cyan = "\x1b[36m";
 const reset = "\x1b[0m";
 const bold = "\x1b[1m";
 
-const whitelist = ["@webiny/cognito", "@webiny/auth0", "@webiny/okta", "@webiny/plugins"];
+const whitelist = [
+    "@webiny/cognito",
+    "@webiny/auth0",
+    "@webiny/okta",
+    "@webiny/plugins",
+    "@webiny/sdk",
+    "@webiny/stdlib",
+    "@webiny/lexical-converter",
+    "@webiny/lexical-nodes",
+    "@webiny/lexical-theme"
+];
 
 export const createImportValidatorPlugin = () => {
     return {

package/bundling/printBuildStats.js

@@ -4,7 +4,9 @@ import chalk from "chalk";
 export const printBuildStats =
     ({ cwd, label = "build", extensions = [".js", ".mjs", ".css"] }) =>
     ({ stats }) => {
-        if (!stats) return;
+        if (!stats) {
+            return;
+        }
 
         const statsJson = stats.toJson({ assets: true, children: false });
         const assets = statsJson.assets || [];

package/index.d.ts

@@ -5,10 +5,6 @@ export { RspackConfig };
 // Build commands.
 export type BuildCommand<TOptions = Record<string, any>> = (options: TOptions) => Promise<void>;
 
-export interface BabelConfig {
-    [key: string]: any;
-}
-
 export interface SwcConfig {
     [key: string]: any;
 }
@@ -20,7 +16,6 @@ export interface DefinePluginOptions {
 export interface BuildAppConfigOverrides {
     entry?: string;
     openBrowser?: boolean;
-    babel?: (config: BabelConfig) => BabelConfig;
 }
 // Build commands - apps.
 export interface BuildAppConfig {
@@ -51,7 +46,6 @@ interface BuildFunctionConfig {
         };
         define?: DefinePluginOptions;
         rspack?: (config: RspackConfig) => RspackConfig;
-        babel?: (config: BabelConfig) => BabelConfig;
         swc?: (config: SwcConfig) => SwcConfig;
     };
 }
@@ -71,12 +65,5 @@ interface BuildPackageConfig {
     };
 }
 
-interface BabelConfigParams {
-    path: string;
-    esm?: boolean;
-}
-
 export function createBuildPackage(options: BuildPackageConfig): BuildCommand;
 export function createWatchPackage(options: BuildPackageConfig): BuildCommand;
-export function createBabelConfigForNode(options: BabelConfigParams): BabelConfig;
-export function createBabelConfigForReact(options: BabelConfigParams): BabelConfig;

package/index.js

@@ -1,8 +1,3 @@
 export { createWatchAdmin, createBuildAdmin } from "./bundling/admin/index.js";
 export { createBuildFunction, createWatchFunction } from "./bundling/function/index.js";
-export {
-    createWatchPackage,
-    createBuildPackage,
-    createBabelConfigForNode,
-    createBabelConfigForReact
-} from "./packages/index.js";
+export { createWatchPackage, createBuildPackage } from "./packages/index.js";

package/package.json

@@ -1,8 +1,11 @@
 {
 	"name": "@webiny/build-tools",
-	"version": "0.0.0-unstable.81ae05e56b",
+	"version": "0.0.0-unstable.a4f3e4ea8b",
 	"type": "module",
-	"main": "index.js",
+	"exports": {
+		".": "./index.js",
+		"./*": "./*"
+	},
 	"description": "A collection of utilities for Webiny project.",
 	"repository": {
 		"type": "git",
@@ -14,43 +17,36 @@
 		"Adrian Smijulj <adrian@webiny.com>"
 	],
 	"dependencies": {
-		"@babel/core": "7.29.0",
-		"@babel/preset-env": "7.29.2",
-		"@babel/preset-react": "7.28.5",
-		"@babel/preset-typescript": "7.28.5",
-		"@babel/runtime": "7.29.2",
-		"@rsbuild/core": "1.7.3",
-		"@rsbuild/plugin-react": "1.4.6",
-		"@rsbuild/plugin-sass": "1.5.1",
-		"@rsbuild/plugin-svgr": "1.3.1",
-		"@rsbuild/plugin-type-check": "1.3.4",
-		"@rspack/core": "1.7.9",
-		"@svgr/webpack": "8.1.0",
-		"@swc/plugin-emotion": "14.7.0",
-		"@tailwindcss/postcss": "4.2.2",
-		"@types/webpack-env": "1.18.8",
+		"@rsbuild/core": "2.1.7",
+		"@rsbuild/plugin-react": "2.1.0",
+		"@rsbuild/plugin-sass": "2.0.1",
+		"@rsbuild/plugin-svgr": "2.0.5",
+		"@rsbuild/plugin-type-check": "1.5.0",
+		"@rsdoctor/rspack-plugin": "1.6.1",
+		"@rslib/core": "0.23.2",
+		"@rspack/core": "2.1.5",
+		"@swc/plugin-emotion": "14.15.0",
+		"@tailwindcss/postcss": "4.3.3",
 		"chalk": "5.6.2",
-		"chokidar": "5.0.0",
 		"css-loader": "7.1.4",
-		"eslint": "10.0.3",
 		"fast-glob": "3.3.3",
 		"find-up": "8.0.0",
-		"fs-extra": "11.3.4",
+		"fs-extra": "11.3.6",
 		"get-yarn-workspaces": "1.0.2",
-		"lodash": "4.17.23",
+		"load-json-file": "7.0.1",
+		"lodash": "4.18.1",
 		"postcss-loader": "8.2.1",
-		"process": "0.11.10",
 		"raw-loader": "4.0.2",
 		"react-dom": "18.3.1",
 		"react-refresh": "0.18.0",
-		"read-json-sync": "2.0.1",
 		"rimraf": "6.1.3",
-		"sass": "1.98.0",
-		"sass-loader": "16.0.7",
+		"sass": "1.101.3",
+		"sass-loader": "17.0.0",
+		"strip-json-comments": "5.0.3",
 		"style-loader": "4.0.0",
-		"ts-morph": "27.0.2",
-		"tsx": "4.21.0",
-		"typescript": "5.9.3",
+		"ts-morph": "28.0.0",
+		"tsx": "4.23.1",
+		"typescript": "7.0.2",
 		"url-loader": "4.1.1",
 		"utf-8-validate": "6.0.6"
 	},
@@ -63,31 +59,24 @@
 				"!!raw-loader!"
 			],
 			"dependencies": [
-				"@babel/preset-react",
-				"@svgr/webpack",
-				"@babel/preset-env",
-				"@babel/preset-typescript",
 				"@swc/plugin-emotion",
-				"@types/webpack-env",
 				"postcss-loader",
 				"raw-loader",
 				"react-refresh",
 				"style-loader",
 				"typescript",
-				"eslint",
-				"process",
 				"sass-loader",
 				"sass",
 				"bufferutil",
 				"utf-8-validate",
 				"css-loader",
-				"url-loader"
+				"url-loader",
+				"@rsdoctor/rspack-plugin"
 			]
 		}
 	},
 	"publishConfig": {
-		"access": "public",
-		"directory": "."
+		"access": "public"
 	},
-	"gitHead": "81ae05e56bcc774d1e077ca615a0005e736aa5a6"
+	"gitHead": "b8aec8a1be3f25c3b428b357fe1e352c7cbff9ae"
 }

package/packages/buildPackage/copyToDist.js

@@ -1,9 +1,9 @@
 import fs from "fs";
 import { join } from "path";
 
-export const copyToDist = (path, { cwd, logs }) => {
+export const copyToDist = (path, { cwd, logs, outputDir }) => {
     const from = join(cwd, path);
-    const to = join(cwd, "dist", path);
+    const to = join(outputDir || join(cwd, "dist"), path);
     if (fs.existsSync(from)) {
         fs.copyFileSync(from, to);
         logs !== false && console.log(`Copied ${path}.`);

package/packages/buildPackage/rslibCompile.js

@@ -0,0 +1,65 @@
+import path from "path";
+import fs from "fs";
+import { dirname } from "path";
+import glob from "fast-glob";
+
+const COMPILE_EXTENSIONS = [".js", ".jsx", ".ts", ".tsx"];
+const SKIP_EXTENSIONS = [".d.ts"];
+
+export const rslibCompile = async ({ cwd, outputDir }) => {
+    const distRoot = outputDir || path.join(cwd, "dist");
+
+    // Copy non-compilable files (assets, json, graphql, etc.) as-is.
+    const pattern = path.join(cwd, "src/**/*.*").replace(/\\/g, "/");
+    const allFiles = glob.sync(pattern, { onlyFiles: true, dot: true });
+
+    for (const file of allFiles) {
+        const shouldCompile = COMPILE_EXTENSIONS.some(ext => file.endsWith(ext));
+        const shouldSkip = SKIP_EXTENSIONS.some(ext => file.endsWith(ext));
+
+        if (!shouldCompile || shouldSkip) {
+            const destPath = file.replace(path.join(cwd, "src"), distRoot);
+            fs.mkdirSync(dirname(destPath), { recursive: true });
+            fs.copyFileSync(file, destPath);
+        }
+    }
+
+    // Must be a dynamic import. @rslib/core statically loads rspack's native
+    // binding. Workers that also run createBuildAdmin load a different rspack
+    // version via rsbuild, so two native binaries end up in the same process
+    // and cause a SIGSEGV. Deferring the import keeps each rspack isolated to
+    // the workers that actually need it.
+    const [{ createRslib }, { pluginSvgr }] = await Promise.all([
+        import("@rslib/core"),
+        import("@rsbuild/plugin-svgr")
+    ]);
+
+    const rslib = await createRslib({
+        cwd,
+        config: {
+            lib: [{ format: "esm", bundle: false }],
+            source: {
+                // SVGs included so rslib runs them through pluginSvgr and emits
+                // a .js React-component module alongside the copied .svg asset.
+                entry: ["./src/**/*.{ts,tsx,js,jsx,svg}"],
+                alias: { "~": "./src" }
+            },
+            output: {
+                target: "web",
+                distPath: { root: path.relative(cwd, distRoot) || "." },
+                cleanDistPath: false,
+                sourceMap: { js: "source-map" },
+                // mixedImport emits each SVG as a static asset for the default URL
+                // export. Without a hash, two files named the same (e.g. fullscreen.svg
+                // in different dirs) collide at static/svg/fullscreen.svg.
+                // loader-utils [ext] has no leading dot, so "[name].[hash][ext]" produces
+                // "foo.hashsvg". Use an explicit ".svg" suffix instead.
+                filename: { svg: "[name].[contenthash:8].svg" }
+            },
+            plugins: [pluginSvgr({ mixedImport: true, svgrOptions: { exportType: "named" } })]
+        }
+    });
+
+    const { close } = await rslib.build();
+    await close();
+};

package/packages/buildPackage/tsAliasReplacer.js

@@ -1,4 +1,4 @@
-import { dirname, relative } from "node:path";
+import { dirname, join, relative, resolve } from "node:path";
 import fg from "fast-glob";
 import fs from "node:fs";
 
@@ -15,6 +15,11 @@ export const replaceTscAliases = async ({ distDir, cwd, debug = false }) => {
         absolute: true
     });
 
+    // Build a map of absolute src paths → package names, by scanning sibling packages.
+    // This is used to rewrite cross-package src paths (e.g. "../../api/src") back to
+    // proper package names (e.g. "@webiny/api") in generated .d.ts files.
+    const srcToPackageName = buildSrcToPackageNameMap(cwd);
+
     for (const dtsFile of dtsFiles) {
         let content = fs.readFileSync(dtsFile, "utf8").toString();
         let modified = false;
@@ -37,11 +42,84 @@ export const replaceTscAliases = async ({ distDir, cwd, debug = false }) => {
             }
         );
 
+        // Replace cross-package src paths (e.g. "../../api/src/types") with proper package
+        // names (e.g. "@webiny/api/types"). TypeScript inlines these relative paths when
+        // project references are used and dependencies have paths pointing to src/.
+        if (srcToPackageName.size > 0) {
+            content = content.replace(
+                /["'](\.\.[^"']*\/src(?:\/[^"']*)?)['"]/g,
+                (match, relPath) => {
+                    const quote = match[0];
+                    const absPath = resolve(dirname(dtsFile), relPath);
+                    const packageName = resolveToPackageName(absPath, srcToPackageName);
+                    if (packageName) {
+                        modified = true;
+                        return `${quote}${packageName}${quote}`;
+                    }
+                    return match;
+                }
+            );
+        }
+
         if (modified) {
             fs.writeFileSync(dtsFile, content, "utf8");
             if (debug) {
-                console.log(`Resolved ~ aliases in: ${relative(cwd, dtsFile)}`);
+                console.log(`Resolved aliases in: ${relative(cwd, dtsFile)}`);
             }
         }
     }
 };
+
+/**
+ * Scans sibling packages to build a map of absolute src directory paths → package names.
+ * @param {string} cwd - The current package directory.
+ * @returns {Map<string, string>}
+ */
+function buildSrcToPackageNameMap(cwd) {
+    const map = new Map();
+    // Go up to the packages/ directory (cwd is packages/xxx, parent is packages/)
+    const packagesDir = resolve(cwd, "..");
+    if (!fs.existsSync(packagesDir)) {
+        return map;
+    }
+    let entries;
+    try {
+        entries = fs.readdirSync(packagesDir);
+    } catch {
+        return map;
+    }
+    for (const entry of entries) {
+        const pkgDir = join(packagesDir, entry);
+        const pkgJsonPath = join(pkgDir, "package.json");
+        if (!fs.existsSync(pkgJsonPath)) {
+            continue;
+        }
+        try {
+            const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf8"));
+            if (pkgJson.name) {
+                const srcDir = join(pkgDir, "src");
+                map.set(srcDir, pkgJson.name);
+            }
+        } catch {
+            // ignore
+        }
+    }
+    return map;
+}
+
+/**
+ * Given an absolute path that points into a package's src directory, returns the
+ * corresponding package name + sub-path (e.g. "@webiny/api/types").
+ * @param {string} absPath - Absolute path resolved from the relative import.
+ * @param {Map<string, string>} srcToPackageName
+ * @returns {string|null}
+ */
+function resolveToPackageName(absPath, srcToPackageName) {
+    for (const [srcDir, packageName] of srcToPackageName) {
+        if (absPath === srcDir || absPath.startsWith(srcDir + "/")) {
+            const subPath = absPath.slice(srcDir.length).replace(/^\//, "");
+            return subPath ? `${packageName}/${subPath}` : packageName;
+        }
+    }
+    return null;
+}