Merge pull request #16 from easyops-cn/sailorshe/master/supportDocTyp…

…esShow

feat(): support types show

package.json

@@ -23,7 +23,7 @@
     "@docusaurus/preset-classic": "2.4.1",
     "@easyops-cn/docusaurus-search-local": "^0.35.0",
     "@mdx-js/react": "^1.6.22",
-    "@next-core/brick-manifest": "^0.2.0",
+    "@next-core/brick-manifest": "^0.3.0",
     "@next-core/doc-helpers": "^0.1.4",
     "@next-core/monaco-contributions": "^0.2.0",
     "@next-core/preview": "^0.1.7",

scripts/brick-packages.mjs

@@ -14,12 +14,66 @@ await Promise.all(
     if (dir.isDirectory()) {
       const pkgPath = path.join(bricksDir, dir.name);
       const manifestJsonPath = path.join(pkgPath, "dist/manifest.json");
+      const typesJsonPath = path.join(pkgPath, "dist/types.json");
+      let types = {};
+      if (existsSync(typesJsonPath)) {
+        types = (await import(typesJsonPath, { assert: { type: "json" } })).default;
+      }
       if (existsSync(manifestJsonPath)) {
         const manifest = (await import(manifestJsonPath, { assert: { type: "json" } })).default;
         if (manifest.bricks.length > 0 || (manifest.providers ?? []).length > 0) {
           packages.push({
             path: pkgPath,
-            manifest
+            manifest: {
+              ...manifest,
+              bricks: manifest.bricks.map(brick => {
+                if (types[brick.name]) {
+                  const { properties = [], events = [], methods = [] } = brick;
+                  const { properties: typeProperties = [], events: typeEvents = [], methods: typeMethods = [], types: typeTypes = [], } = types[brick.name]
+                  return {
+                    ...brick,
+                    properties: properties.map(field => {
+                      const matchProperty = typeProperties.find(item => field.name === item.name);
+                      if (matchProperty) {
+                        return {
+                          ...field,
+                          types: matchProperty.types,
+                        }
+                      }
+                      return field
+                    }),
+                    events: events.map(field => {
+                      const matchEvent = typeEvents.find(item => field.name === item.name)
+                      if (matchEvent) {
+                        return {
+                          ...field,
+                          detail: {
+                            ...field.detail,
+                            types: matchEvent.types,
+                          }
+                        }
+                      }
+                      return field
+                    }),
+                    methods: methods.map(field => {
+                      const matchMethod = typeMethods.find(item => field.name === item.name)
+                      if (matchMethod) {
+                        return {
+                          ...field,
+                          return: {
+                            ...field.return,
+                            types: matchMethod.types,
+                          }
+                        }
+                      }
+                      return field
+                    }),
+                    types: typeTypes,
+                  }
+                }
+                return brick;
+              })
+            }
           });
         }
       }

scripts/pre-build.mjs

@@ -63,6 +63,15 @@ import BrickDocProperties from "@site/src/components/BrickDocProperties";
 import BrickDocSlots from "@site/src/components/BrickDocSlots";
 import BrickDocEvents from "@site/src/components/BrickDocEvents";
 import BrickDocMethods from "@site/src/components/BrickDocMethods";
+import BrickDocTypes from "@site/src/components/BrickDocTypes";
+import BrickDocInit from "@site/src/components/BrickDocInit";
+
+${
+  brick.types && brick.types.length > 0
+  ?
+`<BrickDocInit types={${JSON.stringify(brick.types)}} />`
+  : ""
+}
 
 <BrickTagName name=${JSON.stringify(brick.name)} />
 
@@ -103,6 +112,16 @@ ${
 <BrickDocMethods methods={${JSON.stringify(brick.methods)}} />`
     : ""
 }
+
+${
+  brick.types && brick.types.length > 0
+  ?
+`## Types
+
+<BrickDocTypes types={${JSON.stringify(brick.types)}} />`
+  : ""
+}
+
 `;
     await writeFile(targetFilePath, content);
   }

src/components/BrickDocEnums/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { EnumDeclaration } from "@next-core/brick-manifest";
+import { GeneralType } from "../BrickDocTypes/generalType";
+import styles from "./style.module.css";
+
+export default function BrickDocTypeAlias({
+  enumDeclaration,
+}: {
+  enumDeclaration: EnumDeclaration;
+}): JSX.Element {
+  return (
+    <div>
+      <h3 id={enumDeclaration.name}>
+        {enumDeclaration.name}
+        <span className={styles.tag}>enum</span>
+      </h3>
+      <div className={styles.enumWrapper}>
+        {enumDeclaration.members.map((item, index) => (
+          <div key={index}>
+            {GeneralType(item.name)}
+            {" = "}
+            {GeneralType(item.value)}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/BrickDocEnums/style.module.css

@@ -0,0 +1,22 @@
+.enumWrapper {
+  padding: 10px;
+  margin-bottom: 32px;
+  background-color: var(--ifm-code-background);
+  border: 0.1rem solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--ifm-code-border-radius);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: var(--ifm-code-font-size);
+  vertical-align: middle;
+}
+
+.tag {
+  font-size: 12px;
+  display: inline-block;
+  vertical-align: top;
+  margin-left: 8px;
+  background: #2cd2d2;
+  color: #fff;
+  padding: 2px;
+  border-radius: 8px;
+  line-height: 12px;
+}

src/components/BrickDocEvents/index.tsx

@@ -1,11 +1,18 @@
 import React from "react";
-import type { EventManifest } from "@next-core/brick-manifest";
+import type { Annotation, EventManifest } from "@next-core/brick-manifest";
 import MaybeEmptyCode from "@site/src/components/MaybeEmptyCode";
+import { GeneralType } from "../BrickDocTypes/generalType";
+
+interface Event {
+  detail: {
+    types: Annotation;
+  };
+}
 
 export default function BrickDocEvents({
-  events
+  events,
 }: {
-  events: EventManifest[]
+  events: EventManifest[];
 }): JSX.Element {
   return (
     <table>
@@ -17,23 +24,27 @@ export default function BrickDocEvents({
         </tr>
       </thead>
       <tbody>
-        {
-          events.map(event => (
-            <tr key={event.name}>
-              <td><code>{event.name}</code></td>
-              <td>{event.description}</td>
-              <td>
+        {events.map((event) => (
+          <tr key={event.name}>
+            <td>
+              <code>{event.name}</code>
+            </td>
+            <td>{event.description}</td>
+            <td>
+              {(event as unknown as Event).detail?.types ? (
+                <MaybeEmptyCode>
+                  {GeneralType((event as unknown as Event).detail.types)}
+                </MaybeEmptyCode>
+              ) : (
                 <MaybeEmptyCode>{event.detail?.type}</MaybeEmptyCode>
-                {
-                  event.detail?.description
-                    ? ` - ${event.detail?.description}`
-                    : ""
-                }
-              </td>
-            </tr>
-          ))
-        }
+              )}
+              {event.detail?.description
+                ? ` - ${event.detail?.description}`
+                : ""}
+            </td>
+          </tr>
+        ))}
       </tbody>
     </table>
-  )
+  );
 }

src/components/BrickDocInit/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Types } from "@next-core/brick-manifest";
+import { initTypes } from "../BrickDocTypes/generalType";
+
+export default function BrickDocInit({
+  types,
+}: {
+  types: Types[];
+}): JSX.Element {
+  types && initTypes(types);
+
+  return <></>;
+}

src/components/BrickDocInterface/index.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from "react";
+import { InterfaceDeclaration } from "@next-core/brick-manifest";
+import { GeneralType } from "../BrickDocTypes/generalType";
+import MaybeEmptyCode from "../MaybeEmptyCode";
+
+export default function BrickDocInterface({
+  interfaceDeclaration,
+}: {
+  interfaceDeclaration: InterfaceDeclaration;
+}): JSX.Element {
+  const body = useMemo(() => {
+    return interfaceDeclaration.annotation.map((item) => {
+      if (item.type === "propertySignature") {
+        const { name, property, required, description } = item;
+        return {
+          name: name,
+          type: GeneralType(property),
+          required,
+          description,
+        };
+      } else if (item.type === "indexSignature") {
+        const { parameters, property, required, description } = item;
+        return {
+          name: GeneralType(parameters),
+          type: GeneralType(property),
+          required,
+          description,
+        };
+      }
+    });
+  }, [interfaceDeclaration]);
+
+  return (
+    <>
+      <h3 id={interfaceDeclaration.name}>
+        {interfaceDeclaration.name}
+        {interfaceDeclaration.typeParameters ? (
+          <>
+            {"<"}
+            {GeneralType(interfaceDeclaration.typeParameters)}
+            {">"}
+          </>
+        ) : null}
+      </h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Required</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {body.map((prop) => (
+            <tr key={prop.name}>
+              <td>
+                <code>{prop.name}</code>
+              </td>
+              <td>
+                <MaybeEmptyCode>{prop.type}</MaybeEmptyCode>
+              </td>
+              <td>{prop.required}</td>
+              <td>{prop.description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}

src/components/BrickDocMethods/index.tsx

@@ -1,11 +1,18 @@
 import React from "react";
-import type { MethodManifest } from "@next-core/brick-manifest";
+import type { Annotation, MethodManifest } from "@next-core/brick-manifest";
 import MaybeEmptyCode from "@site/src/components/MaybeEmptyCode";
+import { GeneralType } from "../BrickDocTypes/generalType";
+
+interface Method {
+  return: {
+    types: Annotation;
+  };
+}
 
 export default function BrickDocMethods({
-  methods
+  methods,
 }: {
-  methods: MethodManifest[]
+  methods: MethodManifest[];
 }): JSX.Element {
   return (
     <table>
@@ -18,35 +25,33 @@ export default function BrickDocMethods({
         </tr>
       </thead>
       <tbody>
-        {
-          methods.map(method => (
-            <tr key={method.name}>
-              <td><code>{method.name}</code></td>
-              <td>{method.description}</td>
-              <td>
-                {
-                  method.params.map(
-                    (param, index, array) => (
-                      <React.Fragment key={index}>
-                        <code>{param as string}</code>
-                        {index < array.length - 1 ? ", " : ""}
-                      </React.Fragment>
-                    )
-                  )
-                }
-              </td>
-              <td>
+        {methods.map((method) => (
+          <tr key={method.name}>
+            <td>
+              <code>{method.name}</code>
+            </td>
+            <td>{method.description}</td>
+            <td>
+              {method.params.map((param, index, array) => (
+                <React.Fragment key={index}>
+                  <code>{param as string}</code>
+                  {index < array.length - 1 ? ", " : ""}
+                </React.Fragment>
+              ))}
+            </td>
+            <td>
+              {(method as unknown as Method).return?.types ? (
+                GeneralType((method as unknown as Method).return.types)
+              ) : (
                 <MaybeEmptyCode>{method.return?.type}</MaybeEmptyCode>
-                {
-                  method.return?.description
-                    ? ` - ${method.return?.description}`
-                    : ""
-                }
-              </td>
-            </tr>
-          ))
-        }
+              )}
+              {method.return?.description
+                ? ` - ${method.return?.description}`
+                : ""}
+            </td>
+          </tr>
+        ))}
       </tbody>
     </table>
-  )
+  );
 }