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; - +