Add component API to built docs + Add Checkbox, CheckboxList, & CheckboxVirtualList

plugins/sveld.js

@@ -1,6 +1,8 @@
-import { ComponentParser } from 'sveld'
+import {ComponentParser} from 'sveld'
 import sveltePreprocess from 'svelte-preprocess'
 import * as svelte from 'svelte/compiler'
+import fs from 'fs/promises'
+import path from 'path'
 
 export default function sveld() {
     return {
@@ -9,22 +11,43 @@ export default function sveld() {
             if (id.endsWith('?raw&sveld')) {
                 const raw = JSON.parse(src.split('export default ')[1])
 
-                let { code } = await svelte.preprocess(raw, sveltePreprocess({ postcss: true }), {
-                    filename: id
-                })
-                const data = new ComponentParser({
-                    verbose: false
-                }).parseSvelteComponent(code, {
-                    filePath: id,
-                    moduleName: id
-                })
-
+                const data = await parseRaw(raw, id)
 
                 return {
                     code: `export default ${JSON.stringify(data)}`,
                     map: null
                 }
             }
-        }
+        },
+        // This generates a `COMPONENT_API.json` with sveld in the `/_app` folder on build, which is used by the docs about components (only when built statically)
+        async generateBundle(options, bundle) {
+            const output = {};
+
+            const componentFiles = await fs.readdir(path.resolve('./src/lib/components'))
+
+            for (const fileName of componentFiles) {
+                const filePath = path.resolve('./src/lib/components', fileName)
+                const raw = (await fs.readFile(filePath)).toString()
+                output[fileName] = await parseRaw(raw, filePath)
+            }
+
+            this.emitFile({
+                type: 'asset',
+                fileName: 'COMPONENT_API.json',
+                source: JSON.stringify(output),
+            })
+        },
     }
+}
+
+async function parseRaw(raw, filePath) {
+    let { code } = await svelte.preprocess(raw, sveltePreprocess({ postcss: true }), {
+        filename: filePath
+    })
+    return new ComponentParser({
+        verbose: false
+    }).parseSvelteComponent(code, {
+        filePath,
+        moduleName: filePath
+    })
 }