get unified bundle working, update demo ui to use new paths

Author: velzie

lib/index.d.ts

@@ -1,16 +1,22 @@
 declare const scramjetPath: string;
 
 import * as controller from "../dist/types/controller/index.ts";
+import * as worker from "../dist/types/worker/index.ts";
 import * as types from "../dist/types/types.ts";
 import * as frame from "../dist/types/controller/frame.ts";
 
 declare global {
-	const ScramjetController: typeof controller.ScramjetController;
-	const ScramjetFrame: typeof frame.ScramjetFrame;
+	function $scramjetLoadController(): typeof controller;
+	function $scramjetLoadWorker(): typeof worker;
+	function $scramjetLoadClient(config: ScramjetConfig);
 	type ScramjetController = controller.ScramjetController;
 	type ScramjetFrame = frame.ScramjetFrame;
 
 	type ScramjetConfig = types.ScramjetConfig;
 	type ScramjetInitConfig = types.ScramjetInitConfig;
+	var $scramjetVersion: {
+		build: string;
+		version: string;
+	};
 }
 export { scramjetPath };

src/client/index.ts

@@ -1,6 +1,6 @@
 // entrypoint for scramjet.client.js
 
-import { loadCodecs } from "../shared/index";
+import { loadCodecs, setConfig } from "../shared/index";
 import { SCRAMJETCLIENT } from "../symbols";
 import { ScramjetClient } from "./client";
 import { ScramjetContextEvent, UrlChangeEvent } from "./events";
@@ -21,7 +21,8 @@ function createFrameId() {
 		.join("")}`;
 }
 
-export function clientInitHook() {
+export function clientInitHook(config: ScramjetConfig) {
+	setConfig(config);
 	dbg.log("initializing scramjet client");
 	// if it already exists, that means the handlers have probably already been setup by the parent document
 	if (!(SCRAMJETCLIENT in <Partial<typeof self>>self)) {

src/client/shared/sourcemaps.ts

@@ -1,4 +1,4 @@
-import { flagEnabled } from "../../shared";
+import { config, flagEnabled } from "../../shared";
 import { SCRAMJETCLIENT, SCRAMJETCLIENTNAME } from "../../symbols";
 import { ProxyCtx, ScramjetClient } from "../client";
 
@@ -185,20 +185,16 @@ export const enabled = (client: ScramjetClient) =>
 
 export default function (client: ScramjetClient, self: Self) {
 	// every script will push a sourcemap
-	Object.defineProperty(
-		self,
-		globalThis.$scramjet.config.globals.pushsourcemapfn,
-		{
-			value: (buf: Array<number>, tag: string) => {
-				const before = performance.now();
-				registerRewrites(buf, tag);
-				dbg.time(client.meta, before, `scramtag parse for ${tag}`);
-			},
-			enumerable: false,
-			writable: false,
-			configurable: false,
-		}
-	);
+	Object.defineProperty(self, config.globals.pushsourcemapfn, {
+		value: (buf: Array<number>, tag: string) => {
+			const before = performance.now();
+			registerRewrites(buf, tag);
+			dbg.time(client.meta, before, `scramtag parse for ${tag}`);
+		},
+		enumerable: false,
+		writable: false,
+		configurable: false,
+	});
 
 	// when we rewrite javascript it will make function.toString leak internals
 	// this can lead to double rewrites which is bad

src/entry.ts

@@ -1,27 +1,28 @@
 /// <reference types="@rspack/core/module" />
+import "../lib/index.d.ts";
 
-export function $scramjetLoadController() {
+self.$scramjetLoadController = function () {
 	return require("./controller/index");
-}
+};
 
-export function $scramjetLoadClient() {
+self.$scramjetLoadClient = function (config) {
 	const client = require("./client/index");
-	client.clientInitHook();
+	client.clientInitHook(config);
 
 	return client;
-}
+};
 
-export function $scramjetLoadWorker() {
+self.$scramjetLoadWorker = function () {
 	return require("./worker/index");
-}
+};
 
-export const $scramjet = {
-	version: {
-		build: COMMITHASH,
-		version: VERSION,
-	},
+export const $scramjetVersion = {
+	build: COMMITHASH,
+	version: VERSION,
 };
 
+self.$scramjetVersion = $scramjetVersion;
+
 if ("document" in self && document?.currentScript) {
 	document.currentScript.remove();
 }

src/shared/rewriters/js.ts

@@ -45,10 +45,7 @@ function rewriteJsWasm(
 		let { js, map, scramtag, errors } = out;
 
 		if (flagEnabled("sourcemaps", meta.base) && !globalThis.clients) {
-			globalThis[globalThis.$scramjet.config.globals.pushsourcemapfn](
-				Array.from(map),
-				scramtag
-			);
+			globalThis[config.globals.pushsourcemapfn](Array.from(map), scramtag);
 
 			map = null;
 		}

src/shared/rewriters/wasm.ts

@@ -1,11 +1,14 @@
 // i am a cat. i like to be petted. i like to be fed. i like to be
 import { initSync, Rewriter } from "../../../rewriter/wasm/out/wasm.js";
 import type { JsRewriterOutput } from "../../../rewriter/wasm/out/wasm.js";
-import { config, flagEnabled } from "..";
+import { codecDecode, codecEncode, config, flagEnabled } from "..";
 
 export type { JsRewriterOutput, Rewriter };
 
-import { URLMeta } from "./url";
+import { rewriteUrl, URLMeta } from "./url";
+import { htmlRules } from "../htmlRules";
+import { rewriteCss, unrewriteCss } from "./css";
+import { rewriteJs } from "./js";
 
 let wasm_u8: Uint8Array;
 if (self.WASM)
@@ -47,7 +50,22 @@ export function getRewriter(meta: URLMeta): [Rewriter, () => void] {
 		if (flagEnabled("rewriterLogs", meta.base))
 			console.log(`creating new rewriter, ${len} rewriters made already`);
 
-		let rewriter = new Rewriter({});
+		let rewriter = new Rewriter({
+			config,
+			shared: {
+				rewrite: {
+					htmlRules,
+					rewriteUrl,
+					rewriteCss,
+					rewriteJs,
+				},
+			},
+			flagEnabled,
+			codec: {
+				encode: codecEncode,
+				decode: codecDecode,
+			},
+		});
 		obj = { rewriter, inUse: false };
 		rewriters.push(obj);
 	} else {

src/shared/rewriters/worker.ts

@@ -20,7 +20,7 @@ export function rewriteWorkers(
 
 	script("wasm");
 	script("all");
-	str += `$scramjetLoadClient(${JSON.stringify(config)})`;
+	str += `$scramjetLoadClient(${JSON.stringify(config)});`;
 
 	let rewritten = rewriteJs(js, url, meta, module);
 	if (rewritten instanceof Uint8Array) {

src/worker/error.ts

@@ -1,14 +1,12 @@
-import { $scramjet } from "../entry";
-
 export function errorTemplate(trace: string, fetchedURL: string) {
 	// turn script into a data URI so we don"t have to escape any HTML values
 	const script = `
                 errorTrace.value = ${JSON.stringify(trace)};
                 fetchedURL.textContent = ${JSON.stringify(fetchedURL)};
                 for (const node of document.querySelectorAll("#hostname")) node.textContent = ${JSON.stringify(location.hostname)};
                 reload.addEventListener("click", () => location.reload());
-                version.textContent = ${JSON.stringify($scramjet.version.version)};
-                build.textContent = ${JSON.stringify($scramjet.version.build)};
+                version.textContent = ${JSON.stringify($scramjetVersion)};
+                build.textContent = ${JSON.stringify($scramjetVersion)};
 
                 document.getElementById('copy-button').addEventListener('click', async () => {
                     const text = document.getElementById('errorTrace').value;

src/worker/fetch.ts

@@ -289,13 +289,13 @@ export async function handleFetch(
 			message: err.message,
 			url: request.url,
 			destination: request.destination,
-			timestamp: new Date().toISOString(),
 		};
 		if (err.stack) {
 			errorDetails["stack"] = err.stack;
 		}
 
 		console.error("ERROR FROM SERVICE WORKER FETCH: ", errorDetails);
+		console.error(err);
 
 		if (!["document", "iframe"].includes(request.destination))
 			return new Response(undefined, { status: 500 });
@@ -508,7 +508,7 @@ async function rewriteBody(
 				if (js instanceof Uint8Array) {
 					js = new TextDecoder().decode(js);
 				}
-				const sourcemapfn = `${globalThis.$scramjet.config.globals.pushsourcemapfn}([${map.join(",")}], "${tag}");`;
+				const sourcemapfn = `${config.globals.pushsourcemapfn}([${map.join(",")}], "${tag}");`;
 				const strictMode = /^\s*(['"])use strict\1;?/;
 				if (strictMode.test(js)) {
 					js = js.replace(strictMode, `$&\n${sourcemapfn}`);

static/sw.js

@@ -1,3 +1,5 @@
+/// <reference path="../lib/index.d.ts" />
+
 // dumb hack to allow firefox to work (please dont do this in prod)
 if (navigator.userAgent.includes("Firefox")) {
 	Object.defineProperty(globalThis, "crossOriginIsolated", {
@@ -6,8 +8,8 @@ if (navigator.userAgent.includes("Firefox")) {
 	});
 }
 
-importScripts("/scram/scramjet.shared.js", "/scram/scramjet.worker.js");
-
+importScripts("/scram/scramjet.all.js");
+const { ScramjetServiceWorker } = $scramjetLoadWorker();
 const scramjet = new ScramjetServiceWorker();
 
 async function handleRequest(event) {