@next-core/build-next-bricks 1.1.2 → 1.3.0

package/bin/build-next-bricks.js

@@ -4,30 +4,44 @@ import { existsSync } from "node:fs";
 import build from "../src/build.js";
 import scanBricks from "../src/scanBricks.js";
 
+/**
+ * @typedef {T | Array<T>} MaybeArray<T>
+ * @template {string} T
+ */
+
+/** @typedef {import("@next-core/build-next-bricks").BuildNextBricksConfig} BuildNextBricksConfig */
+
 try {
   const startTime = Date.now();
 
   const packageDir = process.cwd();
   const configJs = path.join(packageDir, "build.config.js");
-  /** @type {import("@next-core/build-next-bricks").BuildNextBricksConfig} */
-  let config = {};
+  /** @type {MaybeArray<BuildNextBricksConfig>} */
+  let rawConfig = {};
   if (existsSync(configJs)) {
-    config = (await import(configJs)).default;
+    rawConfig = (await import(configJs)).default;
   }
 
-  if (!config.type || config.type === "bricks") {
-    const scanBricksStartAt = performance.now();
-    Object.assign(config, await scanBricks(packageDir));
-    const scanBricksCost = Math.round(performance.now() - scanBricksStartAt);
-    console.log(
-      "Scan bricks done in",
-      scanBricksCost < 1000
-        ? `${scanBricksCost}ms`
-        : `${(scanBricksCost / 1000).toFixed(2)}s`
-    );
+  /** @type {Array<BuildNextBricksConfig>} */
+  const configList = [].concat(rawConfig);
+
+  for (const config of configList) {
+    if (!config.type || config.type === "bricks") {
+      const scanBricksStartAt = performance.now();
+      Object.assign(config, await scanBricks(packageDir));
+      const scanBricksCost = Math.round(performance.now() - scanBricksStartAt);
+      console.log(
+        "Scan bricks done in",
+        scanBricksCost < 1000
+          ? `${scanBricksCost}ms`
+          : `${(scanBricksCost / 1000).toFixed(2)}s`
+      );
+    }
   }
 
-  const compiler = await build(config);
+  const compiler = await build(
+    configList.length === 1 ? configList[0] : configList
+  );
 
   const watch = process.argv.includes("--watch");
 

package/index.d.ts

@@ -1,6 +1,10 @@
 import type { Compiler, Configuration, RuleSetRule, container } from "webpack";
 
 export declare function build(config: BuildNextBricksConfig): Compiler;
+export declare function getSvgrLoaders(options: {
+  /** Set it to true for font icons */
+  convertCurrentColor?: boolean;
+}): RuleSetRule["use"];
 
 // Types of `SharedConfig` and `SharedObject` are copied from webpack.
 
@@ -65,13 +69,20 @@ export interface BuildNextBricksConfig {
   type?: "bricks" | "container" | "brick-playground";
   mode?: "development" | "production";
   entry?: Record<string, string>;
+  /** Defaults to "dist" */
+  outputPath?: string;
+  devOnlyOutputPublicPath?: string;
   extractCss?: boolean;
-  svgAsAsset?: boolean;
+  /** Treat svg as React component instead of asset */
+  svgAsReactComponent?: boolean;
+  /** Customize rules for svg */
+  svgRules?: RuleSetRule[];
+  /** By default the image assets are named `images/[hash][ext][query]` */
   imageAssetFilename?: string | ((pathData: any, assetInfo: any) => string);
   plugins?: Configuration["plugins"];
   moduleRules?: RuleSetRule[];
   exposes?: ConstructorParameters<typeof container.ModuleFederationPlugin>;
   dependencies?: Record<string, string[]>;
   optimization?: Configuration["optimization"];
-  moduleFederationShared?: SharedObject;
+  moduleFederationShared?: SharedObject | false;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-core/build-next-bricks",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "Build next bricks",
   "homepage": "https://github.com/easyops-cn/next-core/tree/master/packages/build-next-bricks",
   "license": "GPL-3.0",
@@ -46,5 +46,5 @@
     "typescript": "^5.0.2",
     "webpack": "^5.76.2"
   },
-  "gitHead": "3e4c6996c85fb0bb14330cd1d128dd8ff690bf5e"
+  "gitHead": "4db0aebfc3d7991690c736adf7182f327adca534"
 }

package/src/build.js

@@ -8,6 +8,14 @@ import cssnano from "cssnano";
 import cssnanoPresetLite from "cssnano-preset-lite";
 import EmitBricksJsonPlugin from "./EmitBricksJsonPlugin.js";
 import getCamelPackageName from "./getCamelPackageName.js";
+import getSvgrLoaders from "./getSvgrLoaders.js";
+
+/**
+ * @typedef {T | Array<T>} MaybeArray<T>
+ * @template {string} T
+ */
+
+/** @typedef {import("@next-core/build-next-bricks").BuildNextBricksConfig} BuildNextBricksConfig */
 
 const require = createRequire(import.meta.url);
 
@@ -47,9 +55,10 @@ const getCssLoaders = (cssOptions) => [
 ];
 
 /**
- * @param {import("@next-core/build-next-bricks").BuildNextBricksConfig} config
+ * @param {BuildNextBricksConfig} config
+ * @returns {import("webpack").Configuration}
  */
-export default async function build(config) {
+async function getWebpackConfig(config) {
   const packageDir = process.cwd();
   // const isContainer = config.type === "container";
   const isBricks = !config.type || config.type === "bricks";
@@ -95,49 +104,55 @@ export default async function build(config) {
     ...sharedSingletonPackages,
   ];
 
-  /** @type {import("@next-core/build-next-bricks").BuildNextBricksConfig["moduleFederationShared"]} */
-  const shared = Object.fromEntries(
-    (
-      await Promise.all(
-        sharedPackages.map(async (dep) => {
-          /** @type {string} */
-          let depPackageJsonPath;
-          const depPkgName = dep
-            .split("/")
-            .slice(0, dep.startsWith("@") ? 2 : 1)
-            .join("/");
-          try {
-            depPackageJsonPath = require.resolve(`${depPkgName}/package.json`, {
-              paths: [packageDir],
-            });
-          } catch (e) {
-            console.error(`Shared package not found: "${dep}"`);
-            return;
-          }
-          const depPackageJsonFile = await readFile(depPackageJsonPath, {
-            encoding: "utf-8",
-          });
-          const depPackageJson = JSON.parse(depPackageJsonFile);
-          const customized = config.moduleFederationShared?.[dep];
-          if (typeof customized === "string") {
-            return;
-          }
-          return [
-            dep,
-            {
-              singleton: sharedSingletonPackages.includes(dep),
-              version: depPackageJson.version,
-              requiredVersion:
-                packageJson.peerDependencies?.[depPkgName] ??
-                packageJson.devDependencies?.[depPkgName] ??
-                packageJson.dependencies?.[depPkgName],
-              ...customized,
-            },
-          ];
-        })
-      )
-    ).filter(Boolean)
-  );
+  /** @type {BuildNextBricksConfig["moduleFederationShared"]} */
+  const shared =
+    config.moduleFederationShared === false
+      ? undefined
+      : Object.fromEntries(
+          (
+            await Promise.all(
+              sharedPackages.map(async (dep) => {
+                /** @type {string} */
+                let depPackageJsonPath;
+                const depPkgName = dep
+                  .split("/")
+                  .slice(0, dep.startsWith("@") ? 2 : 1)
+                  .join("/");
+                try {
+                  depPackageJsonPath = require.resolve(
+                    `${depPkgName}/package.json`,
+                    {
+                      paths: [packageDir],
+                    }
+                  );
+                } catch (e) {
+                  console.error(`Shared package not found: "${dep}"`);
+                  return;
+                }
+                const depPackageJsonFile = await readFile(depPackageJsonPath, {
+                  encoding: "utf-8",
+                });
+                const depPackageJson = JSON.parse(depPackageJsonFile);
+                const customized = config.moduleFederationShared?.[dep];
+                if (typeof customized === "string") {
+                  return;
+                }
+                return [
+                  dep,
+                  {
+                    singleton: sharedSingletonPackages.includes(dep),
+                    version: depPackageJson.version,
+                    requiredVersion:
+                      packageJson.peerDependencies?.[depPkgName] ??
+                      packageJson.devDependencies?.[depPkgName] ??
+                      packageJson.dependencies?.[depPkgName],
+                    ...customized,
+                  },
+                ];
+              })
+            )
+          ).filter(Boolean)
+        );
 
   // console.log(packageName, "shared:", shared);
 
@@ -168,27 +183,24 @@ export default async function build(config) {
   //   };
   // }
 
-  const outputPath = path.join(packageDir, "dist");
+  const outputPath = path.join(packageDir, config.outputPath ?? "dist");
   const chunksDir = isBricks ? "chunks/" : "";
 
-  return webpack({
+  return {
     entry: config.entry || {
       main: "./src/index",
     },
     mode,
-    devServer: {
-      static: {
-        directory: outputPath,
-      },
-      port: 3001,
-    },
     output: {
       path: outputPath,
       filename: `${chunksDir}[name].${
         mode === "development" ? "bundle" : "[contenthash]"
       }.js`,
       // filename: "[name].bundle.js",
-      publicPath: "auto",
+      publicPath:
+        mode === "development"
+          ? config.devOnlyOutputPublicPath ?? "auto"
+          : "auto",
       hashDigestLength: 8,
       chunkFilename: `${chunksDir}[name]${
         mode === "development" ? "" : ".[contenthash]"
@@ -240,54 +252,32 @@ export default async function build(config) {
             rootMode: "upward",
           },
         },
-        config.svgAsAsset
-          ? {
-              // Images
-              test: /\.(png|svg|jpg|jpeg|gif)$/i,
-              type: "asset/resource",
-              generator: {
-                filename:
-                  config.imageAssetFilename ?? "images/[hash][ext][query]",
-              },
-            }
-          : {
-              test: /\.svg$/i,
-              issuer(input) {
-                // The issuer is null (or an empty string) for dynamic import
-                return !input || /\.[jt]sx?$/.test(input);
-              },
-              use: [
-                {
-                  loader: "babel-loader",
-                  options: {
-                    rootMode: "upward",
-                  },
-                },
+        {
+          // Images
+          test: new RegExp(
+            `\\.(?:${[
+              "png",
+              "jpg",
+              "jpeg",
+              "gif",
+              ...(config.svgRules ? [] : ["svg"]),
+            ].join("|")})$`,
+            "i"
+          ),
+          type: "asset/resource",
+          generator: {
+            filename: config.imageAssetFilename ?? "images/[hash][ext][query]",
+          },
+        },
+        ...(config.svgRules ??
+          (config.svgAsReactComponent
+            ? [
                 {
-                  loader: "@svgr/webpack",
-                  options: {
-                    babel: false,
-                    icon: true,
-                    svgoConfig: {
-                      plugins: [
-                        {
-                          name: "preset-default",
-                          params: {
-                            overrides: {
-                              // Keep `viewbox`
-                              removeViewBox: false,
-                              convertColors: {
-                                currentColor: true,
-                              },
-                            },
-                          },
-                        },
-                      ],
-                    },
-                  },
+                  test: /\.svg$/i,
+                  use: getSvgrLoaders(false),
                 },
-              ],
-            },
+              ]
+            : [])),
         {
           // Fonts
           test: /\.(woff|woff2|eot|ttf|otf)$/i,
@@ -296,12 +286,12 @@ export default async function build(config) {
             filename: "fonts/[hash][ext][query]",
           },
         },
-        ...(config.moduleRules || []),
+        ...(config.moduleRules ?? []),
       ],
     },
     devtool: false,
     optimization:
-      config.optimization ||
+      config.optimization ??
       (isBricks
         ? {
             splitChunks: {
@@ -334,26 +324,30 @@ export default async function build(config) {
         ],
       }),
 
-      new ModuleFederationPlugin({
-        name: libName,
-        shared: {
-          ...config.moduleFederationShared,
-          ...shared,
-        },
-        ...(isBricks
-          ? {
-              library: { type: "window", name: libName },
-              filename:
-                mode === "development"
-                  ? "index.bundle.js"
-                  : "index.[contenthash].js",
-              exposes: {
-                ...config.exposes,
-                ...extraExposes,
+      ...(config.moduleFederationShared !== false
+        ? [
+            new ModuleFederationPlugin({
+              name: libName,
+              shared: {
+                ...config.moduleFederationShared,
+                ...shared,
               },
-            }
-          : null),
-      }),
+              ...(isBricks
+                ? {
+                    library: { type: "window", name: libName },
+                    filename:
+                      mode === "development"
+                        ? "index.bundle.js"
+                        : "index.[contenthash].js",
+                    exposes: {
+                      ...config.exposes,
+                      ...extraExposes,
+                    },
+                  }
+                : null),
+            }),
+          ]
+        : []),
 
       ...(config.extractCss
         ? [
@@ -391,5 +385,20 @@ export default async function build(config) {
 
       ...(config.plugins || []),
     ],
-  });
+  };
 }
+
+/**
+ * @type {{
+ *   (config: BuildNextBricksConfig): import("webpack").Compiler;
+ *   (config: BuildNextBricksConfig[]): import("webpack").MultiCompiler;
+ * }}
+ */
+const build = async (config) =>
+  webpack(
+    await (Array.isArray(config)
+      ? Promise.all(config.map((conf) => getWebpackConfig(conf)))
+      : getWebpackConfig(config))
+  );
+
+export default build;

package/src/getSvgrLoaders.js

@@ -0,0 +1,34 @@
+export default function getSvgrLoaders(options = {}) {
+  return [
+    {
+      loader: "babel-loader",
+      options: {
+        rootMode: "upward",
+      },
+    },
+    {
+      loader: "@svgr/webpack",
+      options: {
+        babel: false,
+        icon: true,
+        svgoConfig: {
+          plugins: [
+            {
+              name: "preset-default",
+              params: {
+                overrides: {
+                  // Keep `viewbox`
+                  removeViewBox: false,
+
+                  convertColors: {
+                    currentColor: options.convertCurrentColor ?? false,
+                  },
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  ];
+}

package/src/index.js

@@ -1,3 +1,4 @@
 import build from "./build.js";
+import getSvgrLoaders from "./getSvgrLoaders.js";
 
-export { build };
+export { build, getSvgrLoaders };