🐛 Fix Components script url for production

frak-id · Dec 18, 2024 · 84be96a · 84be96a
1 parent ddacd1d
commit 84be96a
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 14 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/example/vanilla-js/index.html b/example/vanilla-js/index.html
@@ -5,9 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Example Vanilla JS</title>
     <link rel="icon" href="/favicon.ico" sizes="32x32"/>
-<!--    <script src="https://cdn.jsdelivr.net/npm/@frak-labs/components" defer="defer"></script>-->
-    <script src="@/components.js"></script>
     <script type="module" src="/src/main.ts"></script>
+    <%- injectScript %>
 </head>
 <body>
 <h1>Welcome to example Vanilla JS</h1>

diff --git a/example/vanilla-js/package.json b/example/vanilla-js/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@frak-labs/core-sdk": "workspace:*",
     "typescript": "^5",
-    "vite": "^5.4.11"
+    "vite": "^5.4.11",
+    "vite-plugin-html": "^3.2.2"
   }
 }
diff --git a/example/vanilla-js/src/main.ts b/example/vanilla-js/src/main.ts
@@ -1,6 +1,11 @@
+const walletUrl =
+    process.env.NODE_ENV === "production"
+        ? "https://wallet-dev.frak.id"
+        : "https://localhost:3000";
+
 window.FrakSetup = {
     config: {
-        walletUrl: "https://localhost:3000",
+        walletUrl,
         metadata: {
             name: "Your App Name",
         },

diff --git a/example/vanilla-js/vite.config.ts b/example/vanilla-js/vite.config.ts
@@ -1,25 +1,26 @@
 import { resolve } from "node:path";
 import { defineConfig } from "vite";
+import { createHtmlPlugin } from "vite-plugin-html";
 
 const projectRootDir = resolve(__dirname);
 const bundleDir = resolve(projectRootDir, "../../sdk/components/cdn");
+const scriptSrc =
+    process.env.NODE_ENV === "production"
+        ? "https://cdn.jsdelivr.net/npm/@frak-labs/components@latest/dist/bundle/components.js"
+        : `${bundleDir}/components.js`;
 
 export default defineConfig({
     server: {
         port: 3013,
     },
     publicDir: "public",
     plugins: [
-        {
-            name: "html-transform",
-            transformIndexHtml(html) {
-                // Replace @/ with the actual path in HTML files
-                return html.replace(
-                    /<script([^>]*?) src="@\/(.*?)"([^>]*)>/g,
-                    (_match, prefix, path, suffix) =>
-                        `<script${prefix} src="${bundleDir}/${path}"${suffix}>`
-                );
+        createHtmlPlugin({
+            inject: {
+                data: {
+                    injectScript: `<script src="${scriptSrc}"></script>`,
+                },
             },
-        },
+        }),
     ],
 });