feat: use react import map only when build is not for connect studio

powerhouse-inc · Oct 28, 2024 · 14f173b · 14f173b
1 parent 8bfe962
commit 14f173b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -5,9 +5,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Powerhouse Connect</title>
         <base href="/">
+        %VITE_IMPORT_REACT_SCRIPT%
     </head>
     <body>
         <div id="app"></div>
         <script type="module" src="/src/renderer.ts"></script>
     </body>
-</html>
+</html>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -4,6 +4,7 @@
 type ImportMetaEnv = {
   // Auto-generated by `npx vite-envs update-types` and hot-reloaded by the `vite-env` plugin
   // You probably want to add `/src/vite-env.d.ts` to your .prettierignore
+  VITE_IMPORT_REACT_SCRIPT: string
   BASE_URL: string
   MODE: string
   DEV: boolean

diff --git a/vite.renderer.config.mts b/vite.renderer.config.mts
@@ -14,7 +14,23 @@ import { externalIds, viteConnectDevStudioPlugin } from './studio/vite-plugin';
 const isBuildStudio = process.env.BUILD_STUDIO === 'true';
 const buildStudioExternals = isBuildStudio
     ? [externalIds, '@powerhousedao/studio', '@powerhousedao/design-system']
-    : [];
+    : [externalIds];
+
+const reactImportScript = `
+    <script type="importmap">
+        {
+            "imports": 
+            {
+                "react": "https://esm.sh/react",
+                "react/": "https://esm.sh/react/",
+                "react-dom": "https://esm.sh/react-dom",
+                "react-dom/": "https://esm.sh/react-dom/"
+            }
+        }
+    </script>
+`;
+
+process.env.VITE_IMPORT_REACT_SCRIPT = isBuildStudio ? '' : reactImportScript;
 
 export default defineConfig(({ mode }) => {
     const isProd = mode === 'production';
@@ -57,6 +73,11 @@ export default defineConfig(({ mode }) => {
         createHtmlPlugin({
             minify: true,
             inject: {
+                data: {
+                    title: 'hello',
+                    // injectScript:
+                    //     '<script type="importmap">{"imports": { "react": "https://esm.sh/react", "react/": "https://esm.sh/react/", "react-dom": "https://esm.sh/react-dom", "react-dom/": "https://esm.sh/react-dom/" }}</script>',
+                },
                 tags: [
                     ...(clientConfig.meta.map(meta => ({
                         ...meta,