@eventuras/vite-config 0.2.2

package/README.md

@@ -0,0 +1,171 @@
+# @eventuras/vite-config
+
+Shared Vite configurations for Eventuras monorepo libraries.
+
+## Overview
+
+This package provides reusable Vite configuration presets for different types of libraries in the Eventuras monorepo. It helps maintain consistency, reduces duplication, and makes it easier to update build configurations across all libraries.
+
+## Presets
+
+### Vanilla Library (`vanilla-lib`)
+
+For plain TypeScript libraries without React.
+
+```typescript
+// vite.config.ts
+import { defineVanillaLibConfig } from '@eventuras/vite-config/vanilla-lib';
+import { resolve } from 'path';
+
+export default defineVanillaLibConfig({
+  entry: 'src/index.ts',
+  name: 'MyLibrary',
+  external: ['some-external-dep'],
+});
+```
+
+### React Library (`react-lib`)
+
+For React component libraries and utilities.
+
+```typescript
+// vite.config.ts
+import { defineReactLibConfig } from '@eventuras/vite-config/react-lib';
+import { resolve } from 'path';
+
+export default defineReactLibConfig({
+  entry: 'src/index.ts',
+  // Or use glob for multiple entry points:
+  // entry: 'src/**/index.ts',
+  external: ['@eventuras/ratio-ui'],
+  tailwind: true, // Enable Tailwind CSS
+  preserveModules: true, // Keep source structure in dist
+  useSWC: false, // Use Babel (default) or SWC for React transform
+});
+```
+
+**Features:**
+- React plugin (Babel or SWC)
+- TypeScript declaration generation
+- Optional Tailwind CSS support
+- 'use client' directive preservation for RSC
+- Configurable module preservation
+- Auto-excludes test files and stories from types
+
+### Next.js Library (`next-lib`)
+
+For React libraries compatible with Next.js (includes Next.js externals).
+
+```typescript
+// vite.config.ts
+import { defineNextLibConfig } from '@eventuras/vite-config/next-lib';
+import { resolve } from 'path';
+
+export default defineNextLibConfig({
+  entry: {
+    'Image/index': resolve(__dirname, 'src/Image/index.ts'),
+    'Link/index': resolve(__dirname, 'src/Link/index.ts'),
+    index: resolve(__dirname, 'src/index.ts'),
+  },
+  external: ['@eventuras/ratio-ui'],
+  tailwind: true,
+});
+```
+
+**Features:**
+- All React library features
+- Next.js externals (next, next/image, next/link, etc.)
+- Always preserves 'use client' directives
+
+## Configuration Options
+
+### Common Options
+
+All presets support these options:
+
+- **`entry`**: Library entry point(s)
+  - String: `'src/index.ts'`
+  - Object: `{ index: 'src/index.ts', utils: 'src/utils.ts' }`
+  - Glob (React only): `'src/**/index.ts'`
+
+- **`external`**: Additional dependencies to exclude from bundle
+  - Array of strings or RegExp patterns
+  - Common externals (react, next) are already included
+
+- **`viteConfig`**: Additional Vite config to merge
+
+### React-Specific Options
+
+- **`tailwind`**: Enable Tailwind CSS support (default: `false`)
+- **`preserveModules`**: Keep source structure in output (default: `true`)
+- **`preserveUseClientDirectives`**: Preserve 'use client' for RSC (default: `true`)
+- **`useSWC`**: Use SWC instead of Babel (default: `false`)
+- **`dts`**: TypeScript declaration options
+  - `entryRoot`: Source root (default: `'src'`)
+  - `outDir`: Output directory (default: `'dist'`)
+  - `rollupTypes`: Bundle types into single file (default: `false`)
+
+## Migration Guide
+
+### Before (duplicated config in each library)
+
+```typescript
+// libs/my-lib/vite.config.ts
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      include: ['src/**/*'],
+      exclude: ['src/**/*.stories.tsx'],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});
+```
+
+### After (using shared config)
+
+```typescript
+// libs/my-lib/vite.config.ts
+import { defineReactLibConfig } from '@eventuras/vite-config/react-lib';
+
+export default defineReactLibConfig({
+  entry: 'src/index.ts',
+});
+```
+
+## Best Practices
+
+1. **Use the most specific preset**: If building for Next.js, use `next-lib` instead of `react-lib`
+2. **Only specify what's different**: The presets have sensible defaults
+3. **Use glob patterns for multi-entry libraries**: `entry: 'src/**/index.ts'`
+4. **Enable SWC for faster builds**: `useSWC: true` (in development)
+5. **Keep modules preserved**: `preserveModules: true` for better tree-shaking
+
+## Troubleshooting
+
+### Types not generated
+- Check that your TypeScript files are in `src/`
+- Ensure test files use `.test.ts` or `.spec.ts` extensions
+- Check `dts.entryRoot` and `dts.outDir` options
+
+### 'use client' directives missing
+- Ensure `preserveUseClientDirectives: true` (default for Next.js)
+- Check that source files have 'use client' at the top
+
+### Build errors with Next.js
+- Use `next-lib` preset instead of `react-lib`
+- Check that Next.js packages are in `external` array

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@eventuras/vite-config",
+  "version": "0.2.2",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/losol/origo.git",
+    "directory": "config/vite-config"
+  },
+  "type": "module",
+  "exports": {
+    "./base": "./src/base.ts",
+    "./react-lib": "./src/react-lib.ts",
+    "./vanilla-lib": "./src/vanilla-lib.ts",
+    "./next-lib": "./src/next-lib.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.2",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitejs/plugin-react-swc": "^4.3.0",
+    "glob": "^13.0.6",
+    "vite-plugin-dts": "^5.0.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.2",
+    "vite": "^8.1.0"
+  },
+  "peerDependencies": {
+    "vite": "^7.0.0 || ^8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/base.ts

@@ -0,0 +1,16 @@
+import { defineConfig, type UserConfig } from 'vite';
+
+/**
+ * Base Vite configuration with common defaults for all Eventuras packages.
+ */
+export function defineBaseConfig(config: UserConfig = {}): UserConfig {
+  return defineConfig({
+    ...config,
+    build: {
+      ...config.build,
+      // Common build optimizations
+      minify: false, // Libraries should not be minified
+      sourcemap: true, // Always generate sourcemaps for debugging
+    },
+  });
+}

package/src/externals.ts

@@ -0,0 +1,45 @@
+import { readFileSync } from 'node:fs';
+import { builtinModules } from 'node:module';
+import { resolve } from 'node:path';
+
+interface PackageJson {
+  dependencies?: Record<string, string>;
+  peerDependencies?: Record<string, string>;
+  optionalDependencies?: Record<string, string>;
+}
+
+/**
+ * Reads the consumer package's package.json and returns RegExp patterns that
+ * mark every runtime dependency (and its subpaths) as external.
+ *
+ * Bundling runtime deps into a library is harmful: it duplicates code, breaks
+ * `instanceof` checks across module boundaries (the consumer's class identity
+ * differs from the bundled copy), and inflates installed size. Consumers
+ * already install these deps via the lib's own package.json.
+ */
+export function getRuntimeDependencyExternals(cwd: string = process.cwd()): RegExp[] {
+  const pkgPath = resolve(cwd, 'package.json');
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8')) as PackageJson;
+
+  const names = [
+    ...Object.keys(pkg.dependencies ?? {}),
+    ...Object.keys(pkg.peerDependencies ?? {}),
+    ...Object.keys(pkg.optionalDependencies ?? {}),
+  ];
+
+  return names.map(name => new RegExp(`^${escapeRegex(name)}(/.*)?$`));
+}
+
+/**
+ * Externalize Node built-ins in both forms — `node:fs` (always matched by the
+ * regex) and the bare `fs` form (matched against the explicit list, since the
+ * names overlap with userland packages and can't be regex-distinguished).
+ */
+export const NODE_BUILTINS_EXTERNAL: (string | RegExp)[] = [
+  /^node:/,
+  ...builtinModules,
+];
+
+function escapeRegex(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

package/src/next-lib.ts

@@ -0,0 +1,36 @@
+import type { UserConfig } from 'vite';
+import { defineReactLibConfig, type ReactLibConfig } from './react-lib.ts';
+
+export interface NextLibConfig extends Omit<ReactLibConfig, 'external'> {
+  /**
+   * Additional external dependencies beyond the Next.js defaults and the
+   * package.json auto-externalization (via the underlying React preset).
+   */
+  external?: (string | RegExp)[];
+}
+
+/**
+ * Vite configuration preset for Next.js-compatible React libraries.
+ * Extends the React library config with Next.js-specific externals and defaults.
+ */
+export function defineNextLibConfig(config: NextLibConfig): UserConfig {
+  const { external = [], ...reactConfig } = config;
+
+  // Next.js externals - include all next/* paths to avoid bundling internal modules
+  const nextExternals = [
+    'next',
+    'next/image',
+    'next/link',
+    'next/navigation',
+    'next/router',
+    'next/headers',
+    /^next\//,  // Externalize all next/* imports
+  ];
+
+  return defineReactLibConfig({
+    ...reactConfig,
+    external: [...nextExternals, ...external],
+    // Next.js libraries should always preserve client directives
+    preserveUseClientDirectives: true,
+  });
+}

package/src/react-lib.ts

@@ -0,0 +1,239 @@
+import { defineConfig, type UserConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'node:path';
+import { glob } from 'glob';
+import fs from 'node:fs';
+
+import { getRuntimeDependencyExternals, NODE_BUILTINS_EXTERNAL } from './externals.ts';
+
+/**
+ * Plugin to preserve 'use client' directives in React Server Components.
+ * This ensures client-side code is properly marked when building for Next.js.
+ */
+function preserveUseClient() {
+  return {
+    name: 'preserve-use-client',
+    enforce: 'post' as const,
+    generateBundle(_options: any, bundle: any) {
+      for (const [_fileName, chunk] of Object.entries(bundle)) {
+        if ((chunk as any).type === 'chunk') {
+          const chunkData = chunk as any;
+          // Check if any source module had 'use client'
+          const hasClientDirective = chunkData.moduleIds?.some((id: string) => {
+            try {
+              const content = fs.readFileSync(id, 'utf-8');
+              // Remove leading comments to check for 'use client'
+              const withoutComments = content
+                .replace(/^(\s*\/\/.*\n)+/, '')
+                .replace(/^(\s*\/\*[\s\S]*?\*\/\s*)/, '');
+              return (
+                withoutComments.trimStart().startsWith("'use client'") ||
+                withoutComments.trimStart().startsWith('"use client"')
+              );
+            } catch {
+              return false;
+            }
+          });
+
+          if (hasClientDirective) {
+            const codeStart = chunkData.code.trimStart();
+            if (!codeStart.startsWith("'use client'") && !codeStart.startsWith('"use client"')) {
+              chunkData.code = `'use client';\n${chunkData.code}`;
+            }
+          }
+        }
+      }
+    },
+  };
+}
+
+export interface ReactLibConfig {
+  /**
+   * Library entry point(s). Can be:
+   * - A string path: 'src/index.ts'
+   * - An object with multiple entries: { index: 'src/index.ts', utils: 'src/utils.ts' }
+   * - A glob pattern: 'src/** /index.ts' (auto-discovers multiple entry points)
+   */
+  entry: string | Record<string, string>;
+
+  /**
+   * Additional external dependencies to exclude from the bundle, on top of the
+   * runtime deps read from the consumer's package.json and the React core
+   * externals. Pass `false` to opt out of package.json auto-externalization.
+   */
+  external?: (string | RegExp)[] | false;
+
+  /**
+   * Enable Tailwind CSS support via @tailwindcss/vite plugin.
+   * @default false
+   */
+  tailwind?: boolean;
+
+  /**
+   * Preserve module structure in output.
+   * When true, creates a dist structure mirroring src structure.
+   * When false, bundles everything into fewer files.
+   * @default true
+   */
+  preserveModules?: boolean;
+
+  /**
+   * Enable 'use client' directive preservation for Next.js React Server Components.
+   * @default true
+   */
+  preserveUseClientDirectives?: boolean;
+
+  /**
+   * Use SWC instead of Babel for React transformation (faster builds).
+   * @default false
+   */
+  useSWC?: boolean;
+
+  /**
+   * TypeScript declaration options.
+   */
+  dts?: {
+    /**
+     * Entry root for DTS generation.
+     * @default 'src'
+     */
+    entryRoot?: string;
+    /**
+     * Output directory for .d.ts files.
+     * @default 'dist'
+     */
+    outDir?: string;
+    /**
+     * Roll up types into a single .d.ts file.
+     * @default false
+     */
+    rollupTypes?: boolean;
+  };
+
+  /**
+   * Additional Vite configuration to merge.
+   */
+  viteConfig?: UserConfig;
+}
+
+/**
+ * Vite configuration preset for React libraries.
+ * Includes React plugin, TypeScript declarations, and common React externals.
+ */
+export function defineReactLibConfig(config: ReactLibConfig): UserConfig {
+  const {
+    entry,
+    external,
+    tailwind = false,
+    preserveModules = true,
+    preserveUseClientDirectives = true,
+    useSWC = false,
+    dts: dtsOptions = {},
+    viteConfig = {},
+  } = config;
+
+  const autoExternals =
+    external === false ? [] : getRuntimeDependencyExternals();
+  const userExternals = Array.isArray(external) ? external : [];
+
+  // Determine entry points
+  let entryPoints: string | string[] | Record<string, string>;
+  if (typeof entry === 'string' && entry.includes('*')) {
+    entryPoints = glob.sync(resolve(process.cwd(), entry));
+  } else if (typeof entry === 'string') {
+    entryPoints = resolve(process.cwd(), entry);
+  } else {
+    entryPoints = entry;
+  }
+
+  // Common React externals
+  const reactExternals = ['react', 'react-dom', 'react/jsx-runtime'];
+
+  const plugins: any[] = [];
+
+  // Add React plugin (SWC or standard)
+  if (useSWC) {
+    // Dynamically import SWC plugin only when needed
+    const reactSwc = require('@vitejs/plugin-react-swc').default;
+    plugins.push(reactSwc());
+  } else {
+    plugins.push(react());
+  }
+
+  // Add Tailwind if enabled
+  if (tailwind) {
+    plugins.push(tailwindcss());
+  }
+
+  // Add DTS plugin
+  plugins.push(
+    dts({
+      entryRoot: dtsOptions.entryRoot || 'src',
+      outDir: dtsOptions.outDir || 'dist',
+      include: ['src/**/*'],
+      exclude: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx', '**/*.stories.tsx'],
+      copyDtsFiles: true,
+      rollupTypes: dtsOptions.rollupTypes || false,
+    })
+  );
+
+  // Add use client preservation if enabled
+  if (preserveUseClientDirectives) {
+    plugins.push(preserveUseClient());
+  }
+
+  // Add custom plugins from viteConfig
+  if (viteConfig.plugins) {
+    plugins.push(...viteConfig.plugins);
+  }
+
+  return defineConfig({
+    plugins,
+    resolve: {
+      alias: {
+        '@': resolve(process.cwd(), './src'),
+        ...viteConfig.resolve?.alias,
+      },
+      ...viteConfig.resolve,
+    },
+    build: {
+      minify: false,
+      sourcemap: true,
+      lib: {
+        entry: entryPoints,
+        formats: ['es'],
+      },
+      rollupOptions: {
+        ...viteConfig.build?.rollupOptions,
+        external: [
+          ...reactExternals,
+          ...autoExternals,
+          ...NODE_BUILTINS_EXTERNAL,
+          ...userExternals,
+        ],
+        output: {
+          preserveModules,
+          ...(preserveModules && {
+            preserveModulesRoot: 'src',
+            entryFileNames: '[name].js',
+          }),
+          ...viteConfig.build?.rollupOptions?.output,
+        },
+      },
+      // Spread other build options from viteConfig except lib and rollupOptions
+      ...Object.fromEntries(
+        Object.entries(viteConfig.build || {}).filter(
+          ([key]) => key !== 'lib' && key !== 'rollupOptions'
+        )
+      ),
+    },
+    // Spread other viteConfig options except build, plugins, and resolve
+    ...Object.fromEntries(
+      Object.entries(viteConfig).filter(
+        ([key]) => key !== 'build' && key !== 'plugins' && key !== 'resolve'
+      )
+    ),
+  });
+}

package/src/vanilla-lib.ts

@@ -0,0 +1,90 @@
+import { defineConfig, type UserConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'node:path';
+
+import { getRuntimeDependencyExternals, NODE_BUILTINS_EXTERNAL } from './externals.ts';
+
+export interface VanillaLibConfig {
+  /**
+   * Library entry point(s). Can be a string or an object with multiple entries.
+   * @example 'src/index.ts'
+   * @example { index: 'src/index.ts', utils: 'src/utils.ts' }
+   */
+  entry: string | Record<string, string>;
+
+  /**
+   * Library name for UMD builds (optional).
+   */
+  name?: string;
+
+  /**
+   * Additional external dependencies to exclude from the bundle, on top of the
+   * runtime deps read from the consumer's package.json. Pass `false` to opt out
+   * of the package.json auto-externalization (rarely what you want).
+   */
+  external?: (string | RegExp)[] | false;
+
+  /**
+   * Additional Vite configuration to merge.
+   */
+  viteConfig?: UserConfig;
+}
+
+/**
+ * Vite configuration preset for vanilla TypeScript libraries.
+ *
+ * Defaults that matter for libraries:
+ * - All runtime deps (dependencies + peerDependencies + optionalDependencies)
+ *   are externalized so consumers get one copy from their node_modules instead
+ *   of inlined+mangled copies inside the published bundle.
+ * - Minification is OFF — consumers minify their own bundle, and unminified
+ *   output preserves class names (so `instanceof` and stack traces work).
+ * - Sourcemaps ON for debuggable consumer stack traces.
+ */
+export function defineVanillaLibConfig(config: VanillaLibConfig): UserConfig {
+  const { entry, name, external, viteConfig = {} } = config;
+
+  const autoExternals =
+    external === false ? [] : getRuntimeDependencyExternals();
+  const userExternals = Array.isArray(external) ? external : [];
+
+  return defineConfig({
+    plugins: [
+      dts({
+        include: ['src/**/*'],
+        exclude: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'],
+      }),
+      ...(viteConfig.plugins || []),
+    ],
+    build: {
+      minify: false,
+      sourcemap: true,
+      lib: {
+        entry: typeof entry === 'string' ? resolve(process.cwd(), entry) : entry,
+        ...(name && { name }),
+        formats: ['es'],
+        fileName: (_format, entryName) => `${entryName}.js`,
+      },
+      rollupOptions: {
+        ...viteConfig.build?.rollupOptions,
+        external: [...autoExternals, ...NODE_BUILTINS_EXTERNAL, ...userExternals],
+        output: {
+          preserveModules: false,
+          ...viteConfig.build?.rollupOptions?.output,
+        },
+      },
+      // Spread other build options from viteConfig except lib and rollupOptions
+      ...Object.fromEntries(
+        Object.entries(viteConfig.build || {}).filter(
+          ([key]) => key !== 'lib' && key !== 'rollupOptions'
+        )
+      ),
+    },
+    // Spread other viteConfig options except build and plugins
+    ...Object.fromEntries(
+      Object.entries(viteConfig).filter(
+        ([key]) => key !== 'build' && key !== 'plugins'
+      )
+    ),
+  });
+}