Update doc generation

2022-03-22 00:58:05 +01:00 · 2022-03-22 00:58:05 +01:00 · b9de87f8c1
parent 59b01e3e88
commit b9de87f8c1
20 changed files with 960 additions and 176 deletions
--- a/package.json
+++ b/package.json
@ -2,7 +2,11 @@
  "name": "schlechtenburg",
  "version": "0.0.0",
  "license": "GPL-3.0-or-later",
-  "scripts": {},
+  "scripts": {
+    "docs:dev": "lerna run --parallel --stream dev",
+    "docs:build": "lerna run ts-to-json:build && lerna run json-to-md:build && lerna run --scope @schlechtenburg/docs build",
+    "typecheck": "lerna run --stream typecheck"
+  },
  "devDependencies": {
    "lerna": "^3.22.1"
  },
--- a/packages/core/lib/types.ts
+++ b/packages/core/lib/types.ts
@ -15,7 +15,7 @@ export interface ITreeNode {

 /**
 * Schlechtenburg inputs and outputs a plain JS Object that can be JSON stringified. This is the
- * interface type for that data structure. <T> will be the data type of the specific block being
+ * interface type for that data structure. &lt;T&gt; will be the data type of the specific block being
 *
 * @see SbMain
 */
--- a/packages/core/package-lock.json
+++ b/packages/core/package-lock.json
@ -134,7 +134,8 @@
 		"@babel/helper-validator-identifier": {
 			"version": "7.12.11",
 			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
-			"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+			"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
+			"dev": true
 		},
 		"@babel/highlight": {
 			"version": "7.16.10",
@ -169,7 +170,8 @@
 		"@babel/parser": {
 			"version": "7.13.9",
 			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.9.tgz",
-			"integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw=="
+			"integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw==",
+			"dev": true
 		},
 		"@babel/template": {
 			"version": "7.16.7",
@ -227,6 +229,7 @@
 			"version": "7.13.0",
 			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
 			"integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
+			"dev": true,
 			"requires": {
 				"@babel/helper-validator-identifier": "^7.12.11",
 				"lodash": "^4.17.19",
@ -457,6 +460,7 @@
 			"version": "3.0.7",
 			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz",
 			"integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==",
+			"dev": true,
 			"requires": {
 				"@babel/parser": "^7.12.0",
 				"@babel/types": "^7.12.0",
@ -465,46 +469,11 @@
 				"source-map": "^0.6.1"
 			}
 		},
-		"@vue/compiler-dom": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz",
-			"integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==",
-			"requires": {
-				"@vue/compiler-core": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/reactivity": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz",
-			"integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==",
-			"requires": {
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/runtime-core": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz",
-			"integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==",
-			"requires": {
-				"@vue/reactivity": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/runtime-dom": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz",
-			"integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==",
-			"requires": {
-				"@vue/runtime-core": "3.0.7",
-				"@vue/shared": "3.0.7",
-				"csstype": "^2.6.8"
-			}
-		},
 		"@vue/shared": {
 			"version": "3.0.7",
 			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz",
-			"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg=="
+			"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg==",
+			"dev": true
 		},
 		"@vuedx/analyze": {
 			"version": "0.6.3",
@ -806,11 +775,6 @@
 			"integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
 			"dev": true
 		},
-		"csstype": {
-			"version": "2.6.16",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
-			"integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
-		},
 		"de-indent": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@ -847,7 +811,8 @@
 		"estree-walker": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true
 		},
 		"fast-glob": {
 			"version": "3.2.11",
@ -982,11 +947,6 @@
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
 			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
 		},
-		"lodash-es": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-		},
 		"lru-cache": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -1135,7 +1095,8 @@
 		"source-map": {
 			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"dev": true
 		},
 		"string-width": {
 			"version": "4.2.3",
@ -1187,7 +1148,8 @@
 		"to-fast-properties": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+			"dev": true
 		},
 		"to-regex-range": {
 			"version": "5.0.1",
@ -1233,16 +1195,6 @@
 			"integrity": "sha512-9r2DOv4YMXL/WBTBB6zxde93hmg6AM7thr7GMR6c5LvPxXe/lwD8gsrJGe0tha4CUvoz86ElUieThGVpM+4PLg==",
 			"dev": true
 		},
-		"vue": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz",
-			"integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==",
-			"requires": {
-				"@vue/compiler-dom": "3.0.7",
-				"@vue/runtime-dom": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		},
 		"wrap-ansi": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -7,8 +7,12 @@
  "license": "GPL-3.0-or-later",
  "main": "lib/index.ts",
  "scripts": {
+    "dev": "json-to-md:watch",
    "typecheck": "vuedx-typecheck --no-pretty ./lib",
-    "docgen": "docgen"
+    "ts-to-json:build": "ts-to-json",
+    "json-to-md:build": "json-to-md build",
+    "json-to-md:watch": "json-to-md watch",
+    "test": "echo \"Error: run tests from root\" && exit 1"
  },
  "directories": {
    "lib": "lib",
--- a/packages/docgen/json-to-md.mjs
+++ b/packages/docgen/json-to-md.mjs
@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+import {
+  join,
+  resolve,
+} from 'path';
+import debounce from 'lodash/debounce.js';
+import {
+  writeFile,
+  readFile,
+  watch,
+} from 'fs/promises';
+import generatePackageMd from './support/generate-pkg-md.mjs'; 
+import combine from './support/combine.mjs'; 
+
+// Either 'build' or 'watch'
+const COMMAND = process.argv[2];
+
+const PKG_DIR = join(process.cwd() || process.argv[3]);
+const COMPONENT_DOCS_FILE_PATH = join(PKG_DIR, 'docs', 'components.json');
+const TS_DOCS_FILE_PATH = join(PKG_DIR, 'docs', 'lib.json');
+
+(async () => {
+  const pkg = JSON.parse(await readFile('./package.json'));
+  const pkgSpace = pkg.name.split('/')[0];
+  const pkgName = pkg.name.split('/')[1];
+  const apiDocsDir = resolve(PKG_DIR, '..', `docs/lib/api/${pkgSpace}`);
+
+  const readTransFormAndWriteOut = async () => {
+    const components = JSON.parse(await readFile(COMPONENT_DOCS_FILE_PATH));
+    const lib = JSON.parse(await readFile(TS_DOCS_FILE_PATH));
+
+    console.log(`Writing ${pkgName}.md`);
+    await writeFile(join(apiDocsDir, `${pkgName}.md`), generatePackageMd({ components, lib }));
+  };
+
+  switch (COMMAND) {
+    case 'build':
+      await readTransFormAndWriteOut(apiDocsDir);
+      return;
+    case 'watch':
+      await readTransFormAndWriteOut(apiDocsDir);
+
+      const componentWatcher = watch(COMPONENT_DOCS_FILE_PATH);
+      const libWatcher = watch(TS_DOCS_FILE_PATH);
+      for await (const event of combine([componentWatcher, libWatcher])) {
+        console.log(`Got update for ${pkgName}`);
+        debounce(readTransFormAndWriteOut, 500);
+      }
+      return;
+    default:
+      console.log('Please provide either build or watch as a command');
+  };
+})();
--- a/packages/docgen/package-lock.json
+++ b/packages/docgen/package-lock.json
@ -379,6 +379,11 @@
        "promise": "^7.0.1"
      }
    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
    "lru-cache": {
      "version": "4.1.5",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@ -2,12 +2,14 @@
  "name": "@schlechtenburg/docgen",
  "version": "0.0.0",
  "description": "",
+  "type": "module",
  "bin": {
-    "docgen": "parse.mjs"
+    "json-to-md": "json-to-md.mjs",
+    "ts-to-json": "ts-to-json.mjs"
  },
-  "main": "parse.mjs",
  "files": [
-    "parse.mjs"
+    "*.mjs",
+    "support/*"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
@ -24,6 +26,7 @@
  "dependencies": {
    "glob": "^7.2.0",
    "glob-promise": "^4.2.2",
+    "lodash": "^4.17.21",
    "typedoc": "^0.22.13",
    "typescript": "^4.6.2",
    "vue": "^3.2.31",
--- a/packages/docgen/support/combine.mjs
+++ b/packages/docgen/support/combine.mjs
@ -0,0 +1,32 @@
+export default async function* combine(iterable) {
+    const asyncIterators = Array.from(iterable, o => o[Symbol.asyncIterator]());
+    const results = [];
+    let count = asyncIterators.length;
+    const never = new Promise(() => {});
+    function getNext(asyncIterator, index) {
+        return asyncIterator.next().then(result => ({
+            index,
+            result,
+        }));
+    }
+    const nextPromises = asyncIterators.map(getNext);
+    try {
+        while (count) {
+            const {index, result} = await Promise.race(nextPromises);
+            if (result.done) {
+                nextPromises[index] = never;
+                results[index] = result.value;
+                count--;
+            } else {
+                nextPromises[index] = getNext(asyncIterators[index], index);
+                yield result.value;
+            }
+        }
+    } finally {
+        for (const [index, iterator] of asyncIterators.entries())
+            if (nextPromises[index] != never && iterator.return != null)
+                iterator.return();
+        // no await here - see https://github.com/tc39/proposal-async-iteration/issues/126
+    }
+    return results;
+}
--- a/packages/docgen/support/generate-pkg-md.mjs
+++ b/packages/docgen/support/generate-pkg-md.mjs
@ -0,0 +1,84 @@
+const getTypeParamString = (params) => `&lt;${params.map(p => p.name).join(', ')}&gt;`;
+
+const generateComponentDoc = (docs) => `
+## ${docs.exportName}
+
+${docs.description || ''}
+
+- **Type**
+
+  \`\`\`
+    Component
+  \`\`\`
+
+### Props
+
+${(docs.props || []).map(prop => `
+#### ${prop.name}
+
+${prop.description || ''}
+
+${prop.type ? `
+- **Type**
+  \`\`\`
+    ${prop.type.name}
+  \`\`\`
+` : ''}
+${prop.defaultValue ? `
+- **Default value**
+  \`\`\`
+    ${prop.defaultValue.value}
+  \`\`\`
+` : ''}
+
+`).join('\n')}
+`;
+
+const generateTSDocs = (docs) => `
+## ${docs.name}${docs.typeParameters ? getTypeParamString(docs.typeParameters) : ''}
+
+${docs.comment?.shortText || ''}
+
+- **Type**
+  \`\`\`
+    ${docs.kindString}
+  \`\`\`
+
+- **Members**
+${(docs.children || [])
+  .map((child) => `   - \`${child.name}\`: \`${child.type?.name}\``)
+  .join('\n')}
+`;
+
+const generateChildren = (
+  children = [],
+  components,
+) => children.map((child) => {
+  const componentDocs = components.find((c) => c.exportName === child.name);
+  if (componentDocs) {
+    return generateComponentDoc(componentDocs);
+  }
+
+  return generateTSDocs(child);
+}).join('');
+
+/**
+ * Generate the full markdown for a package
+ *
+ * Takes the package name (e.g. @schlechtenburg/core) and outputs a markdown string ready to be
+ * consumed by vitepress
+ */
+export default ({ lib, components }) => {
+  const markdown = `
+# ${lib.name}
+
+${lib.comment ? lib.comment : ''}
+
+${generateChildren(lib.children, components)}
+
+  `;
+
+  return markdown
+    .trim()
+    .replace(/\n\n+/, '\n\n');
+}
--- a/packages/docgen/ts-to-json.mjs
+++ b/packages/docgen/ts-to-json.mjs
--- a/packages/docs/lib/.vitepress/config.ts
+++ b/packages/docs/lib/.vitepress/config.ts
@ -1,5 +1,14 @@
 import { defineConfig } from 'vitepress';

+const DOCS_PACKAGES = [
+  'standalone',
+  'core',
+  'layout',
+  'heading',
+  'paragraph',
+  'image',
+];
+
 export default defineConfig({
  title: 'Schlechtenburg',
  description: 'Experimental WYSIWYG block editor',
@ -14,14 +23,10 @@ export default defineConfig({
      {
        text: 'API',
        activeMatch: `^/api/`,
-        items: [
-          { text: '@schlechtenburg/standalone', link: '/api/@schlechtenburg/standalone' },
-          { text: '@schlechtenburg/core', link: '/api/@schlechtenburg/core' },
-          { text: '@schlechtenburg/layout', link: '/api/@schlechtenburg/layout' },
-          { text: '@schlechtenburg/heading', link: '/api/@schlechtenburg/heading' },
-          { text: '@schlechtenburg/paragraph', link: '/api/@schlechtenburg/paragraph' },
-          { text: '@schlechtenburg/image', link: '/api/@schlechtenburg/image' },
-        ],
+        items: DOCS_PACKAGES.map((name) => ({
+          text: `@schlechtenburg/${name}`,
+          link: `/api/@schlechtenburg/${name}`,
+        })),
      },
    ],
    sidebar: {
--- a/packages/docs/lib/api/@schlechtenburg/core.md
+++ b/packages/docs/lib/api/@schlechtenburg/core.md
@ -1,6 +1,669 @@
-<script setup>
-import Package from '../Package'
-</script>
+# @schlechtenburg/core

-<Package name="@schlechtenburg/core" />
+## SbMode

+
+
+- **Type**
+  ```
+    Enumeration
+  ```
+
+- **Members**
+   - `Display`: `undefined`
+   - `Edit`: `undefined`
+
+## IBlockData&lt;T&gt;
+
+Schlechtenburg inputs and outputs a plain JS Object that can be JSON stringified. This is the
+interface type for that data structure. <T> will be the data type of the specific block being
+
+- **Type**
+  ```
+    Interface
+  ```
+
+- **Members**
+   - `data`: `T`
+   - `id`: `string`
+   - `name`: `string`
+
+## IBlockDefinition&lt;T&gt;
+
+Any Block that you create
+
+- **Type**
+  ```
+    Interface
+  ```
+
+- **Members**
+   - `display`: `Component`
+   - `edit`: `Component`
+   - `getDefaultData`: `T`
+   - `icon`: `string`
+   - `name`: `string`
+
+## IBlockLibrary
+
+Schlechtenburg maintains a library of blocks that are available
+
+- **Type**
+  ```
+    Interface
+  ```
+
+- **Members**
+
+
+## IBlockProps&lt;T&gt;
+
+Any Block that you create
+
+- **Type**
+  ```
+    Interface
+  ```
+
+- **Members**
+   - `blockId`: `string`
+   - `data`: `T`
+   - `onActivateNext`: `OnActivateNextCb`
+   - `onActivatePrevious`: `OnActivatePreviousCb`
+   - `onAppendBlock`: `OnAppendBlockCb`
+   - `onPrependBlock`: `OnPrependBlockCb`
+   - `onRemoveSelf`: `OnRemoveSelfCb`
+   - `onUpdate`: `OnUpdateSelfCb`
+
+## ITreeNode
+
+Schlechtenburg keeps track of the rendered block tree.
+This is useful for e.g. the tree select component in the editor header.
+
+- **Type**
+  ```
+    Interface
+  ```
+
+- **Members**
+   - `children`: `undefined`
+   - `icon`: `string`
+   - `id`: `string`
+   - `name`: `string`
+
+## OnActivateNextCb
+
+
+
+- **Type**
+  ```
+    Type alias
+  ```
+
+- **Members**
+
+
+## OnActivatePreviousCb
+
+
+
+- **Type**
+  ```
+    Type alias
+  ```
+
+- **Members**
+
+
+## OnAppendBlockCb
+
+
+
+- **Type**
+  ```
+    Type alias
+  ```
+
+- **Members**
+
+
+## OnPrependBlockCb
+
+
+
+- **Type**
+  ```
+    Type alias
+  ```
+
+- **Members**
+
+
+## OnRemoveSelfCb
+
+
+
+- **Type**
+  ```
+    Type alias
+  ```
+
+- **Members**
+
+
+## OnUpdateBlockCb
+
+
+
+- **Type**
+  ```
+    Type alias
+  ```
+
+- **Members**
+
+
+## OnUpdateSelfCb&lt;T&gt;
+
+
+
+- **Type**
+  ```
+    Type alias
+  ```
+
+- **Members**
+
+
+## Mode
+
+
+
+- **Type**
+  ```
+    Variable
+  ```
+
+- **Members**
+
+
+## SbBlock
+
+Displays a Schlechtenburg block either the mode of the schlechtenburg instance.
+You can use this to display child blocks inside your own blocks.
+
+- **Type**
+
+  ```
+    Component
+  ```
+
+### Props
+
+
+#### block
+
+The state for the block.
+
+
+- **Type**
+  ```
+    IBlockData<any>
+  ```
+
+
+
+
+
+#### onUpdate
+
+Called when the block should be updated.
+
+
+- **Type**
+  ```
+    OnUpdateBlockCb
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+#### onPrependBlock
+
+Called when a sibling block should be inserted before the block
+
+
+- **Type**
+  ```
+    OnPrependBlockCb
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+#### onAppendBlock
+
+Called when a sibling block should be inserted after the block
+
+
+- **Type**
+  ```
+    OnAppendBlockCb
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+#### onRemoveSelf
+
+Called when the block should be removed
+
+
+- **Type**
+  ```
+    OnRemoveSelfCb
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+#### onActivatePrevious
+
+Called when the previous sibling block should be activated
+
+
+- **Type**
+  ```
+    OnActivatePreviousCb
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+#### onActivateNext
+
+Called when the next sibling block should be activated
+
+
+- **Type**
+  ```
+    OnActivateNextCb
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+## SbBlockOrdering
+
+
+
+- **Type**
+
+  ```
+    Component
+  ```
+
+### Props
+
+
+#### orientation
+
+
+
+
+- **Type**
+  ```
+    string
+  ```
+
+
+- **Default value**
+  ```
+    null
+  ```
+
+
+
+
+#### onRemove
+
+
+
+
+- **Type**
+  ```
+    func
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+#### onMoveBackward
+
+
+
+
+- **Type**
+  ```
+    func
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+#### onMoveForward
+
+
+
+
+- **Type**
+  ```
+    func
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+## SbBlockPicker
+
+
+
+- **Type**
+
+  ```
+    Component
+  ```
+
+### Props
+
+
+#### onPickedBlock
+
+
+
+
+- **Type**
+  ```
+    func
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+## SbBlockPlaceholder
+
+A placeholder for a block.
+Displays a placeholder for a block, allowing the user to select a block to insert.
+
+- **Type**
+
+  ```
+    Component
+  ```
+
+### Props
+
+
+#### onInsertBlock
+
+Called when the user picked a block that should be inserted here.
+
+
+- **Type**
+  ```
+    func
+  ```
+
+
+- **Default value**
+  ```
+    () => {}
+  ```
+
+
+
+
+## SbButton
+
+A button in the schlechtenburg theme
+
+- **Type**
+
+  ```
+    Component
+  ```
+
+### Props
+
+
+
+## SbMain
+
+
+
+- **Type**
+  ```
+    Variable
+  ```
+
+- **Members**
+
+
+## SbSelect
+
+A select input in the schlechtenburg theme
+
+- **Type**
+
+  ```
+    Component
+  ```
+
+### Props
+
+
+
+## SbToolbar
+
+Toolbar in the schlechtenburg theme
+
+- **Type**
+
+  ```
+    Component
+  ```
+
+### Props
+
+
+
+## SymActiveBlock
+
+
+
+- **Type**
+  ```
+    Variable
+  ```
+
+- **Members**
+
+
+## SymBlockDimensions
+
+
+
+- **Type**
+  ```
+    Variable
+  ```
+
+- **Members**
+
+
+## SymBlockLibrary
+
+
+
+- **Type**
+  ```
+    Variable
+  ```
+
+- **Members**
+
+
+## SymEditorDimensions
+
+
+
+- **Type**
+  ```
+    Variable
+  ```
+
+- **Members**
+
+
+## blockProps
+
+
+
+- **Type**
+  ```
+    Variable
+  ```
+
+- **Members**
+
+
+## model
+
+
+
+- **Type**
+  ```
+    Variable
+  ```
+
+- **Members**
+
+
+## generateBlockId
+
+
+
+- **Type**
+  ```
+    Function
+  ```
+
+- **Members**
+
+
+## useActivation
+
+
+
+- **Type**
+  ```
+    Function
+  ```
+
+- **Members**
+
+
+## useBlockSizing
+
+
+
+- **Type**
+  ```
+    Function
+  ```
+
+- **Members**
+
+
+## useDynamicBlocks
+
+
+
+- **Type**
+  ```
+    Function
+  ```
+
+- **Members**
+
+
+## useResizeObserver
+
+
+
+- **Type**
+  ```
+    Function
+  ```
+
+- **Members**
--- a/packages/docs/lib/api/generate-api.ts
+++ b/packages/docs/lib/api/generate-api.ts
@ -1,84 +0,0 @@
-import { DeclarationReflection } from 'typedoc';
-import { ComponentDoc } from 'vue-docgen-api';
-
-import { getByName } from '../docs';
-import { getShortPackageName } from './package';
-
-const getTypeParamString = (params: TypeParameterReflection[]) => `<${params.map(p => p.name).join(', ')}>`;
-
-const generateComponentDoc = (docs: ComponentDoc) => `
-## ${docs.exportName}
-
-<p class="docs--type">Component <code>&lt;${docs.displayName} /&gt;</code></p>
-
-${docs.description}
-
-### Props
-
-${(docs.props || []).map(prop => `
-#### ${prop.name}
-
-${prop.description}
-
-${prop.type ? `Type: <code>${prop.type.name}</code>` : ''}
-
-${prop.defaultValue ? `Default: <code>${prop.defaultValue.value}</code>`: null}
-</div>`).join('\n\n')}
-`;
-
-const generateTSDocs = (docs: DeclarationReflection) => `
-## ${docs.name}${docs.typeParameters ? getTypeParamString(docs.typeParameters) : ''}
-
-<p class="docs--type">{docs.kindString}</p>
-
-${docs.comment?.shortText || ''}
-
-${(docs.children || []).map((child: DeclarationReflection) => `
-\`\`\`
-  ${child.name}: ${child.type?.name}
-\`\`\`
-`).join('\n\n')}
-`;
-
-const generateChildren = (
-  children: DeclarationReflection[] = [],
-  components: ComponentDoc[],
-) => children.map((child) => {
-  const componentDocs = components.find((c: ComponentDoc) => c.exportName === child.name);
-  if (componentDocs) {
-    return generateComponentDoc(componentDocs);
-  }
-
-  return generateTSDocs(child);
-});
-
-/**
- * Generate the full markdown for a package
- *
- * Takes the package name (e.g. @schlechtenburg/core) and outputs a markdown string ready to be
- * consumed by vitepress
- */
-export const generatePackageMd = (packageName: string) => {
-  const docs = getByName(getShortPackageName(Array.isArray(packageName) ? packageName[0] : packageName));
-
-  if (!docs) {
-    return `Could not find package docs for ${packageName}`;
-  }
-
-  const { lib, components } = docs;
-
-  const markdown = `
-# ${lib.name}
-
-${lib.comment}
-
-${lib.flags}
-
-${generateChildren(lib.children, components)}
-
-  `;
-
-  return markdown
-    .trim()
-    .replace(/\n\n+/, '\n\n');
-}
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@ -23,7 +23,9 @@
  "scripts": {
    "dev": "vitepress dev lib",
    "build": "vitepress build lib",
-    "serve": "vitepress serve lib"
+    "serve": "vitepress serve lib",
+    "json-to-md:watch": "json-to-md",
+    "json-to-md:build": "json-to-md"
  },
  "dependencies": {
    "@schlechtenburg/standalone": "^0.0.0",
--- a/packages/heading/package.json
+++ b/packages/heading/package.json
@ -21,19 +21,21 @@
    "url": "git@git.b12f.io:b12f/schlechtenburg.git"
  },
  "scripts": {
+    "dev": "json-to-md:watch",
    "typecheck": "vuedx-typecheck --no-pretty ./lib",
-    "docgen": "docgen",
+    "ts-to-json:build": "ts-to-json",
+    "json-to-md:build": "json-to-md build",
+    "json-to-md:watch": "json-to-md watch",
    "test": "echo \"Error: run tests from root\" && exit 1"
  },
  "dependencies": {
    "@schlechtenburg/core": "^0.0.0",
-    "@schlechtenburg/docgen": "^0.0.0",
    "@schlechtenburg/paragraph": "^0.0.0",
    "vue": "^3.0.7"
  },
  "devDependencies": {
+    "@schlechtenburg/docgen": "^0.0.0",
    "@vuedx/typecheck": "^0.6.3",
-    "@vuedx/typescript-plugin-vue": "^0.6.3",
-    "@schlechtenburg/docgen": "^0.0.0"
+    "@vuedx/typescript-plugin-vue": "^0.6.3"
  }
 }
--- a/packages/image/package.json
+++ b/packages/image/package.json
@ -21,13 +21,15 @@
    "url": "git@git.b12f.io:b12f/schlechtenburg.git"
  },
  "scripts": {
+    "dev": "json-to-md:watch",
    "typecheck": "vuedx-typecheck --no-pretty ./lib",
-    "docgen": "docgen",
+    "ts-to-json:build": "ts-to-json",
+    "json-to-md:build": "json-to-md build",
+    "json-to-md:watch": "json-to-md watch",
    "test": "echo \"Error: run tests from root\" && exit 1"
  },
  "dependencies": {
    "@schlechtenburg/core": "^0.0.0",
-    "@schlechtenburg/docgen": "^0.0.0",
    "@schlechtenburg/paragraph": "^0.0.0",
    "vue": "^3.0.7"
  },
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@ -21,13 +21,15 @@
    "url": "git@git.b12f.io:b12f/schlechtenburg.git"
  },
  "scripts": {
+    "dev": "json-to-md:watch",
    "typecheck": "vuedx-typecheck --no-pretty ./lib",
-    "docgen": "docgen",
+    "ts-to-json:build": "ts-to-json",
+    "json-to-md:build": "json-to-md build",
+    "json-to-md:watch": "json-to-md watch",
    "test": "echo \"Error: run tests from root\" && exit 1"
  },
  "dependencies": {
    "@schlechtenburg/core": "^0.0.0",
-    "@schlechtenburg/docgen": "^0.0.0",
    "vue": "^3.0.7"
  },
  "devDependencies": {
--- a/packages/paragraph/package.json
+++ b/packages/paragraph/package.json
@ -21,13 +21,15 @@
    "url": "git@git.b12f.io:b12f/schlechtenburg.git"
  },
  "scripts": {
+    "dev": "json-to-md:watch",
    "typecheck": "vuedx-typecheck --no-pretty ./lib",
-    "docgen": "docgen",
+    "ts-to-json:build": "ts-to-json",
+    "json-to-md:build": "json-to-md build",
+    "json-to-md:watch": "json-to-md watch",
    "test": "echo \"Error: run tests from root\" && exit 1"
  },
  "dependencies": {
    "@schlechtenburg/core": "^0.0.0",
-    "@schlechtenburg/docgen": "^0.0.0",
    "vue": "^3.0.7"
  },
  "devDependencies": {
--- a/packages/standalone/docs/components.json
+++ b/packages/standalone/docs/components.json
@ -0,0 +1,48 @@
+[
+  {
+    "displayName": "schlechtenburg",
+    "exportName": "Schlechtenburg",
+    "description": "",
+    "tags": {},
+    "props": [
+      {
+        "name": "availableBlocks",
+        "type": {
+          "name": "IBlockDefinition<any>[]"
+        },
+        "defaultValue": {
+          "func": true,
+          "value": "() => []"
+        }
+      },
+      {
+        "name": "block",
+        "type": {
+          "name": "IBlockData<any>"
+        },
+        "required": true
+      },
+      {
+        "name": "onUpdate",
+        "description": "Called when the block should be updated.",
+        "type": {
+          "name": "OnUpdateBlockCb"
+        },
+        "defaultValue": {
+          "func": true,
+          "value": "() => {}"
+        }
+      },
+      {
+        "name": "mode",
+        "type": {
+          "name": "SbMode"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "SbMode.Edit"
+        }
+      }
+    ]
+  }
+]
--- a/packages/standalone/package.json
+++ b/packages/standalone/package.json
@ -7,8 +7,12 @@
  "license": "GPL-3.0-or-later",
  "main": "lib/index.ts",
  "scripts": {
+    "dev": "json-to-md:watch",
    "typecheck": "vuedx-typecheck --no-pretty ./lib",
-    "docgen": "docgen"
+    "ts-to-json:build": "ts-to-json",
+    "json-to-md:build": "json-to-md build",
+    "json-to-md:watch": "json-to-md watch",
+    "test": "echo \"Error: run tests from root\" && exit 1"
  },
  "directories": {
    "lib": "lib",