1 of 7

@atomico/vite

Atomico Vite is a stack of plugins created for the development of libraries and applications using Atomico + Vite.

With Atomico Vite, you will be able to:

Process CSS tag template blocks with PostCSS.

With @atomico/vite, you will be able to analyze your CSS tag template to be optimized or to support utilities from the PostCSS ecosystem like Tailwind.

Config

import atomico from "@atomico/vite";

export default {
  plugins: atomico({
    cssLiterals: { 
      postcss: true,
      // Optional, minify the css code
      minify: true
    },
  }),
};

This configuration will only work if the use of PostCSS has already been configured, either at the package.json#postcss level or in postcss.config.json.

Compile your code to be distributed optimally as a package.

the above script will send all files found in the src folder to vite, example output:

This script can be combined with to improve the generation of your package.json

Use the JSX/TSX syntax of Atomico when using Storybook.

By default, Storybook does not support Atomico's JSX/TSX. With @atomico/vite, you will be able to use Atomico's syntax in your stories for Storybook.

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

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.

Atomico will transform the export name of your web component to kebab case. For example, MyComponent will be transformed to my-component. Additionally, you can configure the plugin to add a prefix.

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 for Vitest for Atomico.

With @atomico/vite, you will be able to use the `atomico/test-dom` module without any issues.

Server actions

With @atomico/vite, you will be able to use server-side functions in an environment-agnostic way, suitable for certain serverless and edge environments.

Thanks to the use of @atomico/vite, you will be able to create applications without worrying about servers. The goal is simple: transform the JS/TS resources in the src/api folder into serverless or edge functions. The frontend can then import these functions, and internally, the function will perform the fetch to the serverless or edge service.

Example with Cloudflare.

import type { Props } from "atomico";
import { getUserById } from "./api";

function app({id}: Props<typeof app>){
    const user = useAsync(()=>getUserById({id}),[id]);
    return <host>
        {user.name} - {user.phone}
    </host>
}

app.props = { id: Number }

export async function getUserById({ id }:{ id: number}){
    const result = await fetch(
        `https://jsonplaceholder.typicode.com/users/${id}`
    );
    return result.json();
}

Server actions

With @atomico/vite, you will be able to use server-side functions in an environment-agnostic way, suitable for certain serverless and edge environments.

Example with Cloudflare.

import type { Props } from "atomico";
import { getUserById } from "./api";

function app({id}: Props<typeof app>){
    const user = useAsync(()=>getUserById({id}),[id]);
    return <host>
        {user.name} - {user.phone}
    </host>
}

app.props = { id: Number }

export async function getUserById({ id }:{ id: number}){
    const result = await fetch(
        `https://jsonplaceholder.typicode.com/users/${id}`
    );
    return result.json();
}

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/**/*"],
    },
  }),
};