port over (incomplete) history emulation

Author: velzie

packages/chrome/src/History.ts

@@ -2,8 +2,7 @@ import { createState } from "dreamland/core";
 import { browser } from "./Browser";
 import { StatefulClass } from "./StatefulClass";
 import type { Tab } from "./Tab";
-
-import type { ScramjetClient, ScramjetFrame } from "@mercuryworkshop/scramjet";
+import { sendFrame } from "./IsolatedFrame";
 
 // history api emulation
 export class HistoryState extends StatefulClass {
@@ -13,6 +12,8 @@ export class HistoryState extends StatefulClass {
 	favicon: string | null = null;
 	timestamp: number;
 
+	virtual: boolean = false; // whether this state was created by pushState and can be navigated to without a full reload
+
 	constructor(partial?: Partial<HistoryState>) {
 		super(createState(Object.create(HistoryState.prototype)));
 		Object.assign(this, partial);
@@ -126,15 +127,27 @@ export class History {
 			this.index = this.states.length - 1;
 		}
 
-		if (navigate) {
+		let newstate = this.states[this.index];
+
+		if (newstate.virtual) {
+			sendFrame(this.tab, "history_go", {
+				delta,
+			});
+		} else if (navigate) {
 			this.justTriggeredNavigation = true;
-			this.tab._directnavigate(this.states[this.index].url);
+			this.tab._directnavigate(newstate.url);
+		}
+
+		if (newstate.virtual || !navigate) {
+			this.tab.url = newstate.url;
+			this.tab.title = newstate.title;
+			this.tab.icon = newstate.favicon;
 		}
 
 		this.tab.canGoBack = this.canGoBack();
 		this.tab.canGoForward = this.canGoForward();
 
-		return this.states[this.index];
+		return newstate;
 	}
 	canGoBack(): boolean {
 		return this.index > 0;
@@ -143,61 +156,3 @@ export class History {
 		return this.index < this.states.length - 1;
 	}
 }
-
-export function addHistoryListeners(frame: ScramjetFrame, tab: Tab) {
-	frame.addEventListener("navigate", (e) => {
-		console.log("History push from navigate", e, tab.history.states);
-		// 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);
-	});
-}
-
-export function injectHistoryEmulation(client: ScramjetClient, tab: Tab) {
-	// this is extremely problematic in terms of security but whatever
-	client.global.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
-		console.log("History beforeunload", e);
-	});
-
-	client.Proxy("History.prototype.pushState", {
-		apply(ctx) {
-			console.log("STATE PUSH", ctx.args);
-			ctx.return(undefined);
-		},
-	});
-
-	client.Proxy("History.prototype.replaceState", {
-		apply(ctx) {
-			console.log("STATE REPLACE", ctx.args);
-			ctx.return(undefined);
-		},
-	});
-	client.Proxy("History.prototype.back", {
-		apply(ctx) {
-			console.log("HISTORY BACK", ctx);
-			tab.history.go(-1);
-			ctx.return(undefined);
-		},
-	});
-	client.Proxy("History.prototype.forward", {
-		apply(ctx) {
-			console.log("HISTORY FORWARD", ctx);
-			tab.history.go(1);
-			ctx.return(undefined);
-		},
-	});
-	client.Proxy("History.prototype.go", {
-		apply(ctx) {
-			console.log("HISTORY GO", ctx);
-			tab.history.go(ctx.args[0]);
-			ctx.return(undefined);
-		},
-	});
-}
-
-export function handleNavigate() {}

packages/chrome/src/IsolatedFrame.tsx

@@ -2,7 +2,7 @@ import {
 	ScramjetHeaders,
 	type ScramjetFetchContext,
 	type ScramjetFetchResponse,
-	CookieStore,
+	CookieJar,
 	handleFetch,
 	rewriteUrl,
 	setConfig,
@@ -89,7 +89,7 @@ export const bare = new BareClient();
 
 type Controller = {
 	controllerframe: HTMLIFrameElement;
-	cookiestore: CookieStore;
+	cookiestore: CookieJar;
 	rootdomain: string;
 	baseurl: URL;
 	prefix: URL;
@@ -133,7 +133,7 @@ function makeController(url: URL): Controller {
 	});
 
 	const prefix = new URL(baseurl.protocol + baseurl.host + cfg.prefix);
-	const cookiestore = new CookieStore();
+	const cookiestore = new CookieJar();
 
 	const controller = {
 		controllerframe: frame,
@@ -379,13 +379,13 @@ async function makeAllResponse(): Promise<ScramjetFetchResponse> {
 let synctoken = 0;
 let syncPool: { [token: number]: (val: any) => void } = {};
 export function sendFrame<T extends keyof Framebound>(
-	controller: Controller,
+	tab: Tab,
 	type: T,
 	message: Framebound[T][0]
 ): Promise<Framebound[T][1]> {
 	let token = synctoken++;
 
-	controller.window.postMessage(
+	tab.frame.frame.contentWindow!.postMessage(
 		{
 			$ipc$type: "request",
 			$ipc$token: token,

packages/chrome/src/Tab.tsx

@@ -1,12 +1,7 @@
 import { createDelegate, createState } from "dreamland/core";
 import { StatefulClass } from "./StatefulClass";
 import { browser } from "./Browser";
-import {
-	addHistoryListeners,
-	History,
-	injectHistoryEmulation,
-	type SerializedHistory,
-} from "./History";
+import { History, type SerializedHistory } from "./History";
 import { NewTabPage } from "./pages/NewTabPage";
 import { PlaygroundPage } from "./pages/PlaygroundPage";
 import { createMenu } from "./components/Menu";
@@ -22,7 +17,6 @@ import {
 	type ScramjetFetchContext,
 	ScramjetController,
 	type ScramjetFetchResponse,
-	CookieStore,
 	handleFetch,
 	rewriteUrl,
 	config,
@@ -47,7 +41,7 @@ export class Tab extends StatefulClass {
 	devtoolsFrame: ScramjetFrame;
 	screenshot: string | null = null;
 
-	icon: string;
+	icon: string | null;
 	justCreated: boolean = true;
 
 	history: History;

packages/inject/src/index.ts

@@ -9,7 +9,10 @@ export const chromeframe = top!;
 
 export const methods: FrameboundMethods = {
 	async navigate({ url }) {
-		return "a";
+		window.location.href = url;
+	},
+	async history_go({ delta }) {
+		client.natives.call("History.prototype.go", history, delta);
 	},
 };
 
@@ -105,8 +108,56 @@ function setupContextMenu() {
 	});
 }
 
+function setupHistoryEmulation() {
+	client.Proxy("History.prototype.pushState", {
+		apply(ctx) {
+			sendChrome("history_pushState", {
+				state: ctx.args[0],
+				title: ctx.args[1],
+				url: ctx.args[2],
+			});
+
+			ctx.return(undefined);
+		},
+	});
+
+	client.Proxy("History.prototype.replaceState", {
+		apply(ctx) {
+			sendChrome("history_replaceState", {
+				state: ctx.args[0],
+				title: ctx.args[1],
+				url: ctx.args[2],
+			});
+
+			ctx.return(undefined);
+		},
+	});
+	client.Proxy("History.prototype.back", {
+		apply(ctx) {
+			sendChrome("history_go", { delta: -1 });
+
+			ctx.return(undefined);
+		},
+	});
+	client.Proxy("History.prototype.forward", {
+		apply(ctx) {
+			sendChrome("history_go", { delta: 1 });
+
+			ctx.return(undefined);
+		},
+	});
+	client.Proxy("History.prototype.go", {
+		apply(ctx) {
+			sendChrome("history_go", { delta: ctx.args[0] });
+
+			ctx.return(undefined);
+		},
+	});
+}
+
 setupTitleWatcher();
 setupContextMenu();
+setupHistoryEmulation();
 
 // inform	chrome of the current url
 // will happen if you get redirected/click on a link, etc, the chrome will have no idea otherwise

packages/inject/src/types.d.ts

@@ -34,13 +34,28 @@ export type Chromebound = {
 			url: string;
 		},
 	];
+	history_pushState: [
+		{
+			state: any;
+			title: string;
+			url: string;
+		},
+	];
+	history_replaceState: [
+		{
+			state: any;
+			title: string;
+			url: string;
+		},
+	];
+	history_go: [{ delta: number }];
 };
 
 export type Framebound = {
 	navigate: [
 		{
 			url: string;
 		},
-		string,
 	];
+	history_go: [{ delta: number }, void];
 };