diff --git a/eslint.config.js b/eslint.config.js
index d98e7b05..0f1e806c 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -22,6 +22,7 @@ export default antfu(
'**/.svelte-kit**',
'**/package/**',
'**/src/routes/kitbook/**',
+ '**/src/lib/routes/+layout.ts',
],
},
)
diff --git a/packages/kitbook/src/lib/layout/Layout.svelte b/packages/kitbook/src/lib/layout/Layout.svelte
index ff40f826..24b40ed3 100644
--- a/packages/kitbook/src/lib/layout/Layout.svelte
+++ b/packages/kitbook/src/lib/layout/Layout.svelte
@@ -1,7 +1,6 @@
- {#if isStory}
-
-
+
+
+ {#if Object.keys(variant.props).length === 0}
+ Kitbook tip: Your component may need props passed in. Create a "{data.page
+ ?.name}.variants.ts" file with at least variant. In the future Kitbook will try to
+ automatically supply default props, but until then they must be supplied manually.
+ {/if}
- {:else}
-
-
- {#if Object.keys(variant.props).length === 0}
- Kitbook tip: Your component may need props passed in. Create a "{data.page?.name}.variants.ts" file with at least variant. In the future Kitbook will try to
- automatically supply default props, but until then they must be supplied manually.
+ {#if variant?.slots}
+ {@const defaultSlotContent = variant.slots.default}
+
+ {#if typeof defaultSlotContent === 'string'}
+ {@html defaultSlotContent}
+ {:else}
+
{/if}
-
- {#if variant?.slots}
- {@const defaultSlotContent = variant.slots.default}
-
- {#if typeof defaultSlotContent === 'string'}
- {@html defaultSlotContent}
- {:else}
-
- {/if}
-
- {:else}
-
- {/if}
-
- {/if}
+
+ {:else}
+
+ {/if}
+
-
-
diff --git a/packages/kitbook/src/lib/pages/sandboxPageLoad.ts b/packages/kitbook/src/lib/pages/sandboxPageLoad.ts
index 4cc8aa50..54a37355 100644
--- a/packages/kitbook/src/lib/pages/sandboxPageLoad.ts
+++ b/packages/kitbook/src/lib/pages/sandboxPageLoad.ts
@@ -8,18 +8,18 @@ export async function sandboxPageLoad({ params, parent, url }) {
const page: GroupedPage = pages[pageKey]
const loadedModules: LoadedModules = {}
- const storyId = url.searchParams.get('storyId') as string
+ // const storyId = url.searchParams.get('storyId') as string
const variantIdx = url.searchParams.get('variantIdx')
- if (storyId)
- loadedModules.svx = (await page.loadSvx.loadModule() as any).default as typeof SvelteComponent
- else
- loadedModules.component = (await page.loadComponent.loadModule() as any).default as typeof SvelteComponent
+ // if (storyId)
+ // loadedModules.svx = (await page.loadSvx.loadModule() as any).default as typeof SvelteComponent
+ // else
+ loadedModules.component = (await page.loadComponent.loadModule() as any).default as typeof SvelteComponent
let variant: Variant
if (variantIdx)
variant = (await page.loadVariants.loadModule()).variants[variantIdx] || {}
const editedProps: Record = JSON.parse(decode(url.searchParams.get('props')) || null)
- return { page, pageKey, loadedModules, storyId, variant, variantIdx, editedProps }
+ return { page, pageKey, loadedModules, variant, variantIdx, editedProps }
}
diff --git a/packages/kitbook/src/lib/plugins/vite/constants.ts b/packages/kitbook/src/lib/plugins/vite/constants.ts
index 7539078a..360defae 100644
--- a/packages/kitbook/src/lib/plugins/vite/constants.ts
+++ b/packages/kitbook/src/lib/plugins/vite/constants.ts
@@ -1,10 +1,8 @@
-export enum VirtualModules {
- KITBOOK_MODULES = 'virtual:kitbook-modules',
- KITBOOK_SETTINGS = 'virtual:kitbook-settings',
- KITBOOK_TEMPLATES = 'virtual:kitbook-templates',
-}
+export const DEFAULT_IMPORT_MODULE_GLOBS = [
+ '/src/**/*.{md,svx,svelte,variants.ts}',
+ '/README.md',
+]
-export const DEFAULT_IMPORT_MODULE_GLOBS = ['/src/**/*.{md,svx,svelte,variants.ts}', '/README.md']
export const DEFAULT_VIEWPORTS = [
{ name: 'mobile', width: 375, height: 667 },
{ name: 'tablet', width: 768, height: 800 }, // height should probably be 1024, but until the iframe can automatically decrease height to fit content let's do this
diff --git a/packages/kitbook/src/lib/plugins/vite/initKitbook.ts b/packages/kitbook/src/lib/plugins/vite/initKitbook.ts
index 7c3278c9..808544be 100644
--- a/packages/kitbook/src/lib/plugins/vite/initKitbook.ts
+++ b/packages/kitbook/src/lib/plugins/vite/initKitbook.ts
@@ -12,7 +12,7 @@ const red = '\x1B[31m'
const bold = '\x1B[1m'
const reset = '\x1B[0m'
-const LATEST_VERSION_WITH_ROUTES_UPDATE = 'kitbook@1.0.0-alpha.48^'
+const LATEST_VERSION_WITH_ROUTES_UPDATE = 'kitbook@1.0.0-alpha.50^'
const FILE_WITH_NOTICE = '[...file]/+page.svelte'
export function initKitbook({ routesDirectory, kitbookRoute }: KitbookSettings) {
@@ -36,7 +36,7 @@ export function initKitbook({ routesDirectory, kitbookRoute }: KitbookSettings)
const src = 'node_modules/kitbook/dist/routes'
const destination = kitbookDirectory
fs.cpSync(src, destination, { recursive: true, filter: excludeDocFiles })
- console.log(`${bold}${green}[Kitbook] Added Kitbook route files to ${kitbookDirectory}. Don't edit these. They will be automatically updated by Kitbook in future versions when needed.\n${reset}`)
+ console.info(`${bold}${green}[Kitbook] Added Kitbook route files to ${kitbookDirectory}. Don't edit these. They will be automatically updated by Kitbook in future versions when needed.\n${reset}`)
}
catch (e) {
console.error(`${bold}${red}[Kitbook] Error copying in needed routes: ${e}\n${reset}`)
diff --git a/packages/kitbook/src/lib/plugins/vite/plugin.ts b/packages/kitbook/src/lib/plugins/vite/plugin.ts
index 8a792da4..cb74a80d 100644
--- a/packages/kitbook/src/lib/plugins/vite/plugin.ts
+++ b/packages/kitbook/src/lib/plugins/vite/plugin.ts
@@ -5,11 +5,13 @@ import type { Plugin } from 'vite'
import type { KitbookSettings } from '../../kitbook-types'
import { initKitbook } from './initKitbook.js'
import { modifyViteConfigForKitbook } from './modifyViteConfigForKitbook.js'
-import { DEFAULT_IMPORT_MODULE_GLOBS, DEFAULT_KITBOOK_ROUTE, DEFAULT_ROUTES_DIR, DEFAULT_VIEWPORTS, VirtualModules } from './constants.js'
+import { DEFAULT_IMPORT_MODULE_GLOBS, DEFAULT_KITBOOK_ROUTE, DEFAULT_ROUTES_DIR, DEFAULT_VIEWPORTS } from './constants.js'
import { writeModuleGlobsIntoVirtualModuleCode } from './writeModuleGlobsIntoVirtualModuleCode.js'
import { kitbookViewer } from './viewer/index.js'
import { DEFAULT_VIEWER_OPTIONS } from './viewer/options.js'
+const LOAD_MODULES_ID = 'virtual:kitbook'
+
/**
* Vite plugin to add a Kitbook to SvelteKit projects. Will automatically add Kitbook routes to `src/routes/kitbook` unless you update the `routesDirectory` and `kitbookRoute` settings.
*/
@@ -41,23 +43,22 @@ export function kitbook(userSettings: Partial = {}): Plugin[] {
config: modifyViteConfigForKitbook,
resolveId(id) {
- if (Object.values(VirtualModules).includes(id as VirtualModules))
- return addVirtualFilePrefix(id)
+ if (id === LOAD_MODULES_ID)
+ return addVirtualFilePrefix(LOAD_MODULES_ID)
},
load(id) {
- if (id === addVirtualFilePrefix(VirtualModules.KITBOOK_SETTINGS))
- return `export const settings = ${JSON.stringify(settings)}`
-
- if (id === addVirtualFilePrefix(VirtualModules.KITBOOK_MODULES)) {
+ if (id === addVirtualFilePrefix(LOAD_MODULES_ID)) {
const _dirname = dirname(fileURLToPath(import.meta.url))
const filepath = resolve(_dirname, './virtual/importModules.js')
const content = readFileSync(filepath, 'utf-8')
- return writeModuleGlobsIntoVirtualModuleCode(content, settings.importModuleGlobs || DEFAULT_IMPORT_MODULE_GLOBS)
- }
+ const pageModulesCode = writeModuleGlobsIntoVirtualModuleCode(content, settings.importModuleGlobs || DEFAULT_IMPORT_MODULE_GLOBS)
- if (id === addVirtualFilePrefix(VirtualModules.KITBOOK_TEMPLATES))
- return `export const variants = \`${getVariantsTemplate()}\``
+ return `${pageModulesCode}
+ export const settings = ${JSON.stringify(settings)}
+ export const variantsTemplate = \`${getVariantsTemplate()}\`
+ `
+ }
},
}
diff --git a/packages/kitbook/src/lib/plugins/vite/virtual/virtual-module.d.ts b/packages/kitbook/src/lib/plugins/vite/virtual/virtual-module.d.ts
index edb83281..0566bb8a 100644
--- a/packages/kitbook/src/lib/plugins/vite/virtual/virtual-module.d.ts
+++ b/packages/kitbook/src/lib/plugins/vite/virtual/virtual-module.d.ts
@@ -1,17 +1,7 @@
-declare module 'virtual:kitbook-modules' {
- import type { GroupedPageMap } from 'kitbook'
+declare module 'virtual:kitbook' {
+ import type { GroupedPageMap, KitbookSettings, Variant } from 'kitbook'
export const pages: GroupedPageMap
-}
-
-declare module 'virtual:kitbook-settings' {
- import type { KitbookSettings } from 'kitbook'
-
export const settings: KitbookSettings
-}
-
-declare module 'virtual:kitbook-templates' {
- import type { KitbookSettings } from 'kitbook'
-
- export const variants: string
+ export const variantsTemplate: string
}
diff --git a/packages/kitbook/src/lib/routes/+layout.svelte b/packages/kitbook/src/lib/routes/+layout.svelte
deleted file mode 100644
index 6b87e6f7..00000000
--- a/packages/kitbook/src/lib/routes/+layout.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
diff --git a/packages/kitbook/src/lib/routes/+layout.ts b/packages/kitbook/src/lib/routes/+layout.ts
index 6a187727..ef1af9ea 100644
--- a/packages/kitbook/src/lib/routes/+layout.ts
+++ b/packages/kitbook/src/lib/routes/+layout.ts
@@ -1,5 +1,6 @@
+// @ts-ignore - virtual import
+import { pages, settings, variantsTemplate } from 'virtual:kitbook'
import { layoutLoad } from 'kitbook'
-import { pages } from 'virtual:kitbook-modules'
import type { LayoutLoad } from './$types'
-export const load = layoutLoad({ pages }) satisfies LayoutLoad
+export const load = layoutLoad({ pages, settings, variantsTemplate }) satisfies LayoutLoad
diff --git a/packages/kitbook/src/lib/routes/[...file]/+page.svelte b/packages/kitbook/src/lib/routes/[...file]/+page.svelte
index 13580f70..25224e6d 100644
--- a/packages/kitbook/src/lib/routes/[...file]/+page.svelte
+++ b/packages/kitbook/src/lib/routes/[...file]/+page.svelte
@@ -7,4 +7,4 @@
-
+
diff --git a/packages/kitbook/src/lib/routes/sandbox/[...file]/_page.variants.ts b/packages/kitbook/src/lib/routes/sandbox/[...file]/_page.variants.ts
index d9c5d8c1..e4a9714c 100644
--- a/packages/kitbook/src/lib/routes/sandbox/[...file]/_page.variants.ts
+++ b/packages/kitbook/src/lib/routes/sandbox/[...file]/_page.variants.ts
@@ -5,28 +5,8 @@ import type Component from './+page.svelte'
import IndividualComponent from './mockComponents/IndividualComponent.svelte'
export const variants: Variant[] = [
- {
- name: 'Individual Story',
- description: 'If there is a params.id (story ID), find the corresponding module matching params.file from data.modules, pass props being pulled from the query params, and hide all other content outside that Story using CSS',
- props: {
- data: {
- variant: {
- props: { age: 42 },
- },
- variantIdx: '0',
- pageKey: '',
- editedProps: null,
- loadedModules: {
- },
- storyId: 'showMe',
- page: null,
- pages: null,
- },
- },
- },
{
name: 'Component Variant',
- description: 'if no storyId query param, find the module matching params.file from data.modules and pass props found in the query params',
props: {
data: {
variant: {
@@ -37,9 +17,11 @@ export const variants: Variant[] = [
editedProps: null,
loadedModules: {
},
- storyId: null,
page: null,
pages: null,
+ settings: null,
+ variantsTemplate: null,
+ pagesStore: null,
},
},
},
@@ -55,9 +37,11 @@ export const variants: Variant[] = [
loadedModules: {
component: IndividualComponent as typeof SvelteComponent,
},
- storyId: null,
page: null,
pages: null,
+ settings: null,
+ variantsTemplate: null,
+ pagesStore: null,
},
},
},
diff --git a/packages/template/package.json b/packages/template/package.json
index 137843ac..cebadcd9 100644
--- a/packages/template/package.json
+++ b/packages/template/package.json
@@ -1,6 +1,7 @@
{
"name": "template",
"type": "module",
+ "version": "1.0.0-alpha.49",
"private": true,
"scripts": {
"dev": "vite dev",
@@ -24,6 +25,5 @@
"stackblitz": {
"installDependencies": false,
"startCommand": "node .stackblitz.js && npm install && npm run dev"
- },
- "version": "1.0.0-alpha.49"
+ }
}
diff --git a/packages/template/src/routes/kitbook/+layout.js b/packages/template/src/routes/kitbook/+layout.js
index fd6b7ed8..7c10b725 100644
--- a/packages/template/src/routes/kitbook/+layout.js
+++ b/packages/template/src/routes/kitbook/+layout.js
@@ -1,3 +1,4 @@
+// @ts-ignore - virtual import
+import { pages, settings, variantsTemplate } from 'virtual:kitbook';
import { layoutLoad } from 'kitbook';
-import { pages } from 'virtual:kitbook-modules';
-export const load = layoutLoad({ pages });
+export const load = layoutLoad({ pages, settings, variantsTemplate });
diff --git a/packages/template/src/routes/kitbook/+layout.svelte b/packages/template/src/routes/kitbook/+layout.svelte
deleted file mode 100644
index 6b87e6f7..00000000
--- a/packages/template/src/routes/kitbook/+layout.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
diff --git a/packages/template/src/routes/kitbook/[...file]/+page.svelte b/packages/template/src/routes/kitbook/[...file]/+page.svelte
index f9d55e76..3774fc13 100644
--- a/packages/template/src/routes/kitbook/[...file]/+page.svelte
+++ b/packages/template/src/routes/kitbook/[...file]/+page.svelte
@@ -4,4 +4,4 @@ export let data;
-
+