Hi 👋,

Incredible work with this project! I started to use it an hour ago and have my project's documentation almost ready for deployment 😍!

I follow example 4 to order my sidebar items. Unfortunately, the sidebar categories & items are alphabetically sorted, ignoring my [1] naming convention.

It's an easy fix just above this line, by adding the following sort statement:

pages.sort((a, b) => a.rootPath < b.rootPath ? -1 : 1);

Let me know if you're ok with that fix and I'll open a PR for it.

Cheers,

Mike

When running pnpm svelte-kit dev after installing Vitebook I get this error:

node_modules/.pnpm/@[email protected]_5194bb94b14eb9287fa314cd5ea950ad/node_modules/@vitebook/client/dist/client/stores/pages.js:2:21: error: Could not resolve ":virtual/vitebook/pages" (mark it as external to exclude it from the bundle)
    2 │ import allPages from ':virtual/vitebook/pages';

I was able to workaround it by adding this to the vite config:

const config = {
  kit: {
    // ...
    vite: {
      optimizeDeps: {
        exclude: ["@vitebook/client"],
      },
    },
  },
};

Note: the issue only appears with pnpm

So from a clean repo clone, running pnpm install is fine up until it does npm i --prefix docs, at which point, it errors as follows

When I go into package.json and change the postinstall script from npm i to pnpm install, it gets stuck in a recursive post-install. When I then revert the package.json postinstall script, it successfully runs

so assuming JQ is installed, the bash replication would be as follows

git clone https://github.com/vitebook/vitebook.git ~/projects/vitebook_unique_new_folder
cd ~/projects/vitebook_unique_new_folder
pnpm install # fail
mv package.json package.json.old
jq '.scripts.postinstall="pnpm install --prefix docs"' package.json.old > package.json
pnpm install # CTRL+C after a couple of recursions
rm package.json && mv package.json.old package.json
pnpm install # success

Need to speak with Antfu or Patak but it would awesome to include a Vitest integration so you can see your UI components tests right in the browser! Maybe expose it via a page addon. There's endless possibilities here so need to think it through.

Environment:
Windows 11 64bit

steps:
npm init svelte@next my-app
cd my-app
npm install
npm init vitebook
? Select a framework: ... svelte

? Select a theme: ... blank

? Features: ... tailwind

now when running the following i get an error:
npm run vitebook:dev

FYI that AWS Lambda is a little slow to jump to Node 16 so anyone deploying anything to an environment utilizing Lambda (Vercel in my case: vercel/community#37) can't add @vitebook-core to their package.json. Is Node 16 really needed or can you downgrade the minimum to v14?

Vercel build error:

Config:

export default defineConfig<DefaultThemeConfig>({
  include: ['src/**/*.vitebook.md', 'src/**/*.story.vue'],
  plugins: [
    vueMarkdownPlugin(),
    vuePlugin({ appFile: 'App.vue' }),
    clientPlugin(),
    defaultThemePlugin(),
    vue({ include: /.(md|vue)/ })
  ],
  site: {
    title: 'Enra v3 Vitebook Components',
    description: 'Enra v3 Vitebook Components',
    theme: {},
  },
});

As soon as I include a single markdown file or component I get the error.

Hello i am new user. Is it bag ?
reproduce

npm run vitebook:dev

If i install first
npm init vitebook
npm install
work fine

Requirements

• #2

Background

Haven't thought about this too much yet, but the idea is very loosely similar to Storybook Actions. It'd be much simpler to forward the event logs to the browser's console instead of dealing with static object snapshots in an addon. Hmmmm.... ❓ I guess the problem is that it'd clog up the console, maybe an addon where you can simply turn on/off certain events and anything checked will be forwarded 🤔

I noticed the default theme's ordered lists render's list item markers as squares rather than decimals.

The relevant CSS is located here.

Hello,

this seems more like a vite issue, though this project has this problem as well.

.I tried to run https://github.com/Myrmod/svelte-babylon npm run vitebook:dev on windows 11 with powershell and node17.7.
The following error occurs:

PS C:\Users\pasca\Desktop\test\svelte-babylon> npm run vitebook:dev  

> [email protected] vitebook:dev
> vitebook dev

 > error: The entry point "C:/Users/pasca/Desktop/test/svelte-babylon/.vitebook/config.js" cannot be marked as external


 Error: Build failed with 1 error:
error: The entry point "C:/Users/pasca/Desktop/test/svelte-babylon/.vitebook/config.js" cannot be marked as external
    at failureErrorWithLog (C:\Users\pasca\Desktop\test\svelte-babylon\node_modules\@vitebook\core\node_modules\esbuild\lib\main.js:1475:15)
    at C:\Users\pasca\Desktop\test\svelte-babylon\node_modules\@vitebook\core\node_modules\esbuild\lib\main.js:1133:28
    at runOnEndCallbacks (C:\Users\pasca\Desktop\test\svelte-babylon\node_modules\@vitebook\core\node_modules\esbuild\lib\main.js:923:63)
    at buildResponseToResult (C:\Users\pasca\Desktop\test\svelte-babylon\node_modules\@vitebook\core\node_modules\esbuild\lib\main.js:1131:7)
    at C:\Users\pasca\Desktop\test\svelte-babylon\node_modules\@vitebook\core\node_modules\esbuild\lib\main.js:1240:14
    at C:\Users\pasca\Desktop\test\svelte-babylon\node_modules\@vitebook\core\node_modules\esbuild\lib\main.js:611:9
    at handleIncomingPacket (C:\Users\pasca\Desktop\test\svelte-babylon\node_modules\@vitebook\core\node_modules\esbuild\lib\main.js:708:9)
    at Socket.readFromStdout (C:\Users\pasca\Desktop\test\svelte-babylon\node_modules\@vitebook\core\node_modules\esbuild\lib\main.js:578:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:324:12) {
  errors: [
    {
      detail: undefined,
      location: null,
      notes: [],
      pluginName: '',
      text: 'The entry point "C:/Users/pasca/Desktop/test/svelte-babylon/.vitebook/config.js" cannot be marked as external'
    }
  ],
  warnings: []
}

I am currently trying to fix this problem in the afforementioned library. If you got any tipps, I would be happy to hear them.

Best regards

I tried changing my configDir to docs and when running vitebook dev, I get the following error:

 Error: ENOENT: no such file or directory, lstat '/Users/tkmam1x/Desktop/jarvis-components-ts/.vitebook'
    at Object.lstatSync (node:fs:1516:3)
    at Object.lstatSync (file:///Users/tkmam1x/Desktop/jarvis-components-ts/node_modules/@vitebook/core/dist/node/cli/run.js:12004:72)
    at resolveRelativePath (file:///Users/tkmam1x/Desktop/jarvis-components-ts/node_modules/@vitebook/core/dist/node/cli/run.js:17940:134)
    at resolveUserAppConfig (file:///Users/tkmam1x/Desktop/jarvis-components-ts/node_modules/@vitebook/core/dist/node/cli/run.js:18997:19)
    at resolveApp (file:///Users/tkmam1x/Desktop/jarvis-components-ts/node_modules/@vitebook/core/dist/node/cli/run.js:18932:37)
    at devCommand (file:///Users/tkmam1x/Desktop/jarvis-components-ts/node_modules/@vitebook/core/dist/node/cli/run.js:19010:21)
    at CAC.runDevCommand (file:///Users/tkmam1x/Desktop/jarvis-components-ts/node_modules/@vitebook/core/dist/node/cli/run.js:19047:3)
    at CAC.runMatchedCommand (file:///Users/tkmam1x/Desktop/jarvis-components-ts/node_modules/@vitebook/core/dist/node/cli/run.js:17262:34)
    at CAC.parse (file:///Users/tkmam1x/Desktop/jarvis-components-ts/node_modules/@vitebook/core/dist/node/cli/run.js:17189:12)
    at file:///Users/tkmam1x/Desktop/jarvis-components-ts/node_modules/@vitebook/core/dist/node/cli/run.js:19085:9 {
  errno: -2,
  syscall: 'lstat',
  code: 'ENOENT',
  path: '/Users/tkmam1x/Desktop/jarvis-components-ts/.vitebook'
} 

It looks like Vitebook is still looking for the default .vitebook folder. I tried deleting my .cache and .temp folder and reinstall node_modules in case something was getting cached but no success there.

I'm using version 0.23.0 and my config.ts looks like:

import { clientPlugin, defineConfig } from '@vitebook/client/node';
import { vueMarkdownPlugin } from '@vitebook/markdown-vue/node';
import { vuePlugin } from '@vitebook/vue/node';
import { defaultThemePlugin, DefaultThemeConfig } from '@vitebook/theme-default/node';

export default defineConfig<DefaultThemeConfig>({
  srcDir: 'src/stories',
  configDir: 'docs',
  include: ['src/**/*.md', 'src/**/*.story.vue'],
  plugins: [vueMarkdownPlugin(), vuePlugin({ appFile: 'App.vue' }), clientPlugin(), defaultThemePlugin()],
  site: {
    title: 'Jarvis Components',
    description: '',
    theme: {
      sidebar: {
        style: 'docs',
      },
    },
    head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '../favicon.svg' }]],
  },
});

However, adding --configDir docs to the end of the dev strict in my package.json allows it to work as expected. So seems the flag isn't being passed from the config to the CLI correctly.

It would be neat to have a feature for searching through files right in the browser, similar to what we see in VSCode when pressing ctrl+p (Windows) or cmd+p (Mac).

Currently the vitebook:build throws an error when document is used within a component inside a story.

> vitebook build

[email protected]

🚨 Rendering 15 pages...

 ReferenceError: document is not defined
    at /home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:7643:16
    at Object.$$render (/home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:352:22)
    at Object.default (/home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:7671:60)
    at /home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:1142:36
    at Object.$$render (/home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:352:22)
    at /home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:7669:53
    at Object.$$render (/home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:352:22)
    at Object.default (/home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:1040:85)
    at /home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:1027:192
    at Object.$$render (/home/milln/projects/lettranslate-web-app/.vitebook/dist/server/entry-server.cjs:352:22)

Current workaround:

import { JSDOM } from "jsdom";

const dom = new JSDOM();
global.document = dom.window.document;
global.Node = dom.window.Node;

When I run yarn create vitebook in an existing project, it doesn't work

I created a Knobs Addon, borrowing heavily from rixo/svench and am having an issue with an additional button being created for the addon upon navigating between variants.

To replicate npm i -D vitebook-addons and create a story with

import { Knobs } from 'vitebook-addons';
...
<Variant name="Default" description="without knobs">
  Hello
</Variant>

<Variant name="Knobbed" description="with knobs">
  <Knobs
    input={{ myBool: false, myNum: 10, myStr: 'hello', myRange: '-10-10;5' }}
    let:output={{ myBool, myNum, myStr, myRange }}
  >
    {myBool},{myNum},{myStr},{myRange}
  </Knobs>
</Variant>

Svelte Component Events have null target field, so following line failed with Uncaught (in promise) TypeError: Cannot read properties of null (reading 'constructor')

Can you consider adding flex-direction: column to https://github.com/vitebook/vitebook/blob/main/packages/theme-default/src/client/layout/Page.svelte#L60-L64 so content doesn't always flow off to the sides w/o either a div wrapper or custom css?

Currently:

With flex-direction: column:

(Yes, I upgraded TW and my white is not white...)

Not sure if it's something with one of my dependencies causing this issue but most of the time when starting my dev servers I see this error:

I have to delete the .cache folder and then stop and restart the server in order to get it to work. Could be something with my project but seems like it doesn't even get as far as loading my stuff.

Hey 👋,

I have the following directories & files:

In services/docs/src/[1]introduction/[1]what-is-webstone-education.md, I have a relative link like so:

The best part? You get to [choose your own technology stack](./[3]build-your-own-curriculum.md) :tada:!

When I load Vitebook, it crashes with the following error:

services/docs dev: node:fs:585
services/docs dev:   handleErrorFromBinding(ctx);
services/docs dev:   ^
services/docs dev: Error: ENOENT: no such file or directory, open '/workspace/platform/services/docs/src/[1]introduction/%5B3%5Dbuild-your-own-curriculum.md'
services/docs dev:     at Object.openSync (node:fs:585:3)
services/docs dev:     at Object.readFileSync (node:fs:453:35)
services/docs dev:     at readRecentlyChangedFile (file:///workspace/platform/node_modules/.pnpm/@[email protected]/node_modules/@vitebook/core/dist/node/index.js:8294:22)
services/docs dev:     at filePathToRoute (file:///workspace/platform/node_modules/.pnpm/@[email protected]/node_modules/@vitebook/core/dist/node/index.js:8331:30)
services/docs dev:     at Object.parser.renderer.rules.link_open (file:///workspace/platform/node_modules/.pnpm/@[email protected]_fc6df10e6b401eecad6179f4f69ddf69/node_modules/@vitebook/markdown/dist/node/index.js:17063:23)
services/docs dev:     at Renderer.renderInline (file:///workspace/platform/node_modules/.pnpm/@[email protected]_fc6df10e6b401eecad6179f4f69ddf69/node_modules/@vitebook/markdown/dist/node/index.js:1000:32)
services/docs dev:     at Renderer.render (file:///workspace/platform/node_modules/.pnpm/@[email protected]_fc6df10e6b401eecad6179f4f69ddf69/node_modules/@vitebook/markdown/dist/node/index.js:1025:26)
services/docs dev:     at Renderer.parser.renderer.render (file:///workspace/platform/node_modules/.pnpm/@[email protected]_fc6df10e6b401eecad6179f4f69ddf69/node_modules/@vitebook/markdown/dist/node/index.js:17277:25)
services/docs dev:     at MarkdownIt2.render (file:///workspace/platform/node_modules/.pnpm/@[email protected]_fc6df10e6b401eecad6179f4f69ddf69/node_modules/@vitebook/markdown/dist/node/index.js:4746:28)
services/docs dev:     at MarkdownIt2.parser.render (file:///workspace/platform/node_modules/.pnpm/@[email protected]_fc6df10e6b401eecad6179f4f69ddf69/node_modules/@vitebook/markdown/dist/node/index.js:16914:20) {
services/docs dev:   errno: -2,
services/docs dev:   syscall: 'open',
services/docs dev:   code: 'ENOENT',
services/docs dev:   path: '/workspace/platform/services/docs/src/[1]introduction/%5B2%5Dbuild-your-own-curriculum.md'
services/docs dev: }
services/docs dev: Failed
/workspace/platform/services/docs:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @webstone/[email protected] dev: `vitebook dev -p 8080`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.
gitpod /workspace/platform $ 

If I remove the .md ending, the page loads but the link is still broken. I'd like to keep the .md extension so that links also work when someone views the file in GitHub.

I thought I'd report this here before I start to investigate and will follow up with any findings I may have.

This bug is back.

Using the latest version of @vitebook/vue: 0.23.4

Config is exactly the same as the Playground example. Only happens when I add

    vue({ include: /\.(md|vue)/ }),

as a plugin.

Hi!

I tried loading the Vitebook Preact: https://stackblitz.com/github/vitebook/vitebook/tree/main/examples/preact
but unfortunately it returns an error:

Also: I was wondering if you could provide a basic demo that uses JS/JSX files, not just TSX.

Thanks!

⚠️ OUTDATED

Page addons will be an extension of Vitebook plugins that are simply passed to the client plugin.

import { defineConfig } from '@vitebook/client/node';
import { clientPlugin } from '@vitebook/client';

export default defineConfig({
  // ...
  plugins: [
    clientPlugin({
      addons: [/** ADDON PLUGINS HERE */]
    })
  ]
});

The virutal route :virtual/vitebook/addons will expose all addons client-side just like pages. Again, similarly to pages all of them will be lazy loaded as the user navigates through to each addon.

Each addon will be composed of both a plugin (required) and client-side UI (required). The client-side at minimum must be expose a Svelte component (path is included in the plugin) to render in the addons tab. It's expected that any page addon expose the data it needs also through virtual routes. For example, an addon in the transform step could parse a file to gather some API docs, expose that data through :virtual/vitebook/addons/api, and import it in the client-side component to render some sweet component docs.

Some work has been started on this feature such as exposing the virtual addons route in the client plugin, and defining the types for PageAddon and the PageAddonPlugin. Need to experiment actually creating some addons to see how everything wires up.

References

• PageAddon
• PageAddonPlugin
• ClientPluginOptions

Hello - really excited to try this out.

Is there any guidance on how to include libraries like tailwind and daisyUI? I seem to have trouble getting styles to show up in the component browser unless I add the CDNs to the HEAD using instructions here:

https://vitebook.dev/introduction/configuration.html#site-head.

Otherwise, I sometimes get styles showing in the browser, and sometimes not, and I haven't been able to determine the pattern.

Is there a way to ensure the vite processing pulls these libraries in as appropriate, ideally with only the classes needed? I'm new to vite so digging into the vitebook code is slow going.

Thx.

I started with a new minimal Vue 3 Vite project and added Vitebook but was only able to get it to work when removing plugins: [vue()] from my vite.config.ts. This works fine until I try to build my library. Is there any way around this?

Have some strange problem with import of tailwind.
The component work in vitebook, only the tailwind css is missing.

I want to use one file (src/global.css) with the global styles and not the same content again in config/vitebook/App.svelte.

When i use the import-syntax i got no error, but tailwaind is not included. When i run the similar code in my app, it is included and works fine.

Does not work:
config/vitebook/App.svelte

<script lang="ts">
  import type { SvelteComponent } from 'svelte'
  import '~/global.css'
  export let component: typeof SvelteComponent
</script>
<svelte:component this={component} />

The global.css is loaded i can import css from '~/global.css'; console.log(css); and view its content.

Does work:
config/vitebook/App.svelte

<script lang="ts">
  import type { SvelteComponent } from 'svelte'
  export let component: typeof SvelteComponent
</script>
<svelte:component this={component} />
<style global>
  @tailwind utilities;
  @tailwind components;
  @tailwind base;
  // ... additional global styles
</style>

My configs are in a subdir config only tsconfig.json is in root.

config/vitebook/config.ts

export default defineConfig<DefaultThemeConfig>({
  alias: {
    // source is in  src/
    '~/': '/src/'
  },

  cacheDir: '.tmp/vitebook/cache',
  outDir: 'doc',
  tmpDir: '.tmp/vitebook/tmp',

  include: [
    // my stories are in vitebook/
    'vitebook/**/*.md',
    'vitebook/**/*.story.svelte'
  ],

  plugins: [
    svelteMarkdownPlugin(),
    clientPlugin({ appFile: 'App.svelte' }),
    defaultThemePlugin(),
    svelte({
      preprocess: sveltePreprocess({
        sourceMap: true,
        typescript: true,
        postcss: {
          plugins:[
            tailwindcss({
              content: [
                './src/**/*.{svelte,ts}'
              ],
              //...
            }),
            autoprefixer()
          ]
        }
      })
    })
  ],

  site: {
    title: 'title',
    description: 'text',
    theme: {}
  }
})

In vitebook:dev mode it works fine but the deployed version with vitebook:build it shows an error + the sidebar is not showing. There is also a css media query that makes it invisible.

Do you have any examples of how to use this with a SvelteKit Typescript project?

Im noticing the few components in my Vue library that are using other third party libraries are failing to render in dev mode due to errors like:
TypeError: Cannot read properties of undefined (reading 'switchRef')
TypeError: Cannot set properties of null
as well as seeing warnings like
provide() can only be used inside setup().

The two libraries in question here are @headlessui/vue and vuedraggable. I have all of this working in a Vitepress project but was hoping to switch to Vitebook as I love the flexibility and focus on component libraries.

Basically wondering if there are some extra steps I need to take to view these components when in development. The components I'm developing are intended to be used client side and was hoping to keep them built that way.

Love the project, keep up the great work!

Hi,
I'm running in the following problem, if I use {} brackets in my codeblocks in markdown:

1:36:43 PM [vite] Internal server error: Transform failed with 1 error:
<stdin>:23:766: error: Expected identifier but found "/"
  Plugin: @vitebook/markdown-preact
  File: /Users/xxx/src/components/dialog/usage.md
      at failureErrorWithLog (/Users/xxx/node_modules/esbuild/lib/main.js:1475:15)
      at /Users/xxx/node_modules/esbuild/lib/main.js:1264:29
      at /Users/xxx/node_modules/esbuild/lib/main.js:611:9
      at handleIncomingPacket (/Users/xxx/node_modules/esbuild/lib/main.js:708:9)
      at Socket.readFromStdout (/Users/xxx/node_modules/esbuild/lib/main.js:578:7)
      at Socket.emit (node:events:520:28)
      at addChunk (node:internal/streams/readable:315:12)
      at readableAddChunk (node:internal/streams/readable:289:9)
      at Socket.Readable.push (node:internal/streams/readable:228:10)
      at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

I try to render the following markdown file:

- Some points whatever

```js
const myConst = 1;

function aFunction() {
  // ...
}
```

This is my config:

import preact from "@preact/preset-vite";
import { clientPlugin, defineConfig } from "@vitebook/client/node";
import { preactMarkdownPlugin } from "@vitebook/markdown-preact/node";
import { preactPlugin } from "@vitebook/preact/node";
import { defaultThemePlugin, DefaultThemeConfig } from "@vitebook/theme-default/node";
import { shikiMarkdownPlugin } from "@vitebook/markdown-shiki/node";

export default defineConfig<DefaultThemeConfig>({
    include: ["src/**/*.md", "src/**/*.story.{js,jsx,ts,tsx}"],
    plugins: [
        shikiMarkdownPlugin(),
        preactMarkdownPlugin({
            code: { lineNumbers: false },
        }),
        preactPlugin({ appFile: "App.tsx" }),
        clientPlugin(),
        defaultThemePlugin(),
        preact({ include: /\.([j|t]sx?|md)$/ }),
    ],
    site: {
        title: "xxx",
        description: "xxx.",
        theme: {
            remoteGitRepo: {
                url: "vitebook/vitebook",
            },
        },
    },
});

Hi,
Ran into an issue when trying to make a vitebook build with sveltekit

npm run vitebook:build
npm run vitebook:preview

serves a build that gives a js error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'classList')

This can be reproduced in the official svetelkit example

by running the build and preview commands.

Thanks in advance for any help

I just tried integrating vitebook into a project to replace storybook and it looks very promising so far, I'm really enjoying the speed 🚀

There is just one problem since the project uses vite-svg-loader. I receive the following error:

ENOENT: no such file or directory, open '/404.svg'

Reproduction: https://stackblitz.com/edit/github-t9kpy4-dsmzwj

I'm trying to use vitebook in a project that uses WindiCSS for styling components.

While WindiCSS is pretty similar to tailwind, I suspect that the setup might be considerably different since WindiCSS generates classes on demand. Are there any resources available that might help with this setup?

Having a component with an image like below gives different results with the Vitebook server and the SvelteKit server.

In SvelteKit this works:

<img src="/favicon.png" />

In Vitebook you need to prepend static:

<img src="/static/favicon.png" />

There is probably a way to configure that in the vite options but also the SvelteKit example should be updated.

How do we utilize the [1]folder/[1]doc.md naming scheme seen in Vitebook docs? I tried and end up with ugly "1 Introduction" titles.

Unfortunately the SvelteKit example doesn't work when installing the dependencies with pnpm i. There seems to be an issue where the dependencies don't get detected.

When I install the dependencies manually I get different errors for other dependencies. See below:

First Error

 Error: 🚨 @vitebook/client requires @sveltejs/vite-plugin-svelte

Second Error

 Error: Failed to resolve force included dependency: just-throttle

Third Error

 Error: Failed to resolve force included dependency: just-debounce-it

This is a massive feature that's on my hit list. It can be quite draining when trying to build out an application and waiting for certain data to be available from the backend, or simply wanting to view components in certain states such as what happens if the network is slow or what if the API returns an error. I know you can use Chrome Devtools for changing network connection speed but that slows down the whole page which includes code irrelevant to your component (eg: Storybook UI or Vitebook theme). This can be super frustrating sitting around waiting to see how some UI components behaves for like 10s, and then every retry is another 10s!

Initial idea is a mocks folder (eg: .vitebook/http) that contains dynamic URL paths as file names (/api/users/[id]), combine this with the Vite dev server, and an integration with something like Polly.js, we could intercept those requests (defined by file names) and return mock responses.

The files inside .vitebook/http could have a similar signature to something like Lambda functions, http request in, response out. The hope is we can also expose some additional helpers to simulate slow connections etc. Not sure how that would work yet but shouldn't be impossible.

When integrating Vitebook with the Vitesse template it causes this error:

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension

When adding "type": "module" to the package.json it causes this error:

TypeError: Layouts is not a function

Can Vitebook support projects without "type": "module" in their package.json?

Requirements

• #2

Background

This is still in the initial design phase. First step is figuring out what API would be most developer friendly between wire it up yourself vs. Vitebook wiring it up.

To keep it super simple, since Vitebook stories are just framework components, maybe something like this could work...

Svelte example

<script>
import Textfield from './TextField.svelte';
import { ControlsAddon } from '@vitebook/client/addons/controls';

let props = {
  title: '',
  active: false,
};
</script>

<TextField {...props} />

<!-- Anything inside of here will be teleported (aka "portal") inside the controls addon section -->
<ControlsAddon>
  <input type="text" bind:value={props.title} />
  <input type="checkbox" bind:value={props.active} />
</ControlsAddon>

Vitebook is slowly growing, but I'm left wondering what features are missing for it to be a truly suitable alternative to Storybook. How does it feel for most of you today? I can come up with stuff but I'd rather hear from all of you! I'm opening this issue for everyone to chime in, and let me know what you'd love to see. Not promising we'll implement everything, but it'll be great to hear more thoughts.

I do want to stress that Vitebook is an alternative to Storybook, please don't misinterpret 'alternative' for 'clone'. Let's try to learn from Storybook and do things in a different way. Sometimes you still might reach for Storybook, but the times where you have different requirements which may be simplicity, speed, and whatever else, Vitebook can be there for you.

Feel free to leave your feedback, thoughts, suggestions, and ideas down below👇

💭 Maybe we should create a Discord channel or open up GitHub discussions?

Currently we have file based routing based on the location of the stories. The downside of this is that you have to click your way through the tree which can be a bit annoying (if you have a lot of nesting).

It would be cool to have something like in storybook where you can define your own hierarchy with components and pages.

https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy

export default {
  /* 👇 The title prop is optional.
  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
  * to learn how to generate automatic titles
  */
  title: 'Design System/Atoms/Button',
  component: ButtonComponent,
};

Requirements

• #2

Background

The intention of this addon is to parse your files, determine the component API for props/methods/events, and then to render it beautifully inside a page addon.

Each framework generally has a ways exposing this information via TypeScript...

• Preact: props should be made available by the component function's props argument types.
• Svelte: docs
• Vue: This might be tricky because there's many ways to define a Vue component, maybe the parser and community can be of help here.

Designs

See #2.

Hi, doing one of the following is not working:

• npm init vitebook my-app
• select Svelte / TS / Prettier / Tailwind
• cd my-app
• npm i
• npm run vitebook:dev

OR the same steps for pnpm

I get the following result and have no idea what to do.

Im on Win10, Node 16, current pnpm

error: The entry point "C:/Dev/tests/my-app/.vitebook/config.ts" cannot be marked as external

 Error: Build failed with 1 error:
error: The entry point "C:/Dev/tests/my-app/.vitebook/config.ts" cannot be marked as external
    at failureErrorWithLog (C:\Dev\tests\my-app\node_modules\esbuild\lib\main.js:1475:15)
    at C:\Dev\tests\my-app\node_modules\esbuild\lib\main.js:1133:28
    at runOnEndCallbacks (C:\Dev\tests\my-app\node_modules\esbuild\lib\main.js:923:63)
    at buildResponseToResult (C:\Dev\tests\my-app\node_modules\esbuild\lib\main.js:1131:7)
    at C:\Dev\tests/my-app\node_modules\esbuild\lib\main.js:1240:14
    at C:\Dev\tests/my-app\node_modules\esbuild\lib\main.js:611:9
    at handleIncomingPacket (C:\Dev\tests\my-app\node_modules\esbuild\lib\main.js:708:9)
    at Socket.readFromStdout (C:\Dev\tests\my-app\node_modules\esbuild\lib\main.js:578:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12) {
  errors: [
    {
      detail: undefined,
      location: null,
      notes: [],
      pluginName: '',
      text: 'The entry point "C:/Dev/tests/my-app/.vitebook/config.ts" cannot be marked as external'
    }
  ],
  warnings: []
}

When I only pick Svelte without any options I get

error: The entry point "C:/Dev/tests/test-3/.vitebook/config.js" cannot be marked as external

Vitebook can't resolve the $app path in SvelteKit projects.

Failed to resolve import "$app/env" from "src/lib/stores/storage.ts". Does the file exist?
1  |  import { browser } from "$app/env";

I guess this folder is not available in Vitebook since it is located at .svelte-kit/dev/runtime/app which is not being generated by Vitebook. Is there a way to workaround it or to mock this?

I was very excited when I found Vitebook! Thanks for starting the project.

Is it any way to see what it will look like?

Hello,

so far I am really happy using Vitebook. Thanks for your work on that!

I want to publish my documentation on a website. There is an issue though with the default theme, that I cannot set a global footer to all pages (at least I couldn't find a way to do it). Since I am located in germany I need to have an impressum. Furthermore I need to be able to add a privacy page.

If it's already possible how can I do this, (yes a custom theme is an option)? If not my suggestion would be a simple property like site.footer where I could place any links I want. Similar to the sidebar.items array.

Best regards

In my experience this is the easiest way to add an awesome search experience to your site. There's prior art in Vitepress we can look at.

I tried to make a React app like your guide in Readme, but seemingly doesn't work. Hop your team can have at least one! Thank you for the awesome tools!

This is true at least in the markdown-svelte package. If you attempt to do the following it will fail:

<script>
import Input from './Input.svelte';
</script>

<Input type="text" />

It complains that the block isn't closed. It doesn't matter what the file is called, it is the imported name that matters. You can work around it for now by importing with a different name, but it is a confusing issue to run into. So this works:

<script>
import TempInput from './Input.svelte';
</script>

<TempInput type="text" />

Other self-closing tags also suffer from this, like Img or Br.

npm init vitebook vitebook

Select Vue & Markdown.

npm install
echo "# Hello World" > src/test.md
npm run vitebook:dev

The Markdown file will not show up.