feat(packages/tuono): config – add optimizeDeps and plugins to `v…

…ite` options (#197)
tuono-labs · Dec 8, 2024 · c6e93c2 · c6e93c2
1 parent bcf7e5b
commit c6e93c2
Show file tree

Hide file tree

Showing 12 changed files with 280 additions and 236 deletions.
diff --git a/apps/documentation/package.json b/apps/documentation/package.json
@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@types/mdx": "^2.0.13",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.13",
     "@types/react-dom": "^18.3.0",
     "postcss": "^8.4.39",
     "postcss-preset-mantine": "^1.17.0",

diff --git a/examples/tuono-app/package.json b/examples/tuono-app/package.json
@@ -8,8 +8,8 @@
     "tuono": "link:../../packages/tuono"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.13",
     "@types/react-dom": "^18.3.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.6.3"
   }
 }
diff --git a/examples/tuono-tutorial/package.json b/examples/tuono-tutorial/package.json
@@ -8,8 +8,8 @@
     "tuono": "link:../../packages/tuono"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.13",
     "@types/react-dom": "^18.3.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.6.3"
   }
 }
diff --git a/examples/with-mdx/package.json b/examples/with-mdx/package.json
@@ -3,14 +3,15 @@
   "description": "Tuono example combined with mdx",
   "version": "0.0.1",
   "dependencies": {
-    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/react": "3.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tuono": "link:../../packages/tuono"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "typescript": "^5.5.3"
+    "@mdx-js/rollup": "3.1.0",
+    "@types/react": "18.3.13",
+    "@types/react-dom": "18.3.0",
+    "typescript": "^5.6.3"
   }
 }
diff --git a/examples/with-mdx/tuono.config.ts b/examples/with-mdx/tuono.config.ts
@@ -1,5 +1,15 @@
 import type { TuonoConfig } from 'tuono/config'
+import mdx from '@mdx-js/rollup'
 
-const config: TuonoConfig = {}
+const config: TuonoConfig = {
+  vite: {
+    optimizeDeps: {
+      exclude: ['@mdx-js/react'],
+    },
+    plugins: [
+      { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
+    ],
+  },
+}
 
 export default config
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "@eslint/js": "9.15.0",
     "@tanstack/config": "^0.7.0",
     "@types/node": "^22.0.0",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.13",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^9.15.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -35,7 +35,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "prettier": "^3.2.4",
     "turbo": "^2.2.3",
-    "typescript": "^5.6.3",
+    "typescript": "5.6.3",
     "typescript-eslint": "8.15.0",
     "vite": "^5.2.11",
     "vitest": "^2.0.0"

diff --git a/packages/tuono/package.json b/packages/tuono/package.json
@@ -101,7 +101,6 @@
     "@babel/template": "^7.24.0",
     "@babel/traverse": "^7.24.1",
     "@babel/types": "^7.24.0",
-    "@mdx-js/rollup": "^3.0.1",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^22.0.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
@@ -115,7 +114,7 @@
   "devDependencies": {
     "@types/babel-traverse": "^6.25.10",
     "@types/babel__traverse": "^7.20.6",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.13",
     "@types/react-dom": "^18.3.0",
     "prettier": "^3.2.4",
     "vitest": "^2.0.0"

diff --git a/packages/tuono/src/build/index.ts b/packages/tuono/src/build/index.ts
@@ -3,59 +3,74 @@ import { build, createServer, mergeConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import ViteFsRouter from 'tuono-fs-router-vite-plugin'
 import { LazyLoadingPlugin } from 'tuono-lazy-fn-vite-plugin'
-import mdx from '@mdx-js/rollup'
+
+import type { TuonoConfig } from '../config'
 
 import { loadConfig, blockingAsync } from './utils'
 
 const VITE_PORT = 3001
 
-const BASE_CONFIG: InlineConfig = {
-  root: '.tuono',
-  logLevel: 'silent',
-  publicDir: '../public',
-  cacheDir: 'cache',
-  envDir: '../',
-  optimizeDeps: {
-    exclude: ['@mdx-js/react'],
-  },
-  plugins: [
-    { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
-    // @ts-expect-error: TS configuration issue.
-    react({ include: /\.(jsx|js|mdx|md|tsx|ts)$/ }),
-    ViteFsRouter(),
-    LazyLoadingPlugin(),
-  ],
+/**
+ * From a given {@link TuonoConfig} return a `vite` "mergeable" {@link InlineConfig}
+ * including all default tuono related options
+ */
+function createBaseViteConfigFromTuonoConfig(
+  tuonoConfig: TuonoConfig,
+): InlineConfig {
+  const viteBaseConfig: InlineConfig = {
+    root: '.tuono',
+    logLevel: 'silent',
+    publicDir: '../public',
+    cacheDir: 'cache',
+    envDir: '../',
+
+    resolve: {
+      alias: tuonoConfig.vite?.alias ?? {},
+    },
+
+    optimizeDeps: tuonoConfig.vite?.optimizeDeps,
+
+    plugins: [
+      ...(tuonoConfig.vite?.plugins ?? []),
+      react(),
+      ViteFsRouter(),
+      LazyLoadingPlugin(),
+    ],
+  }
+
+  // seems redundant but it's useful to log the value when debugging, until we have a logging infrastructure.
+  return viteBaseConfig
 }
 
 const developmentSSRBundle = (): void => {
   blockingAsync(async () => {
     const config = await loadConfig()
     await build(
-      mergeConfig(BASE_CONFIG, {
-        resolve: {
-          alias: config.vite?.alias || {},
-        },
-        build: {
-          ssr: true,
-          minify: false,
-          outDir: 'server',
-          emptyOutDir: true,
-          rollupOptions: {
-            input: './.tuono/server-main.tsx',
-            onLog() {
-              // Silence all logs
-            },
-            output: {
-              entryFileNames: 'dev-server.js',
-              format: 'iife',
+      mergeConfig<InlineConfig, InlineConfig>(
+        createBaseViteConfigFromTuonoConfig(config),
+        {
+          build: {
+            ssr: true,
+            minify: false,
+            outDir: 'server',
+            emptyOutDir: true,
+            rollupOptions: {
+              input: './.tuono/server-main.tsx',
+              onLog() {
+                /* Silence all logs */
+              },
+              output: {
+                entryFileNames: 'dev-server.js',
+                format: 'iife',
+              },
             },
           },
+          ssr: {
+            target: 'webworker',
+            noExternal: true,
+          },
         },
-        ssr: {
-          target: 'webworker',
-          noExternal: true,
-        },
-      }),
+      ),
     )
   })
 }
@@ -64,25 +79,25 @@ const developmentCSRWatch = (): void => {
   blockingAsync(async () => {
     const config = await loadConfig()
     const server = await createServer(
-      mergeConfig(BASE_CONFIG, {
-        resolve: {
-          alias: config.vite?.alias || {},
-        },
-        // Entry point for the development vite proxy
-        base: '/vite-server/',
+      mergeConfig<InlineConfig, InlineConfig>(
+        createBaseViteConfigFromTuonoConfig(config),
+        {
+          // Entry point for the development vite proxy
+          base: '/vite-server/',
 
-        server: {
-          port: VITE_PORT,
-          strictPort: true,
-        },
-        build: {
-          manifest: true,
-          emptyOutDir: true,
-          rollupOptions: {
-            input: './.tuono/client-main.tsx',
+          server: {
+            port: VITE_PORT,
+            strictPort: true,
+          },
+          build: {
+            manifest: true,
+            emptyOutDir: true,
+            rollupOptions: {
+              input: './.tuono/client-main.tsx',
+            },
           },
         },
-      }),
+      ),
     )
     await server.listen()
   })
@@ -93,44 +108,44 @@ const buildProd = (): void => {
     const config = await loadConfig()
 
     await build(
-      mergeConfig(BASE_CONFIG, {
-        resolve: {
-          alias: config.vite?.alias || {},
-        },
-        build: {
-          manifest: true,
-          emptyOutDir: true,
-          outDir: '../out/client',
-          rollupOptions: {
-            input: './.tuono/client-main.tsx',
+      mergeConfig<InlineConfig, InlineConfig>(
+        createBaseViteConfigFromTuonoConfig(config),
+        {
+          build: {
+            manifest: true,
+            emptyOutDir: true,
+            outDir: '../out/client',
+            rollupOptions: {
+              input: './.tuono/client-main.tsx',
+            },
           },
         },
-      }),
+      ),
     )
 
     await build(
-      mergeConfig(BASE_CONFIG, {
-        resolve: {
-          alias: config.vite?.alias || {},
-        },
-        build: {
-          ssr: true,
-          minify: true,
-          outDir: '../out/server',
-          emptyOutDir: true,
-          rollupOptions: {
-            input: './.tuono/server-main.tsx',
-            output: {
-              entryFileNames: 'prod-server.js',
-              format: 'iife',
+      mergeConfig<InlineConfig, InlineConfig>(
+        createBaseViteConfigFromTuonoConfig(config),
+        {
+          build: {
+            ssr: true,
+            minify: true,
+            outDir: '../out/server',
+            emptyOutDir: true,
+            rollupOptions: {
+              input: './.tuono/server-main.tsx',
+              output: {
+                entryFileNames: 'prod-server.js',
+                format: 'iife',
+              },
             },
           },
+          ssr: {
+            target: 'webworker',
+            noExternal: true,
+          },
         },
-        ssr: {
-          target: 'webworker',
-          noExternal: true,
-        },
-      }),
+      ),
     )
   })
 }