move settings to kitbook.config.ts file

packages/kitbook/src/app.d.ts

@@ -8,17 +8,17 @@ declare namespace App {
 	// interface Platform {}
 }
 
+// Syntax: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error
 declare namespace svelteHTML {
-	// https://github.com/sveltejs/language-tools >> docs/preprocessors/typescript.md
 	interface HTMLAttributes<T> {
 		'on:updatewidth'?: (event: { detail: DragValues }) => any;
 		'on:updateheight'?: (event: { detail: DragValues }) => any;
-		"on:stopdragging"?: (event: boolean) => any;
-		"on:startdragging"?: (event: boolean) => any;
+		'on:stopdragging'?: (event: boolean) => any;
+		'on:startdragging'?: (event: boolean) => any;
 	}
 }
 
 interface DragValues {
   pixels: number, 
   percentage?: number,
-}
+}

packages/kitbook/src/docs/2-variants/DefaultSlot.md

@@ -5,3 +5,4 @@ It would be great to support dynamic slots for variants, but it would be error-p
 Possible dynamic slot options to research further: 
 - https://github.com/sveltejs/svelte/issues/2588 
 - https://github.com/sveltejs/svelte/pull/4296
+- Playwright does them like this: https://github.com/microsoft/playwright/blob/d92fe16b76272afb19e7af5a2496f7efce45441d/packages/playwright-ct-svelte/registerSource.mjs#L82

packages/kitbook/src/docs/2-variants/DefaultSlot.variants.ts

@@ -6,26 +6,20 @@ import PassIntoDefaultSlot from './PassIntoDefaultSlot.svelte';
 export const variants: Variants<Component> = [
   {
     name: 'Text',
-    slots: [
-      {
-        content: 'Just a bit of plain text.',
-      }
-    ]
+    slots: {
+      default: 'Just a bit of plain text.',
+    }
   },
   {
     name: 'HTML',
-    slots: [
-      {
-        content: 'Try some <i>italics</i>',
-      }
-    ]
+    slots: {
+      default: 'Try some <i>italics</i>',
+    }
   },
   {
     name: 'Component',
-    slots: [
-      {
-        content: PassIntoDefaultSlot,
-      }
-    ]
+    slots: {
+      default: PassIntoDefaultSlot,
+    }
   }
 ]

packages/kitbook/src/docs/4-add-component-variants.md

@@ -24,12 +24,10 @@ export const variants: Variants<Component> = [
         context: { foo: 'baz' },
       }
     ]
-    slots: [
-      {
-        content: 'My Workbench' // can pass a string or a Svelte component
-        // presently we can only mock the default slot and not named slots until Svelte supports dynamically named slots since Kitbook needs to have the dynamically named slots feature to be able to mock named slots
-      }
-    ],
+    slots: {
+      default: 'My Workbench' // can pass a string or a Svelte component
+      // presently we can only mock the default slot and not named slots until Svelte supports dynamically named slots since Kitbook needs to have the dynamically named slots feature to be able to mock named slots
+    }
   },
 ]
 ```

packages/kitbook/src/docs/9-maintainer-notes/4-roadmap.md

@@ -51,7 +51,7 @@
 - Vite server middleware to update/add variants from browser
 - add changesets
 - Story layout improvements (learn from svench and https://bookit.leveluptutorials.com/book/A%20Parent-Basic and implement own ideas)
-- dynamic slots: https://github.com/sveltejs/svelte/issues/2588 && https://github.com/sveltejs/svelte/pull/4296
+- dynamic slots
 - Scrollspy TOC in sidebar (maybe client-side only for setup simplicity) - look at svelte-put toc
 - use plugin to automatically give IDs to stories
 - screenshots: VitestPreview, [Histoire plugin](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-screenshot) and [Viteshot](https://viteshot.com/) for tips

packages/kitbook/src/docs/9-maintainer-notes/5-hmr.md

@@ -4,22 +4,22 @@ These are just brief notes and don't do justice to the topic but here's a start.
 
 ## Base Understanding
 
-You must first understand Hot Module Reloading. It's pretty mystical at first but it's really not that hard to understand. Start by reading:
+First understand Hot Module Reloading. Start by reading:
 - [svelte-hmr](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#whats-hmr-by-the-way) (especially the "What's HMR, by the way?" section direct linked to)
 - [@rixo's rollup-plugin-hot api](https://github.com/rixo/rollup-plugin-hot#the-hot-api)
 - [Vite HMR API](https://vitejs.dev/guide/api-hmr.html) and [Vite's handleHotUpdate plugin hook](https://vitejs.dev/guide/api-plugin.html#handlehotupdate)
 
 ## Key Takeaways
 
-### Svelte but not TS/JS files self accept hot updates
+### Svelte self-accept, TS/JS files do not self-accept hot updates
 
 You need to understand that each file can either self-accept or not. If a file can't accept its hot update, the update bubbles up to whatever modules imported it and so on up the chain. If one of its import branches is never "caught" by being accepted and the update bubbles all the way up to the root module then a full page reload will be triggered ([svelte-hmr](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#whats-hmr-by-the-way)). At this point then, HMR has given us no benefit from a server without such feature. 
 
 Thanks to `vite-plugin-svelte` and `svelte-hmr`, Svelte files accept their own hot updates and apply appropriately (in your developer console's "Sources" tab you can inspect your compiled Svelte files and see the HMR additions). Children components have to be remounted however as it's too difficult to programmatically know how to hot swap them.
 
-Typescript files do not self accept of their own accord however and will trigger a full reload if no one catches them. If they are imported by a Svelte file, then that Svelte file will catch their update saving you from a full reload. If they are imported by a `layout.ts` or `page.ts` file for example, then any changes will trigger a full reload. Since Kitbook utilizes Vite's [glob imports](https://vitejs.dev/guide/features.html#glob-import) feature, a full reload is triggered every time a variant is update, leading to a horrible experience. Other workbench tools don't struggle with this issue because they go through the work of analyzing the file tree themselves. But that takes a lot of code and Vite has already done the work for us so why not take advantage of it?
+Typescript files do not self accept of their own accord however and will trigger a full reload if no one catches them. If they are imported by a Svelte file, then that Svelte file will catch their update saving you from a full reload. If they are imported by a `layout.ts` or `page.ts` file for example, then any changes will trigger a full reload. Since Kitbook utilizes Vite's [glob imports](https://vitejs.dev/guide/features.html#glob-import) feature, then if the HMR for these glob imported files is not caught, then a full reload would be triggered every time a variant is updated, leading to a horrible experience. Other workbench tools don't struggle with this issue because they go through the work of analyzing the file tree themselves. But that takes a lot of code and Vite has already done the work for us so why not take advantage of it?
 
-Before going further, add a simple plugin to log hot update and see in action what you've been reading about:
+Before going further, add a simple plugin to log hot updates in a simple Vite project (I suggest using Stackblitz) and see in action what you've been reading about:
 
 ```ts title="vite.config.js"
 import type { Plugin } from 'vite';
@@ -33,7 +33,7 @@ function logHotUpdate(): Plugin {
 }
 ```
 
-If you edit a typescript file you notice `isSelfAccepting: false` but if you edit a svelte file you'll it is `true`.
+If you edit a typescript file you notice `isSelfAccepting: false` but if you edit a svelte file you'll see it is `true`.
 
 ### You can manually accept hot updates
 
@@ -63,8 +63,8 @@ So we now have hot reloading for Svelte files (like normal), for variants arrays
 
 ## A Gotcha
 
-You can't add `import.meta.hot` to a file in a library that will be run from inside of node_modules. Vite caches those files and so hot updates will be useless.
+You can't add `import.meta.hot` to a file in a library that will be run from inside of node_modules. Vite caches those files and so hot updates will be useless. To workaround this we catch them in a virtual module.
 
-## Quiz question
+## Review question
 
 In an ordinary SvelteKit app would updating a Typescript file only imported in a Svelte file bubble up to a full page reload? No, *but it does cause that specific Svelte file to hot update itself which will cause children components to remount.*

packages/kitbook/src/lib/defineConfig.ts

@@ -0,0 +1,12 @@
+import type { KitbookSettings } from ".";
+
+export function defineConfig(config: Omit<KitbookSettings, 'viewports'> & Partial<Pick<KitbookSettings, 'viewports'>>): KitbookSettings {
+  return {
+    viewports: [
+      {name: 'mobile', width: 320, height: 568},
+      // {name: 'tablet', width: 768, height: 1024},
+      {name: 'desktop', width: 1024, height: 768},
+    ],
+    ...config
+  }
+}

packages/kitbook/src/lib/index.ts

@@ -1,4 +1,5 @@
-export type { Folder, Modules, Variants, GroupedPage, GroupedPageMap, LoadedModules, UngroupedPage, KitbookSettings } from './kitbook-types';
+export type { KitbookSettings } from '@kitbook/vite-plugin-kitbook';
+export type { Folder, Modules, Variants, GroupedPage, GroupedPageMap, LoadedModules, UngroupedPage } from './kitbook-types';
 
 export { default as Layout } from './layout/Layout.svelte';
 export { layoutLoad } from './layout/layoutLoad'

packages/kitbook/src/lib/kitbook-types.ts

@@ -1,25 +1,6 @@
+import type { Viewport } from "@kitbook/vite-plugin-kitbook";
 import type { ComponentProps, SvelteComponent } from "svelte";
 
-export interface KitbookSettings {
-  title: string;
-  description: string;
-  viewports: Viewport[];
-  languages?: Language[];
-  expandTree?: boolean;
-  githubURL?: string;
-}
-
-export type Viewport = {
-  name?: string;
-  width: number;
-  height: number;
-}
-
-export type Language = {
-  name: string;
-  code: string;
-}
-
 export type Variants<T extends SvelteComponent> = Variant<T>[]
 
 export type Variant<T extends SvelteComponent> = {
@@ -28,12 +9,8 @@ export type Variant<T extends SvelteComponent> = {
   viewports?: Viewport[];
   props?: ComponentProps<T>,
   contexts?: MockedContext[],
-  slots?: Slot[]
-}
-
-type Slot = {
-  // name?: string; // leave blank for default slot - dynamic slots not supported yet
-  content: string | typeof SvelteComponent;
+  slots?: Record<string, string | any>
+  // 'default' or name of dynamic slot (though dynamic slots aren't supported yet)
 }
 
 export type MockedContext = {

packages/kitbook/src/lib/kitbook.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from "./defineConfig";
+
+export default defineConfig({
+  title: 'Kitbook',
+  description: 'Svelte Component Documentation and Prototyping Workbench built using SvelteKit',
+  viewports: [
+    {
+      name: 'Mobile',
+      width: 320,
+      height: 568,
+    },
+    {
+      name: 'Desktop',
+      width: 1024,
+      height: 768,
+    },
+    {
+      name: 'Tablet',
+      width: 768,
+      height: 1024,
+    },
+  ],
+  // languages: [
+  //   {
+  //     name: 'English',
+  //     code: 'en',
+  //   },
+  //   {
+  //     name: 'Spanish',
+  //     code: 'es',
+  //   },
+  // ],
+  githubURL: 'https://github.com/jacob-8/kitbook/tree/main/packages/kitbook',
+  expandTree: true,
+  isKitbookItself: true,
+});

packages/kitbook/src/lib/layout/sidebar/Header.variants.ts

@@ -23,11 +23,9 @@ export const variants: Variants<Component> = [
       kitbookPath: '',
       activePath: "/somewhere",
     },
-    slots: [
-      {
-        content: 'My Workbench'
-      }
-    ]
+    slots: {
+      default: 'My Workbench'
+    }
   },
 ].map(variant => {
   return {

packages/kitbook/src/lib/pages/MainPage.svelte

@@ -60,7 +60,8 @@
         {#each variants as { name, description, viewports: variantViewports, props }, index (index)}
           <div class="inline-block whitespace-nowrap overflow-x-auto w-full">
             <div class="flex">
-              {#each variantViewports || viewports as {name: viewportName, width, height}}
+              {#each variantViewports || viewports || [{ name: 'default', width: 400,
+                height: 400}] as {name: viewportName, width, height}}
                 {#each languages || [{ name: null, code: null}] as { name: languageName, code: languageCode}}
                   <View
                     title={name}

packages/kitbook/src/lib/routes/+layout.svelte

@@ -1,44 +1,10 @@
 <script>
   import { pagesStore } from 'kitbook';
+  import { settings } from 'virtual:kitbook-settings';
   import { setContext } from 'svelte';
-  setContext('pages-store', pagesStore);
-  
-  /** @type {import('kitbook').KitbookSettings} */
-  const kitbookSettings = {
-    title: 'Kitbook',
-    description: 'Svelte Component Documentation and Prototyping Workbench built using SvelteKit',
-    viewports: [
-      {
-        name: 'Mobile',
-        width: 320,
-        height: 568,
-      },
-      {
-        name: 'Desktop',
-        width: 1024,
-        height: 768,
-      },
-      {
-        name: 'Tablet',
-        width: 768,
-        height: 1024,
-      },
-    ],
-    // languages: [
-    //   {
-    //     name: 'English',
-    //     code: 'en',
-    //   },
-    //   {
-    //     name: 'Spanish',
-    //     code: 'es',
-    //   },
-    // ],
-    githubURL: 'https://github.com/jacob-8/kitbook/tree/main/packages/kitbook',
-    expandTree: true,
-  };
 
-  setContext('kitbook-settings', kitbookSettings);
+  setContext('pages-store', pagesStore);
+  setContext('kitbook-settings', settings);
 </script>
 
 <slot />

packages/kitbook/src/lib/routes/+layout.ts

@@ -1,5 +1,4 @@
 import type { LayoutLoad } from './$types';
 import { layoutLoad } from 'kitbook';
-// @ts-expect-error virtual module
 import { pages } from 'virtual:kitbook-modules';
 export const load = layoutLoad({ pages }) satisfies LayoutLoad;

packages/kitbook/src/lib/virtual-module.d.ts

@@ -0,0 +1,9 @@
+declare module 'virtual:kitbook-modules' {
+  import type { GroupedPageMap } from "kitbook";
+  export const pages: GroupedPageMap;
+}
+
+declare module 'virtual:kitbook-settings' {
+  import type { KitbookSettings } from "kitbook";
+  export const settings: KitbookSettings;
+}

packages/kitbook/vite.config.js → packages/kitbook/vite.config.ts

@@ -1,14 +1,12 @@
 import { defineConfig } from 'vite'
 import { sveltekit } from '@sveltejs/kit/vite';
 import { kitbook } from './src/lib/plugins/vite';
+import kitbookConfig from './src/lib/kitbook.config';
 import path from 'path';
 
 export default defineConfig({
 	plugins: [
-		kitbook({
-			isKitbookItself: true,
-			// importModuleGlobs: ['/src/docs/**/*.md', '/README.md']
-		}),
+		kitbook(kitbookConfig),
 		sveltekit(),
 	],
 	define: {

packages/template/src/lib/Button.svelte

@@ -3,6 +3,14 @@
   export let site = "Kitbook";
 </script>
 
-<a {href} style="background: pink; padding: 5px; border-radius: 4px;">
+<a {href}>
   <slot>Open {site} Docs</slot>
 </a>
+
+<style>
+  a {
+    background: pink; 
+    padding: 5px; 
+    border-radius: 4px;
+  }
+</style>

packages/vite-plugin-kitbook/src/constants.ts

@@ -4,3 +4,12 @@ export const VIRTUAL_MODULES_IMPORT_ID = 'virtual:kitbook-modules';
 export const RESOLVED_VIRTUAL_MODULES_IMPORT_ID = '\0' + VIRTUAL_MODULES_IMPORT_ID;
 
 export const DEFAULT_IMPORT_MODULE_GLOBS = ['/src/**/*.{md,svx,svelte,variants.ts}', '/README.md'];
+
+export const VIRTUAL_SETTINGS_IMPORT_ID = 'virtual:kitbook-settings';
+export const RESOLVED_VIRTUAL_SETTINGS_IMPORT_ID = '\0' + VIRTUAL_SETTINGS_IMPORT_ID;
+
+export const DEFAULT_VIEWPORTS = [
+  {name: 'mobile', width: 320, height: 568},
+  // {name: 'tablet', width: 768, height: 1024},
+  {name: 'desktop', width: 1024, height: 768},
+]

packages/vite-plugin-kitbook/src/index.ts

@@ -1,4 +1,6 @@
 export { kitbookPlugin as kitbook } from './plugin';
 export { config as KITBOOK_MDSVEX_CONFIG } from './mdsvex/mdsvex.config';
 export { MDSVEX_EXTENSIONS } from './constants';
-export { mdsvex } from 'mdsvex';
+export { mdsvex } from 'mdsvex';
+
+export type { KitbookSettings, Viewport, Language } from './types';