create library npm

vite-library-npm.md

Publish library on github registry NPM

configure github action:

name: Publish Library
on:
 release:
   types: [created]
jobs:
 publish-library:
   runs-on: ubuntu-latest
   permissions:
     packages: write
     contents: read
   steps:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
         node-version: 18
         registry-url: https://npm.pkg.github.com/
     - run: npm ci
     - run: npm publish
       env:
         NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

example new library project

yarn create vite --template react-ts

select project and install

yarn add -D @types/node

the structure should is:

├── index.html
├── package.json
├── src
│   ├── index.ts
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts

create component Button

//src/components/Button.tsx
interface ButtonProps {}
export const Button:FC<ButtonProps> = (): JSX.Element => {
  return <div className="w-24 h-1 inline-blick bg-gray-200 rounded-full" />
}

configure tsconfig.json

{
  "compilerOptions": {
    ...,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

also, vite.config.js should look like this

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [dts(), react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "@your-org/cool-library",
      fileName: "index",
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  }
})

configure tailwind

yarn add -D tailwindcss@next postcss@latest autoprefixer@latest
yarn tailwindcss init

tailwind need postcss

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

configure tailwind

module.exports = {
  jit: true,
  content: ['src/**/*.{ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
  prefix: 'mylib-'
}

now modify your component with

<div className="mylib-w-24 mylib-bg-gray-200" />

your main index file

//src/index.ts
import 'tailwindcss/tailwind.css'
export * from '@/components/Button'

your dist css result:

.mylib-w-24{width:6rem}
...rest

you package.json should look like this:

{
  "name": "@your-org/cool-library",
  "type": "module",
  "version": "0.1.0",
  "main": "./dist/index.umd.cjs",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],
  "publishConfig": {
    "@your-org:registry": "https://npm.pkg.github.com"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.org/your-org/cool-library.git"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.8.3",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-dts": "^3.6.0"
  }
}