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

package.json

@@ -22,7 +22,6 @@
     "@poppanator/sveltekit-svg": "^0.3.1",
     "@sveltejs/adapter-static": "^1.0.0-next.29",
     "@sveltejs/kit": "next",
-    "@types/prismjs": "^1.26.0",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
     "autoprefixer": "^10.4.2",
@@ -69,7 +68,9 @@
   },
   "homepage": "https://omorphia.modrinth.com",
   "dependencies": {
+    "lodash.uniqueid": "^4.0.1",
     "sanitize.css": "^13.0.0",
+    "svelte-tiny-virtual-list": "^2.0.0",
     "svelte-use-click-outside": "^1.0.0",
     "throttle-debounce": "^3.0.1"
   }

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 }), {
+                const data = await parseRaw(raw, id)
-                    filename: id
-                })
-                const data = new ComponentParser({
-                    verbose: false
-                }).parseSvelteComponent(code, {
-                    filePath: id,
-                    moduleName: 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
+    })
+}

pnpm-lock.yaml

@@ -7,7 +7,6 @@ specifiers:
   '@poppanator/sveltekit-svg': ^0.3.1
   '@sveltejs/adapter-static': ^1.0.0-next.29
   '@sveltejs/kit': next
-  '@types/prismjs': ^1.26.0
   '@typescript-eslint/eslint-plugin': ^5.10.1
   '@typescript-eslint/parser': ^5.10.1
   autoprefixer: ^10.4.2
@@ -15,6 +14,7 @@ specifiers:
   eslint: ^7.32.0
   eslint-config-prettier: ^8.3.0
   eslint-plugin-svelte3: ^3.2.1
+  lodash.uniqueid: ^4.0.1
   mdsvex: ^0.10.5
   mdsvexamples: ^0.0.8
   nodemon: ^2.0.15
@@ -32,6 +32,7 @@ specifiers:
   svelte: ^3.44.0
   svelte-check: ^2.2.6
   svelte-preprocess: ^4.10.1
+  svelte-tiny-virtual-list: ^2.0.0
   svelte-use-click-outside: ^1.0.0
   svelte2tsx: ^0.5.5
   throttle-debounce: ^3.0.1
@@ -40,7 +41,9 @@ specifiers:
   unplugin-icons: ^0.13.3
 
 dependencies:
+  lodash.uniqueid: 4.0.1
   sanitize.css: 13.0.0
+  svelte-tiny-virtual-list: 2.0.0
   svelte-use-click-outside: 1.0.0
   throttle-debounce: 3.0.1
 
@@ -51,7 +54,6 @@ devDependencies:
   '@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4
   '@sveltejs/adapter-static': 1.0.0-next.29
   '@sveltejs/kit': 1.0.0-next.303_svelte@3.46.4
-  '@types/prismjs': 1.26.0
   '@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98
   '@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2
   autoprefixer: 10.4.2_postcss@8.4.8
@@ -410,10 +412,6 @@ packages:
     resolution: {integrity: sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==}
     dev: true
 
-  /@types/prismjs/1.26.0:
-    resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==}
-    dev: true
-
   /@types/pug/2.0.6:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
@@ -2095,6 +2093,10 @@ packages:
     resolution: {integrity: sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=}
     dev: true
 
+  /lodash.uniqueid/4.0.1:
+    resolution: {integrity: sha1-MmjyanyI5PSxdY1nknGBTjH6WyY=}
+    dev: false
+
   /lower-case/2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
@@ -3603,6 +3605,10 @@ packages:
       typescript: 4.6.2
     dev: true
 
+  /svelte-tiny-virtual-list/2.0.0:
+    resolution: {integrity: sha512-6HxqgUaBICWV/Mm/x1Mr1L6G6EYJM3rcYhRWqYzKpv59e3s9rWifOwP7fLNKtblr16l2Gec0iBtUCOCPiYDmeQ==}
+    dev: false
+
   /svelte-use-click-outside/1.0.0:
     resolution: {integrity: sha512-tOWeMPxeIoW9RshS0WbogRhdYdbxcJV0ebkzSh1lwR7Ihl0hSZMmB4YyCHHoXJK4xcbxCCFh0AnQ1vkzGZfLVQ==}
     dev: false

src/lib/components/Button.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    // TODO: sizes
+    // TODO: icon only buttons should have uniform padding
+
     import { classCombine } from '$lib/utils/classCombine'
 
     /** The element to be styled as a button */

src/lib/components/Checkbox.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import uniqueId from 'lodash.uniqueid'
+    import IconCheck from 'virtual:icons/heroicons-outline/check'
+
+    export let checked = false;
+
+    const id = `checkbox-${uniqueId()}`
+</script>
+
+<div class="checkbox">
+    <input type="checkbox" bind:checked={checked} on:change id={id} name={id}>
+    <label for={id} class="checkbox__label">
+        <span class="checkbox__label__box">
+          <IconCheck />
+      </span>
+        <slot/>
+    </label>
+</div>
+
+<style lang="postcss">
+    .checkbox {
+        input {
+            display: none;
+        }
+
+        display: inline-flex;
+        align-items: center;
+        grid-gap: 0.5rem;
+
+        &__label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            > :global(.icon) {
+                width: 1.1rem;
+                margin-right: -0.1rem;
+            }
+
+            &__box {
+                height: 1rem;
+                width: 1rem;
+                display: flex;
+                border-radius: 0.25rem;
+                background-color: var(--color-button-bg);
+                justify-content: center;
+                align-items: center;
+
+                > :global(.icon) {
+                    display: none;
+                    width: 1rem;
+                    height: 1rem;
+                    color: var(--color-raised-bg)
+                }
+            }
+        }
+
+        [type=checkbox]:checked + label span {
+            background-color: var(--color-brand);
+
+            :global(.icon) {
+                display: unset;
+            }
+        }
+    }
+</style>

src/lib/components/CheckboxList.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import Checkbox from './Checkbox.svelte'
+    import type { SvelteComponent } from 'svelte'
+
+    interface Option {
+        label: string;
+        /** The element that will be in the `value` array while the option is checked */
+        value: string | number;
+        icon: SvelteComponent;
+    }
+
+    export let value = []
+    export let options: Option[] = []
+
+    const handleChange = (e, key) => {
+        if (e.target.checked) {
+            if (!value) value = []
+            value = [key, ...value]
+        } else {
+            value = value.filter((it) => key !== it)
+        }
+    }
+</script>
+
+<div class="checkbox-list">
+    {#each options as option}
+        <Checkbox on:change={(e) => handleChange(e, option.value)}>
+            {#if option.icon}
+                <svelte:component this={option.icon}/>
+            {/if}
+            {option.label}
+        </Checkbox>
+    {/each}
+</div>
+
+<style lang="postcss">
+    .checkbox-list {
+        display: flex;
+        flex-direction: column;
+
+        &.wrap {
+            flex-direction: row;
+            flex-wrap: wrap;
+            grid-gap: 2rem;
+        }
+    }
+</style>

src/lib/components/CheckboxVirtualList.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import Checkbox from './Checkbox.svelte'
+    import type { SvelteComponent } from 'svelte'
+    import VirtualList from 'svelte-tiny-virtual-list'
+
+    interface Option {
+        label: string;
+        /** The element that will be in the `value` array while the option is checked */
+        value: string | number;
+        icon: SvelteComponent;
+    }
+
+    /** Height in pixels of list */
+    export let height = 200
+
+    export let value = []
+    export let options: Option[] = []
+
+    const handleChange = (e, key) => {
+        if (e.target.checked) {
+            if (!value) value = []
+            value = [key, ...value]
+        } else {
+            value = value.filter((it) => key !== it)
+        }
+    }
+</script>
+
+<VirtualList
+        width="100%"
+        {height}
+        itemCount={options.length}
+        itemSize={30}>
+    <div slot="item" let:index let:style {style} style:padding-bottom={(options.length) - 1 === index ? '2.5rem' : ''}>
+        {@const option = options[index]}
+        <Checkbox checked={value.includes(option.value)} on:change={(e) => handleChange(e, option.value)}>
+            {#if option.icon}
+                <svelte:component this={option.icon}/>
+            {/if}
+            {option.label}
+        </Checkbox>
+    </div>
+</VirtualList>
+
+<style lang="postcss">
+    .checkbox-list {
+        display: flex;
+        flex-direction: column;
+
+        &.wrap {
+            flex-direction: row;
+            flex-wrap: wrap;
+            grid-gap: 2rem;
+        }
+    }
+</style>

src/lib/components/Input.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    // TODO: Move to TextInput.svelte & simplify options for text
+
+    import { SvelteComponent } from 'svelte'
+
+    export let key = ''
+    export let label = ''
+    export let placeholder = ''
+    export let icon: string | SvelteComponent = ''
+    export let type: 'text' | 'textarea'
+    export let options: [
+        {
+            label: string;
+            value: string | number;
+            icon: string;
+        }
+    ] = []
+    export let value = undefined
+
+    export let wrap = false
+</script>
+
+{#if label}
+    <div class="input__label">
+        {label}
+    </div>
+{/if}
+{#if type === 'text'}
+    <input type="text" name={key} class="input-box" {placeholder} bind:value={value}/>
+{:else if type === 'textarea'}
+    <textarea name={key} class="input-box input-box--fill" {placeholder} bind:value={value}/>
+{/if}
+
+<style lang="postcss">
+    .input-box {
+        border-radius: var(--rounded-sm);
+        box-shadow: var(--shadow-inset-sm);
+        background-color: var(--color-button-bg);
+        border: none;
+        padding: 0.25rem 0.75rem;
+        width: 20rem;
+        max-width: 100%;
+
+        &--fill {
+            width: 100%;
+            padding: 0.5rem 0.75rem;
+        }
+    }
+
+    textarea {
+        min-height: 2.5rem;
+    }
+</style>

src/routes/_internal/components/Example.svelte

@@ -3,7 +3,7 @@
     import IconMoon from 'virtual:icons/heroicons-outline/moon'
     import IconSun from 'virtual:icons/heroicons-outline/sun'
 
-    let theme = 'light'
+    let theme = 'dark'
     let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
 </script>
 
@@ -51,6 +51,7 @@
         &__code {
             margin: 0;
             border-radius: var(--rounded-sm-bottom) !important;
+            background: hsl(220, 13%, 22%);
         }
     }
 </style>

src/routes/_internal/layout/page.svelte

@@ -11,7 +11,11 @@
 
     let api
     if ($page.url.pathname.includes('components')) {
-        import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
+        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`])
+        }
     }
 </script>
 
@@ -42,9 +46,9 @@
                     <tbody>
                     {#each api.props as prop}
                         <tr>
-                            <td>{prop.name}</td>
+                            <td><code>{prop.name}</code></td>
                             <td><code>{prop.type ?? ''}</code></td>
-                            <td>{prop.value ?? ''}</td>
+                            <td><code>{prop.value ?? ''}</code></td>
                             <td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
                         </tr>
                     {/each}
@@ -64,7 +68,7 @@
                     <tbody>
                     {#each api.events as event}
                         <tr>
-                            <td>{event.name}</td>
+                            <td><code>{event.name}</code></td>
                             <td>{!!event.parent}</td>
                             <td>{event.description?.replace('null', '') || ''}</td>
                         </tr>
@@ -84,8 +88,8 @@
                     <tbody>
                     {#each api.slots as slot}
                         <tr>
-                            <td>{slot.name}</td>
+                            <td><code>{slot.name}</code></td>
-                            <td>{slot.fallback}</td>
+                            <td>{slot.fallback ?? 'None'}</td>
                         </tr>
                     {/each}
                     </tbody>

src/routes/components/Checkbox.md

@@ -0,0 +1,20 @@
+### Text-only Example
+
+```svelte example
+<script lang="ts">
+    import Checkbox from "omorphia/components/Checkbox.svelte";
+</script>
+
+<Checkbox>Extra components</Checkbox>
+```
+
+### Text with Icon Example
+
+```svelte example
+<script lang="ts">
+    import Checkbox from "omorphia/components/Checkbox.svelte";
+    import IconCarrot from 'virtual:icons/lucide/carrot'
+</script>
+
+<Checkbox><IconCarrot /> Food </Checkbox>
+```

src/routes/components/CheckboxList.md

@@ -0,0 +1,33 @@
+```svelte example
+<script lang="ts">
+    import CheckboxList from "omorphia/components/CheckboxList.svelte";
+    import IconSquare from 'virtual:icons/lucide/square'
+    import IconCircle from 'virtual:icons/lucide/circle'
+    import IconTriangle from 'virtual:icons/lucide/triangle'
+    
+    let selected = []
+</script>
+
+<CheckboxList 
+    bind:value={selected}
+    options={[
+        {
+            label: 'Circle',
+            icon: IconCircle,
+            value: 'CIR',
+        },
+        {
+            label: 'Triangle',
+            icon: IconTriangle,
+            value: 'TRI',
+        },
+        {
+            label: 'Square',
+            icon: IconSquare,
+            value: 'SQU',
+        },
+    ]} 
+/>
+
+Selected: {selected}
+```

src/routes/components/CheckboxVirtualList.md

@@ -0,0 +1,23 @@
+```svelte example
+<script lang="ts">
+    import CheckboxVirtualList from "omorphia/components/CheckboxVirtualList.svelte";
+    import IconStar from 'virtual:icons/heroicons-outline/star'
+    import uniqueId from 'lodash.uniqueid'
+    
+    let options = Array(100).fill({})
+        .map(option => ({
+            label: 'Star-' + uniqueId(),
+            icon: IconStar,
+            value: uniqueId(),
+        }))
+    
+    let selected = ['2', '6']
+</script>
+
+<CheckboxVirtualList 
+    bind:value={selected}
+    {options}
+/>
+
+Selected: {selected}
+```

src/routes/components/NavRow.md

@@ -13,8 +13,8 @@
             label: 'Button'
         },
         {
-            href: '/Link',
+            href: '/Chips',
-            label: 'Link'
+            label: 'Chips'
         },
         {
             href: '/NavRow',

svelte.config.js

@@ -22,6 +22,10 @@ const config = {
 
     kit: {
         adapter: adapter(),
+        prerender: {
+            default: true,
+            onError: 'continue',
+        },
         vite: {
             plugins: [
                 svelteSvg(),
@@ -31,34 +35,6 @@ const config = {
                 }),
                 examples,
                 sveld(),
-                // {
-                //     name: "sveltedoc-parser",
-                //     async transform(src, id) {
-                //         const query = id.split('?')[1]
-                //
-                //         if ((query || '').includes('raw&api')) {
-                //             const raw = JSON.parse(src.split('export default ')[1])
-                //
-                //             let {code} = await svelte.preprocess(raw, sveltePreprocess(), {
-                //                 filename: id
-                //             })
-                //
-                //             const data = await parse({
-                //                 fileContent: code,
-                //                 encoding: 'ascii',
-                //                 features: ['data', 'computed', 'events', 'slots'],
-                //                 ignoredVisibilities: ['private'],
-                //                 includeSourceLocations: true,
-                //                 version: 3
-                //             })
-                //
-                //             return {
-                //                 code: `export default ${JSON.stringify(data)}`,
-                //                 map: null
-                //             }
-                //         }
-                //     }
-                // },
             ],
 
             resolve: {
@@ -68,6 +44,12 @@ const config = {
                     omorphia: path.resolve('./src/lib'),
                 },
             },
+
+            build: {
+                rollupOptions: {
+                    external: '/_app/COMPONENT_API.json'
+                }
+            }
         },
     },
 };