build(vite): configure automatic JSX runtime and externalize jsx-runtime

Add explicit jsxRuntime: 'automatic' configuration to React plugin and
externalize react/jsx-runtime and react/jsx-dev-runtime in rollup
options for both baukasten and web-wrapper packages.

Author: praisethemoon

packages/baukasten/vite.config.ts

@@ -6,7 +6,9 @@ import { resolve } from "path";
 
 export default defineConfig({
   plugins: [
-    react(),
+    react({
+      jsxRuntime: "automatic",
+    }),
     vanillaExtractPlugin(),
     dts({
       insertTypesEntry: true,
@@ -22,11 +24,18 @@ export default defineConfig({
       cssFileName: "baukasten-base",
     },
     rollupOptions: {
-      external: ["react", "react-dom"],
+      external: [
+        "react",
+        "react-dom",
+        "react/jsx-runtime",
+        "react/jsx-dev-runtime",
+      ],
       output: {
         globals: {
           react: "React",
           "react-dom": "ReactDOM",
+          "react/jsx-runtime": "ReactJSXRuntime",
+          "react/jsx-dev-runtime": "ReactJSXDevRuntime",
         },
         banner: '"use client";',
         preserveModules: false,

packages/web-wrapper/vite.config.ts

@@ -5,7 +5,9 @@ import { resolve } from 'path';
 
 export default defineConfig({
   plugins: [
-    react(),
+    react({
+      jsxRuntime: 'automatic',
+    }),
     dts({
       insertTypesEntry: true,
     }),
@@ -18,11 +20,18 @@ export default defineConfig({
       fileName: (format) => `index.${format === 'es' ? 'mjs' : 'js'}`,
     },
     rollupOptions: {
-      external: ['react', 'react-dom'],
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react/jsx-dev-runtime',
+      ],
       output: {
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'ReactJSXRuntime',
+          'react/jsx-dev-runtime': 'ReactJSXDevRuntime',
         },
         banner: '"use client";',
         preserveModules: false,