From cbc85ca98fb831d332af9c7c9a5cfed62991587c Mon Sep 17 00:00:00 2001
From: venashial <venashial.levo@aleeas.com>
Date: Wed, 30 Mar 2022 14:05:15 -0700
Subject: [PATCH] Move COMPONENT_API to src/generated

---
 .gitignore                                    |  1 +
 plugins/sveld.js                              | 14 ++++++++------
 src/lib/components/Avatar.svelte              |  2 ++
 src/lib/components/Button.svelte              |  1 +
 src/lib/components/CheckboxVirtualList.svelte |  2 ++
 src/routes/_internal/layout/page.svelte       |  5 +++--
 6 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 43cdd457..b5d5a9b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ node_modules
 .env.*
 !.env.example
 .vercel
+generated/
\ No newline at end of file
diff --git a/plugins/sveld.js b/plugins/sveld.js
index e5f5561c..00e94f0c 100644
--- a/plugins/sveld.js
+++ b/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))
         },
     }
 }
diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
index 0a29f4a2..16677983 100644
--- a/src/lib/components/Avatar.svelte
+++ b/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'
 
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index b3858b8c..126fc8b0 100644
--- a/src/lib/components/Button.svelte
+++ b/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'
 
diff --git a/src/lib/components/CheckboxVirtualList.svelte b/src/lib/components/CheckboxVirtualList.svelte
index 7351e3b3..e3ddca81 100644
--- a/src/lib/components/CheckboxVirtualList.svelte
+++ b/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'
diff --git a/src/routes/_internal/layout/page.svelte b/src/routes/_internal/layout/page.svelte
index 36d3acc0..5f14ca82 100644
--- a/src/routes/_internal/layout/page.svelte
+++ b/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>