@atelier-wb/vite-plugin-atelier

Atelier - Vite Plugin

Weclome to the Atelier!

This Vite plugin launches atelier as part of your dev server.

It can also export your entire atelier as a static website.

---

• Getting started
• Configuration API

---

Getting started

You'll need first to write some "tools" files for your UI components.

Please refer to your UI framework binding API:

• for svelte

Then, assuming you already installed vite and configured it,

1. install the plugin for Vite and your UI framework bindings,

   npm i -D @atelier-wb/vite-plugin-atelier @atelier-wb/[your-ui-framework]
   

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

   // other vite plugins
   import atelier from '@atelier-wb/vite-plugin-atelier'
   
   export default defineConfig({
     plugins: [/* other plugins */ atelier({ framework: 'your-ui-framework' })]
   })
   

3. start vite in dev mode:

   npx vite
   

4. then browse your components on http://localhost:3000/atelier.

To export your atelier, run Vite build command with export-atelier mode:

vite build --mode export-atelier

---

Configuration API

The atelier plugin function takes the following settings:

• framework (detaults to svelte): your UI framework of choice. To this day, only Svelte is supported.
• url (detaults to /atelier/): the url root under which Atelier's UI will be available. Must have leading and trailing /.
• path (defaults to ./atelier): the path to the top level folder containing your *.tools.* files. It could be either absolute, or relative to your vite configuration file.
• toolRegexp (defaults to /\.tools(?!\.shot$).+$/, any files endinf with .tools. but .tools.shot): the regular expression used to find your tool files.
• outDir (defaults to ./dist-atelier): path to the folder which will contain the static export of your atelier.
• setupPath: optional path to a file imported prior to any of your tool files. It can be absolute, from node_modules, or relative to path.
• publicDir: optional path, or list of paths, to folders containing static assets your tools may use.

For example:

atelier({
  framework: 'svelte',
  url: '/atelier/',
  toolRegexp: '\\.tools\\.svelte$',
  path: './tests', // cwd()/tests/**/*.tools.svelte
  setupPath: './atelier-setup.js' // cwd()/tests/atelier-setup.js
})