cursed logging

rspack.config.js

@@ -1,4 +1,5 @@
 import { defineConfig } from "@rspack/cli";
+import { rspack } from "@rspack/core";
 // import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin";
 import { join } from "path";
 import { fileURLToPath } from "url";
@@ -23,13 +24,21 @@ export default defineConfig({
 		rules: [
 			{
 				test: /\.ts$/,
-				use: "builtin:swc-loader",
+				loader: "builtin:swc-loader",
 				exclude: ["/node_modules/"],
 				options: {
+					asdasdasds: new Error(),
 					jsc: {
 						parser: {
 							syntax: "typescript",
 						},
+						target: "es2022",
+					},
+					strictMode: false,
+					module: {
+						type: "es6",
+						strict: false,
+						strictMode: false,
 					},
 				},
 				type: "javascript/auto",
@@ -39,10 +48,15 @@ export default defineConfig({
 	output: {
 		filename: "scramjet.[name].js",
 		path: join(__dirname, "dist"),
+		libraryTarget: "es2022",
 		iife: true,
+		strict: false,
 		clean: true,
 	},
 	plugins: [
+		new rspack.ProvidePlugin({
+			dbg: [join(__dirname, "src/log.ts"), "default"],
+		}),
 		// new RsdoctorRspackPlugin({
 		//     supports: {
 		//         parseBundle: true,

src/client/index.ts

@@ -7,12 +7,13 @@ declare global {
 		$sImport: any;
 	}
 }
+type AnyFunction = (...args: any[]) => any;
 
 type ProxyCtx = {
-	fn: Function;
+	fn: AnyFunction;
 	this: any;
 	args: any[];
-	newTarget: Function;
+	newTarget: AnyFunction;
 	return: (r: any) => void;
 };
 
@@ -25,6 +26,9 @@ class ScramjetClient {
 			apply?(ctx: ProxyCtx): any;
 		}
 	) {
+		if (!target) return;
+		if (!Reflect.has(target, prop)) return;
+
 		const value = Reflect.get(target, prop);
 		delete target[prop];
 
@@ -34,7 +38,7 @@ class ScramjetClient {
 			h.construct = function (
 				target: any,
 				argArray: any[],
-				newTarget: Function
+				newTarget: AnyFunction
 			) {
 				let returnValue: any = null;
 
@@ -89,8 +93,30 @@ class ScramjetClient {
 		return new URL(decodeUrl(location.href));
 	}
 
-	init() {
+	async init() {
-		console.log("SCRAMJET INIT");
+		function b64(buffer) {
+			let binary = "";
+			let bytes = new Uint8Array(buffer);
+			let len = bytes.byteLength;
+			for (let i = 0; i < len; i++) {
+				binary += String.fromCharCode(bytes[i]);
+			}
+
+			return window.btoa(binary);
+		}
+		const arraybuffer = await (await fetch("/scramjet.png")).arrayBuffer();
+		console.log(
+			"%cb",
+			`
+background-image: url(data:image/png;base64,${b64(arraybuffer)});
+color: transparent;
+padding-left: 200px;
+padding-bottom: 100px;
+background-size: contain;
+background-position: center center;
+background-repeat: no-repeat;
+`
+		);
 	}
 }
 

src/global.d.ts

@@ -0,0 +1,6 @@
+declare const dbg: {
+	log: (message: string, ...args: any[]) => void;
+	warn: (message: string, ...args: any[]) => void;
+	error: (message: string, ...args: any[]) => void;
+	debug: (message: string, ...args: any[]) => void;
+};

src/log.ts

@@ -0,0 +1,88 @@
+const _dbg = {
+	fmt: function (severity: string, message: string, ...args: any[]) {
+		const old = Error.prepareStackTrace;
+
+		Error.prepareStackTrace = (_, stack) => {
+			stack.shift(); // stack();
+			stack.shift(); // fmt();
+
+			for (let i = 0; i < stack.length; i++) {
+				if (Object.values(this).includes(stack[i].getFunction())) {
+					stack.splice(i, 1);
+				}
+			}
+
+			let frame = stack[0];
+			while (!frame?.getFunctionName() || !frame) {
+				frame = stack.shift();
+			}
+
+			const fn = stack[0].getFunctionName();
+
+			return `${fn}()`;
+		};
+
+		const fmt = (function stack() {
+			try {
+				throw new Error();
+			} catch (e) {
+				return e.stack;
+			}
+		})();
+
+		Error.prepareStackTrace = old;
+
+		const fn = console[severity] || console.log;
+		const bg = {
+			log: "#000",
+			warn: "#f80",
+			error: "#f00",
+			debug: "transparent",
+		}[severity];
+		const fg = {
+			log: "#fff",
+			warn: "#fff",
+			error: "#fff",
+			debug: "gray",
+		}[severity];
+		const padding = {
+			log: 2,
+			warn: 4,
+			error: 4,
+			debug: 0,
+		}[severity];
+
+		fn(
+			`%c${fmt}%c ${message}`,
+			`
+background-color: ${bg};
+color: ${fg};
+padding: ${padding}px;
+font-weight: bold;
+`,
+			`
+${severity === "debug" ? "color: gray" : ""}
+`,
+			...args
+		);
+	},
+	log: function (message: string, ...args: any[]) {
+		this.fmt("log", message, ...args);
+	},
+	warn: function (message: string, ...args: any[]) {
+		this.fmt("warn", message, ...args);
+	},
+	error: function (message: string, ...args: any[]) {
+		this.fmt("error", message, ...args);
+	},
+	debug: function (message: string, ...args: any[]) {
+		this.fmt("debug", message, ...args);
+	},
+};
+
+for (const key in _dbg) {
+	_dbg[key] = (0, eval)("(" + _dbg[key].toString() + ")");
+}
+self._dbg = _dbg;
+
+export default _dbg;

src/shared/rewriters/js.ts

@@ -31,7 +31,7 @@ export function rewriteJs(js: string | ArrayBuffer, origin?: URL) {
 	}
 	const after = performance.now();
 
-	console.log("Rewrite took", Math.floor((after - before) * 10) / 10, "ms");
+	dbg.debug("Rewrite took", Math.floor((after - before) * 10) / 10, "ms");
 
 	return js;
 }

src/snapshot.ts

@@ -0,0 +1,6 @@
+// safe version of the globals we overwrite
+
+export const Function = self.Function;
+export const URL = self.URL;
+export const fetch = self.fetch;
+export const XMLHttpRequest = self.XMLHttpRequest;