[frontend] separate browser logic and root component

Author: velzie

frontend/package.json

@@ -21,6 +21,7 @@
 		"html-to-image": "^1.11.13",
 		"html2canvas": "^1.4.1",
 		"monaco-editor": "^0.52.2",
+		"tlds": "^1.259.0",
 		"vite-plugin-static-copy": "^3.1.0"
 	}
 }

frontend/src/App.tsx

@@ -0,0 +1,27 @@
+import type { Component } from "dreamland/core";
+import { Omnibox } from "./components/Omnibox";
+import { Tabs } from "./components/TabStrip";
+import { ThemeVars } from "./theme";
+import { config } from "./Browser";
+import { browser } from "./main";
+import type { Tab } from "./Tab";
+
+export const App: Component = function (cx) {
+	return (
+		<div id="app">
+			<ThemeVars colors={use(config.theme)} />
+			<Tabs
+				tabs={use(browser.tabs).bind()}
+				activetab={use(browser.activetab).bind()}
+				addTab={() => {
+					browser.newTab();
+				}}
+				destroyTab={(tab: Tab) => {
+					browser.destroyTab(tab);
+				}}
+			/>
+			<Omnibox tab={use(browser.activetab).bind()} />
+			{cx.children}
+		</div>
+	);
+};

frontend/src/browser.tsx renamed to frontend/src/Browser.tsx

@@ -17,44 +17,54 @@ export const forceScreenshot = createDelegate<Tab>();
 
 export const saveBrowserState = createDelegate<void>();
 
+export const config = createState({
+	theme: {
+		frame_bg: [231, 238, 245],
+		toolbar_bg: [211, 218, 255],
+		toolbar_button_fg: [65, 72, 76],
+		toolbar_fg: [65, 72, 76],
+
+		inactive_tab_bg: [40, 40, 40],
+		inactive_tab_fg: [95, 92, 96],
+		active_tab_fg: [65, 72, 76],
+
+		button_bg: [231, 238, 0],
+
+		ntp_bg: [231, 238, 0],
+		ntp_fg: [232, 234, 237],
+		ntp_link_fg: [138, 180, 248],
+
+		omnibox_bg: [221, 228, 235],
+		omnibox_fg: [227, 227, 227],
+
+		bookmark_fg: [199, 199, 199],
+	},
+});
+
 export type SerializedBrowser = {
 	tabs: SerializedTab[];
 	activetab: number;
 };
 
+export type GlobalHistoryEntry = {
+	timestamp: number;
+	url: string;
+	title: string;
+	favicon?: string;
+};
+
 export class Browser extends StatefulClass {
 	built: boolean = false;
 
-	theme: Theme;
 	tabs: Tab[] = [];
 	activetab: Tab;
 
-	unfocusframes: boolean = false;
-
-	constructor(state: Stateful<any>) {
-		super(state);
-
-		this.theme = {
-			frame_bg: [231, 238, 245],
-			toolbar_bg: [211, 218, 255],
-			toolbar_button_fg: [65, 72, 76],
-			toolbar_fg: [65, 72, 76],
-
-			inactive_tab_bg: [40, 40, 40],
-			inactive_tab_fg: [95, 92, 96],
-			active_tab_fg: [65, 72, 76],
-
-			button_bg: [231, 238, 0],
+	globalhistory: string[];
 
-			ntp_bg: [231, 238, 0],
-			ntp_fg: [232, 234, 237],
-			ntp_link_fg: [138, 180, 248],
-
-			omnibox_bg: [221, 228, 235],
-			omnibox_fg: [227, 227, 227],
+	unfocusframes: boolean = false;
 
-			bookmark_fg: [199, 199, 199],
-		};
+	constructor() {
+		super(createState(Object.create(Browser.prototype)));
 	}
 
 	serialize(): SerializedBrowser {
@@ -126,55 +136,6 @@ export class Browser extends StatefulClass {
 			this.activetab.pushNavigate(new URL(search));
 		}
 	}
-
-	build(): HTMLElement {
-		let shell = <Shell tabs={use(this.tabs)} activetab={use(this.activetab)} />;
-
-		let de = localStorage["browserstate"];
-		if (de) {
-			browser.deserialize(JSON.parse(de));
-		} else {
-			let tab = this.newTab();
-			this.activetab = tab;
-		}
-
-		if (this.built) throw new Error("already built");
-		this.built = true;
-
-		return (
-			<div>
-				<ThemeVars colors={use(this.theme)} />
-				<Tabs
-					tabs={use(this.tabs).bind()}
-					activetab={use(this.activetab).bind()}
-					destroyTab={(tab) => this.destroyTab(tab)}
-					addTab={() => this.newTab()}
-				/>
-				<Omnibox
-					tabUrl={use(this.activetab.url)}
-					canGoBack={use(this.activetab.canGoBack)}
-					canGoForwards={use(this.activetab.canGoForward)}
-					goBack={() => {
-						this.activetab.back();
-					}}
-					goForwards={() => {
-						this.activetab.forward();
-					}}
-					refresh={() => {
-						this.activetab.frame.reload();
-					}}
-				/>
-				{shell}
-			</div>
-		);
-	}
-}
-
-export function createBrowser(): Browser {
-	let browser = new Browser(createState({}));
-	Object.setPrototypeOf(browser, Browser.prototype);
-
-	return browser;
 }
 
 saveBrowserState.listen(() => {

frontend/src/history.ts renamed to frontend/src/History.ts

@@ -6,7 +6,7 @@ import {
 	History,
 	injectHistoryEmulation,
 	type SerializedHistory,
-} from "./history";
+} from "./History";
 import { NewTab } from "./pages/NewTab";
 import { Playground } from "./pages/Playground";
 import { createMenu } from "./components/Menu";

frontend/src/Tab.tsx

@@ -11,6 +11,7 @@ import { createMenu, setContextMenu } from "./Menu";
 import { browser, client } from "../main";
 import { IconButton } from "./IconButton";
 import { createDelegate, type Delegate } from "dreamland/core";
+import type { Tab } from "../Tab";
 
 export const Spacer: Component = function (cx) {
 	return <div></div>;
@@ -247,12 +248,7 @@ UrlInput.style = css`
 `;
 
 export const Omnibox: Component<{
-	tabUrl: URL;
-	goBack: () => void;
-	goForwards: () => void;
-	refresh: () => void;
-	canGoBack: boolean;
-	canGoForwards: boolean;
+	tab: Tab;
 }> = function (cx) {
 	const selectContent = createDelegate<void>();
 	cx.mount = () => {
@@ -268,20 +264,23 @@ export const Omnibox: Component<{
 	return (
 		<div>
 			<IconButton
-				active={use(this.canGoBack)}
-				click={this.goBack}
+				active={use(this.tab.canGoBack)}
+				click={() => this.tab.back()}
 				icon={iconBack}
 			></IconButton>
 			<IconButton
-				active={use(this.canGoForwards)}
-				click={this.goForwards}
+				active={use(this.tab.canGoForward)}
+				click={() => this.tab.forward()}
 				icon={iconForwards}
 			></IconButton>
-			<IconButton click={this.refresh} icon={iconRefresh}></IconButton>
+			<IconButton
+				click={() => this.tab.reload()}
+				icon={iconRefresh}
+			></IconButton>
 			<Spacer></Spacer>
 			<UrlInput
 				selectContent={selectContent}
-				tabUrl={use(this.tabUrl)}
+				tabUrl={use(this.tab.url)}
 			></UrlInput>
 			<Spacer></Spacer>
 			<IconButton icon={iconExtension}></IconButton>

frontend/src/components/Omnibox.tsx

@@ -1,13 +1,10 @@
 import { css, type Component } from "dreamland/core";
 import { browser } from "../main";
-import { forceScreenshot, popTab, pushTab } from "../browser";
+import { forceScreenshot, popTab, pushTab } from "../Browser";
 import type { Tab } from "../Tab";
 import { toBlob } from "html-to-image";
 
-export const Shell: Component<{
-	tabs: Tab[];
-	activetab: Tab;
-}> = function (cx) {
+export const Shell: Component = function (cx) {
 	pushTab.listen((tab) => {
 		// paint the iframes
 		tab.frame.frame.classList.add(cx.id);
@@ -21,7 +18,7 @@ export const Shell: Component<{
 				class="container"
 				data-tab={tab.id}
 				id={"tab" + tab.id}
-				class:active={use(this.activetab).map((t) => t === tab)}
+				class:active={use(browser.activetab).map((t) => t === tab)}
 				class:showframe={use(tab.internalpage).map((t) => !t)}
 			>
 				<div

frontend/src/components/Shell.tsx

@@ -3,10 +3,12 @@ import "./style.css";
 // temp fix for vite not working
 import.meta.hot?.accept(() => location.reload());
 
-import { createBrowser } from "./browser";
+import { Browser } from "./Browser";
 import { createMenu } from "./components/Menu";
 let app = document.getElementById("app")!;
 import { BareMuxConnection, BareClient } from "@mercuryworkshop/bare-mux";
+import { Shell } from "./components/Shell";
+import { App } from "./App";
 
 let connection = new BareMuxConnection("/baremux/worker.js");
 connection.setTransport("/epoxy/index.mjs", [{ wisp: "wss://anura.pro" }]);
@@ -37,13 +39,21 @@ export const scramjet = new ScramjetController({
 scramjet.init();
 navigator.serviceWorker.register("./sw.js");
 
-export let browser = createBrowser();
-(self as any).browser = browser;
+export let browser: Browser;
 
 try {
-	let built = browser.build();
-	built.id = "app";
+	let shell = <Shell></Shell>;
+	browser = new Browser();
+	let de = localStorage["browserstate"];
+	if (de) {
+		browser.deserialize(JSON.parse(de));
+	} else {
+		let tab = browser.newTab();
+		browser.activetab = tab;
+	}
 
+	(self as any).browser = browser;
+	let built = <App>{shell}</App>;
 	app.replaceWith(built);
 	built.addEventListener("contextmenu", (e) => {
 		e.preventDefault();