@imarc/vitrine

Vitrine

Vitrine is a vite plugin that provides a lightweight component library. It is still being developed, and currently only supports working with vite's dev server; it does not build a static library.

Installation & Usage

npm install @imarc/vitrine

Vitrine should be imported into your vite.config.js and added to the plugins in your vite config:

import vitrine from '@imarc/vitrine'

export default defineConfig({
  plugins: [vitrine({
    // ...
  })]
})

Options

vitrine() can also take the following configuration options:

• includes - An array of paths to files that Vitrine should include. You almost always want to set this. Default: []. Example: includes: ['/src/main.js']
• basePaths - An array of directory paths to look in for components and documentation. Default: ['resources/styles'].
• name - Set the name of your pattern library. Default vitrine.
• logo - Provide HTML to use for the logo for your pattern library. Default: uses name.
• version - An optional version to display for your component library.

Advanced options

• componentPattern - A RegExp that should match all component and documentation files. Currently Vitrine supports .md, .htm and .html files. Default: /\.md|\/.html?$/i
• includeVite - Whether to include Vite. Default: true. You would want to turn this off if Vite is being included through another method. For example, if you're using Nuxt, you likely want to set this to false.
• includes - As an advanced configuration option, if you specify an include that begins with any HTML tag, it will include that string as is.
• outDir - Where to put the built pattern library. Default: dist
• manifestDir – path to Vite's manifest. Set to false to disable using the manifest at all. Default: ${outDir}/.vite
• prefix - The prefix to use for the path to the pattern library. Default: /components
• stylesheetPattern - A RegExp that should differentiate when to link to them a <link> or <script> tag. Default: /\.(css|less|sass|scss|styl)$/i
• template - You can override the default template Vitrine includes as iframes. By default, Vitrine will look for a file named _preview.html and use that, but if it doesn't exist, it will fallback to its own builtin template. Default: _preview.html

Sample configuration

export default defineConfig({
  plugins: [vitrine({
    includes: [
      '/resources/styles/index.scss',
      '/resources/js/index.js',
    ],
    basePaths: [
      'resources',
    ],
  })]
})

Contributing

Vitrine is being developed as an open source project and welcomes contributions. Vitrine's goal is to maintain a small footprint and not be tied to any specific framework - we may even remove the dependency on Vue for SSR. It should work anywhere Vite does.

Working on Vitrine

The recommmended way to work on vitrine is to start with a parent project (like imarc/pronto), checkout out both the parent project and vitrine.

• Within Vitrine's folder, run npm link
• Within the parent project folder, run npm link vitrine
• Run npm run dev within the parent project.

Using npm link, you can develop and test changes to Vitrine and see how it handles teh components in your parent project.