@atomico/vite

Improves the webcomponent development experience in vite and its ecosystem.

@atomico/vite improve the development experience by solving the following objectives:
1.Allow the use of postcss in Atomico's CSS Template Literals.
2.Automatically create customElements.define
3.Support Atomico + Vite + Storybook
4.Support Atomico + Vite + Vitest
5.Facilitate the export of JS and TS code in library format
Allow the use of postcss in Atomico's CSS Template Literals.
With @atomico/vite you can compile your css template string through postcss. Thanks to this feature you can use sass, autoprefixer, tailwind or minify the css of your template string
Config
import atomico from "@atomico/vite";
​
export default {
  plugins: atomico({
    cssLiterals: { 
      postcss: true,
      // Optional, minify the css code
      minify: true
    },
  }),
};
Automatically create customElements.define
With @atomico/vite you can automate the declaration of customElements.define, @atomico/vite will transform the export of your customElement into a record for customElements.define.
Config
import atomico from "@atomico/vite";
​
export default {
  plugins: atomico({
    customElements: {
      // Optional, prefix for your customElements
      prefix: "a",
      // component folders to associate the customElement
      define: ["components/src/**/*"],
    },
  }),
};
Support Atomico + Vite + Storybook
Take advantage of automatic Storybook support in React, to cover the use of TSX/JSX. This allows both React and Atomic to Coexist in the same environment within the TSX/JSX Storybook.
Config
import atomico from "@atomico/vite";
​
export default {
  plugins: atomico({
    // Atomico components using Storybook with TSX/JSX
    storybook: ["components/**/*"],
  }),
};
Support Atomico + Vite + Vitest
Improve the experience of the atomico fixture function in vitest.
import atomico from "@atomico/vite";
​
export default {
  plugins: atomico({
    vitest: true,
  }),
};
Facilitate the export of JS and TS code in library format
Configure the output of vite in library format for 1 or more Javascript or Typescript files:
npx library src/**/*
the above script will send all files found in the src folder to vite, example output:
# Input                        # Output
/src                            /lib
  /my-component-1.tsx             /my-component-1.js
  /my-component-2.tsx             /my-component-2.tsx
  /my-component-3.tsx             /my-component-3.tsx
This script can be combined with @atomico/exports to improve the generation of your package.json

Design systems

Next - packages

@atomico/exports

Last modified 5mo ago