refactor(lib): change vite to rollup

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# lint-staged
+pnpm dlx lint-staged

.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "pwa-node",
+ "request": "launch",
+ "name": "vitest",
+ "skipFiles": [
+ "<node_internals>/**"
+ ],
+ "program": "${workspaceFolder}/packages/lib/node_modules/vitest/vitest.mjs",
+ "cwd": "${workspaceFolder}/packages/lib",
+ "outFiles": [
+ "${workspaceFolder}/**/*.js"
+ ]
+ }
+ ]
+}

package.json

@@ -10,9 +10,12 @@
  "plugins": [
  "@semantic-release/commit-analyzer",
  "@semantic-release/release-notes-generator",
- ["@semantic-release/npm", {
- "publish": false
- }],
+ [
+ "@semantic-release/npm",
+ {
+ "publish": false
+ }
+ ],
  "@semantic-release/github"
  ]
  },
@@ -23,24 +26,24 @@
  },
  "lint-staged": {
  "*.{js,jsx,ts,tsx}": [
- "prettier --ignore-path ./.prettierignore --write ",
- "eslint --cache"
+ "eslint --fix"
  ]
  },
  "eslintConfig": {
  "extends": "@antfu"
  },
  "scripts": {
  "prepare": "husky install",
- "build:all": "pnpm run build -r",
+ "build": "pnpm --filter lib build",
+ "dev": "pnpm dev:lib & pnpm dev:app",
  "dev:app": "pnpm --filter app dev",
  "dev:lib": "pnpm --filter lib dev"
  },
  "devDependencies": {
  "@antfu/eslint-config": "latest",
  "@types/node": "17.0.8",
  "eslint": "^8.11.0",
- "husky": "7.0.4",
+ "husky": "^8.0.1",
  "lint-staged": "12.3.3",
  "semantic-release": "^19.0.2",
  "typescript": "4.4.4"

packages/app/src/App.tsx

@@ -1,5 +1,4 @@
 import { Component } from 'lib'
-
 import 'lib/style.css'
 
 import logo from './logo.svg'
@@ -9,10 +8,11 @@ import './App.css'
 function App() {
  return (
  <div className="App">
+ <Component initial={10} />
+
  <header className="App-header">
  <img src={logo} className="App-logo" alt="logo" />
  <p>Hello Vite + React!</p>
- <Component initial={10} />
  <p>
  Edit <code>App.tsx</code> and save to test HMR updates.
  </p>

packages/lib/package.json

@@ -19,10 +19,10 @@
  "dist"
  ],
  "scripts": {
- "dev": "vite",
- "build": "pnpm lint & tsc && vite build",
- "test": "vitest",
- "test:ui": "vitest --ui",
+ "dev": "rollup -c -w",
+ "build": "rollup -c",
+ "test:dev": "vitest",
+ "test": "vitest run",
  "lint": "eslint ."
  },
  "peerDependencies": {
@@ -33,22 +33,29 @@
  "usehooks-ts": "^2.5.3"
  },
  "devDependencies": {
+ "@rollup/plugin-commonjs": "^22.0.0",
+ "@rollup/plugin-node-resolve": "^13.3.0",
+ "@rollup/plugin-typescript": "^8.3.2",
  "@testing-library/dom": "^8.13.0",
  "@testing-library/jest-dom": "^5.16.4",
  "@testing-library/react": "^13.2.0",
  "@testing-library/react-hooks": "^8.0.0",
  "@testing-library/user-event": "^14.2.0",
  "@types/react": "^18.0.0",
  "@types/react-dom": "^18.0.0",
- "@vitejs/plugin-react": "^1.3.0",
  "autoprefixer": "^10.4.7",
  "jsdom": "latest",
  "postcss": "^8.4.13",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
+ "rollup": "^2.74.1",
+ "rollup-plugin-dts": "^4.2.1",
+ "rollup-plugin-peer-deps-external": "^2.2.4",
+ "rollup-plugin-postcss": "^4.0.2",
+ "rollup-plugin-terser": "^7.0.2",
  "tailwindcss": "^3.0.24",
- "vite": "^2.9.9",
- "vite-plugin-dts": "^1.1.1",
+ "tslib": "^2.4.0",
+ "typescript": "^4.6.4",
  "vitest": "latest"
  }
 }

packages/lib/rollup.config.js

@@ -0,0 +1,48 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import { terser } from 'rollup-plugin-terser'
+import external from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss'
+import dts from 'rollup-plugin-dts'
+
+const packageJson = require('./package.json')
+
+const isProd = process.env.NODE_ENV === 'production'
+
+export default [
+ {
+ input: 'src/index.ts',
+ output: [
+ {
+ file: packageJson.main,
+ format: 'cjs',
+ sourcemap: true,
+ },
+ {
+ file: packageJson.module,
+ format: 'esm',
+ sourcemap: true,
+ },
+ ],
+ plugins: [
+ external(),
+ resolve(),
+ commonjs(),
+ typescript({ tsconfig: './tsconfig.json', exclude: ['src/**/*.test.tsx'] }),
+ postcss({ extract: 'style.css' }),
+ isProd && terser(),
+ ],
+ },
+ {
+ input: 'src/index.ts',
+ output: [
+ {
+ format: 'es',
+ file: 'dist/index.d.ts',
+ },
+ ],
+ external: [/\.css$/],
+ plugins: [dts()],
+ },
+]

packages/lib/src/Component.test.tsx

@@ -1,12 +1,13 @@
 // FIXME: https://github.com/testing-library/jest-dom/issues/427
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import React from 'react'
+
 import Component from '../src/Component'
 import { fireEvent, render } from './test-utils'
 
 describe('Component', () => {
  it('should render', () => {
  const { getByText } = render(<Component />)
- // @ts-expect-error
  expect(getByText('Count is 0')).toBeInTheDocument()
  })
 
@@ -15,7 +16,6 @@ describe('Component', () => {
 
  await fireEvent.click(getByText('Increment'))
 
- // @ts-expect-error
  expect(getByText('Count is 1')).toBeInTheDocument()
  })
 
@@ -24,19 +24,16 @@ describe('Component', () => {
 
  await fireEvent.click(getByText('Decrement'))
 
- // @ts-expect-error
  expect(getByText('Count is -1')).toBeInTheDocument()
  })
 
  it('should reset', async () => {
  const { getByText } = render(<Component />)
 
  await fireEvent.click(getByText('Decrement'))
- // @ts-expect-error
  expect(getByText('Count is -1')).toBeInTheDocument()
 
  await fireEvent.click(getByText('Reset'))
- // @ts-expect-error
  expect(getByText('Count is 0')).toBeInTheDocument()
  })
 })

packages/lib/src/Component.tsx

@@ -11,13 +11,13 @@ export default function Component({ initial = 0 }: ComponentProps) {
 
  return (
  <div className="h-screen flex items-center">
- <div className="mx-auto w-96 p-1 bg-gradient-to-r from-indigo-500 to-yellow-500">
- <div className="h-full w-full bg-white p-4">
+ <div className="mx-auto p-1 bg-gradient-to-r from-indigo-500 to-yellow-500">
+ <div className="h-full w-full text-gray-700 bg-white p-4">
  <p className="text-center">Count is {count}</p>
  <div className="mt-4 flex justify-center gap-4 ">
- <button className="px-4 border border-gray-100 rounded-sm" onClick={increment}>Increment</button>
- <button className="px-4 border border-gray-100 rounded-sm" onClick={decrement}>Decrement</button>
- <button className="px-4 border border-gray-100 rounded-sm" onClick={reset}>Reset</button>
+ <button className="px-4 border border-gray-200 rounded-sm" onClick={increment}>Increment</button>
+ <button className="px-4 border border-gray-200 rounded-sm" onClick={decrement}>Decrement</button>
+ <button className="px-4 border border-gray-200 rounded-sm" onClick={reset}>Reset</button>
  </div>
  </div>
  </div>

packages/lib/src/test-utils.ts

@@ -1,12 +1,13 @@
 import { afterEach } from 'vitest'
 
 import { cleanup, render } from '@testing-library/react'
+import type { RenderResult } from '@testing-library/react'
 
 afterEach(() => {
  cleanup()
 })
 
-const customRender = (ui: React.ReactElement, options = {}) =>
+const customRender = (ui: React.ReactElement, options = {}): RenderResult =>
  render(ui, {
  // wrap provider(s) here if needed
  wrapper: ({ children }) => children,

packages/lib/tsconfig.json

@@ -13,9 +13,9 @@
  "moduleResolution": "Node",
  "resolveJsonModule": true,
  "isolatedModules": true,
+ "jsx": "react",
+ "types": ["vitest/globals"],
  "noEmit": true,
- "jsx": "react-jsx",
- "types": ["vitest/globals"]
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]

packages/lib/tsconfig.node.json

@@ -4,5 +4,5 @@
  "module": "esnext",
  "moduleResolution": "node"
  },
- "include": ["vite.config.ts"]
+ "include": ["vitest.config.ts"]
 }

packages/lib/vitest.config.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vitest/config'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: './src/test-setup.ts',
+ },
+})