Discussion: make Vite more friendly to library development (like storybook)

[csr632]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

I am developing a component library, using vite as a local dev environment (like storybook). I also build the demos with vite and deploy it, so that our designers can see my demos.

In my case, the component library consists of many component, and each component is a separate package. So it is a monorepo, like this :

packages
├── button
│   ├── demos
│   │   ├── _theme.tsx
│   │   ├── demo1$.tsx
│   │   ├── demo2$.tsx
│   │   └── index$.md
│   ├── src
│   │   ├── Card
│   │   │   ├── demos
│   │   │   │   ├── demo1.tsx
│   │   │   │   └── demo2.tsx
│   │   │   ├── index.tsx
│   │   │   └── style.module.css
│   │   ├── index.tsx
│   │   └── style.module.css
│   ├── declare.d.ts
│   ├── index.html
│   ├── package.json
│   ├── tsconfig.json
│   └── vite.config.ts
└── card
    ├── demos
    │   ├── _theme.tsx
    │   ├── demo1$.tsx
    │   ├── demo2$.tsx
    │   └── index$.md
    ├── src
    │   ├── index.tsx
    │   └── style.module.css
    ├── declare.d.ts
    ├── index.html
    ├── package.json
    ├── tsconfig.json
    └── vite.config.ts

I make it works (see the reproduction repo, but there is some flaws and hacks in it. It is because that vite keeps assuming the whole project is a vite app. (In my case, it is actually a package for my component).

Here is some flaws that make vite not an ideal for library development. You can observe them in the reproduction repo.

1. I want to move the index.html into /demos, because it is config for demos, not the component package. I am not able to do that because I have set vite root to /(because demos import things from /src), and vite hard-code html path as ${root}/index.html. (You can try to move it in the reproduction repo)
2. Vite reads #{root}/package.json and "treat it like a config for vite". But in the case of library development, it is made for the npm package!
   1. I am forced to put @pika/react and @pika/react-dom inside package.json#dependencies. All users of my package will install them! I have created an issue at vite-plugin-react.
   2. The "package.json#sideEffects" has effects on vite build, which is unexpected. After investagte, it is because the rollup-plugin-node-resolve used by vite accidentally reads it.
   3. As the comment points out, "type": "module" inside package.json also has surprising effects on vite.
3. I have to manually list many devDependencies inside vite.config.ts#optimizeDeps#include. Because:
   • Dependencies of my library demos should be devDependencies of the package. But vite only optimizes package.json#dependencies by default.

I love vite. I think it can be a very handy tool for library development. (Better than storybook!)

Reproduction

https://github.com/csr632/test-vite/tree/lib-monorepo

Based on the reproduction repo, how can the workflow and file structure be improved?

System Info

• required vite version: 1.0.0-rc.4
• required Operating System: MacOS
• required Node version: 12.x

[stefandesu]

Another issue that I found that might be relevant for this is that if you would like to use ES modules outside of Vite (which you can do by adding "type": "module" to your package.json), Vite can't load the vite.config.js file anymore. My workaround currently is to rename it to vite.config.cjs and specify it via the --config flag.

[csr632]

Another issue that I found that might be relevant for this is that if you would like to use ES modules outside of Vite (which you can do by adding "type": "module" to your package.json), Vite can't load the vite.config.js file anymore. My workaround currently is to rename it to vite.config.cjs and specify it via the --config flag.

I have added your statement into the issue body.

[intrnl]

I've honestly never encountered a package where the demo's config and (dev) dependencies are declared in the root package directory. You might want to move it all to the demo folder entirely (example), or move each of the demo into its own (private) package

[csr632]

@intrnl
In the example you give, how can you run this demo project using the /src/source-code? This demo project seems to be a seperate yarn project(it has its own yarn.lock). If that is the case, I will have to manually yarn link the source project into each demo projects.

[intrnl]

wished i found a better example, but here it is

• npm supports the file: protocol
• yarn and pnpm also supports the link: protocol
• yarn v2 has the additional portal: protocol

[csr632]

Related issue: #330

[peey]

Related Issue and PR on storybook: storybookjs/storybook#10654, storybookjs/storybook#13384

[csr632]

With Vite 2.x, we can now achieve ideal monorepo layout:

packages
├── button
│   ├── demos
│   │   ├── demo1.tsx
│   │   └── demo2.tsx
│   ├── src
│   │   ├── declare.d.ts
│   │   ├── index.tsx
│   │   ├── style.module.css
│   │   └── tsconfig.json
│   ├── package.json
│   └── tsconfig.json
├── card
│   ├── demos
│   │   ├── demo1.tsx
│   │   └── demo2.tsx
│   ├── src
│   │   ├── declare.d.ts
│   │   ├── index.tsx
│   │   ├── style.module.css
│   │   └── tsconfig.json
│   ├── package.json
│   └── tsconfig.json
└── demos
    ├── pages
    │   ├── _theme.tsx
    │   ├── $.tsx
    │   └── 404$.tsx
    ├── index.html
    ├── package.json
    ├── tsconfig.json
    └── vite.demos.ts

I have updated the demo repo: https://github.com/csr632/test-vite/tree/lib-monorepo

I think all problems in this issue are solved. Closing this issue...

[blowsie]

storybookjs/storybook#14024

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.