jacob-8/kitbook

Documentation, Prototyping, Inspection & Testing Workbench Tool for Svelte (SvelteKit Storybook alternative)

kitbook's Issues

Instrument Panel doesnt work

expected

instrument panel should have a input with the label name in which edit the contents of the button

actual

nothing is shown in instrument panel

repro

• git clone https://github.com/sacrosanctic/ui-test
• pnpm i
• pnpm dev
• goto http://127.0.0.1:4321/lib/Button

integration with tailwindcss

Is it possible to see my components with tailwindcss classes applied?

Typescript

Double-Check

• Read the entire Kitbook docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Kitbook version

1.0.0-beta.31

Describe the bug

We use Kitbook in our Sveltekit based EShop and we are very happy about it, it is such a powerful and useful tool and became a vital part of our stack. Last week we realized that our staging server does not load the Kitbook giving a 500. It loads but perfectly on our local machines.

This is the error:

This file is being treated as an ES module because it has a '.js' file extension and '/Users/azin/dev/kitbook/packages/kitbook/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at isFileSystemCaseSensitive (file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:6475:43)
    at getNodeSystem (file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:6263:48)
    at file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:6684:20
    at src/compiler/sys.ts (file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:6690:11)
    at __init (file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:116:60)
    at src/compiler/_namespaces/ts.ts (file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:130179:9)
    at __init (file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:116:60)
    at src/typescript/_namespaces/ts.ts (file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:190571:9)
    at __init (file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:116:60)
    at src/typescript/typescript.ts (file:///Users/azin/dev/kitbook/packages/kitbook/build/server/chunks/Tools.svelte_svelte_type_style_lang-qhah-Kye.js:190582:9)

After digging deep into the problem I found out that it comes out to importing typescript in CodeMirror.svelte

  import ts, { type CompilerOptions } from 'typescript'

Now, this works fine when we run the server using vite preview command. The problem only appears when we use the node adapter in svelte.config.js and then start the server with node build command.

Reproduction

I made a repo that shows the problem.

Clone the repo:

https://github.com/azinazadi/kitbook-ts-issue.git

In this repo I made these changes:

1. Use adapter-node in svelte.config.js

2. I removed everything extra from CodeMirror.svelte and just left the import there, to create a minimum failing example.

Build it:

# Navigate to the 'kitbook' package directory
cd packages/kitbook

# Install all required dependencies using pnpm
pnpm install

# Build the project
pnpm build

Run the node server

node build

Now when you open the localhose:3000, you will see the 500 error.

System Info

I run on Mac OS M3, Sonoma 14.3
Node 20.14.0
pnpm 9.1.0

Why is this happenig?

As I understood it when you run the server using vite preview, the vite server handles the imports better and takes better care of modules. The Node server apparently does a more basic job which leads to this problem.

🈷️ Svelte 5 Migration

Double-Check

• Read the entire Kitbook docs.
• Check that there isn't already an issue that requests a similar feature.

Clear description of the requested feature

With the recent Svelte Summit Spring talk, Svelte 5 has been moved into Release Candidate (RC) stage. How hard would it be to migrate Kitbook from 4 -> 5 ?

Suggested solution

Create breaking version change for Kitbook to use for Svelte v5

Alternative

No response

Additional context

No response

Use CSS scrollbar-gutter for modal

Improve body noscroll option for opening modal by learning from https://stackblitz.com/edit/js-mbbmgk?file=style.css

iFrame support for responsive testing (media queries)

extends kitbook tsconfig.json

When I run npm run kitbook it says to add "extends": "./.svelte-kit-kitbook/tsconfig.json"
to tsconfig.json file.

Should I replace my extends value "./.svelte-kit/tsconfig.json"?

Header styles look strange on mobile

On my IPhone in Safari, the header styles look fine on white backgrounds. However when the background changes it starts to look unpleasant.