Merge pull request #51 from ethdebug/schema-listing

Allow users to view full schema listings
ethdebug · Jan 4, 2024 · 044a39a · 044a39a
2 parents c43ee17 + bddb61a
commit 044a39a
Show file tree

Hide file tree

Showing 11 changed files with 436 additions and 180 deletions.
diff --git a/web/docusaurus.config.ts b/web/docusaurus.config.ts
@@ -45,7 +45,7 @@ const config: Config = {
               rules: [
                 {
                   test: /\.yaml$/,
-                  use: "yaml-loader"
+                  use: "raw-loader"
                 }
               ]
             }

diff --git a/web/package.json b/web/package.json
@@ -30,13 +30,13 @@
     "react-dom": "^18.0.0",
     "react-markdown": "^9.0.1",
     "yaml": "^2.3.4",
-    "yaml-loader": "^0.8.0",
     "yaml-template": "^1.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.0.1",
     "@docusaurus/tsconfig": "^3.0.1",
     "@docusaurus/types": "^3.0.1",
+    "raw-loader": "^4.0.2",
     "typescript": "~5.2.2"
   },
   "browserslist": {

diff --git a/web/spec/type/base.mdx b/web/spec/type/base.mdx
@@ -141,28 +141,28 @@ A type reference is an object containing the single `"id"` field. This field
 must be a string or a number.
 
 <SchemaViewer
-    schema="schema:ethdebug/format/type/base"
-    pointer="#/$defs/TypeReference" />
+  schema={{ id: "schema:ethdebug/format/type/base" }}
+  pointer="#/$defs/TypeReference" />
 
 #### Type wrapper schema
 
 <SchemaViewer
-    schema="schema:ethdebug/format/type/base"
-    pointer="#/$defs/TypeWrapper"
-    detect={
-    (item) =>
-      typeof item === "object" &&
-        !("$schema" in item) &&
-        item["$ref"] === "#/$defs/Type"}
-    transform={
-      ({ $ref, ...rest }, root) => ({
-        ...rest,
-        type: "object",
-        title: root.$defs.Type.title + " [RECURSIVE]",
-        description: "The root Type schema"
-      })
-    }
-    />
+  schema={{ id: "schema:ethdebug/format/type/base" }}
+  pointer="#/$defs/TypeWrapper"
+  detect={
+  (item) =>
+    typeof item === "object" &&
+      !("$schema" in item) &&
+      item["$ref"] === "#/$defs/Type"}
+  transform={
+    ({ $ref, ...rest }, root) => ({
+      ...rest,
+      type: "object",
+      title: root.$defs.Type.title + " [RECURSIVE]",
+      description: "The root Type schema"
+    })
+  }
+  />
 
 ### ComplexType's `"contains"` field
 
@@ -175,99 +175,95 @@ As described [above](#type-wrappers-and-type-references), complex types compose
 other types. This composition occurs inside the `"contains"` field for all
 complex types.
 
-#### Example complex types to show different forms
+<details open>
+  <summary>Example complex types to show different forms</summary>
+  <Tabs>
+    <TabItem value="singleton" label="Single type">
+      This is an example array type, which composes exactly one other type.
 
-<Tabs
-  defaultValue="singleton"
-  values={[
-    { value: "singleton", label: "Single type" },
-    { value: "list", label: "Ordered list of types" },
-    { value: "object", label: "Object mapping of types by key" }
-  ]}>
-  <TabItem value="singleton">
-    This is an example array type, which composes exactly one other type.
-
-    ```json
-    {
-      "kind": "array",
-      "contains": {
-        "type": {
-          "kind": "uint",
-          "bits": 256
-        }
-      }
-    }
-    ```
-  </TabItem>
-  <TabItem value="list">
-    This is an example array type, which composes an ordered list of member
-    types.
-
-    ```json
-    {
-      "kind": "struct",
-      "contains": [{
-        "member": "balance",
-        "type": {
-          "kind": "uint",
-          "bits": 256
-        }
-      }, {
-        "member": "scoreSheet",
-        "type": {
-          "id": "<some opaque ID for some `ScoreSheet` type>"
-        }
-      }]
-    }
-    ```
-
-    In this example, please note how this struct type represents member names
-    with a `"member"` field alongside the `"type"` field, and note how the
-    value of `"type"` can be either a complete representation or a reference
-    object in the form of `{ id }`.
-  </TabItem>
-  <TabItem value="object">
-    This is an example mapping type, which composes an object mapping of types
-    by key.
-    ```json
-    {
-      "kind": "mapping",
-      "contains": {
-        "key": {
+      ```json
+      {
+        "kind": "array",
+        "contains": {
           "type": {
-            "kind": "address"
+            "kind": "uint",
+            "bits": 256
           }
-        },
-        "value": {
+        }
+      }
+      ```
+    </TabItem>
+    <TabItem value="list" label="Ordered list of types">
+      This is an example array type, which composes an ordered list of member
+      types.
+
+      ```json
+      {
+        "kind": "struct",
+        "contains": [{
+          "member": "balance",
           "type": {
             "kind": "uint",
             "bits": 256
           }
+        }, {
+          "member": "scoreSheet",
+          "type": {
+            "id": "<some opaque ID for some `ScoreSheet` type>"
+          }
+        }]
+      }
+      ```
+
+      In this example, please note how this struct type represents member names
+      with a `"member"` field alongside the `"type"` field, and note how the
+      value of `"type"` can be either a complete representation or a reference
+      object in the form of `{ id }`.
+    </TabItem>
+    <TabItem value="object" label="Object mapping of types by key">
+      This is an example mapping type, which composes an object mapping of types
+      by key.
+      ```json
+      {
+        "kind": "mapping",
+        "contains": {
+          "key": {
+            "type": {
+              "kind": "address"
+            }
+          },
+          "value": {
+            "type": {
+              "kind": "uint",
+              "bits": 256
+            }
+          }
         }
       }
-    }
-    ```
-  </TabItem>
-</Tabs>
+      ```
+    </TabItem>
+  </Tabs>
+</details>
 
 ## Full base schema
 
 <SchemaViewer
-    schema="schema:ethdebug/format/type/base"
-    detect={
-    (item) =>
-      typeof item === "object" &&
-        !("$schema" in item) &&
-        item["$ref"] === "schema:ethdebug/format/type/base"}
-    transform={
-      ({ $ref, ...rest }, root) => ({
-        ...rest,
-        type: "object",
-        title: root.title + " [RECURSIVE]",
-        description: "The root Type schema"
-      })
-    }
-    />
+  schema={{ id: "schema:ethdebug/format/type/base" }}
+  detect={
+  (item) =>
+    typeof item === "object" &&
+      !("$schema" in item) &&
+      item["$ref"] === "schema:ethdebug/format/type/base"}
+  transform={
+    ({ $ref, ...rest }, root) => ({
+      ...rest,
+      type: "object",
+      title: root.title + " [RECURSIVE]",
+      description: "The root Type schema"
+    })
+  }
+  />
+
 ## Example schema extensions for particular types
 
 These examples show valid schemas that extend **ethdebug/format/types/base**

diff --git a/web/spec/type/type.mdx b/web/spec/type/type.mdx
@@ -4,7 +4,6 @@ sidebar_position: 2
 
 import SchemaViewer from "@site/src/components/SchemaViewer";
 import { Collapsible, CreateTypes } from "@theme/JSONSchemaViewer/components";
-import { schemas } from "@site/src/loadSchema";
 
 # ethdebug/format/type [placeholder]
 

diff --git a/web/src/components/SchemaListing.tsx b/web/src/components/SchemaListing.tsx
@@ -0,0 +1,66 @@
+import YAML from "yaml";
+import {
+  type DescribeSchemaOptions,
+  describeSchema
+} from "@site/src/schemas";
+import CodeBlock from "@theme/CodeBlock";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+export interface SchemaListingProps extends DescribeSchemaOptions {
+}
+
+export default function SchemaListing(props: SchemaListingProps): JSX.Element {
+  const {
+    id: qualifiedId,
+    pointer,
+    schema,
+    yaml
+  } = describeSchema(props);
+
+  const id =
+    qualifiedId
+      ? qualifiedId.startsWith("schema:")
+        ? qualifiedId.slice(7)
+        : qualifiedId
+      : undefined;
+
+  const reference = id && pointer
+    ? `${id}${pointer}`
+    : id
+      ? id
+      : undefined;
+
+  return (
+    <Tabs groupId="schema-language">
+      <TabItem value="yaml" label="YAML">
+        <CodeBlock
+          className="schema-listing"
+          language="yaml"
+          showLineNumbers
+          title={
+            reference
+              ? reference
+              : "schema.yaml"
+          }
+        >{
+          yaml
+        }</CodeBlock>
+      </TabItem>
+      <TabItem value="json" label="JSON">
+        <CodeBlock
+          className="schema-listing"
+          language="json"
+          showLineNumbers
+          title={
+            reference
+              ? `${reference}`
+              : "schema.json"
+          }
+        >{
+          JSON.stringify(schema, undefined, 2)
+        }</CodeBlock>
+      </TabItem>
+    </Tabs>
+  );
+}