[frontend] refactor history logic into history.ts

Author: velzie

frontend/src/Tab.ts

@@ -1,14 +1,13 @@
 import { createState } from "dreamland/core";
 import { StatefulClass } from "./StatefulClass";
 import { scramjet } from "./main";
-import type { HistoryState } from "./history";
+import { History, injectHistoryEmulation } from "./history";
 
 let id = 0;
 export class Tab extends StatefulClass {
 	id: number;
 	title: string | null;
 	frame: ScramjetFrame;
-	url: string;
 
 	dragoffset: number;
 	dragpos: number;
@@ -18,30 +17,45 @@ export class Tab extends StatefulClass {
 	pos: number;
 	icon: string;
 
-	history: HistoryState[];
+	history: History;
 
-	constructor() {
-		super(createState({}));
+	constructor(public url: URL = new URL("puter://newtab")) {
+		super(createState(new Object(Tab.prototype)));
 		this.id = id++;
 
-		this.frame = scramjet.createFrame();
 		this.title = null;
-		this.url = "puter://blank";
+
+		this.history = new History(this);
+		this.history.push(this.url, undefined);
+
 		this.icon = "/vite.svg";
 
 		this.dragoffset = -1;
 		this.startdragpos = -1;
 		this.dragpos = -1;
 		this.width = 0;
 		this.pos = 0;
-		this.history = [];
+
+		const frame = scramjet.createFrame();
+		injectHistoryEmulation(frame, this);
+
+		this.frame = frame;
+	}
+
+	// only caller should be history.ts for this
+	navigate(url: URL) {
+		this.url = url;
+		if (url.protocol == "puter:") {
+			switch (url.host) {
+				case "newtab":
+					this.title = "New Tab";
+			}
+		} else {
+			this.frame.go(url);
+		}
 	}
 }
 
-// frame.addEventListener("navigate", (e) => {
-// 			console.error(e);
-// 			tab.url = frame.client.url.href;
-// 		});
 // 		frame.frame.addEventListener("load", (e) => {
 // 			tab.url = frame.client.url.href;
 // 		});

frontend/src/browser.tsx

@@ -1,13 +1,14 @@
 import { createState, type Stateful } from "dreamland/core";
 import { ThemeVars, type Theme } from "./theme";
-import { Tabs, Tab } from "./components/TabStrip";
+import { Tabs } from "./components/TabStrip";
 import { Omnibox } from "./components/Omnibox";
 import { scramjet } from "./main";
 import iconAdd from "@ktibow/iconset-ion/add";
 import { Shell } from "./components/Shell";
 import { createMenu } from "./components/Menu";
 import { createDelegate } from "./delegate";
 import { StatefulClass } from "./StatefulClass";
+import { Tab } from "./Tab";
 
 export const pushTab = createDelegate<Tab>();
 export const popTab = createDelegate<Tab>();
@@ -55,15 +56,6 @@ export class Browser extends StatefulClass {
 		return tab;
 	}
 
-	navigate(url: string) {
-		if (URL.canParse(url)) {
-			this.activetab.frame.go(url);
-		} else {
-			const search = `https://google.com/search?q=${encodeURIComponent(url)}`;
-			this.activetab.frame.go(search);
-		}
-	}
-
 	destroyTab(tab: Tab) {
 		this.tabs = this.tabs.filter((t) => t !== tab);
 		console.log(this.tabs);
@@ -96,10 +88,10 @@ export class Browser extends StatefulClass {
 				<Omnibox
 					tabUrl={use(this.activetab.url)}
 					goBack={() => {
-						this.activetab.frame.back();
+						this.activetab.history.go(-1);
 					}}
 					goForwards={() => {
-						this.activetab.frame.forward();
+						this.activetab.history.go(1);
 					}}
 					refresh={() => {
 						this.activetab.frame.reload();

frontend/src/history.ts

@@ -3,10 +3,71 @@ import type { Tab } from "./Tab";
 // history api emulation
 export type HistoryState = {
 	state: any;
-	url: string;
+	url: URL;
 };
 
-export function injectHistoryEmulation(client: ScramjetClient, tab: Tab) {
+export class History {
+	index: number = 0;
+	states: HistoryState[] = [];
+
+	constructor(private tab: Tab) {}
+
+	push(url: URL, state: any, navigate: boolean = true): HistoryState {
+		this.states.push({ url, state });
+		this.index++;
+
+		if (navigate) this.tab.navigate(url);
+
+		return this.states[this.index];
+	}
+	replace(url: URL, state: any, navigate: boolean = true): HistoryState {
+		if (this.index < this.states.length) {
+			this.states[this.index] = { url, state };
+		} else {
+			this.push(url, state);
+		}
+
+		if (navigate) this.tab.navigate(url);
+
+		return this.states[this.index];
+	}
+	go(delta: number, navigate: boolean = true): HistoryState {
+		this.index += delta;
+		if (this.index < 0) {
+			this.index = 0;
+		} else if (this.index >= this.states.length) {
+			this.index = this.states.length - 1;
+		}
+
+		if (navigate) this.tab.navigate(this.states[this.index].url);
+
+		return this.states[this.index];
+	}
+	canGoBack(): boolean {
+		return this.index > 0;
+	}
+	canGoForward(): boolean {
+		return this.index < this.states.length - 1;
+	}
+}
+
+export function injectHistoryEmulation(frame: ScramjetFrame, tab: Tab) {
+	frame.addEventListener("navigate", (e) => {
+		// this event is fired whenever location.href is set, or similar
+		// importantly not fired when replaceState is called (we overwrite it ourselves in injectContext)
+
+		// behavior here is just to create a new history entry
+		const url = new URL(e.url);
+		tab.history.push(url, undefined, false);
+
+		console.log("History push from navigate", url, tab.history.states);
+	});
+	frame.frame.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
+		console.log("History beforeunload", e);
+	});
+}
+
+function injectContext(client: ScramjetClient, tab: Tab) {
 	client.Proxy("History.prototype.pushState", {
 		apply(ctx) {
 			console.log("STATE PUSH", ctx.args);

frontend/src/main.tsx

@@ -51,4 +51,5 @@ try {
 			`Error mounting: ${"message" in err ? err.message : err}`
 		)
 	);
+	console.error(err);
 }

frontend/tsconfig.json

@@ -19,7 +19,7 @@
 		"strict": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
-		"erasableSyntaxOnly": true,
+		"erasableSyntaxOnly": false,
 		"noFallthroughCasesInSwitch": true,
 		"noUncheckedSideEffectImports": true,
 		"jsx": "react-jsx",