feat: stringify

Author: jer3m01

docs/app.config.ts

@@ -38,6 +38,10 @@ export default defineConfig(
 										title: "Getting Started",
 										link: "/getting-started",
 									},
+									{
+										title: "Examples",
+										link: "/examples",
+									},
 								],
 							},
 						],

docs/package.json

@@ -10,20 +10,19 @@
     "@bigmistqke/repl": "^0.2.3",
     "@bigmistqke/vite-plugin-worker-proxy": "^0.0.12",
     "@bigmistqke/worker-proxy": "^0.0.12",
-    "@kobalte/solidbase": "^0.2.6",
+    "@iconify-json/ri": "^1.2.5",
+    "@kobalte/solidbase": "^0.2.11",
     "@monaco-editor/loader": "^1.5.0",
     "@solidjs/router": "^0.15.3",
     "@solidjs/start": "^1.1.0",
     "monaco-editor": "^0.52.2",
+    "solid-docgen": "workspace:*",
     "solid-js": "^1.9.5",
     "typescript": "^5.8.3",
-    "vinxi": "^0.5.3",
+    "vinxi": "^0.5.6",
     "vite": "6.3.0"
   },
   "engines": {
     "node": ">=22"
-  },
-  "devDependencies": {
-    "@iconify-json/ri": "^1.2.5"
   }
 }

docs/src/component/PropsTable.tsx

@@ -0,0 +1,54 @@
+import { mdxComponents } from "@kobalte/solidbase/client";
+import type { Documentation } from "solid-docgen";
+import { stringifyType } from "solid-docgen/stringify";
+import { Dynamic, For, Show } from "solid-js/web";
+
+interface PropsTableProps {
+	docgen: Documentation;
+}
+
+export function PropsTable(props: PropsTableProps) {
+	return (
+		<>
+			<Dynamic component={mdxComponents.h2}>{props.docgen.displayName}</Dynamic>
+
+			<Dynamic component={mdxComponents.table}>
+				<thead>
+					<tr>
+						<th>Prop</th>
+						<th>Type</th>
+						<th>Default</th>
+						<th>Description</th>
+					</tr>
+				</thead>
+				<tbody>
+					<For each={Object.entries(props.docgen.props ?? {})}>
+						{([propName, propValue]) => (
+							<tr>
+								<td>
+									<Dynamic component={mdxComponents.code}>
+										{propName}
+										{propValue.required ? "" : "?"}
+									</Dynamic>
+								</td>
+								<td>
+									<Dynamic component={mdxComponents.code}>
+										{stringifyType(propValue.type)}
+									</Dynamic>
+								</td>
+								<td>
+									<Show when={propValue.defaultValue}>
+										<Dynamic component={mdxComponents.code}>
+											{stringifyType(propValue.defaultValue!, "  ", ",")}
+										</Dynamic>
+									</Show>
+								</td>
+								<td>{propValue.description}</td>
+							</tr>
+						)}
+					</For>
+				</tbody>
+			</Dynamic>
+		</>
+	);
+}

docs/src/routes/guide/examples.mdx

@@ -0,0 +1,108 @@
+---
+title: Examples
+---
+
+import {PropsTable} from "~/component/PropsTable";
+
+# Examples
+
+
+```tsx
+interface Props {
+	/**
+	 * This is myProp.
+	 */
+	myProp?: "A";
+  secondProp: "B";
+	/**
+	 * Description of another.
+	 * 
+	 * @default "C"
+	 */
+  another: "C" | "D" | undefined;
+	/**
+	 * @default 4
+	 */
+  lastone?: 4 | 5;
+}
+
+export function MyComp(props: Props) {
+	return <></>;
+}
+```
+
+<PropsTable docgen={{
+		"displayName": "MyComp",
+		"props": {
+			"myProp": {
+				"type": {
+					"name": "literal",
+					"value": "A",
+					"raw": "\"A\""
+				},
+				"required": false,
+				"description": "This is myProp."
+			},
+			"secondProp": {
+				"type": {
+					"name": "literal",
+					"value": "B",
+					"raw": "\"B\""
+				},
+				"required": true
+			},
+			"another": {
+				"type": {
+					"name": "union",
+					"values": [
+						{
+							"name": "literal",
+							"value": "C",
+							"raw": "\"C\""
+						},
+						{
+							"name": "literal",
+							"value": "D",
+							"raw": "\"D\""
+						},
+						{
+							"name": "undefined",
+							"raw": "undefined"
+						}
+					],
+					"raw": "\"C\" | \"D\" | undefined"
+				},
+				"required": true,
+				"description": "Description of another.",
+				"defaultValue": {
+					"name": "literal",
+					"value": "C",
+					"raw": "\"C\""
+				}
+			},
+			"lastone": {
+				"type": {
+					"name": "union",
+					"values": [
+						{
+							"name": "literal",
+							"value": 4,
+							"raw": "4"
+						},
+						{
+							"name": "literal",
+							"value": 5,
+							"raw": "5"
+						}
+					],
+					"raw": "4 | 5 | undefined"
+				},
+				"required": false,
+				"defaultValue": {
+					"name": "literal",
+					"value": 4,
+					"raw": "4"
+				}
+			}
+		}
+	}}/>

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0-dev",
   "description": "A library to extract information from Solid components for documentation generation.",
   "type": "module",
+  "sideEffects": false,
   "scripts": {
     "build": "tsc",
     "check": "biome check",
@@ -25,8 +26,14 @@
     "/dist"
   ],
   "exports": {
-    "import": "./src/solid-mdx.ts",
-    "types": "./src/solid-mdx.ts"
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./stringify": {
+      "import": "./src/stringify.ts",
+      "types": "./src/stringify.ts"
+    }
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
@@ -41,5 +48,5 @@
   "dependencies": {
     "ts-morph": "^25.0.1"
   },
-  "packageManager": "pnpm@9.15.4"
+  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
 }