Adding support for Vite v7

assets/copy/package.json

@@ -10,19 +10,19 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/postcss": "^4.1.4",
     "@tailwindcss/vite": "^4.1.4",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "19.2.0",
+    "@vitejs/plugin-react": "^5.1.0",
     "typescript": "^5.6.2",
-    "vite": "^6.3.3"
+    "vite": "^7.2.2"
   },
   "dependencies": {
     "live_react": "file:../deps/live_react",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
-    "topbar": "^2.0.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "topbar": "^3.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   }
 }

assets/copy/tsconfig.json

@@ -14,7 +14,7 @@
     "isolatedModules": true,
     "resolveJsonModule": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "sourceMap": true,
     "declaration": true,
     "noUnusedLocals": true,

assets/copy/vite.config.js

@@ -5,6 +5,38 @@ import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import liveReactPlugin from "live_react/vite-plugin";
 
+const build_env = process.env.BUILD_ENV == "production" ? "prod" : "dev";
+const PHX_APP_NAME =  path.basename(path.resolve(".."))
+
+// returns no ecternals for prod SSR build and externals for dev SSR build
+function getSsrExternals(isDev) {
+  if (isDev) {
+    return {
+      external: ["react", "react-dom"],
+      noExternal: ["live_react"],
+    };
+  }
+  return {};
+}
+
+// returns aliases for prod build to avoid duplicate react copies
+function getAliases(isDev) {
+  if (!isDev) {
+    const aliases = {
+      react: path.resolve(__dirname, "node_modules/react"),
+      "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+    };
+
+    // required for phoenix 1.8 and up
+    aliases[`phoenix-colocated/${PHX_APP_NAME}`] = path.resolve(
+      __dirname,
+      `../_build/${build_env}/phoenix-colocated/${PHX_APP_NAME}`,
+    )
+    return aliases
+  }
+  return {};
+}
+
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
   const isDev = command !== "build";
@@ -20,10 +52,12 @@ export default defineConfig(({ command }) => {
     ssr: {
       // we need it, because in SSR build we want no external
       // and in dev, we want external for fast updates
-      noExternal: isDev ? undefined : true,
+      ...getSsrExternals(isDev),
     },
     resolve: {
+      preserveSymlinks: true,
       alias: {
+        ...getAliases(isDev),
         "@": path.resolve(__dirname, "."),
       },
     },