@atelier-wb/vite-plugin-atelier
v0.12.0-beta.4
Published
Helps you buildind Component Driven UIs with Atelier and Vite
Downloads
111
Readme
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
You'll need first to write some "tools" files for your UI components.
Please refer to your UI framework binding API:
Then, assuming you already installed vite and configured it,
install the plugin for Vite and your UI framework bindings,
npm i -D @atelier-wb/vite-plugin-atelier @atelier-wb/[your-ui-framework]
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' })] })
start vite in dev mode:
npx vite
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 tosvelte
): 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 topath
.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
})