@kbve/droid 0.0.1 → 0.0.2

package/src/lib/workers/main.ts

@@ -0,0 +1,356 @@
+import { wrap, transfer, proxy } from 'comlink';
+import type { Remote } from 'comlink';
+import { persistentMap } from '@nanostores/persistent';
+import type { LocalStorageAPI } from './db-worker';
+import type { WSInstance } from './ws-worker';
+import { initializeWorkerDatabase, type InitWorkerOptions } from './init';
+import type { CanvasWorkerAPI } from './canvas-worker';
+import { getModManager } from '../mod/mod-manager';
+import { scopeData } from './data';
+import { dispatchAsync, renderVNode } from './tools';
+import type { PanelPayload, PanelId } from '../types/panel-types';
+import { DroidEvents } from './events'; 
+
+const EXPECTED_DB_VERSION = '1.0.3';
+
+//	* DeepProxy
+
+function deepProxy<T>(obj: T): T {
+	if (typeof obj === 'function') return proxy(obj) as T;
+
+	if (obj && typeof obj === 'object') {
+		const result: any = Array.isArray(obj) ? [] : {};
+		for (const key in obj) {
+			result[key] = deepProxy(obj[key]);
+		}
+		return result;
+	}
+
+	return obj;
+}
+
+//  * WebSocket
+async function initWsComlink(): Promise<Remote<WSInstance>> {
+	const worker = new SharedWorker(new URL('./ws-worker', import.meta.url), {
+		type: 'module',
+	});
+	worker.port.start();
+	return wrap<WSInstance>(worker.port);
+}
+
+//	* Interface -> Moved to the panels.ts
+
+//	* UIUX
+
+const uiuxState = persistentMap<{
+	panelManager: Record<PanelId,
+		{
+			open: boolean;
+			payload?: PanelPayload;
+		}
+	>;
+	themeManager: { theme: 'light' | 'dark' | 'auto' };
+	toastManager: Record<string, any>;
+	scrollY: number;
+}>(
+	'uiux-state',
+	{
+		panelManager: {
+			top: { open: false },
+			right: { open: false },
+			bottom: { open: false },
+			left: { open: false },
+		},
+		themeManager: { theme: 'auto' },
+		toastManager: {},
+		scrollY: 0,
+	},
+	{
+		encode: JSON.stringify,
+		decode: JSON.parse,
+	},
+);
+
+const canvasWorker = wrap<CanvasWorkerAPI>(
+	new Worker(new URL('./canvas-worker', import.meta.url), { type: 'module' }),
+);
+
+export const uiux = {
+	state: uiuxState,
+	worker: canvasWorker,
+	openPanel(id: PanelId, payload?: PanelPayload) {
+		const panels = { ...uiuxState.get().panelManager };
+		panels[id] = { open: true, payload };
+		uiuxState.setKey('panelManager', panels);
+	},
+
+	closePanel(id: PanelId) {
+		const panels = { ...uiuxState.get().panelManager };
+		panels[id] = { open: false, payload: undefined };
+		uiuxState.setKey('panelManager', panels);
+	},
+
+	togglePanel(
+		id: PanelId,
+		payload?: PanelPayload,
+	) {
+		const panels = { ...uiuxState.get().panelManager };
+		const isOpen = panels[id]?.open ?? false;
+		panels[id] = { open: !isOpen, payload: !isOpen ? payload : undefined };
+		uiuxState.setKey('panelManager', panels);
+	},
+
+	setTheme(theme: 'light' | 'dark' | 'auto') {
+		uiuxState.setKey('themeManager', { theme });
+	},
+
+	addToast(id: string, data: any) {
+		const toasts = { ...uiuxState.get().toastManager, [id]: data };
+		uiuxState.setKey('toastManager', toasts);
+	},
+
+	removeToast(id: string) {
+		const toasts = { ...uiuxState.get().toastManager };
+		delete toasts[id];
+		uiuxState.setKey('toastManager', toasts);
+	},
+
+	async dispatchCanvasRequest(
+		panelId: PanelId,
+		canvasEl: HTMLCanvasElement,
+		mode: 'static' | 'animated' | 'dynamic' = 'animated',
+	) {
+		const offscreen = canvasEl.transferControlToOffscreen();
+		await this.worker.bindCanvas(panelId, offscreen, mode);
+	},
+
+	closeAllPanels() {
+		const panels = { ...uiuxState.get().panelManager };
+		console.log('error panel is closing');
+
+		for (const id of Object.keys(panels) as Array<
+			PanelId
+		>) {
+			panels[id] = { open: false, payload: undefined };
+		}
+
+		uiuxState.setKey('panelManager', panels);
+	},
+
+	emitFromWorker(msg: any) {
+		if (msg.type === 'injectVNode' && msg.vnode) {
+			dispatchAsync(() => {
+				const target = document.getElementById('bento-grid-inject');
+				if (!target) {
+					console.warn(
+						'[KBVE] No injection target found: #bento-grid-inject',
+					);
+					return;
+				}
+
+				const el = renderVNode(msg.vnode);
+				el.classList.add('animate-fade-in');
+				if (msg.vnode.id) {
+					const existing = document.getElementById(msg.vnode.id);
+					if (existing) existing.remove();
+				}
+
+				target.appendChild(el);
+			});
+		}
+	},
+};
+
+//	* i18n
+
+const i18nStore = persistentMap<Record<string, string>>(
+	'i18n-cache',
+	{},
+	{
+		encode: JSON.stringify,
+		decode: JSON.parse,
+	},
+);
+
+export const i18n = {
+	store: i18nStore,
+	api: null as Remote<LocalStorageAPI> | null,
+	ready: Promise.resolve(),
+
+	get(key: string): string {
+		return i18nStore.get()[key] ?? `[${key}]`;
+	},
+
+	async getAsync(key: string): Promise<string> {
+		const cached = i18nStore.get()[key];
+		if (cached !== undefined) return cached;
+
+		if (!this.api) return `[${key}]`;
+
+		const value = await this.api.getTranslation(key);
+		if (value !== null) {
+			i18nStore.setKey(key, value);
+			return value;
+		}
+
+		return `[${key}]`;
+	},
+
+	set(key: string, value: string) {
+		i18nStore.setKey(key, value);
+	},
+
+	async hydrate(api: Remote<LocalStorageAPI>, keys: string[]) {
+		this.api = api;
+		for (const key of keys) {
+			const value = await api.getTranslation(key);
+			if (value !== null) {
+				i18nStore.setKey(key, value);
+			}
+		}
+	},
+
+	async hydrateLocale(locale = 'en') {
+		if (!this.api) return;
+
+		const allKeys = await this.api.getAllI18nKeys();
+		const localeKeys = allKeys.filter((key) =>
+			key.startsWith(`${locale}:`),
+		);
+		const translations = await this.api.getTranslations(localeKeys);
+
+		for (const [key, value] of Object.entries(translations)) {
+			console.log(`[i18n.setKey] ${key} = ${value}`);
+			this.store.setKey(key, value);
+		}
+	},
+};
+
+function initSWComlink() {
+	if (!navigator.serviceWorker?.controller) return;
+	const channel = new MessageChannel();
+	navigator.serviceWorker.controller.postMessage(channel.port2, [
+		channel.port2,
+	]);
+	channel.port1.start();
+}
+
+async function initStorageComlink(): Promise<Remote<LocalStorageAPI>> {
+	const worker = new SharedWorker(new URL('./db-worker', import.meta.url), {
+		type: 'module',
+	});
+	worker.port.start();
+	const api = wrap<LocalStorageAPI>(worker.port);
+
+	const version = await api.getVersion();
+	if (version !== EXPECTED_DB_VERSION) {
+		await initializeWorkerDatabase(api, {
+			version: EXPECTED_DB_VERSION,
+			i18nPath: 'https://discord.sh/i18n/db.json',
+			locale: 'en',
+			defaults: { welcome: 'Welcome!', theme: 'dark' },
+		});
+	}
+
+	return api;
+}
+
+let initialized = false;
+
+// * Bridge
+export function bridgeWsToDb(
+	ws: Remote<WSInstance>,
+	db: Remote<LocalStorageAPI>,
+) {
+	const handler = proxy(async (buf: ArrayBuffer) => {
+		dispatchAsync(() => {
+			const key = `ws:${Date.now()}`;
+			void db.storeWsMessage(key, buf);
+		});
+	});
+
+	ws.onMessage(transfer(handler, [0]));
+}
+
+//	*	MAIN
+export async function main() {
+	if (!initialized) {
+		initialized = true;
+
+		// Attach to existing service worker (or wait for one to take control)
+		if (navigator.serviceWorker?.controller) {
+			initSWComlink();
+		} else {
+			navigator.serviceWorker?.addEventListener(
+				'controllerchange',
+				initSWComlink,
+			);
+		}
+	}
+
+	const needsInit =
+		!window.kbve?.api || !window.kbve?.i18n || !window.kbve?.uiux;
+
+	if (needsInit) {
+		const api = await initStorageComlink();
+		const ws = await initWsComlink();
+		const mod = await getModManager();
+		const events = DroidEvents;
+
+		for (const handle of Object.values(mod.registry)) {
+			if (typeof handle.instance.init === 'function') {
+				await handle.instance.init({
+					emitFromWorker: uiux.emitFromWorker,
+				});
+			}
+			console.log('[Event] -> Fire Mod Ready');
+			events.emit('droid-mod-ready', {
+				meta: handle.meta,
+				timestamp: Date.now(),
+			});
+		}
+
+		bridgeWsToDb(ws, api);
+
+		const data = scopeData;
+		i18n.api = api;
+		i18n.ready = i18n.hydrateLocale('en');
+
+		window.kbve = {
+			...(window.kbve || {}),
+			api,
+			i18n,
+			uiux,
+			ws,
+			data,
+			mod,
+			events,
+		};
+
+		//window.kbve = deepProxy(window.kbve);
+
+		await i18n.ready;
+
+		window.kbve.events.emit('droid-ready', {
+			timestamp: Date.now(),
+		});
+		
+		document.addEventListener('astro:page-load', () => {
+			console.debug('[KBVE] Re-dispatched droid-ready after astro:page-load');
+			window.kbve?.events.emit('droid-ready', {
+				timestamp: Date.now(),
+			});
+		});	
+
+		// document.addEventListener('astro:page-load', () => {
+		// 	console.debug('[KBVE] Re-dispatched droid-ready after DomContentLoaded');
+		// 	window.kbve?.events.emit('droid-ready', {
+		// 		timestamp: Date.now(),
+		// 	});
+		// });	
+
+		console.log('[KBVE] Global API ready');
+	} else {
+		console.log('[KBVE] Already initialized');
+	}
+}

package/src/lib/workers/tools.ts

@@ -0,0 +1,60 @@
+import type { VirtualNode } from '../types/modules';
+
+export function dispatchAsync(fn: () => void) {
+	if (typeof queueMicrotask === 'function') {
+		queueMicrotask(fn);
+	} else {
+		setTimeout(fn, 0);
+	}
+}
+
+export function renderVNode(vnode: VirtualNode): HTMLElement {
+	const el = document.createElement(vnode.tag);
+
+	if (vnode.class) el.className = vnode.class;
+
+	if (vnode.attrs) {
+		for (const [key, value] of Object.entries(vnode.attrs)) {
+			if (typeof value === 'function' && key.startsWith('on')) {
+				el.addEventListener(key.slice(2).toLowerCase(), value);
+			} else if (key === 'style' && typeof value === 'object') {
+				Object.assign(el.style, value);
+			} else if (key === 'dataset' && typeof value === 'object') {
+				for (const [data_key, data_value] of Object.entries(value)) {
+					el.dataset[data_key] = String(data_value);
+				}
+			} else {
+				try {
+					el.setAttribute(key, String(value));
+				} catch {
+					//
+				}
+			}
+		}
+	}
+
+	if (vnode.style) {
+		Object.assign(el.style, vnode.style);
+	}
+
+	// if (vnode.children) {
+	// 	for (const child of vnode.children) {
+	// 		el.appendChild(
+	// 			typeof child === 'string'
+	// 				? document.createTextNode(child)
+	// 				: renderVNode(child),
+	// 		);
+	// 	}
+	// }
+
+	if (vnode.children) {
+		for (const child of vnode.children) {
+			const node = typeof child === 'string'
+				? document.createTextNode(child)
+				: renderVNode(child);
+			el.appendChild(node);
+		}
+	}
+
+	return el;
+}

package/src/lib/workers/ws-worker.ts

@@ -0,0 +1,73 @@
+import { wrap, expose, type Remote } from 'comlink';
+import type { LocalStorageAPI } from './db-worker';
+import { toReference, builder } from './flexbuilder';
+
+
+interface SharedWorkerGlobalScope extends Worker {
+	onconnect: (event: MessageEvent) => void;
+}
+declare const self: SharedWorkerGlobalScope;
+
+
+let ws: WebSocket | null = null;
+let onMessageCallback: ((data: any) => void) | null = null;
+
+
+// --- WebSocket API ---
+const wsInstanceAPI = {
+	async connect(url: string) {
+		if (ws) return;
+
+		ws = new WebSocket(url);
+		ws.binaryType = 'arraybuffer';
+
+		ws.onopen = () => console.log('[WS] Connected:', url);
+
+        ws.onmessage = (e) => {
+            try {
+                console.log('[WS] Received binary message');
+				
+				if (e.data instanceof ArrayBuffer) {
+					onMessageCallback?.(e.data);   
+				}
+            } catch (err) {
+                console.error('[WS] Failed to forward message', err);
+            }
+        };
+ 
+
+		ws.onerror = (e) => console.error('[WS] Error:', e);
+		ws.onclose = () => {
+			console.log('[WS] Disconnected');
+			ws = null;
+		};
+	},
+
+	async send(payload: Uint8Array) {
+		if (ws?.readyState === WebSocket.OPEN) {
+			ws.send(payload);
+		} else {
+			console.warn('[WS] Tried to send while disconnected');
+		}
+	},
+
+	async close() {
+		ws?.close();
+		ws = null;
+	},
+
+	onMessage(callback: (data: any) => void) {
+		onMessageCallback = callback;
+	},
+
+
+};
+
+export type WSInstance = typeof wsInstanceAPI;
+
+self.onconnect = (event: MessageEvent) => {
+	const port = event.ports[0];
+	port.start();
+	expose(wsInstanceAPI, port);
+};
+

package/src/setup-vitest.ts

@@ -0,0 +1,2 @@
+import '@vitest/web-worker';
+import 'fake-indexeddb/auto';

package/src/types.d.ts

@@ -0,0 +1,31 @@
+/// <reference lib="webworker" />
+
+import type { Remote } from 'comlink';
+import type { LocalStorageAPI } from './lib/workers/db-worker';
+import type { WSInstance } from './lib/workers/ws-worker';
+import { FlexDataAPI } from './lib/workers/data';
+import type { ModManager } from './types/modules';
+import type { DroidEventBus } from './lib/workers/events';
+
+export interface KBVEGlobal {
+	api: Remote<LocalStorageAPI>;
+	i18n: typeof I18nInstance;
+	uiux: typeof UiUxInstance;
+	ws: Remote<WSInstance>;
+	data: FlexDataAPI;
+	mod: ModManager;
+	events: DroidEventBus;
+
+	// Helper Flags @GPT
+	// droidReady?: boolean;
+	// waitForDroidReady?: () => Promise<void>;
+
+	//	<T>
+	[key: string]: unknown;
+}
+
+declare global {
+	interface Window {
+		kbve?: KBVEGlobal;
+	}
+}