OpenPatch

On initialise un projet Vite configuré pour produire une librairie Vue 3, pas une application.

Créer le projet

npm create vite@latest openpatch -- --template vue-ts
cd openpatch
npm install

Ajouter Tailwind CSS v4

npm install tailwindcss @tailwindcss/vite

Tailwind v4 s'intègre comme un plugin Vite — pas de fichier tailwind.config.js.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import { resolve } from 'path'
 
export default defineConfig({
  plugins: [vue(), tailwindcss()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'OpenPatch',
      formats: ['es'],
      fileName: (format) => `index.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: { globals: { vue: 'Vue' } }
    }
  }
})

external: ['vue'] est crucial — on ne bundle pas Vue dans la librairie. L'application hôte fournit Vue.

Structure cible

src/
├── components/
│   └── OpenPatch.vue       ← composant principal
├── composables/
│   └── useOpenPatch.ts     ← API programmatique
├── types/
│   └── settings.ts         ← types TypeScript
├── utils/
│   └── configLoader.ts     ← chargement config standalone
├── index.ts                ← entry point librairie npm
├── standalone.ts           ← entry point CDN
└── style.css               ← styles Tailwind

Deux entry points : index.ts pour npm, standalone.ts pour le CDN. Le build Vite gère les deux séparément.

Configurer package.json

{
  "name": "open-patch",
  "version": "1.0.0",
  "main": "./dist/index.es.js",
  "module": "./dist/index.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "types": "./dist/index.d.ts"
    },
    "./style.css": "./dist/open-patch.css"
  },
  "files": ["dist"],
  "peerDependencies": {
    "vue": "^3.0.0"
  }
}

peerDependencies signale à npm que Vue est attendu dans le projet hôte — pas bundlé, pas installé automatiquement.