[chrome] add VITE_PUTER_BRANDING flag

Author: velzie

devserver.ts

@@ -33,10 +33,14 @@ const CHROME_PORT = process.env.CHROME_PORT || 6767;
 const WISP_PORT = process.env.WISP_PORT || 6768;
 const ISOLATION_PORT = process.env.ISOLATION_PORT || 5233;
 
-process.env.VITE_WISP_URL =
-	process.env.VITE_WISP_URL || `ws://localhost:${WISP_PORT}/`;
-process.env.VITE_ISOLATION_ORIGIN =
-	process.env.VITE_ISOLATION_ORIGIN || `http://localhost:${ISOLATION_PORT}`;
+const puterBranding = Boolean(process.env.VITE_PUTER_BRANDING);
+
+if (puterBranding) {
+	process.env.VITE_ISOLATION_ORIGIN ||= `https://puter.zone`;
+} else {
+	process.env.VITE_WISP_URL ||= `ws://localhost:${WISP_PORT}/`;
+	process.env.VITE_ISOLATION_ORIGIN ||= `http://localhost:${ISOLATION_PORT}`;
+}
 
 const sandboxRoot = path.resolve("./packages/sandbox");
 
@@ -77,7 +81,7 @@ const lines = [
 	),
 	black()(
 		`${accent("wisp")} ${connector} ${urlColor(
-			process.env.VITE_WISP_URL ?? ""
+			process.env.VITE_WISP_URL ?? "(puter)"
 		)}`
 	),
 	black()(

packages/chrome/index.html

@@ -6,8 +6,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Browser</title>
 
-		<script src="https://js.puter.com/v2/"></script>
-
 		<!--ssr-head-->
 	</head>
 

packages/chrome/src/Browser.tsx

@@ -292,10 +292,10 @@ export async function saveBrowserState() {
 
 	let ser = browser.serialize();
 
-	if (import.meta.env.VITE_LOCAL) {
-		localStorage["browserstate"] = JSON.stringify(ser);
-	} else {
+	if (import.meta.env.VITE_PUTER_BRANDING) {
 		await puter.kv.set("browserstate", JSON.stringify(ser));
+	} else {
+		localStorage["browserstate"] = JSON.stringify(ser);
 	}
 
 	// if (!import.meta.env.VITE_LOCAL) {
@@ -319,10 +319,10 @@ export async function initBrowser() {
 	// }
 
 	let de;
-	if (import.meta.env.VITE_LOCAL) {
-		de = localStorage["browserstate"];
-	} else {
+	if (import.meta.env.VITE_PUTER_BRANDING) {
 		de = await puter.kv.get("browserstate");
+	} else {
+		de = localStorage["browserstate"];
 	}
 	if (de) {
 		try {

packages/chrome/src/main.tsx

@@ -11,7 +11,18 @@ import { App } from "./App";
 import { css } from "dreamland/core";
 import { setWispUrl } from "./IsolatedFrame";
 
-export const isPuter = !import.meta.env.VITE_LOCAL && puter.env == "app";
+// load puter sdk
+if (import.meta.env.VITE_PUTER_BRANDING) {
+	let script = <script src="https://js.puter.com/v2/"></script>;
+	document.head.appendChild(script);
+
+	await new Promise((resolve) => {
+		script.onload = () => resolve(null);
+	});
+}
+
+export const isPuter =
+	import.meta.env.VITE_PUTER_BRANDING && puter.env == "app";
 
 export function LoadInterstitial(s: { status: string }) {
 	return (
@@ -60,7 +71,7 @@ export async function mount(): Promise<HTMLElement> {
 			e.preventDefault();
 		});
 
-		if (!import.meta.env.VITE_LOCAL) {
+		if (import.meta.env.VITE_PUTER_BRANDING) {
 			if (!puter.auth.isSignedIn()) {
 				await puter.auth.signIn();
 				return;

packages/chrome/src/vite-env.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="@mercuryworkshop/scramjet" />
 
 interface ImportMetaEnv {
-	readonly VITE_LOCAL: boolean;
+	readonly VITE_PUTER_BRANDING: boolean;
 	readonly VITE_ISOLATION_ORIGIN: string;
 	readonly VITE_WISP_URL: string;
 }