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

package/index.d.ts

@@ -81,7 +81,9 @@ export interface BuildNextBricksConfig {
   imageAssetFilename?: string | ((pathData: any, assetInfo: any) => string);
   plugins?: Configuration["plugins"];
   moduleRules?: RuleSetRule[];
-  exposes?: ConstructorParameters<typeof container.ModuleFederationPlugin>;
+  exposes?: ConstructorParameters<
+    typeof container.ModuleFederationPlugin
+  >[0]["exposes"];
   dependencies?: Record<string, string[]>;
   optimization?: Configuration["optimization"];
   moduleFederationShared?: SharedObject | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-core/build-next-bricks",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Build next bricks",
   "homepage": "https://github.com/easyops-cn/next-core/tree/master/packages/build-next-bricks",
   "license": "GPL-3.0",
@@ -30,21 +30,21 @@
     "node": ">=16"
   },
   "dependencies": {
-    "@babel/parser": "^7.21.2",
-    "@babel/traverse": "^7.21.2",
-    "@svgr/webpack": "^6.5.1",
+    "@babel/parser": "^7.21.4",
+    "@babel/traverse": "^7.21.4",
+    "@svgr/webpack": "^7.0.0",
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
-    "cssnano": "^5.1.15",
-    "cssnano-preset-lite": "^2.1.3",
+    "cssnano": "^6.0.0",
+    "cssnano-preset-lite": "^3.0.0",
     "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",
+    "postcss-loader": "^7.2.4",
+    "postcss-preset-env": "^8.3.0",
     "style-loader": "^3.3.1",
-    "typescript": "^5.0.2",
-    "webpack": "^5.76.2"
+    "typescript": "^5.0.3",
+    "webpack": "^5.78.0"
   },
-  "gitHead": "4db0aebfc3d7991690c736adf7182f327adca534"
+  "gitHead": "ea57221d8b3ba0c15ea0ec6c583865c4dce2fb5f"
 }

package/src/EmitBricksJsonPlugin.js

@@ -9,6 +9,7 @@ export default class EmitBricksJsonPlugin {
   constructor(options) {
     this.packageName = options.packageName;
     this.bricks = options.bricks;
+    this.elements = options.elements;
     this.processors = options.processors;
     this.dependencies = options.dependencies;
   }
@@ -45,6 +46,7 @@ export default class EmitBricksJsonPlugin {
             {
               id: `bricks/${this.packageName}`,
               bricks: this.bricks,
+              elements: this.elements,
               processors: this.processors,
               dependencies: this.dependencies,
               filePath: jsFilePath,
@@ -59,6 +61,7 @@ export default class EmitBricksJsonPlugin {
           );
 
           console.log("Defined bricks:", this.bricks);
+          console.log("Defined elements:", this.elements);
           console.log("Defined processors:", this.processors);
           console.log("Found dependencies:", this.dependencies);
           callback();

package/src/build.js

@@ -159,16 +159,22 @@ async function getWebpackConfig(config) {
   /** @type {string[]} */
   const bricks = [];
   /** @type {string[]} */
+  const elements = [];
+  /** @type {string[]} */
   const processors = [];
   if (isBricks) {
-    for (const key of Object.keys(config.exposes)) {
+    for (const [key, val] of Object.entries(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}`);
+        if (val[Symbol.for("noNamespace")]) {
+          elements.push(name);
+        } else {
+          bricks.push(`${packageName}.${name}`);
+        }
       }
     }
   }
@@ -218,9 +224,6 @@ async function getWebpackConfig(config) {
         {
           test: /\.css$/,
           exclude: /\.(module|shadow|lazy)\.css$/,
-          // resourceQuery: {
-          //   not: /shadow/
-          // },
           sideEffects: true,
           use: [
             config.extractCss ? MiniCssExtractPlugin.loader : "style-loader",
@@ -235,15 +238,18 @@ async function getWebpackConfig(config) {
             }),
           ],
         },
-        // {
-        //   test: /\.css$/,
-        //   resourceQuery: /shadow/,
-        //   use: [
-        //     ...getCssLoaders({
-        //       exportType: "string",
-        //     }),
-        //   ],
-        // },
+        {
+          test: /\.module\.css$/,
+          sideEffects: true,
+          use: [
+            config.extractCss ? MiniCssExtractPlugin.loader : "style-loader",
+            ...getCssLoaders({
+              modules: {
+                localIdentName: "[local]--[hash:base64:8]",
+              },
+            }),
+          ],
+        },
         {
           test: /\.[tj]sx?$/,
           loader: "babel-loader",
@@ -369,6 +375,7 @@ async function getWebpackConfig(config) {
             new EmitBricksJsonPlugin({
               packageName,
               bricks,
+              elements,
               processors,
               dependencies: config.dependencies,
             }),

package/src/scanBricks.js

@@ -11,6 +11,7 @@ const { escapeRegExp } = _;
 
 const validBrickName =
   /^[a-z][a-z0-9]*(-[a-z0-9]+)*\.[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
+const validCustomElementName = /^[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]+$/;
 
@@ -18,7 +19,7 @@ const validExposeName = /^[-\w]+$/;
  * Scan defined bricks by AST.
  *
  * @param {string} packageDir
- * @returns {Promise<{exposes: Record<string, { import: string; name: string; }; dependencies: Record<string, string[]>}>>}
+ * @returns {Promise<{exposes: Record<string, { import: string; name: string; noNamespace?: boolean; }; dependencies: Record<string, string[]>}>>}
  */
 export default async function scanBricks(packageDir) {
   /** @type {Map<string, { import: string; name: string; }>} */
@@ -85,6 +86,18 @@ export default async function scanBricks(packageDir) {
     let nextOverrideImport = overrideImport;
     if (content.startsWith("// Merge bricks")) {
       nextOverrideImport = filePath;
+    } else if (content.startsWith("// Define brick")) {
+      // Match any source files starting with specific comments:
+      // `// Define brick: sl-alert` or
+      // `// Define bricks: sl-alert, sl-icon`
+      const firstLine = content.split("\n", 1)[0];
+      const match = firstLine.match(/^\/\/ Define bricks?: (.+)$/);
+      if (match) {
+        const bricks = match[1].split(/,\s*/g);
+        for (const brick of bricks) {
+          collectBrick(brick);
+        }
+      }
     }
 
     /**
@@ -123,6 +136,57 @@ export default async function scanBricks(packageDir) {
       }
     }
 
+    /**
+     * @param {string} fullName
+     */
+    function collectBrick(fullName) {
+      /** @type string */
+      let brickNamespace;
+      /** @type string */
+      let brickName;
+      let noNamespace = false;
+      if (fullName.includes(".")) {
+        [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-"`
+          );
+        }
+      } else {
+        // For third-party custom elements, there maybe no namespace.
+        brickName = fullName;
+        noNamespace = true;
+        if (!validCustomElementName.test(brickName)) {
+          throw new Error(
+            `Invalid brick: "${fullName}", the brick name must include a \`-\``
+          );
+        }
+      }
+
+      brickSourceFiles.set(fullName, filePath);
+
+      exposes.set(`./${brickName}`, {
+        import: `./${path
+          .relative(packageDir, overrideImport || filePath)
+          .replace(/\.[^.]+$/, "")
+          .replace(/\/index$/, "")}`,
+        name: getExposeName(brickName),
+        [Symbol.for("noNamespace")]: noNamespace,
+      });
+    }
+
     traverse(ast, {
       CallExpression({ node: { callee, arguments: args } }) {
         // Match `customProcessors.define(...)`
@@ -172,34 +236,7 @@ export default async function scanBricks(packageDir) {
         ) {
           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),
-            });
+            collectBrick(fullName);
           } else {
             throw new Error(
               "Please call `customElements.define()` only with literal string"