Atelier

Weclome to the Atelier!

What is this?

Atelier (French word for workbench or workshop) is a simple UI component explorer, like angular-playground react-cosmos, storybook, styleguidist, svench or chromatic.

A workbench help you implementing Component Driven Development: crafting reusable UI components in isolation.

Atelier is based on [Vite] JavaScript bundler.

• Getting started with Svelte
• Plugin API
• Svelte bindings API
• Jest Toolshot API
• Why another one?

Getting started with Svelte

1. Install the plugin for Vite and Svelte bindings.

   npm i -D @atelier-wb/vite-plugin-atelier @atelier-wb/svelte
   

2. Register the plugin in vite.config.js file:

   import svelte from '@sveltejs/vite-plugin-svelte'
   // other vite plugins
   import atelier from '@atelier-wb/vite-plugin-atelier'
   
   export default defineConfig({
     plugins: [svelte(), /* other plugins */ atelier()]
   })
   

3. Next to your vite.config.js file, creates a folder named atelier

4. Assuming the components you'd like to test is located in src/MyComponent.svelte, create a file names atelier/MyComponent.tools.svelte and set its content to:

   <script>
     import { Tool } from '@atelier-wb/svelte'
     import MyComponent from '../src/MyComponent.svelte'
   </script>
   
   <Tool name="Components/My component" component={MyComponent} />
   

5. Start vite, and navigate to http://localhost:3000/atelier

6. To export your atelier as a static website in dist-atelier folder, run this command:

   vite build --mode export-atelier
   

   Expose it with a plain http server (npx -y serve dist-atelier for example) to enjoy it!

Why another one?

Now, let's talk about the elephant in the room: Storybook is a wonderful tool.

In my experience, Storybook does not bring an enjoyable developer experience, mostly because of webpack (as the time of writing). A lot of people throw a lot of effort to improve it for common cases, leading to powerfull starterkits like create-react-app, and many blogpost (try searching for "storybook + nextjs" 😉).

However, if your project is not react-based, you're very likely to be forced rewriting an entire webpack configuration, leading to a very fragile and unefficient setup. On medium-sized code base, build time is significant, and becomes a barrier to CDD.

Atlier seamlessly integrates with Vite bundler, and give you back control.