Improved vite and tailwind packages

package.json

@@ -21,6 +21,7 @@
     "@changesets/cli": "^2.27.1",
     "@playwright/test": "^1.41.2",
     "@total-typescript/ts-reset": "^0.5.1",
+    "@types/node": "^20.12.8",
     "eslint": "~8.57.0",
     "husky": "^9.0.11",
     "is-ci": "^3.0.1",

packages/react-package/package.json → packages/react-package-template/package.json

@@ -25,9 +25,10 @@
   "devDependencies": {
     "@acme/style-guide": "workspace:*",
     "@acme/vite": "workspace:*",
+    "@tsconfig/vite-react": "^2.0.1",
     "@types/react": "^18.2.73",
-    "typescript": "~5.3.3",
-    "vite": "^5.2.7",
-    "vitest": "^1.3.0"
+    "typescript": "~5.4.5",
+    "vite": "^5.2.11",
+    "vitest": "^1.5.3"
   }
 }

packages/react-package/src/index.tsx → packages/react-package-template/src/index.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
 
-export function MyComp(props: PropsWithChildren) {
+export function Component(props: PropsWithChildren) {
   return <div>{props.children}</div>;
 }

packages/react-package-template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@tsconfig/vite-react/tsconfig.json",
+  "compilerOptions": {
+    "resolveJsonModule": true
+  },
+  "include": ["./src/", "./vite.config.ts"]
+}

packages/react-package-template/vite.config.ts

@@ -0,0 +1,27 @@
+/// <reference types="vitest" />
+/// <reference types="vitest/globals" />
+import { resolve } from 'node:path';
+import { defineConfig } from 'vitest/config';
+import { library } from '@acme/vite/presets';
+import pkg from './package.json';
+
+export default defineConfig({
+    test: {
+        globals: true,
+    },
+    plugins: [
+        library({
+            // You can pass the dependencies from package.json
+            // which will be marked as external and will not be bundled
+            externalDependencies: pkg.devDependencies,
+        }),
+    ],
+    build: {
+        lib: {
+            name: '@acme/library',
+            entry: {
+                index: resolve(__dirname, 'src/index.tsx'),
+            },
+        },
+    },
+});