[frontend] save tab state

Author: velzie

frontend/src/Tab.tsx

@@ -5,6 +5,7 @@ import {
 	addHistoryListeners,
 	History,
 	injectHistoryEmulation,
+	type SerializedHistory,
 } from "./history";
 import { NewTab } from "./pages/NewTab";
 import { Playground } from "./pages/Playground";
@@ -13,6 +14,12 @@ import { About } from "./pages/About";
 
 const requestInspectElement = createDelegate<[HTMLElement, Tab]>();
 
+export type SerializedTab = {
+	id: number;
+	title: string | null;
+	history: SerializedHistory;
+};
+
 let id = 0;
 export class Tab extends StatefulClass {
 	id: number;
@@ -74,6 +81,21 @@ export class Tab extends StatefulClass {
 		this.devtoolsFrame = scramjet.createFrame();
 	}
 
+	serialize(): SerializedTab {
+		return {
+			id: this.id,
+			title: this.title,
+			history: this.history.serialize(),
+		};
+	}
+	deserialize(de: SerializedTab) {
+		this.id = de.id;
+		this.title = de.title;
+		this.history.deserialize(de.history);
+		console.log(this.history.states[this.history.index].url);
+		this._directnavigate(this.history.states[this.history.index].url);
+	}
+
 	// only caller should be history.ts for this
 	_directnavigate(url: URL) {
 		this.url = url;

frontend/src/browser.tsx

@@ -2,18 +2,25 @@ import { createState, type Stateful } from "dreamland/core";
 import { ThemeVars, type Theme } from "./theme";
 import { Tabs } from "./components/TabStrip";
 import { Omnibox } from "./components/Omnibox";
-import { scramjet } from "./main";
+import { browser, scramjet } from "./main";
 import iconAdd from "@ktibow/iconset-ion/add";
 import { Shell } from "./components/Shell";
 import { createMenu } from "./components/Menu";
 import { StatefulClass } from "./StatefulClass";
-import { Tab } from "./Tab";
+import { Tab, type SerializedTab } from "./Tab";
 import { createDelegate } from "dreamland/core";
 
 export const pushTab = createDelegate<Tab>();
 export const popTab = createDelegate<Tab>();
 export const forceScreenshot = createDelegate<Tab>();
 
+export const saveBrowserState = createDelegate<void>();
+
+export type SerializedBrowser = {
+	tabs: SerializedTab[];
+	activetab: number;
+};
+
 export class Browser extends StatefulClass {
 	built: boolean = false;
 
@@ -49,6 +56,23 @@ export class Browser extends StatefulClass {
 		};
 	}
 
+	serialize(): SerializedBrowser {
+		return {
+			tabs: this.tabs.map((t) => t.serialize()),
+			activetab: this.activetab.id,
+		};
+	}
+	deserialize(de: SerializedBrowser) {
+		this.tabs = [];
+		for (let detab of de.tabs) {
+			let tab = this.newTab();
+			console.log(tab);
+			tab.deserialize(detab);
+		}
+		this.activetab = this.tabs.find((t) => t.id == de.activetab)!;
+		console.log(this.activetab, this.activetab.url);
+	}
+
 	newTab() {
 		let tab = new Tab();
 		pushTab(tab);
@@ -69,8 +93,10 @@ export class Browser extends StatefulClass {
 	build(): HTMLElement {
 		let shell = <Shell tabs={use(this.tabs)} activetab={use(this.activetab)} />;
 
-		let tab = this.newTab();
-		this.activetab = tab;
+		if (!this.activetab) {
+			let tab = this.newTab();
+			this.activetab = tab;
+		}
 		if (this.built) throw new Error("already built");
 		this.built = true;
 
@@ -115,5 +141,16 @@ export class Browser extends StatefulClass {
 export function createBrowser(): Browser {
 	let browser = new Browser(createState({}));
 	Object.setPrototypeOf(browser, Browser.prototype);
+	let de = localStorage["browserstate"];
+	if (de) {
+		browser.deserialize(JSON.parse(de));
+	}
+
 	return browser;
 }
+
+saveBrowserState.listen(() => {
+	let ser = browser.serialize();
+	localStorage["browserstate"] = JSON.stringify(ser);
+});
+setInterval(saveBrowserState, 1000);

frontend/src/history.ts

@@ -6,12 +6,34 @@ export type HistoryState = {
 	url: URL;
 };
 
+export type SerializedHistory = {
+	index: number;
+	states: {
+		state: any;
+		url: string;
+	}[];
+};
+
 export class History {
 	index: number = -1;
 	states: HistoryState[] = [];
 
 	constructor(private tab: Tab) {}
 
+	serialize(): SerializedHistory {
+		return {
+			index: this.index,
+			states: this.states.map((s) => ({ state: s.state, url: s.url.href })),
+		};
+	}
+	deserialize(de: SerializedHistory) {
+		this.index = de.index;
+		this.states = de.states.map((s) => ({
+			state: s.state,
+			url: new URL(s.url),
+		}));
+	}
+
 	push(url: URL, state: any = null, navigate: boolean = true): HistoryState {
 		this.states.push({ url, state });
 		this.index++;