@next-core/build-next-bricks 1.0.2

package/bin/build-next-bricks.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+import path from "node:path";
+import { existsSync } from "node:fs";
+import build from "../src/build.js";
+import scanBricks from "../src/scanBricks.js";
+
+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 = {};
+  if (existsSync(configJs)) {
+    config = (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`
+    );
+  }
+
+  const compiler = await build(config);
+
+  const watch = process.argv.includes("--watch");
+
+  if (watch) {
+    compiler.watch({}, (err, stats) => {
+      if (err || stats.hasErrors()) {
+        console.error("Failed to build bricks:");
+        console.error(err || stats.toString());
+      } else {
+        console.log("Build bricks done in watch mode");
+      }
+    });
+  } else {
+    await new Promise((resolve, reject) => {
+      compiler.run((err, stats) => {
+        if (err || stats.hasErrors()) {
+          console.error("Failed to build bricks:");
+          reject(err || stats.toString());
+        } else {
+          resolve();
+        }
+      });
+    });
+
+    console.log(
+      `Build bricks done in ${((Date.now() - startTime) / 1000).toFixed(2)}s`
+    );
+  }
+} catch (e) {
+  console.error(e);
+  process.exitCode = 1;
+}

package/index.d.ts

@@ -0,0 +1,75 @@
+import type { Compiler, Configuration, RuleSetRule, container } from "webpack";
+
+export declare function build(config: BuildNextBricksConfig): Compiler;
+
+// Types of `SharedConfig` and `SharedObject` are copied from webpack.
+
+/**
+ * Advanced configuration for modules that should be shared in the share scope.
+ */
+interface SharedConfig {
+  /**
+   * Include the provided and fallback module directly instead behind an async request. This allows to use this shared module in initial load too. All possible shared modules need to be eager too.
+   */
+  eager?: boolean;
+
+  /**
+   * Provided module that should be provided to share scope. Also acts as fallback module if no shared module is found in share scope or version isn't valid. Defaults to the property name.
+   */
+  import?: string | false;
+
+  /**
+   * Package name to determine required version from description file. This is only needed when package name can't be automatically determined from request.
+   */
+  packageName?: string;
+
+  /**
+   * Version requirement from module in share scope.
+   */
+  requiredVersion?: string | false;
+
+  /**
+   * Module is looked up under this key from the share scope.
+   */
+  shareKey?: string;
+
+  /**
+   * Share scope name.
+   */
+  shareScope?: string;
+
+  /**
+   * Allow only a single version of the shared module in share scope (disabled by default).
+   */
+  singleton?: boolean;
+
+  /**
+   * Do not accept shared module if version is not valid (defaults to yes, if local fallback module is available and shared module is not a singleton, otherwise no, has no effect if there is no required version specified).
+   */
+  strictVersion?: boolean;
+
+  /**
+   * Version of the provided module. Will replace lower matching versions, but not higher.
+   */
+  version?: string | false;
+}
+
+/**
+ * Modules that should be shared in the share scope. Property names are used to match requested modules in this compilation. Relative requests are resolved, module requests are matched unresolved, absolute paths will match resolved requests. A trailing slash will match all requests with this prefix. In this case shareKey must also have a trailing slash.
+ */
+interface SharedObject {
+  [index: string]: string | SharedConfig;
+}
+
+export interface BuildNextBricksConfig {
+  type?: "bricks" | "container" | "brick-playground";
+  mode?: "development" | "production";
+  entry?: Record<string, string>;
+  extractCss?: boolean;
+  plugins?: Configuration["plugins"];
+  moduleRules?: RuleSetRule[];
+  exposes?: ConstructorParameters<typeof container.ModuleFederationPlugin>;
+  dependencies?: Record<string, string[]>;
+  optimization?: Configuration["optimization"];
+  moduleFederationShared?: SharedObject;
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@next-core/build-next-bricks",
+  "version": "1.0.2",
+  "description": "Build next bricks",
+  "homepage": "https://github.com/easyops-cn/next-core/tree/master/packages/build-next-bricks",
+  "license": "GPL-3.0",
+  "type": "module",
+  "typings": "./index.d.ts",
+  "bin": {
+    "build-next-bricks": "./bin/build-next-bricks.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "index.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:easyops-cn/next-core.git"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.21.2",
+    "@babel/traverse": "^7.21.2",
+    "@svgr/webpack": "^6.5.1",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "cssnano": "^5.1.15",
+    "cssnano-preset-lite": "^2.1.3",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.7.5",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.1.0",
+    "postcss-preset-env": "^8.0.1",
+    "style-loader": "^3.3.1",
+    "typescript": "^5.0.2",
+    "webpack": "^5.76.2"
+  },
+  "gitHead": "ffd8b31a5d99db5af3b4ec7675ff2d6541eb1338"
+}

package/src/EmitBricksJsonPlugin.js

@@ -0,0 +1,69 @@
+import webpack from "webpack";
+
+const pluginName = "EmitBricksJsonPlugin";
+
+export default class EmitBricksJsonPlugin {
+  /**
+   * @param {{ packageName: string; bricks: string[]; processors: string[]; dependencies: Record<string, string[]>; }} options
+   */
+  constructor(options) {
+    this.packageName = options.packageName;
+    this.bricks = options.bricks;
+    this.processors = options.processors;
+    this.dependencies = options.dependencies;
+  }
+
+  /**
+   * @param {import("webpack").Compiler} compiler
+   */
+  apply(compiler) {
+    // Ref https://github.com/jantimon/html-webpack-plugin/blob/d5ce5a8f2d12a2450a65ec51c285dd54e36cd921/index.js#L209
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+      compilation.hooks.processAssets.tapAsync(
+        {
+          name: pluginName,
+          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
+        },
+        (compilationAssets, callback) => {
+          const jsEntries = Object.keys(compilationAssets).filter(
+            (filePath) =>
+              filePath.startsWith("index.") && filePath.endsWith(".js")
+          );
+          if (!jsEntries) {
+            throw new Error(
+              `No js files in dist of bricks/${this.packageName}`
+            );
+          }
+          if (jsEntries.length > 1) {
+            throw new Error(
+              `Only a single js entry is allowed in dist of bricks/${this.packageName}, but ${jsEntries.length} entries were found`
+            );
+          }
+          const jsFilePath = `bricks/${this.packageName}/dist/${jsEntries[0]}`;
+
+          const bricksJson = JSON.stringify(
+            {
+              id: `bricks/${this.packageName}`,
+              bricks: this.bricks,
+              processors: this.processors,
+              dependencies: this.dependencies,
+              filePath: jsFilePath,
+            },
+            null,
+            2
+          );
+
+          compilation.emitAsset(
+            "bricks.json",
+            new webpack.sources.RawSource(bricksJson, false)
+          );
+
+          console.log("Defined bricks:", this.bricks);
+          console.log("Defined processors:", this.processors);
+          console.log("Found dependencies:", this.dependencies);
+          callback();
+        }
+      );
+    });
+  }
+}

package/src/build.js

@@ -0,0 +1,377 @@
+import path from "node:path";
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import webpack from "webpack";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import postcssPresetEnv from "postcss-preset-env";
+import cssnano from "cssnano";
+import cssnanoPresetLite from "cssnano-preset-lite";
+import EmitBricksJsonPlugin from "./EmitBricksJsonPlugin.js";
+import getCamelPackageName from "./getCamelPackageName.js";
+
+const require = createRequire(import.meta.url);
+
+const { SourceMapDevToolPlugin, IgnorePlugin, ContextReplacementPlugin } =
+  webpack;
+const { ModuleFederationPlugin } = webpack.container;
+
+const getCssLoaders = (cssOptions) => [
+  {
+    loader: "css-loader",
+    options: {
+      sourceMap: false,
+      importLoaders: 1,
+      ...cssOptions,
+    },
+  },
+  {
+    loader: "postcss-loader",
+    options: {
+      sourceMap: false,
+      postcssOptions: {
+        plugins: [
+          postcssPresetEnv({
+            stage: 3,
+          }),
+          cssnano({
+            preset: cssnanoPresetLite({
+              discardComments: {
+                removeAll: true,
+              },
+            }),
+          }),
+        ],
+      },
+    },
+  },
+];
+
+/**
+ * @param {import("@next-core/build-next-bricks").BuildNextBricksConfig} config
+ */
+export default async function build(config) {
+  const packageDir = process.cwd();
+  // const isContainer = config.type === "container";
+  const isBricks = !config.type || config.type === "bricks";
+  const mode = config.mode || process.env.NODE_ENV;
+
+  const packageJsonFile = await readFile(
+    path.join(packageDir, "package.json"),
+    { encoding: "utf-8" }
+  );
+  const packageJson = JSON.parse(packageJsonFile);
+  const packageName = packageJson.name.split("/").pop();
+  const camelPackageName = getCamelPackageName(packageName);
+  const libName = isBricks ? `bricks/${packageName}` : config.type;
+
+  const sharedSingletonPackages = [
+    "history",
+    "i18next",
+    "lodash",
+    "moment",
+    "moment/locale/zh-cn.js",
+    "js-yaml",
+    "i18next-browser-languagedetector",
+    "react-i18next",
+    "@next-core/runtime",
+    "@next-core/http",
+    "@next-core/theme",
+    "@next-core/cook",
+    "@next-core/i18n",
+    "@next-core/i18n/react",
+    "@next-core/inject",
+    "@next-core/loader",
+    "@next-core/supply",
+    "@next-core/utils/general",
+    "@next-core/utils/storyboard",
+  ];
+
+  const sharedPackages = [
+    "react",
+    "react-dom",
+    "@next-core/element",
+    "@next-core/react-element",
+    "@next-core/react-runtime",
+    ...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)
+  );
+
+  // console.log(packageName, "shared:", shared);
+
+  /** @type {string[]} */
+  const bricks = [];
+  /** @type {string[]} */
+  const processors = [];
+  if (isBricks) {
+    for (const key of Object.keys(config.exposes)) {
+      const segments = key.split("/");
+      const name = segments.pop();
+      const namespace = segments.pop();
+      if (namespace === "processors") {
+        processors.push(`${camelPackageName}.${name}`);
+      } else {
+        bricks.push(`${packageName}.${name}`);
+      }
+    }
+  }
+
+  /** @type {Record<string, { import: string; name: string; }>} */
+  const extraExposes = {};
+  // const initializeTsPath = path.join(packageDir, "src/initialize.ts");
+  // if (fs.existsSync(initializeTsPath)) {
+  //   extraExposes.initialize = {
+  //     import: `./${path.relative(packageDir, initializeTsPath)}`,
+  //     name: "initialize",
+  //   };
+  // }
+
+  const outputPath = path.join(packageDir, "dist");
+  const chunksDir = isBricks ? "chunks/" : "";
+
+  return webpack({
+    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",
+      hashDigestLength: 8,
+      chunkFilename: `${chunksDir}[name]${
+        mode === "development" ? "" : ".[contenthash]"
+      }.js`,
+      clean: true,
+    },
+    resolve: {
+      extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
+      extensionAlias: {
+        ".js": [".ts", ".tsx", ".js", ".jsx"],
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          exclude: /\.(module|shadow|lazy)\.css$/,
+          // resourceQuery: {
+          //   not: /shadow/
+          // },
+          sideEffects: true,
+          use: [
+            config.extractCss ? MiniCssExtractPlugin.loader : "style-loader",
+            ...getCssLoaders(),
+          ],
+        },
+        {
+          test: /\.shadow\.css$/,
+          use: [
+            ...getCssLoaders({
+              exportType: "string",
+            }),
+          ],
+        },
+        // {
+        //   test: /\.css$/,
+        //   resourceQuery: /shadow/,
+        //   use: [
+        //     ...getCssLoaders({
+        //       exportType: "string",
+        //     }),
+        //   ],
+        // },
+        {
+          test: /\.[tj]sx?$/,
+          loader: "babel-loader",
+          exclude: /node_modules/,
+          options: {
+            rootMode: "upward",
+          },
+        },
+        {
+          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",
+              },
+            },
+            {
+              loader: "@svgr/webpack",
+              options: {
+                babel: false,
+                icon: true,
+                svgoConfig: {
+                  plugins: [
+                    {
+                      name: "preset-default",
+                      params: {
+                        overrides: {
+                          // Keep `viewbox`
+                          removeViewBox: false,
+                          convertColors: {
+                            currentColor: true,
+                          },
+                        },
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+        ...(config.moduleRules || []),
+      ],
+    },
+    devtool: false,
+    optimization:
+      config.optimization ||
+      (isBricks
+        ? {
+            splitChunks: {
+              cacheGroups: {
+                react: {
+                  test: /[\\/]node_modules[\\/](?:react(?:-dom)?|scheduler)[\\/]/,
+                  priority: -10,
+                  reuseExistingChunk: true,
+                  name: "react",
+                },
+                default: {
+                  minChunks: 2,
+                  priority: -20,
+                  reuseExistingChunk: true,
+                },
+              },
+            },
+          }
+        : undefined),
+    plugins: [
+      new SourceMapDevToolPlugin({
+        filename: "[file].map",
+        // Do not generate source map for these vendors:
+        exclude: [
+          // No source maps for React,ReactDOM,@next-core/theme
+          /^chunks\/(?:2?784|(?:2?8)?316|628|react)(?:\.[0-9a-f]+|\.bundle)?\.js$/,
+          /^chunks\/(?:vendors-)?node_modules_/,
+          /^chunks\/(?:easyops|fa|antd)-icons\//,
+          /^(?:vendors|polyfill)(?:\.[0-9a-f]+|\.bundle)?\.js$/,
+        ],
+      }),
+
+      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,
+              },
+            }
+          : null),
+      }),
+
+      ...(config.extractCss
+        ? [
+            new MiniCssExtractPlugin({
+              filename:
+                mode === "development"
+                  ? "[name].bundle.css"
+                  : "[name].[contenthash].css",
+              chunkFilename:
+                mode === "development"
+                  ? `${chunksDir}[name].css`
+                  : `${chunksDir}[name].[contenthash].css`,
+            }),
+          ]
+        : []),
+
+      ...(isBricks
+        ? [
+            new EmitBricksJsonPlugin({
+              packageName,
+              bricks,
+              processors,
+              dependencies: config.dependencies,
+            }),
+          ]
+        : []),
+
+      new ContextReplacementPlugin(/moment[/\\]locale$/, /zh|en/),
+
+      new IgnorePlugin({
+        // - `esprima` and `buffer` are optional imported by `js-yaml`
+        // we don't need them.
+        resourceRegExp: /^(?:esprima|buffer)$/,
+      }),
+
+      ...(config.plugins || []),
+    ],
+  });
+}

package/src/getCamelPackageName.js

@@ -0,0 +1,10 @@
+// @ts-check
+/**
+ * @param {string} packageName
+ * @returns {string}
+ */
+export default function getCamelPackageName(packageName) {
+  return packageName
+    .replace(/-[a-z]/g, (match) => match[1].toUpperCase())
+    .replace(/-[0-9]/g, (match) => `_${match[1]}`);
+}

package/src/index.js

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

package/src/scanBricks.js

@@ -0,0 +1,468 @@
+import path from "node:path";
+import fs, { existsSync, statSync } from "node:fs";
+import { readdir, readFile, stat } from "node:fs/promises";
+import { parse } from "@babel/parser";
+import babelTraverse from "@babel/traverse";
+import _ from "lodash";
+import getCamelPackageName from "./getCamelPackageName.js";
+
+const { default: traverse } = babelTraverse;
+const { escapeRegExp } = _;
+
+const validBrickName =
+  /^[a-z][a-z0-9]*(-[a-z0-9]+)*\.[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
+const validProcessorName = /^[a-z][a-zA-Z0-9]*\.[a-z][a-zA-Z0-9]*$/;
+const validExposeName = /^[-\w]+$/;
+
+/**
+ * Scan defined bricks by AST.
+ *
+ * @param {string} packageDir
+ * @returns {Promise<{exposes: Record<string, { import: string; name: string; }; dependencies: Record<string, string[]>}>>}
+ */
+export default async function scanBricks(packageDir) {
+  /** @type {Map<string, { import: string; name: string; }>} */
+  const exposes = new Map();
+  /** @type {Record<string, string[]>} */
+  const specifiedDeps = {};
+  /** @type {Set<string>} */
+  const processedFiles = new Set();
+
+  const packageJsonFile = await readFile(
+    path.join(packageDir, "package.json"),
+    { encoding: "utf-8" }
+  );
+  const packageJson = JSON.parse(packageJsonFile);
+  /** @type {string} */
+  const packageName = packageJson.name.split("/").pop();
+  const camelPackageName = getCamelPackageName(packageName);
+
+  /** @type {Map<string, Set<string>} */
+  const usingWrappedBricks = new Map();
+
+  /** @type {Map<string, string} */
+  const brickSourceFiles = new Map();
+
+  /** @type {Map<string, Set<string>} */
+  const importsMap = new Map();
+
+  /**
+   *
+   * @param {string} filePath
+   * @param {string | undefined} overrideImport
+   */
+  async function scanByFile(filePath, overrideImport) {
+    if (processedFiles.has(filePath)) {
+      console.warn(
+        "[scan-bricks] warn: the file has already been scanned:",
+        filePath
+      );
+      return;
+    }
+    processedFiles.add(filePath);
+    const dirname = path.dirname(filePath);
+    const extname = path.extname(filePath);
+    const content = await readFile(filePath, "utf-8");
+
+    /** @type {ReturnType<typeof import("@babel/parser").parse>} */
+    let ast;
+    try {
+      ast = parse(content, {
+        sourceType: "module",
+        plugins: [
+          (extname === ".ts" || extname === ".tsx") && "typescript",
+          (extname === ".jsx" || extname === ".tsx") && "jsx",
+          "decorators",
+          "decoratorAutoAccessors",
+        ].filter(Boolean),
+      });
+    } catch (e) {
+      console.error("Babel parse failed:", filePath);
+      console.error(e);
+    }
+
+    /** @type {string | undefined} */
+    let nextOverrideImport = overrideImport;
+    if (content.startsWith("// Merge bricks")) {
+      nextOverrideImport = filePath;
+    }
+
+    /**
+     *
+     * @param {string} originalName
+     * @returns {string}
+     */
+    function getExposeName(originalName) {
+      if (overrideImport) {
+        const exposeName = path.basename(
+          overrideImport.replace(/\.[^.]+$/, "").replace(/\/index$/, "")
+        );
+        if (!validExposeName.test(exposeName)) {
+          throw new Error(
+            `Invalid filename for merging bricks: "${exposeName}", only alphabets/digits/hyphens/underscores are allowed`
+          );
+        }
+        return exposeName;
+      }
+      return originalName;
+    }
+
+    /** @type {Map<string, Set<string>} */
+    const importPaths = new Map();
+
+    /**
+     * @param {string} dir
+     * @param {string} file
+     */
+    function addImportFile(dir, file) {
+      const files = importPaths.get(dir);
+      if (files) {
+        files.add(file);
+      } else {
+        importPaths.set(dir, new Set([file]));
+      }
+    }
+
+    traverse(ast, {
+      CallExpression({ node: { callee, arguments: args } }) {
+        // Match `customProcessors.define(...)`
+        // Match `customElements.define(...)`
+        if (
+          callee.type === "MemberExpression" &&
+          callee.object.type === "Identifier" &&
+          callee.object.name === "customProcessors" &&
+          !callee.property.computed &&
+          callee.property.name === "define" &&
+          args.length === 2
+        ) {
+          const { type, value: fullName } = args[0];
+          if (type === "StringLiteral") {
+            const [processorNamespace, processorName] = fullName.split(".");
+            if (processorNamespace !== camelPackageName) {
+              throw new Error(
+                `Invalid custom processor: "${fullName}", expecting prefixed with the camelCase package name: "${camelPackageName}"`
+              );
+            }
+
+            if (!validProcessorName.test(fullName)) {
+              throw new Error(
+                `Invalid custom processor: "${fullName}", expecting format of "camelPackageName.camelProcessorName"`
+              );
+            }
+
+            exposes.set(`./processors/${processorName}`, {
+              import: `./${path
+                .relative(packageDir, overrideImport || filePath)
+                .replace(/\.[^.]+$/, "")
+                .replace(/\/index$/, "")}`,
+              name: getExposeName(processorName),
+            });
+          } else if (packageName !== "v2-adapter") {
+            throw new Error(
+              "Please call `customProcessors.define()` only with literal string"
+            );
+          }
+        } else if (
+          callee.type === "MemberExpression" &&
+          callee.object.type === "Identifier" &&
+          callee.object.name === "customElements" &&
+          !callee.property.computed &&
+          callee.property.name === "define" &&
+          args.length === 2
+        ) {
+          const { type, value: fullName } = args[0];
+          if (type === "StringLiteral") {
+            const [brickNamespace, brickName] = fullName.split(".");
+            if (brickNamespace !== packageName) {
+              throw new Error(
+                `Invalid brick: "${fullName}", expecting prefixed with the package name: "${packageName}"`
+              );
+            }
+
+            if (!validBrickName.test(fullName)) {
+              throw new Error(
+                `Invalid brick: "${fullName}", expecting: "PACKAGE-NAME.BRICK-NAME", where PACKAGE-NAME and BRICK-NAME must be lower-kebab-case, and BRICK-NAME must include a \`-\``
+              );
+            }
+
+            if (brickName.startsWith("tpl-")) {
+              throw new Error(
+                `Invalid brick: "${fullName}", the brick name cannot be started with "tpl-"`
+              );
+            }
+
+            brickSourceFiles.set(fullName, filePath);
+
+            exposes.set(`./${brickName}`, {
+              import: `./${path
+                .relative(packageDir, overrideImport || filePath)
+                .replace(/\.[^.]+$/, "")
+                .replace(/\/index$/, "")}`,
+              name: getExposeName(brickName),
+            });
+          } else {
+            throw new Error(
+              "Please call `customElements.define()` only with literal string"
+            );
+          }
+        } else if (
+          callee.type === "MemberExpression" &&
+          callee.object.type === "Identifier" &&
+          callee.object.name === "customTemplates" &&
+          !callee.property.computed &&
+          callee.property.name === "define" &&
+          args.length === 2
+        ) {
+          const { type, value: fullName } = args[0];
+          if (type === "StringLiteral") {
+            const [brickNamespace, brickName] = fullName.split(".");
+            if (brickNamespace !== packageName) {
+              throw new Error(
+                `Invalid custom template: "${fullName}", expecting prefixed with the package name: "${packageName}"`
+              );
+            }
+
+            if (!validBrickName.test(fullName)) {
+              throw new Error(
+                `Invalid custom template: "${fullName}", expecting: "PACKAGE-NAME.BRICK-NAME", where PACKAGE-NAME and BRICK-NAME must be lower-kebab-case, and BRICK-NAME must include a \`-\``
+              );
+            }
+
+            if (!brickName.startsWith("tpl-")) {
+              throw new Error(
+                `Invalid custom template: "${fullName}", the custom template name must be started with "tpl-"`
+              );
+            }
+
+            exposes.set(`./${brickName}`, {
+              import: `./${path
+                .relative(packageDir, overrideImport || filePath)
+                .replace(/\.[^.]+$/, "")
+                .replace(/\/index$/, "")}`,
+              name: getExposeName(brickName),
+            });
+          } else if (packageName !== "v2-adapter") {
+            throw new Error(
+              "Please call `customTemplates.define()` only with literal string"
+            );
+          }
+        } else if (
+          callee.type === "Identifier" &&
+          callee.name === "wrapBrick" &&
+          args.length >= 1
+        ) {
+          const { type, value: brickName } = args[0];
+          if (type !== "StringLiteral") {
+            throw new Error("Please call `wrapBrick` only with literal string");
+          }
+          const bricks = usingWrappedBricks.get(filePath);
+          if (bricks) {
+            bricks.add(brickName);
+          } else {
+            usingWrappedBricks.set(filePath, new Set([brickName]));
+          }
+        }
+      },
+      Decorator({ node: { expression } }) {
+        // Match `@defineElement(...)`
+        if (
+          expression.type === "CallExpression" &&
+          expression.callee.type === "Identifier" &&
+          expression.callee.name === "defineElement" &&
+          expression.arguments.length > 0
+        ) {
+          if (expression.arguments[0].type !== "StringLiteral") {
+            throw new Error(
+              "Please call `@defineElement()` only with literal string"
+            );
+          }
+
+          const fullName = expression.arguments[0].value;
+          const [brickNamespace, brickName] = fullName.split(".");
+
+          if (brickNamespace !== packageName) {
+            throw new Error(
+              `Invalid brick: "${fullName}", expecting prefixed with the package name: "${packageName}"`
+            );
+          }
+
+          if (!validBrickName.test(fullName)) {
+            throw new Error(
+              `Invalid brick: "${fullName}", expecting: "PACKAGE-NAME.BRICK-NAME", where PACKAGE-NAME and BRICK-NAME must be lower-kebab-case, and BRICK-NAME must include a \`-\``
+            );
+          }
+
+          if (brickName.startsWith("tpl-")) {
+            throw new Error(
+              `Invalid brick: "${fullName}", the brick name cannot be started with "tpl-"`
+            );
+          }
+
+          const defineOptions = expression.arguments[1];
+          const deps = [];
+          if (defineOptions && defineOptions.type === "ObjectExpression") {
+            /** @type {import("@babel/types").ObjectProperty} */
+            const brickDeps = defineOptions.properties.find(
+              (prop) =>
+                prop.type === "ObjectProperty" &&
+                prop.key.type === "Identifier" &&
+                prop.key.name === "dependencies" &&
+                !prop.computed
+            );
+            if (brickDeps) {
+              if (brickDeps.value.type === "ArrayExpression") {
+                for (const item of brickDeps.value.elements) {
+                  if (item.type === "StringLiteral") {
+                    deps.push(item.value);
+                  } else {
+                    throw new Error(
+                      `Invalid item in brick dependencies: ${item.type} of brick: "${fullName}", expecting only StringLiteral`
+                    );
+                  }
+                }
+              } else {
+                throw new Error(
+                  `Invalid brick dependencies: ${brickDeps.value.type} of brick: "${fullName}", expecting only ArrayExpression`
+                );
+              }
+            }
+          }
+          if (deps.length > 0) {
+            specifiedDeps[fullName] = deps;
+          }
+
+          brickSourceFiles.set(fullName, filePath);
+
+          exposes.set(`./${brickName}`, {
+            import: `./${path
+              .relative(packageDir, overrideImport || filePath)
+              .replace(/\.[^.]+$/, "")
+              .replace(/\/index$/, "")}`,
+            name: getExposeName(brickName),
+          });
+        }
+      },
+      ImportDeclaration({ node: { source, importKind, specifiers } }) {
+        // Match `import "..."`
+        if (
+          source.type === "StringLiteral" &&
+          // Ignore import from node modules.
+          (source.value.startsWith("./") || source.value.startsWith("../")) &&
+          // Ignore `import type {...} from "..."`
+          importKind === "value"
+          // Ignore `import { ... } from "..."`
+          // && specifiers.length === 0
+        ) {
+          const importPath = path.resolve(dirname, source.value);
+          const lastName = path.basename(importPath);
+          const matchExtension = /\.[tj]sx?$/.test(lastName);
+          const noExtension = !lastName.includes(".");
+          if (matchExtension || noExtension) {
+            addImportFile(
+              path.dirname(importPath),
+              lastName.replace(/\.[^.]+$/, "")
+            );
+          }
+          if (
+            noExtension &&
+            existsSync(importPath) &&
+            statSync(importPath).isDirectory()
+          ) {
+            // When matching `import "./directory"`,
+            // also look for "./directory/index.*"
+            addImportFile(importPath, "index");
+          }
+        }
+      },
+    });
+
+    await Promise.all(
+      [...importPaths.entries()].map((item) =>
+        scanByImport(item, filePath, nextOverrideImport)
+      )
+    );
+  }
+
+  /**
+   *
+   * @param {[string, Set<string>]} importEntry
+   * @param {string} importFrom
+   * @param {string | undefined} overrideImport
+   */
+  async function scanByImport([dirname, files], importFrom, overrideImport) {
+    const dirents = await readdir(dirname, { withFileTypes: true });
+    const possibleFilenames = [...files].map(
+      (filename) => new RegExp(`${escapeRegExp(filename)}\\.[tj]sx?$`)
+    );
+    await Promise.all(
+      dirents.map((dirent) => {
+        if (
+          dirent.isFile() &&
+          possibleFilenames.some((regex) => regex.test(dirent.name))
+        ) {
+          const filePath = path.resolve(dirname, dirent.name);
+          const imports = importsMap.get(importFrom);
+          if (imports) {
+            imports.add(filePath);
+          } else {
+            importsMap.set(importFrom, new Set([filePath]));
+          }
+          return scanByFile(filePath, overrideImport);
+        }
+      })
+    );
+  }
+
+  const bootstrapTsPath = path.join(packageDir, "src/bootstrap.ts");
+  if (!fs.existsSync(bootstrapTsPath)) {
+    throw new Error(`File not found: ${bootstrapTsPath}`);
+  }
+
+  await scanByFile(bootstrapTsPath);
+
+  // console.log("usingWrappedBricks:", usingWrappedBricks);
+  // console.log("brickSourceFiles:", brickSourceFiles);
+  // console.log("importsMap:", importsMap);
+
+  // Find brick dependencies by static analysis.
+  /** @type {Record<string, string[]>} */
+  const analyzedDeps = {};
+  for (const [brickName, sourcePath] of brickSourceFiles.entries()) {
+    /** @type {Set<string>} */
+    const deps = new Set();
+    /** @type {Set<string>} */
+    const analyzedFiles = new Set();
+    const analyze = (filePath) => {
+      if (analyzedFiles.has(filePath)) {
+        return;
+      }
+      if (brickName === "button-with-icon") {
+        console.log("scan:", filePath);
+      }
+      analyzedFiles.add(filePath);
+      for (const dep of usingWrappedBricks.get(filePath) ?? []) {
+        // Do not dependent on itself
+        if (dep !== brickName) {
+          deps.add(dep);
+        }
+      }
+      for (const item of importsMap.get(filePath) ?? []) {
+        analyze(item);
+      }
+    };
+    analyze(sourcePath);
+    if (deps.size > 0) {
+      analyzedDeps[brickName] = [...deps];
+    }
+  }
+
+  // console.log("exposes:", exposes);
+
+  return {
+    exposes: Object.fromEntries([...exposes.entries()]),
+    dependencies: {
+      ...analyzedDeps,
+      ...specifiedDeps,
+    },
+  };
+}