%sveltekit.body%
14 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/kitbook/.stackblitz.js:
--------------------------------------------------------------------------------
1 | import { promises as fsPromises } from 'node:fs'
2 |
3 | updateDependencyLinksToLatest('./package.json')
4 |
5 | async function updateDependencyLinksToLatest(filename) {
6 | try {
7 | const contents = await fsPromises.readFile(filename, 'utf-8')
8 | const updatedContent = contents.replace(/"workspace:\*"/gi, '"latest"')
9 | await fsPromises.writeFile(filename, updatedContent)
10 | }
11 | catch (err) {
12 | console.error(err)
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/kitbook/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | %sveltekit.head%
10 |
11 |
12 |
13 | %sveltekit.body%
14 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/kitbook/src/docs/3-customizations/4-styles.md:
--------------------------------------------------------------------------------
1 | # Custom Styles
2 |
3 | Kitbook is not yet themeable, but you can add global styles to the `src/routes/kitbook/+layout.svelte` by importing a css file in the `script` tag.
4 |
5 | Kitbook itself uses [UnoCSS](https://unocss.dev) but the classes have already been compiled into hashed names using it's [svelte-scoped](https://unocss.dev/integrations/svelte-scoped) mode so they won't clash with your CSS framework. You can use whatever styles framework you like.
6 |
7 |
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/plugins/main/markdown/cases/link.md:
--------------------------------------------------------------------------------
1 | # Get Started
2 |
3 | - Install...
4 |
5 | ```diff
6 | import { sveltekit } from '@sveltejs/kit/vite';
7 | +import { kitbook } from 'kitbook/plugins/vite';
8 |
9 | const config = {
10 | plugins: [
11 | + kitbook(),
12 | sveltekit(),
13 | ],
14 | };
15 | ```
16 |
17 | I'm going to link to [[cases/index]]
18 |
19 |
20 | [//begin]: # "Autogenerated link references for markdown compatibility"
21 | [cases/index]: index.md "FooBook"
22 | [//end]: # "Autogenerated link references"
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/routes/[...file]/frame/sidebar/Page.variants.ts:
--------------------------------------------------------------------------------
1 | import type { Variant } from 'kitbook'
2 | import type Component from './Page.svelte'
3 |
4 | export const variants: Variant-------------------------------------------------------------------------------- /packages/kitbook/src/lib/routes/[...file]/frame/sidebar/Folder.variants.ts: -------------------------------------------------------------------------------- 1 | import type { Variant } from 'kitbook' 2 | import type Component from './Folder.svelte' 3 | 4 | export const First: Variantjs
FooBook
3 |Documentation, Prototyping, Inspection & Testing Workbench Tool for Svelte built with SvelteKit that lets you rapidly build, document, and test components. Inspired by Foo
4 |Features
5 |-
6 |
- Something 7 |
- Foam based automatic updating wiki-links for easy linking between pages within your Kitbook that will never get out of date. 8 |
Hello World
3 |Table of Contents
4 | 9 |Install
10 |A example.
11 |Use
12 |More text.
License
14 |MIT
15 | -------------------------------------------------------------------------------- /packages/format-snapshot-results-action/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "compilerOptions": { 4 | "target": "ES2022", 5 | "baseUrl": "./", 6 | "rootDir": "./src", 7 | "module": "NodeNext", 8 | "moduleResolution": "NodeNext", 9 | "types": [ 10 | "vitest/globals", 11 | "vitest/importMeta" 12 | ], 13 | "strict": true, 14 | "noImplicitAny": true, 15 | "outDir": "./dist", 16 | "sourceMap": true, 17 | "esModuleInterop": true, 18 | "forceConsistentCasingInFileNames": true, 19 | "skipLibCheck": true 20 | }, 21 | "include": [ 22 | "src" 23 | ], 24 | "exclude": ["./dist", "./node_modules", "./__tests__", "./coverage"] 25 | } 26 | -------------------------------------------------------------------------------- /packages/kitbook/src/lib/view/Iframe.md: -------------------------------------------------------------------------------- 1 | TODO: Make large desktop views smaller to be able to more quickly digest and then expand on click to focused view. 2 | 3 | ```css 4 | .container { 5 | width: 100px; 6 | height: 100px; 7 | position: relative; 8 | } 9 | 10 | .iframe { 11 | position: absolute; 12 | width: 200%; 13 | height: 200%; 14 | top: 0; 15 | /* or top: 50% */ 16 | left: 0; 17 | /* or left: 50% */ 18 | transform: scale(0.5); 19 | /* transform: translate(-50% -50%) scale(0.5); */ 20 | transform-origin: top left; 21 | } 22 | ``` 23 | 24 | Also can look into auto iframe resizing http://davidjbradshaw.github.io/iframe-resizer/ or just a simple inspect the size of the iframe's content on window or iframe resize -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | // Svelte 4 | "svelte.svelte-vscode", 5 | // Styles 6 | "antfu.iconify", 7 | "antfu.unocss", 8 | // Code quality 9 | "dbaeumer.vscode-eslint", 10 | // Git 11 | "github.vscode-pull-request-github", 12 | // Kitbook 13 | "yzhang.markdown-all-in-one", 14 | "foam.foam-vscode" 15 | // ---- You should definitely install the ones above, the ones below are recommended 16 | // Efficiency 17 | // "usernamehw.errorlens" 18 | // "eamodio.gitlens", 19 | // "cschleiden.vscode-github-actions", 20 | // "aaron-bond.better-comments", 21 | // "vscode-icons-team.vscode-icons", 22 | // "wallabyjs.quokka-vscode", 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /packages/kitbook/playwright.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, devices } from '@playwright/test' 2 | 3 | export default defineConfig({ 4 | testDir: 'e2e', 5 | snapshotDir: 'e2e/snapshots', 6 | snapshotPathTemplate: '{snapshotDir}/{arg}-{projectName}-{platform}{ext}', 7 | fullyParallel: true, 8 | reporter: 'html', 9 | retries: 0, 10 | workers: process.env.CI ? 1 : undefined, 11 | use: { 12 | baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:5173', 13 | }, 14 | projects: [ 15 | { 16 | name: 'chromium', 17 | use: { ...devices['Desktop Chrome'] }, 18 | }, 19 | ], 20 | webServer: { 21 | command: 'pnpm run dev', 22 | port: 5173, 23 | reuseExistingServer: true, 24 | }, 25 | }) 26 | -------------------------------------------------------------------------------- /packages/kitbook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | // "strict": true, 5 | "paths": { 6 | "$lib": [ 7 | "./src/lib" 8 | ], 9 | "$lib/*": [ 10 | "./src/lib/*" 11 | ], 12 | "kitbook": [ 13 | "./src/lib" 14 | ], 15 | "kitbook/*": [ 16 | "./src/lib/*" 17 | ] 18 | }, 19 | "resolveJsonModule": true, 20 | "types": [ 21 | "vitest/globals", 22 | "vitest/importMeta" 23 | ], 24 | "allowJs": true, 25 | "checkJs": true, 26 | "sourceMap": true, 27 | "esModuleInterop": true, 28 | "forceConsistentCasingInFileNames": true, 29 | "skipLibCheck": true 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/kitbook/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'node:path' 2 | import { defineConfig } from 'vite' 3 | import { sveltekit } from '@sveltejs/kit/vite' 4 | import Inspect from 'vite-plugin-inspect' 5 | import { kitbook } from './src/lib/plugins/vite' 6 | import kitbookConfig from './kitbook.config' 7 | 8 | export default defineConfig({ 9 | plugins: [ 10 | Inspect(), 11 | kitbook(kitbookConfig), 12 | sveltekit(), 13 | ], 14 | define: { 15 | 'import.meta.vitest': false, 16 | }, 17 | resolve: { 18 | alias: { 19 | kitbook: path.resolve('./src/lib'), 20 | }, 21 | }, 22 | server: { 23 | port: 3212, 24 | strictPort: true, 25 | }, 26 | build: { 27 | target: 'es2015', // es6 28 | }, 29 | }) 30 | -------------------------------------------------------------------------------- /.github/workflows/pkg.pr.new.yml: -------------------------------------------------------------------------------- 1 | name: Publish Any Commit to pkg.pr.new 2 | 3 | on: 4 | pull_request: 5 | push: 6 | branches: 7 | - '**' 8 | tags: 9 | - '!**' 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v4 17 | with: 18 | fetch-depth: 0 19 | 20 | - uses: pnpm/action-setup@v2 21 | with: 22 | version: 9.6.0 23 | 24 | - uses: actions/setup-node@v4 25 | with: 26 | node-version: 20 27 | cache: pnpm 28 | 29 | - run: pnpm install 30 | 31 | - run: pnpm build 32 | 33 | - name: Release 34 | run: pnpm dlx pkg-pr-new publish --compact --pnpm './packages/*' 35 | -------------------------------------------------------------------------------- /packages/mdsvex-shiki-twoslash/src/fixtures/no-codefence.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /packages/kitbook/static/icons/kitbook-editable-text.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/kitbook/src/lib/viewer/Viewer.md: -------------------------------------------------------------------------------- 1 | Does not show Kitbook icon if using Kitbook by itself to build a library because you are already in the Kitbook. 2 | 3 | -------------------------------------------------------------------------------- /packages/kitbook/src/docs/1-variants/SSR.variants.ts: -------------------------------------------------------------------------------- 1 | import type { Variant, VariantMeta } from 'kitbook' 2 | import type Component from './SSR.svelte' 3 | 4 | export const shared_meta: VariantMeta = { 5 | viewports: [ 6 | { width: 400, height: 100 }, 7 | ], 8 | } 9 | 10 | export const Test_SSR: Variant
13 | {#if $$slots.before}
14 |
26 |
27 |
15 |
17 | {/if}
18 |
19 |
20 | {$error.message}
21 |
25 |
22 | {dev ? $error.stack : ''}
23 |
24 |
8 |
13 |
18 |
19 |
20 | {#if $activeTab === 'first'}
21 | ($hoveredElement = element)}>
23 | {element.nodeName.toLowerCase()}
24 |
25 | {#if isNodeModules}
26 |
27 | {element.__svelte_meta?.loc.file.split('node_modules').pop()}
28 |
29 | {:else}
30 | {element.__svelte_meta?.loc.file.split('src/').pop()}
31 | {/if}
32 |
33 |
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/routes/[...file]/frame/frame.css:
--------------------------------------------------------------------------------
1 | /* html, body {
2 | height: 100%;
3 | } */
4 |
5 | pre {
6 | margin-left: -0.75rem;
7 | margin-right: -0.75rem;
8 | }
9 |
10 | @media (min-width: 768px) {
11 | pre {
12 | margin-left: 0rem;
13 | margin-right: 0rem;
14 | border-radius: 0.375rem;
15 | }
16 | }
17 |
18 | .heading-anchor {
19 | /* display: block;
20 | padding-top: 70px;
21 | margin-top: -70px; */
22 | text-decoration: unset !important;
23 | }
24 |
25 | .heading-anchor:hover::after {
26 | content: ' #';
27 | opacity: .6;
28 | }
29 |
30 |
31 | @media only screen and (min-width: 768px) {
32 | ::-webkit-scrollbar {
33 | width: .5rem;
34 | height: .5rem;
35 | }
36 |
37 | ::-webkit-scrollbar-track {
38 | background: 0 0;
39 | }
40 |
41 | ::-webkit-scrollbar-thumb {
42 | background: hsl(240, 26%, 91%);
43 | border-radius: 1rem;
44 | /* border: 0.25rem solid transparent; */
45 | }
46 |
47 | ::-webkit-scrollbar-thumb:hover {
48 | background: hsl(240, 9%, 71%);
49 | }
50 | }
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/components/search/filterPages.ts:
--------------------------------------------------------------------------------
1 | import type { GroupedPage, GroupedPageMap } from 'kitbook'
2 |
3 | export function filterPages(pageMap: GroupedPageMap, query: string) {
4 | const pages: GroupedPage[] = []
5 | if (!pageMap)
6 | return pages
7 |
8 | const pagesToFilterAndSort = Object.values(pageMap)
9 | const _query = query?.replace(/ /g, '')
10 |
11 | const startsWithName = pagesToFilterAndSort.filter(({ name }) => startsWithQuery(name, _query))
12 | const nameIncluded = pagesToFilterAndSort.filter(({ name }) => includesQuery(name, _query))
13 | const urlIncluded = pagesToFilterAndSort.filter(({ url }) => includesQuery(url, _query))
14 |
15 | return [...new Set([...startsWithName, ...nameIncluded, ...urlIncluded])]
16 | }
17 |
18 | function startsWithQuery(text: string, _query: string) {
19 | return text.replace(/ /g, '').toLowerCase().startsWith(_query.toLowerCase())
20 | }
21 |
22 | function includesQuery(text: string, _query: string) {
23 | return text.replace(/ /g, '').toLowerCase().includes(_query.toLowerCase())
24 | }
25 |
--------------------------------------------------------------------------------
/packages/mdsvex-shiki-twoslash/src/fixtures/lang-no-meta.html:
--------------------------------------------------------------------------------
1 | js
-------------------------------------------------------------------------------- /packages/kitbook/src/lib/viewer/Viewer.variants.ts: -------------------------------------------------------------------------------- 1 | import type { Variant, VariantMeta } from 'kitbook' 2 | import type Component from './Viewer.svelte' 3 | 4 | export const shared_meta: VariantMeta = { 5 | viewports: [ 6 | { width: 500, height: 200 }, 7 | ], 8 | ssr: false, 9 | } 10 | 11 | const shared_settings = { 12 | title: 'foo', 13 | description: 'foo', 14 | kitbookRoute: '/kitbook', 15 | _languageInsertedKitbookRoute: '/kitbook', 16 | viewer: { 17 | showToggleButton: 'always', 18 | __internal: { 19 | viteBase: '', 20 | }, 21 | }, 22 | } satisfies Partialjs
17 | I'm in an iframe so the API won't work. Click the in the upper right corner of this composition to try me.
19 |
20 | {/if}
21 |
22 | I'm in the picture window!!!
31 | -------------------------------------------------------------------------------- /packages/kitbook/src/lib/routes/sandbox/[...file]/SandboxPage.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |examples/index.tstsfoo = 2 // highlight// nope// highlight// highlight me// not me
13 | {#if canMount}
14 | {#key pageKey}
15 |
16 | {#if variantName}
17 |
22 | {/key}
23 | {/if}
24 |
25 |
26 |
13 |
14 | {#each [...$componentsWithChildren] as [_fragment, { componentDetail, childComponents }] (_fragment)}
15 | {#if componentDetail.tagName === 'Root'}
16 |
17 | {#each [...childComponents] as componentFragment (componentFragment)}
18 |
28 |
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/routes/[...file]/Routes.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 | Routes
19 |
20 |
21 | {#each page_ids as id}
22 |
23 | {id.replace('/routes', '').replace(/\/\+(page|layout)/, '') || '/'}
24 | {#if id.endsWith('+layout')}
25 |
32 |
33 |
38 |
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/viewer/load-viewer.ts:
--------------------------------------------------------------------------------
1 | import type { KitbookSettings } from 'kitbook'
2 |
3 | export async function loadViewer(settings: KitbookSettings) {
4 | if (await inKitbookIframe(settings._languageInsertedKitbookRoute))
5 | return
6 |
7 | const Viewer = (await import('./Viewer.svelte')).default
8 | // eslint-disable-next-line no-new
9 | new Viewer({ target: create_viewer_host(), props: { settings } })
10 | }
11 |
12 | function create_viewer_host() {
13 | console.info('creating kitbook-viewer-host')
14 | const id = 'kitbook-viewer-host'
15 | if (document.getElementById(id) != null)
16 | throw new Error('kitbook-viewer-host element already exists')
17 |
18 | const el = document.createElement('div')
19 | el.setAttribute('id', id)
20 | document.documentElement.appendChild(el)
21 | return el
22 | }
23 |
24 | async function inKitbookIframe(kitbook_route: string) {
25 | try {
26 | const isIframe = window.self !== window.top
27 | if (isIframe) {
28 | await new Promise(resolve => setTimeout(resolve, 2000)) // wait for titles to be set as sometimes the Sandbox title is not set yet.
29 | if (window.self.document.title === 'Kitbook Sandbox')
30 | return true
31 | }
32 | } catch (e) {
33 | return true
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/plugins/main/markdown/cases/gfm.md:
--------------------------------------------------------------------------------
1 | # [GitHub Flavored Markdown](https://github.github.com/gfm/) is supported
2 |
3 | ## Footnote
4 |
5 | ```md
6 | Let's start by adding a note[^1] so that when you click it you can see the page jump down to the note.
7 |
8 | [^1]: I'm the footnote.
9 | ```
10 |
11 | Let's start by adding a note[^1] so that when you click it you can see the page jump down to the note.
12 |
13 | [^1]: I'm the footnote.
14 |
15 | ## Autolink literals
16 |
17 | ```md
18 | www.example.com, https://example.com, and contact@example.com.
19 | ```
20 |
21 | www.example.com, https://example.com, and contact@example.com.
22 |
23 | But this is kind of redundant as other rehyp plugins already take care of links.
24 |
25 | ## Strikethrough
26 |
27 | ```md
28 | ~one~ or ~~two~~ tildes.
29 | ```
30 |
31 | ~one~ or ~~two~~ tildes.
32 |
33 | ## Table
34 |
35 | ```md
36 | | Normal | Left-Aligned | Right-Aligned | Centered |
37 | | - | :- | -: | :-: |
38 | | Hello | world, | how are you | today? |
39 | ```
40 |
41 | | Normal | Left-Aligned | Right-Aligned | Centered |
42 | | - | :- | -: | :-: |
43 | | Hello | world, | how are you | today? |
44 |
45 | ## Tasklist
46 |
47 | ```md
48 | * [ ] to do
49 | * [x] done
50 | ```
51 |
52 | * [ ] to do
53 | * [x] done
54 |
--------------------------------------------------------------------------------
/packages/kitbook/src/docs/3-customizations/0-config.md:
--------------------------------------------------------------------------------
1 | # Kitbook Config
2 |
3 | If you want to keep your `vite.config.ts` file clean or be able to use your Kitbook config for visual regression tests, you can move your config into a file called `kitbook.config.ts`:
4 |
5 | ```ts title="kitbook.config.ts"
6 | import { defineConfig } from 'kitbook/defineConfig'
7 |
8 | export default defineConfig({
9 | title: 'Kitbook Template',
10 | description: 'Svelte Component Documentation and Prototyping Workbench built using SvelteKit',
11 | viewports: [
12 | {
13 | name: 'Mobile',
14 | width: 320,
15 | height: 568,
16 | },
17 | {
18 | name: 'Desktop',
19 | width: 1024,
20 | height: 768,
21 | },
22 | ],
23 | githubURL: 'https://github.com/jacob-8/kitbook/tree/main/packages/template',
24 | expandTree: true,
25 | })
26 | ```
27 |
28 | Then you can pass that to your Kitbook plugin:
29 |
30 | ```ts title="vite.config.ts" {4,8}
31 | import { defineConfig } from 'vite'
32 | import { sveltekit } from '@sveltejs/kit/vite'
33 | import { kitbook } from 'kitbook/plugins/vite'
34 | import kitbookConfig from './kitbook.config'
35 |
36 | export default defineConfig({
37 | plugins: [
38 | kitbook(kitbookConfig),
39 | sveltekit(),
40 | ],
41 | })
42 | ```
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/routes/[...file]/Routes.variants.ts:
--------------------------------------------------------------------------------
1 | import type { Variant, VariantMeta } from 'kitbook'
2 | import type Component from './Routes.svelte'
3 |
4 | export const shared_meta: VariantMeta = {
5 | viewports: [{ width: 400, height: 400 }],
6 | }
7 |
8 | const shared = {
9 | svelte_modules: {
10 | '/routes/+layout': {
11 | },
12 | '/routes/+page': {
13 | parents: ['/routes/another/[id]/+page'],
14 | children: ['/lib/Button', '/lib/LunchMenu'],
15 | },
16 | '/routes/another/+page': {
17 | },
18 | 'lib/Button': {
19 | parents: ['/routes/+page'],
20 | },
21 | },
22 | kitbookPath: '/kitbook',
23 | } satisfies Partial
26 | layout
27 |
28 | {/if}
29 |
30 | {/each}
31 | Get Started
3 |-
4 |
- Install... 5 |
6 |diff
I'm going to link to [FooBook]
7 | -------------------------------------------------------------------------------- /packages/mdsvex-shiki-twoslash/src/setLineNumberBaseTo1.test.ts: -------------------------------------------------------------------------------- 1 | import { setLineNumberBaseTo1 } from './setLineNumberBaseTo1' 2 | 3 | test('setLineNumberBaseTo1', () => { 4 | const meta = { 5 | title: 'examples/index.ts', 6 | highlight: { 1: true, 3: true }, 7 | } 8 | expect(setLineNumberBaseTo1(meta)).toMatchInlineSnapshot(` 9 | { 10 | "highlight": { 11 | "0": true, 12 | "2": true, 13 | }, 14 | "title": "examples/index.ts", 15 | } 16 | `) 17 | }) 18 | 19 | test('setLineNumberBaseTo1 handles ranges', () => { 20 | const meta = { 21 | title: 'examples/index.ts', 22 | highlight: { '1': true, '3-4': true }, 23 | } 24 | expect(setLineNumberBaseTo1(meta)).toMatchInlineSnapshot(` 25 | { 26 | "highlight": { 27 | "0": true, 28 | "2-3": true, 29 | }, 30 | "title": "examples/index.ts", 31 | } 32 | `) 33 | }) 34 | 35 | test('setLineNumberBaseTo1 handles no highlight', () => { 36 | const meta = { 37 | title: 'examples/index.ts', 38 | } 39 | expect(setLineNumberBaseTo1(meta)).toMatchInlineSnapshot(` 40 | { 41 | "title": "examples/index.ts", 42 | } 43 | `) 44 | }) 45 | 46 | test('setLineNumberBaseTo1 handles undefined meta', () => { 47 | // @ts-expect-error - undefined is incorrect 48 | expect(setLineNumberBaseTo1(undefined)).toEqual(undefined) 49 | }) 50 | -------------------------------------------------------------------------------- /packages/mdsvex-shiki-twoslash/src/fixtures/get-posts.html: -------------------------------------------------------------------------------- 1 |tsposts =getPosts ();
-------------------------------------------------------------------------------- /packages/kitbook/src/lib/routes/[...file]/frame/Frame.variants.ts: -------------------------------------------------------------------------------- 1 | import type { Variant, VariantMeta } from 'kitbook' 2 | import type Component from './Frame.svelte' 3 | import { pages } from './mock-pages' 4 | 5 | export const shared_meta: VariantMeta = {} 6 | 7 | const shared = { 8 | pages, 9 | kitbookPath: '/', 10 | activePath: '/foo', 11 | settings: { 12 | githubURL: 'https://github.com', 13 | title: 'My Cool Kitbook', 14 | description: 'foo', 15 | viewports: [ 16 | { name: 'Mobile', width: 320, height: 568 }, 17 | { name: 'Desktop', width: 1024, height: 768 }, 18 | ], 19 | // languages: [{ name: null, code: null }], 20 | }, 21 | latest_edited_filepath: null, 22 | } satisfies Partialtsposts =getPosts ();
tsconsole .log (level )
-------------------------------------------------------------------------------- /packages/kitbook/src/lib/routes/[...file]/relative-names.ts: -------------------------------------------------------------------------------- 1 | export function friendly_relative_name(path: string) { 2 | let no_extension = path.replace(/\.svelte$/, '') 3 | 4 | if (no_extension.includes('/+page') || no_extension.includes('/+layout')) { 5 | no_extension = no_extension.substring(0, no_extension.lastIndexOf('/')) 6 | no_extension = no_extension.replace(/.*routes/, '') 7 | 8 | if (no_extension === '') 9 | no_extension = '/' 10 | 11 | if (path.includes('/+layout')) 12 | no_extension += ' Layout' 13 | 14 | return no_extension 15 | } 16 | 17 | return no_extension.substring(no_extension.lastIndexOf('/') + 1) 18 | } 19 | 20 | if (import.meta.vitest) { 21 | describe(friendly_relative_name, () => { 22 | test('shows url for page routes', () => { 23 | expect(friendly_relative_name('/routes/+page.svelte')).toEqual('/') 24 | expect(friendly_relative_name('/routes/another/+page.svelte')).toEqual('/another') 25 | }) 26 | 27 | test('shows url and Layout title for layouts', () => { 28 | expect(friendly_relative_name('/routes/+layout.svelte')).toEqual('/ Layout') 29 | expect(friendly_relative_name('/routes/inner/+layout.svelte')).toEqual('/inner Layout') 30 | }) 31 | 32 | test('Only shows component title for regular Svelte components', () => { 33 | expect(friendly_relative_name('/lib/Button.svelte')).toEqual('Button') 34 | expect(friendly_relative_name('/lib/a/b/Header.svelte')).toEqual('Header') 35 | }) 36 | }) 37 | } 38 | -------------------------------------------------------------------------------- /packages/kitbook/src/lib/routes/[...file]/frame/parseUpdatedPath.ts: -------------------------------------------------------------------------------- 1 | export function urlFromPath(filepath: string): string | null { 2 | const normalizedPath = filepath.replace(/\\/g, '/') 3 | 4 | const match = normalizedPath.match(/^(?:.*\/src\/)(?tsconsole .log (level )
9 |
32 |
33 | Welcome, {data.name || 'everyone'}!
10 | 11 |You could build something amazing here, like an Image component.
12 | 13 |
14 | {#each data.image_seeds as seed}
15 |
19 |
20 |
21 | Open Kitbook to view the components and their props, variants, and more.
22 |
23 | {#if dev}
24 | As well you could press Alt+Shift to put Kitbook Viewer into targeting mode, then right-click on a component to view it's props, variants, or jump directly to it in Kitbook. Try change this image's seed prop and watching it update right here, or try changing the page's data.name prop.
25 |
26 | {#if browser && window.self !== window.top}
27 |
28 | If you're in a Stackblitz iframe, pop the preview out into its own tab so the inter-window communication between the main page and the Tools popup will work
29 | {/if}
30 | {/if}
31 |
2 |
3 | 
4 |
5 |
8 | Documentation, Prototyping, Inspection & Testing Workbench Tool for SvelteKit apps built with SvelteKit. 9 |
10 | 11 |
12 | 
14 | 15 |
16 | View the Kitbook Docs (and demo) 17 |
18 | 19 | ## Contributing 20 | 21 | Would love to have you help! Read the [[0-roadmap|Roadmap]] for good places to start. We use [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/). 22 | 23 | [](https:///pr.new/jacob-8/kitbook) 24 | 25 | Or work on Kitbook locally: 26 | 27 | - `pnpm install` 28 | - `pnpm stub` 29 | - `pnpm dev` 30 | 31 | To update the Kitbook code while using it in your own app, you can change your `devDependency` to point to it instead of npm by using something like `"kitbook": "link:../kitbook/packages/kitbook",` then run `pnpm package:watch` in Kitbook to keep it updating on changes. 32 | 33 | [//begin]: # "Autogenerated link references for markdown compatibility" 34 | [0-roadmap|Roadmap]: packages/kitbook/src/docs/9-maintainer-notes/0-roadmap.md "Roadmap" 35 | [//end]: # "Autogenerated link references" -------------------------------------------------------------------------------- /packages/kitbook/README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
8 | Documentation, Prototyping, Inspection & Testing Workbench Tool for SvelteKit apps built with SvelteKit. 9 |
10 | 11 |
12 |
14 | 15 |
16 | View the Kitbook Docs (and demo) 17 |
18 | 19 | ## Contributing 20 | 21 | Would love to have you help! Read the [[0-roadmap|Roadmap]] for good places to start. We use [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/). 22 | 23 | [](https:///pr.new/jacob-8/kitbook) 24 | 25 | Or work on Kitbook locally: 26 | 27 | - `pnpm install` 28 | - `pnpm stub` 29 | - `pnpm dev` 30 | 31 | To update the Kitbook code while using it in your own app, you can change your `devDependency` to point to it instead of npm by using something like `"kitbook": "link:../kitbook/packages/kitbook",` then run `pnpm package:watch` in Kitbook to keep it updating on changes. 32 | 33 | [//begin]: # "Autogenerated link references for markdown compatibility" 34 | [0-roadmap|Roadmap]: src/docs/9-maintainer-notes/0-roadmap.md "Roadmap" 35 | [//end]: # "Autogenerated link references" 36 | -------------------------------------------------------------------------------- /packages/kitbook/src/lib/plugins/rpc/get-svelte-modules.ts: -------------------------------------------------------------------------------- 1 | import type { ModuleNode, ViteDevServer } from 'vite' 2 | import type { SvelteModules } from '../../kitbook-types' 3 | import { get_sfc_list } from './get-sfc-list.js' 4 | 5 | export async function get_svelte_modules(server: ViteDevServer, root: string): Promiseexamples/index.tsts
-------------------------------------------------------------------------------- /packages/kitbook/src/lib/routes/[...file]/frame/FramePanes.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |examples/index.tsts
19 | {#if $showTreeDesktop && $treeDesktopPixels > 50}
20 |
25 | {/if}
26 |
27 |
46 |
47 | {#if dragging}
48 |
49 | {/if}
50 |
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/viewer/focused/DocumentInPicture.composition:
--------------------------------------------------------------------------------
1 |
9 |
10 |
16 |
17 | {#if window.self !== window.top}
18 | {
31 | $showTreeDesktop = true
32 | dragging = true
33 | }}
34 | on:stopdragging={() => (dragging = false)}
35 | on:updatewidth={({ detail: { pixels } }) => {
36 | $treeDesktopPixels = clamp(pixels, 0, innerWidth)
37 | }}>
38 |
41 |
42 |
43 |
44 |
19 | I'm in an iframe so the API won't work. Click the in the upper right corner of this composition to try me.
20 |
21 | {/if}
22 |
23 |
25 |
26 |
27 | {#if pictureWindow}
28 |
29 |
30 |
31 | {/if}
32 |
33 |
34 | Put {number} in the picture window
35 |
36 |
2 | 
Visual Regression Report
2 changed snapshots for kitbook-template
4 | 5 |
6 |
7 | | new | old | diff |
8 | | - | - | - |
9 | | [routes/(app)/+page](https://kitbook-template-git-visual-regression-comparison-polylingual.vercel.app/kitbook/routes/(app)/+page) - First-Mobile | | |
10 | | /+page/First-Mobile-actual.png) | /+page/First-Mobile-expected.png) | /+page/First-Mobile-diff.png) |
11 | | [routes/(app)/+page](https://kitbook-template-git-visual-regression-comparison-polylingual.vercel.app/kitbook/routes/(app)/+page) - First-Tablet | | |
12 | | /+page/First-Tablet-actual.png) | | |
13 |
14 |
15 | examples/index.tsts
-------------------------------------------------------------------------------- /packages/kitbook/src/lib/components/errorBoundary/createBoundary.ts: -------------------------------------------------------------------------------- 1 | // From @crownframework/svelte-error-boundary 2 | import { writable } from 'svelte/store' 3 | 4 | const GUARDED_BLOCK_FNS = ['c', 'l', 'h', 'm', 'p', 'a', 'i', 'o', 'd'] 5 | 6 | export function createBoundary(Component) { 7 | if (Component.$$render) { 8 | const render = Component.$$render 9 | Component.$$render = (result, props, bindings, slots) => { 10 | const error = writable(undefined) 11 | 12 | try { 13 | return render(result, { error, ...props }, bindings, slots) 14 | } 15 | catch (e) { 16 | error.set(e) 17 | return render(result, { error, ...props }, bindings, {}) 18 | } 19 | } 20 | 21 | return Component 22 | } 23 | 24 | function guard(fn, onError) { 25 | return function guarded(...args) { 26 | try { 27 | return fn(...args) 28 | } 29 | catch (err) { 30 | onError(err) 31 | } 32 | } 33 | } 34 | 35 | return class ErrorBoundaryComponent extends Component { 36 | constructor(config) { 37 | const error = writable(undefined) 38 | 39 | config.props.$$slots.default = config.props.$$slots.default.map( 40 | slot => (...args) => { 41 | const guarded = guard(slot, error.set) 42 | const block = guarded(...args) 43 | 44 | if (block) { 45 | for (const fn of GUARDED_BLOCK_FNS) { 46 | if (block[fn]) 47 | block[fn] = guard(block[fn], error.set) 48 | } 49 | } 50 | 51 | return block 52 | }, 53 | ) 54 | 55 | super(config) 56 | 57 | this.$$set({ error }) 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/mdsvex-shiki-twoslash/src/index.test.ts: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs' 2 | import { dirname, resolve } from 'node:path' 3 | import { fileURLToPath } from 'node:url' 4 | import parserHTML from 'prettier/parser-html' 5 | import { format as prettier } from 'prettier' 6 | import { shikiTwoslashHighlighter } from '.' 7 | 8 | const _dirname = typeof __dirname !== 'undefined' 9 | ? __dirname 10 | : dirname(fileURLToPath(import.meta.url)) 11 | 12 | describe('mdsvex-shiki-twoslash', () => { 13 | const fixturesDirectory = resolve(_dirname, './fixtures') 14 | fs.readdirSync(fixturesDirectory).forEach((filename) => { 15 | if (!filename.includes('txt')) 16 | return 17 | 18 | const name = filename.replace('.txt', '') 19 | test(name, async () => { 20 | const fileContents = fs.readFileSync(`${fixturesDirectory}/${name}.txt`, 'utf8') 21 | const normalizedContents = fileContents.replace(/\r\n/g, '\n') // Replace CRLF with LF 22 | const SPLIT = '__SPLIT__' 23 | const [firstLine, code] = normalizedContents.replace('\n', SPLIT).split(SPLIT) 24 | const [lang, meta] = firstLine.replace(' ', SPLIT).split(SPLIT) 25 | const highlightedCode = await highlight(code, lang, meta) 26 | expect(highlightedCode).toMatchFileSnapshot(`${fixturesDirectory}/${name}.html`) 27 | }) 28 | }) 29 | }) 30 | 31 | const highlighter = shikiTwoslashHighlighter().highlighter 32 | 33 | async function highlight(code: string, lang?: string | undefined, meta?: string | undefined, format = false) { 34 | const highlighted = await highlighter(code, lang, meta) 35 | if (format) { 36 | return prettier(highlighted, { 37 | parser: 'html', 38 | plugins: [parserHTML], 39 | }) 40 | } 41 | return highlighted 42 | } 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: 🚀 New feature proposal 2 | description: Propose a new feature to be added to Kitbook 3 | labels: ['enhancement: pending triage'] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Thanks for your interest in Kitbook and taking the time to fill out this feature proposal! 9 | - type: checkboxes 10 | id: checkboxes 11 | attributes: 12 | label: Double-Check 13 | description: Before submitting the issue, please make sure you have done the following 14 | options: 15 | - label: Read the entire [Kitbook docs](https://kitbook.vercel.app). 16 | required: true 17 | - label: Check that there isn't [already an issue](https://github.com/jacob-8/kitbook/issues) that requests a similar feature. 18 | required: true 19 | - type: textarea 20 | id: feature-description 21 | attributes: 22 | label: Clear description of the requested feature 23 | description: What is it that you would like to see Kitbook offer and why? Do you intend to submit a PR for this feature? 24 | validations: 25 | required: true 26 | - type: textarea 27 | id: suggested-solution 28 | attributes: 29 | label: Suggested solution 30 | description: Here's how it could be implemented... 31 | validations: 32 | required: true 33 | - type: textarea 34 | id: alternative 35 | attributes: 36 | label: Alternative 37 | description: Concise description of any alternative solutions you've considered. 38 | - type: textarea 39 | id: additional-context 40 | attributes: 41 | label: Additional context 42 | description: Add any other helpful context or screenshots about the feature request. 43 | -------------------------------------------------------------------------------- /packages/kitbook/src/lib/plugins/rpc/rpc.plugin.ts: -------------------------------------------------------------------------------- 1 | import type { Plugin } from 'vite' 2 | import { createRPCServer } from 'vite-dev-rpc' 3 | import { RPC_NAME } from '../constants.js' 4 | import type { RPCFunctions } from '../../kitbook-types' 5 | import type { KitbookPluginContext } from '../vite.js' 6 | import { get_svelte_modules } from './get-svelte-modules.js' 7 | 8 | export function RPCPlugin({ config, rpc_functions }: KitbookPluginContext): Plugin { 9 | return { 10 | name: 'vite-plugin-kitbook:rpc', 11 | enforce: 'pre', 12 | apply: 'serve', // TODO: remove later once also getting modules from build 13 | 14 | configResolved(_config) { 15 | config = _config 16 | }, 17 | 18 | configureServer(server) { 19 | const rpc_server = createRPCServerexamples/index.tsts
26 |
27 |
41 |
36 | Loading variants...
37 |
38 | {:else}
39 |
40 | {/if}
41 |
42 |
47 |
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/plugins/vite.ts:
--------------------------------------------------------------------------------
1 | import type { Plugin, ResolvedConfig } from 'vite'
2 | import type { KitbookSettings, RPCFunctions } from '../kitbook-types'
3 | import { merge_user_settings_with_defaults } from './context/merge-user-settings-with-defaults.js'
4 | import { copy_kitbook_routes } from './context/copy-kitbook-routes.js'
5 | import { MainPlugin } from './main/plugin.js'
6 | import { ViewerPlugin } from './viewer/plugin.js'
7 | import { RPCPlugin } from './rpc/rpc.plugin.js'
8 | import { FilesPlugin } from './files/files.plugin.js'
9 |
10 | /**
11 | * 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.
12 | */
13 | export function kitbook(user_settings: Partial
23 |
54 |
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | // @ts-ignore - virtual import
2 | import { settings } from 'virtual:kitbook'
3 | import { groupColocatedModulesIntoPages, layoutLoad, pagesStore } from 'kitbook'
4 | import type { LayoutLoad } from './$types'
5 |
6 | /**
7 | * Vite glob patterns used for building your Kitbook. See https://vitejs.dev/guide/features.html#multiple-patterns.
8 | * Restrict these paths to be able to incrementally adopt Kitbook into your project.
9 | * Alternate extensions are not yet supported.
10 | * Kitbook changes in the future will cause this file to be regenerated. Your glob patterns will be preserved as long as you only edit the patterns inside the array brackets and nothing else (you should add the routes/kitbook/* path to your lint ignore).
11 | */
12 | const components = import.meta.glob(['/src/**/*.svelte'])
13 | const componentsRaw = import.meta.glob(['/src/**/*.svelte'], { query: '?raw', import: 'default' })
14 | const variants = import.meta.glob(['/src/**/*.variants.ts'])
15 | const variantsRaw = import.meta.glob(['/src/**/*.variants.ts'], { query: '?raw', import: 'default' })
16 | const compositions = import.meta.glob(['/src/**/*.composition'])
17 | const compositionsRaw = import.meta.glob(['/src/**/*.composition'], { query: '?raw', import: 'default' })
18 | const markdown = import.meta.glob(['/src/**/*.md', '/README.md'])
19 | const markdownRaw = import.meta.glob(['/src/**/*.md', '/README.md'], { query: '?raw', import: 'default' })
20 |
21 | export const _pages = groupColocatedModulesIntoPages({ components, componentsRaw, variants, variantsRaw, compositions, compositionsRaw, markdown, markdownRaw })
22 |
23 | let firstLoad = true
24 | if (firstLoad) {
25 | pagesStore.set(_pages)
26 | firstLoad = false
27 | }
28 |
29 | if (import.meta.hot) {
30 | import.meta.hot.accept((module) => {
31 | if (module?._pages)
32 | pagesStore.set(module._pages)
33 | })
34 | }
35 |
36 | export const load = layoutLoad({ pages: _pages, settings, mockedPageData: {} }) satisfies LayoutLoad
37 |
--------------------------------------------------------------------------------
/packages/kitbook/src/lib/viewer/focused/editor/getComponentPropsType.ts:
--------------------------------------------------------------------------------
1 | import { svelte2tsx } from 'svelte2tsx'
2 |
3 | // import { SvelteComponentTyped } from 'svelte'
4 | // import type { ComponentProps, SvelteComponent } from 'svelte'
5 |
6 | // continue learning from https://github.com/sveltejs/language-tools/blob/master/packages/svelte2tsx/src/emitDts.ts
7 | // will probably need to approach like https://github.com/fwouts/previewjs/blob/main/framework-plugins/svelte/src/svelte-reader.ts, and use https://www.typescriptlang.org/dev/typescript-vfs/
8 | // see also https://github.com/damianof/large-scale-apps-my-svelte-project/blob/main/my-component-library/svelte2tsx.index.js
9 |
10 | function getComponentPropsType(component: string) {
11 | const tsCodeForTypes = svelte2tsx(component, { filename: 'KitbookComponent', isTsFile: true, mode: 'dts' })
12 | return tsCodeForTypes
13 | }
14 |
15 | if (import.meta.vitest) {
16 | describe(getComponentPropsType, () => {
17 | test('simple', () => {
18 | const component = `
21 |
22 | on_click?.()}
28 | in:fly={{ delay: 0, duration: 300, x: 0, y: 50, opacity: 0.1, easing: backOut }}
29 | out:fade={{ duration: 500 }}>
30 | {#if dismissable && on_click}
31 |
35 | {/if}
36 |
37 | {#if message}
38 | {message}
39 | {/if}
40 |
53 |