Move COMPONENT_API to src/generated

.gitignore

@@ -7,3 +7,4 @@ node_modules
 .env.*
 !.env.example
 .vercel
+generated/

plugins/sveld.js

@@ -20,7 +20,7 @@ export default function sveld() {
             }
         },
         // 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) {
+        async buildStart() {
             const output = {};
 
             const componentFiles = await fs.readdir(path.resolve('./src/lib/components'))
@@ -31,11 +31,13 @@ export default function sveld() {
                 output[fileName] = await parseRaw(raw, filePath)
             }
 
-            this.emitFile({
-                type: 'asset',
-                fileName: 'COMPONENT_API.json',
-                source: JSON.stringify(output),
-            })
+            try {
+                await fs.mkdir(path.resolve('./src/generated'))
+            } catch {
+                // Do nothing, directory already exists
+            }
+
+            await fs.writeFile(path.resolve('./src/generated/COMPONENT_API.json'), JSON.stringify(output))
         },
     }
 }

src/lib/components/Avatar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    // TODO: Make square icon `md` more rounded
+
     import { onMount } from 'svelte'
     import { classCombine } from '$lib/utils/classCombine'
 

src/lib/components/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     // TODO: sizes
     // TODO: icon only buttons should have uniform padding
+    // TODO: Could be a class
 
     import { classCombine } from '$lib/utils/classCombine'
 

src/lib/components/CheckboxVirtualList.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    // TODO: Add fade out styling on top and bottom
+
     import Checkbox from './Checkbox.svelte'
     import type { SvelteComponent } from 'svelte'
     import VirtualList from 'svelte-tiny-virtual-list'

src/routes/_internal/layout/page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
     import IconPencil from 'virtual:icons/heroicons-outline/pencil'
     import { page } from '$app/stores'
+    import COMPONENT_API from '../../../generated/COMPONENT_API.json'
 
-    export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1)
+    export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1).replace('.html', '')
 
     export let title = ''
     if (!title) title = fileName
@@ -14,7 +15,7 @@
         if (import.meta.env.DEV) {
             import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
         } else {
-            fetch('/_app/COMPONENT_API.json').then(res => res.json()).then(output => api = output[`${title}.svelte`])
+            api = COMPONENT_API[`${title}.svelte`]
         }
     }
 </script>