@next-core/build-next-bricks 1.7.1 → 1.8.0

package/bin/build-next-bricks.js

@@ -51,6 +51,10 @@ try {
           path.join(distDir, "manifest.json"),
           JSON.stringify(config.manifest, null, 2)
         );
+        await writeFile(
+          path.join(distDir, "types.json"),
+          JSON.stringify(config.types, null, 2)
+        );
       }
     }
   }

package/index.d.ts

@@ -1,7 +1,7 @@
 import type { Compiler, Configuration, RuleSetRule, container } from "webpack";
 
 export declare function build(config: BuildNextBricksConfig): Compiler;
-export declare function getSvgrLoaders(options: {
+export declare function getSvgrLoaders(options?: {
   /** Set it to true for font icons */
   convertCurrentColor?: boolean;
 }): RuleSetRule["use"];
@@ -75,7 +75,7 @@ export interface BuildNextBricksConfig {
   extractCss?: boolean;
   /** Treat svg as React component instead of asset */
   svgAsReactComponent?: boolean;
-  /** Customize rules for svg */
+  /** Customize rules for svg, this will take precedence over `svgAsReactComponent` */
   svgRules?: RuleSetRule[];
   /** By default the image assets are named `images/[hash][ext][query]` */
   imageAssetFilename?: string | ((pathData: any, assetInfo: any) => string);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-core/build-next-bricks",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Build next bricks",
   "homepage": "https://github.com/easyops-cn/next-core/tree/v3/packages/build-next-bricks",
   "license": "GPL-3.0",
@@ -51,5 +51,5 @@
   "devDependencies": {
     "@next-core/brick-manifest": "^0.1.0"
   },
-  "gitHead": "b6ca0aa67aae992ed7e6866bc1a9bc384cdb8f7b"
+  "gitHead": "a2f8ca6b36b45b4a306f4b933e6bc2ca195cdd1f"
 }

package/src/EmitBricksJsonPlugin.js

@@ -17,6 +17,7 @@ export default class EmitBricksJsonPlugin {
     this.processors = options.processors;
     this.dependencies = options.dependencies;
     this.manifest = options.manifest;
+    this.types = options.types;
   }
 
   /**
@@ -71,6 +72,12 @@ export default class EmitBricksJsonPlugin {
             new webpack.sources.RawSource(manifestJson, false)
           );
 
+          const typesJson = JSON.stringify(this.types, null, 2);
+          compilation.emitAsset(
+            "types.json",
+            new webpack.sources.RawSource(typesJson, false)
+          );
+
           console.log("Defined bricks:", this.bricks);
           console.log("Defined elements:", this.elements);
           console.log("Defined processors:", this.processors);

package/src/build.js

@@ -259,7 +259,7 @@ async function getWebpackConfig(config) {
               "jpg",
               "jpeg",
               "gif",
-              ...(config.svgRules ? [] : ["svg"]),
+              ...(config.svgRules || config.svgAsReactComponent ? [] : ["svg"]),
             ].join("|")})$`,
             "i"
           ),
@@ -273,7 +273,7 @@ async function getWebpackConfig(config) {
             ? [
                 {
                   test: /\.svg$/i,
-                  use: getSvgrLoaders(false),
+                  use: getSvgrLoaders(),
                 },
               ]
             : [])),
@@ -366,6 +366,7 @@ async function getWebpackConfig(config) {
               processors,
               dependencies: config.dependencies,
               manifest: config.manifest,
+              types: config.types,
             }),
           ]
         : []),

package/src/makeBrickManifest.js

@@ -235,7 +235,7 @@ function scanFields(manifest, nodes, source) {
  * @param {Node[]} nodes
  * @param {string} source
  */
-function parseDocComment(node, source) {
+export function parseDocComment(node, source) {
   if (node.leadingComments) {
     const docComment = node.leadingComments.find(
       (comment) => comment.type === "CommentBlock"

package/src/scanBricks.js

@@ -6,6 +6,12 @@ import babelTraverse from "@babel/traverse";
 import _ from "lodash";
 import getCamelPackageName from "./getCamelPackageName.js";
 import makeBrickManifest from "./makeBrickManifest.js";
+import { BASE_TYPE, TS_KEYWORD_LIST, getTypeAnnotation } from "./utils.js";
+import {
+  isImportDefaultSpecifier,
+  isImportDeclaration,
+  isImportSpecifier,
+} from "@babel/types";
 
 /**
  * @typedef {import("@next-core/brick-manifest").PackageManifest} PackageManifest
@@ -26,7 +32,7 @@ const validExposeName = /^[-\w]+$/;
  * Scan defined bricks by AST.
  *
  * @param {string} packageDir
- * @returns {Promise<{exposes: Exposes; dependencies: Record<string, string[]>; manifest: PackageManifest}>}
+ * @returns {Promise<{exposes: Exposes; dependencies: Record<string, string[]>; manifest: PackageManifest; types: Record<string, unknown>}>}
  */
 export default async function scanBricks(packageDir) {
   /** @type {Map<string, Expose>} */
@@ -62,6 +68,10 @@ export default async function scanBricks(packageDir) {
   /** @type {Map<string, Set<string>} */
   const importsMap = new Map();
 
+  const typescriptList = [];
+
+  const bricksImportsInfo = {};
+
   /**
    *
    * @param {string} filePath
@@ -80,6 +90,9 @@ export default async function scanBricks(packageDir) {
     const extname = path.extname(filePath);
     const content = await readFile(filePath, "utf-8");
 
+    /** @type {Record<string, string[]>} */
+    /** @type {string}  */
+    let brickFullName;
     /** @type {ReturnType<typeof import("@babel/parser").parse>} */
     let ast;
     try {
@@ -388,6 +401,8 @@ export default async function scanBricks(packageDir) {
             specifiedDeps[fullName] = deps;
           }
 
+          brickFullName = fullName;
+
           brickSourceFiles.set(fullName, filePath);
 
           manifest.bricks.push(makeBrickManifest(fullName, nodePath, content));
@@ -401,7 +416,7 @@ export default async function scanBricks(packageDir) {
           });
         }
       },
-      ImportDeclaration({ node: { source, importKind, specifiers } }) {
+      ImportDeclaration({ node: { source, importKind } }) {
         // Match `import "..."`
         if (
           source.type === "StringLiteral" &&
@@ -433,6 +448,25 @@ export default async function scanBricks(packageDir) {
           }
         }
       },
+      TSInterfaceDeclaration({ node }) {
+        if (!node.id) return;
+        typescriptList.push({
+          ...(getTypeAnnotation(node, content) || {}),
+          filePath,
+        });
+      },
+      TSTypeAliasDeclaration({ node }) {
+        typescriptList.push({
+          ...(getTypeAnnotation(node, content) || {}),
+          filePath,
+        });
+      },
+      TSEnumDeclaration: ({ node }) => {
+        typescriptList.push({
+          ...(getTypeAnnotation(node, content) || {}),
+          filePath,
+        });
+      },
     });
 
     await Promise.all(
@@ -440,6 +474,43 @@ export default async function scanBricks(packageDir) {
         scanByImport(item, filePath, nextOverrideImport)
       )
     );
+
+    if (brickFullName) {
+      const imports = ast.program.body
+        .map((item) => {
+          if (isImportDeclaration(item)) {
+            const { source, specifiers } = item;
+            if (
+              source.type === "StringLiteral" &&
+              (source.value.startsWith("./") ||
+                source.value.startsWith("../")) &&
+              !source.value.endsWith(".css")
+            ) {
+              const importPath = path.resolve(dirname, source.value);
+              const importKeys = [];
+              for (let i = 0; i < specifiers.length; i++) {
+                const importItem = specifiers[i];
+                if (isImportSpecifier(importItem)) {
+                  importKeys.push(importItem.imported.name);
+                } else if (isImportDefaultSpecifier(importItem)) {
+                  importKeys.push(importItem.local.name);
+                }
+              }
+              return {
+                keys: importKeys,
+                path: importPath,
+              };
+            }
+          }
+          return false;
+        })
+        .filter(Boolean);
+
+      bricksImportsInfo[brickFullName] = {
+        imports,
+        filePath,
+      };
+    }
   }
 
   /**
@@ -483,6 +554,45 @@ export default async function scanBricks(packageDir) {
 
   await scanByFile(bootstrapTsPath);
 
+  async function checkMissLoadFile() {
+    const processedFilesList = [...processedFiles];
+    const files = Object.values(bricksImportsInfo)
+      .map(({ imports }) => {
+        return imports.map(
+          (item) =>
+            !processedFilesList.find((path) => isMatch(path, item.path)) &&
+            item.path
+        );
+      })
+      .flat(1)
+      .filter(Boolean);
+
+    if (files.length) {
+      await Promise.all(
+        [...new Set(files)].map((file) => {
+          const fileName = path.dirname(file);
+          const lastName = path.basename(file);
+          const matchExtension = /\.[tj]sx?$/.test(lastName);
+          const noExtension = !lastName.includes(".");
+          let fileInfo;
+
+          if (matchExtension || noExtension) {
+            fileInfo = [fileName, lastName.replace(/\.[^.]+$/, "")];
+          }
+          if (noExtension && existsSync(file) && statSync(file).isDirectory()) {
+            fileInfo = [fileName, "index"];
+          }
+
+          if (fileInfo) {
+            return scanByImport(fileInfo, "", "");
+          }
+        })
+      );
+    }
+  }
+
+  await checkMissLoadFile();
+
   // console.log("usingWrappedBricks:", usingWrappedBricks);
   // console.log("brickSourceFiles:", brickSourceFiles);
   // console.log("importsMap:", importsMap);
@@ -519,6 +629,91 @@ export default async function scanBricks(packageDir) {
     }
   }
 
+  function ingoreField(obj) {
+    return _.omit(obj, ["filePath", "reference"]);
+  }
+  function isMatch(importPath, filePath) {
+    return (
+      importPath.replace(/\.[^.]+$/, "") === filePath.replace(/\.[^.]+$/, "")
+    );
+  }
+
+  /**
+   *
+   * @param {string} type
+   * @param {Record<string, unknown} importInfo
+   * @param {Set<string>} importKeysSet
+   * @param {string} realFilePath
+   * @returns void
+   */
+  function findType(name, importInfo, importKeysSet, realFilePath = "") {
+    if (importKeysSet.has(name)) return;
+    importKeysSet.add(name);
+
+    const { imports, filePath } = importInfo;
+    const importItem = imports.find((item) => item.keys.includes(name));
+    const importPath = realFilePath
+      ? realFilePath
+      : importItem
+      ? importItem.path
+      : filePath;
+
+    const interfaceItem = typescriptList.find(
+      (item) => isMatch(item.filePath, importPath) && item.name === name
+    );
+
+    if (interfaceItem) {
+      importInfo.types = (importInfo.types || []).concat(
+        ingoreField(interfaceItem)
+      );
+      findRefrenceItem(
+        interfaceItem.extends,
+        importInfo,
+        importKeysSet,
+        importPath
+      );
+      findRefrenceItem(
+        interfaceItem.reference,
+        importInfo,
+        importKeysSet,
+        importPath
+      );
+    }
+  }
+
+  function findRefrenceItem(list, importInfo, importKeySet, realFilePath = "") {
+    if (Array.isArray(list) && list.length) {
+      list.forEach((item) =>
+        findType(item, importInfo, importKeySet, realFilePath)
+      );
+    }
+  }
+
+  if (manifest && manifest.bricks.length) {
+    manifest.bricks.forEach((brickDoc) => {
+      const { name, properties } = brickDoc;
+      const importInfo = bricksImportsInfo[name];
+      const fieldTypes = properties
+        .map(
+          ({ type }) =>
+            type &&
+            type
+              .match(/\w+/g)
+              .filter(
+                (item) => !(BASE_TYPE[item] || TS_KEYWORD_LIST.includes(item))
+              )
+        )
+        .flat(1);
+
+      const importKeysSet = new Set();
+      if (Array.isArray(fieldTypes) && fieldTypes.length) {
+        [...new Set(fieldTypes)].forEach((type) =>
+          findType(type, importInfo, importKeysSet)
+        );
+      }
+    });
+  }
+
   // console.log("exposes:", exposes);
 
   return {
@@ -528,5 +723,10 @@ export default async function scanBricks(packageDir) {
       ...specifiedDeps,
     },
     manifest,
+    types: Object.fromEntries(
+      Object.entries(bricksImportsInfo).map(([k, v]) => {
+        return [k, v.types];
+      })
+    ),
   };
 }

package/src/utils.js

@@ -0,0 +1,227 @@
+import {
+  isIdentifier,
+  isStringLiteral,
+  isTSArrayType,
+  isTSEnumDeclaration,
+  isTSEnumMember,
+  isTSIndexSignature,
+  isTSIndexedAccessType,
+  isTSInterfaceDeclaration,
+  isTSIntersectionType,
+  isTSLiteralType,
+  isTSPropertySignature,
+  isTSQualifiedName,
+  isTSTupleType,
+  isTSTypeAliasDeclaration,
+  isTSTypeAnnotation,
+  isTSTypeLiteral,
+  isTSTypeParameter,
+  isTSTypeParameterDeclaration,
+  isTSTypeReference,
+  isTSUnionType,
+} from "@babel/types";
+import _ from "lodash";
+import { parseDocComment } from "./makeBrickManifest.js";
+
+export const BASE_TYPE = {
+  any: "any",
+  boolean: "boolean",
+  undefined: "undefined",
+  bigint: "bigint",
+  null: "null",
+  number: "number",
+  object: "object",
+  string: "string",
+};
+
+export const TS_KEYWORD_LIST = ["Record", "Array", "unknow", "void"];
+const TS_BASIC_TYPE = {
+  TSAnyKeyword: BASE_TYPE.any,
+  TSBooleanKeyword: BASE_TYPE.boolean,
+  TSBigIntKeyword: BASE_TYPE.bigint,
+  TSNullKeyword: BASE_TYPE.null,
+  TSNumberKeyword: BASE_TYPE.number,
+  TSObjectKeyword: BASE_TYPE.object,
+  TSStringKeyword: BASE_TYPE.string,
+  TSUndefinedKeyword: BASE_TYPE.undefined,
+  TSUnknownKeyword: BASE_TYPE.any,
+};
+
+function getTSBasicType(annotation) {
+  return annotation && TS_BASIC_TYPE[annotation.type];
+}
+
+const getDocComment = (typeAnnotation, source) => {
+  return parseDocComment(typeAnnotation, source) || {};
+};
+
+/**
+ *
+ * @param {import("@babel/types").typeAnnotation} typeAnnotation
+ * @param {string} source
+ * @param {Set<string>} reference
+ * @returns
+ */
+export const getTypeAnnotation = (
+  typeAnnotation,
+  source,
+  reference = new Set()
+) => {
+  const makeResultWithDocComment = (result) => {
+    return {
+      ...result,
+      ...getDocComment(typeAnnotation, source),
+    };
+  };
+  /**
+   * @param {import("@babel/types").typeAnnotation} typeAnnotation
+   */
+  const walkTypeAnnotation = (typeAnnotation) => {
+    if (isTSInterfaceDeclaration(typeAnnotation)) {
+      const {
+        id,
+        body,
+        extends: extendsItems,
+        typeParameters,
+      } = typeAnnotation;
+      if (!id) return;
+      return makeResultWithDocComment({
+        name: id.name,
+        type: "interface",
+        typeParameters: typeParameters && walkTypeAnnotation(typeParameters),
+        annotation: body.body.map(walkTypeAnnotation),
+        extends: extendsItems?.map((item) => item.expression.name),
+        reference: [...reference],
+      });
+    } else if (isTSTypeAliasDeclaration(typeAnnotation)) {
+      const { id, typeParameters } = typeAnnotation;
+      return makeResultWithDocComment({
+        name: id.name,
+        type: "typeAlias",
+        typeParameters: typeParameters && walkTypeAnnotation(typeParameters),
+        annotation: walkTypeAnnotation(typeAnnotation.typeAnnotation),
+        reference: [...reference],
+      });
+    } else if (isTSEnumDeclaration(typeAnnotation)) {
+      const { id, members } = typeAnnotation;
+      return makeResultWithDocComment({
+        name: id.name,
+        type: "enums",
+        members: members?.map(walkTypeAnnotation),
+        reference: [...reference],
+      });
+    } else if (isTSEnumMember(typeAnnotation)) {
+      return {
+        name: walkTypeAnnotation(typeAnnotation.id),
+        value: walkTypeAnnotation(typeAnnotation.initializer),
+      };
+    } else if (isTSTypeAnnotation(typeAnnotation)) {
+      return walkTypeAnnotation(typeAnnotation.typeAnnotation);
+    } else if (isTSTypeReference(typeAnnotation)) {
+      const { typeName, typeParameters } = typeAnnotation;
+      const qualified = isTSQualifiedName(typeName)
+        ? walkTypeAnnotation(typeName)
+        : undefined;
+      const name = typeName.name;
+      reference.add(name);
+      const params =
+        typeParameters?.params && typeParameters.params.map(walkTypeAnnotation);
+      return makeResultWithDocComment({
+        type: "reference",
+        typeName: name,
+        typeParameters: params,
+        qualified,
+      });
+    } else if (isTSQualifiedName(typeAnnotation)) {
+      const left = walkTypeAnnotation(typeAnnotation.left);
+      if (typeof left === "string") {
+        reference.add(left);
+      }
+      return {
+        type: "qualifiedName",
+        left: left,
+        right: walkTypeAnnotation(typeAnnotation.right),
+      };
+    } else if (isTSUnionType(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "union",
+        types: typeAnnotation.types.map(walkTypeAnnotation),
+      });
+    } else if (isTSArrayType(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "array",
+        elementType: walkTypeAnnotation(typeAnnotation.elementType),
+      });
+    } else if (isTSTupleType(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "tuple",
+        elementTypes: typeAnnotation.elementTypes.map(walkTypeAnnotation),
+      });
+    } else if (isTSIntersectionType(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "intersection",
+        types: typeAnnotation.types.map(walkTypeAnnotation),
+      });
+    } else if (isTSTypeLiteral(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "typeLiteral",
+        members: typeAnnotation.members.map(walkTypeAnnotation),
+      });
+    } else if (isTSPropertySignature(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "propertySignature",
+        name: typeAnnotation.key.name,
+        property: walkTypeAnnotation(typeAnnotation.typeAnnotation),
+      });
+    } else if (isTSIndexSignature(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "indexSignature",
+        parameters: {
+          name: typeAnnotation.parameters[0].name,
+          ...walkTypeAnnotation(typeAnnotation.parameters[0].typeAnnotation),
+        },
+        property: walkTypeAnnotation(typeAnnotation.typeAnnotation),
+      });
+    } else if (isTSIndexedAccessType(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "indexedAccess",
+        objectType: walkTypeAnnotation(typeAnnotation.objectType),
+        indexType: walkTypeAnnotation(typeAnnotation.indexType),
+      });
+    } else if (isTSTypeParameterDeclaration(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "typeParameterDeclaration",
+        params: typeAnnotation.params.map(walkTypeAnnotation),
+      });
+    } else if (isTSTypeParameter(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "typeParameter",
+        value: typeAnnotation.name,
+        default:
+          typeAnnotation.default && walkTypeAnnotation(typeAnnotation.default),
+      });
+    } else if (isTSLiteralType(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "literal",
+        value: typeAnnotation.literal.value,
+      });
+    } else if (isIdentifier(typeAnnotation)) {
+      return {
+        type: "identifier",
+        value: typeAnnotation.name,
+      };
+    } else if (isStringLiteral(typeAnnotation)) {
+      return {
+        type: "stringLiteral",
+        value: typeAnnotation.value,
+      };
+    } else if (getTSBasicType(typeAnnotation)) {
+      return makeResultWithDocComment({
+        type: "keyword",
+        value: getTSBasicType(typeAnnotation),
+      });
+    }
+  };
+
+  return walkTypeAnnotation(typeAnnotation);
+};