add day 61 (late smh)

day61/src/lib/ReactiveObject.ts

@@ -0,0 +1,42 @@
+export class Reactive {
+	listeners: Record<string, Array<CallableFunction>>;
+	contents: Record<string, unknown>;
+	constructor(obj: Record<string, unknown>) {
+		this.contents = obj;
+		this.listeners = {};
+		this.makeReactive(obj);
+	}
+
+	makeReactive(obj: Record<string, unknown>) {
+		Object.keys(obj).forEach(prop => this.makePropReactive(obj, prop));
+	}
+
+	makePropReactive(obj: Record<string, unknown>, key: string) {
+		let value = obj[key];
+
+		// Gotta be careful with this here
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		const that = this;
+
+		Object.defineProperty(obj, key, {
+			get() {
+				return value;
+			},
+			set(newValue) {
+				value = newValue;
+				that.notify(key);
+			}
+		});
+	}
+
+	listen(prop: string, handler: CallableFunction) {
+		if (!this.listeners[prop]) this.listeners[prop] = [];
+
+		this.listeners[prop]?.push(handler);
+	}
+
+	notify(prop: string) {
+		if (!this.listeners[prop]) return;
+		this.listeners[prop]?.forEach((listener: CallableFunction) => listener(this.contents[prop]));
+	}
+}

day61/src/lib/cookieManager.ts

@@ -0,0 +1,49 @@
+export function setCookie(name: string, value: string, expires: string | Date, path?: string, domain?: string) {
+	if (import.meta.env.SSR) return;
+	let cookie = name.trimEnd() + '=' + escape(value) + ';';
+
+	if (expires) {
+		// If it's a date
+		if (expires instanceof Date) {
+			// If it isn't a valid date
+			if (isNaN(expires.getTime())) expires = new Date();
+		}
+		else expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);
+
+		cookie += 'expires=' + expires.toUTCString() + ';';
+	}
+
+	if (path) cookie += 'path=' + path + ';';
+	if (domain) cookie += 'domain=' + domain + ';';
+
+	document.cookie = cookie;
+}
+
+let getContext: () => Record<string, string>;
+if (import.meta.env.SSR) {
+	getContext = (await import('../entry-server')).getContext;
+}
+
+export function getCookie(name: string): string {
+	let decodedCookie: string | Record<string, Record<string, string>>;
+	if (import.meta.env.SSR) {
+		const ctx = getContext();
+		if (!ctx.cookies || !ctx.cookies[name]) return '';
+		return ctx.cookies[name];
+	} else {
+		decodedCookie = decodeURIComponent(document.cookie);
+	}
+	const cname = name + '=';
+	const ca = decodedCookie.split(';');
+	for (let i = 0; i < ca.length; i++) {
+		let c = ca[i];
+		if (!c) return '';
+		while (c.charAt(0) == ' ') {
+			c = c.substring(1);
+		}
+		if (c.indexOf(cname) == 0) {
+			return c.substring(cname.length, c.length);
+		}
+	}
+	return '';
+}

day61/src/lib/lruCache.ts

@@ -0,0 +1,35 @@
+// retuhlessly stolen from @trunarla on twitter
+export class LRUCache {
+	#cache: Map<string, string>;
+	#capacity: number;
+
+	constructor(capacity: number) {
+		this.#capacity = capacity;
+		this.#cache = new Map<string, string>();
+	}
+
+	set(key: string, value: string) {
+		// If we're at capacity, we need to delete the least-recently-used item:
+		if (this.#cache.size >= this.#capacity) {
+			// Manually invoke the keys iterator to get the least-recently-used key:
+			const keyToDelete = this.#cache.keys().next().value;
+			this.#cache.delete(keyToDelete);
+		}
+		this.#cache.delete(key);
+		this.#cache.set(key, value);
+	}
+
+	get(key: string) {
+		if (this.#cache.has(key)) {
+			const value = this.#cache.get(key);
+			if (!value) return;
+			this.#cache.delete(key);
+			this.#cache.set(key, value);
+			return value;
+		}
+	}
+
+	getCache() {
+		return this.#cache;
+	}
+}

day61/src/lib/router/SSR/ssrHydrationGenerator.ts

@@ -0,0 +1,83 @@
+import { ReactifyTemplate, hydrateIfAttributes, hydrateModelAttributes, hydrateKeyDown } from '../hydrationManager';
+
+function SSRHydrateElement(querySelector: string, eventListenerName: string, removeAttribute?: boolean) {
+	let script = '';
+	const queryName: Array<string> | null = /(?<=\[).+?(?=\])/.exec(querySelector);
+	if (!queryName || !queryName[0]) return;
+	const querySelectorAll = (querySelector.replace(':', '\\\\\\\\3A '));
+	querySelector = queryName[0];
+	let removeAttributeString = '';
+	if (removeAttribute === undefined || removeAttribute === true) {
+		removeAttributeString = `e.removeAttribute('${querySelector}');`;
+	}
+	script += `const ${querySelector.split(':')[1]}Elms = eval("document.querySelectorAll('${querySelectorAll}')");
+	${querySelector.split(':')[1]}Elms.forEach((e) => {
+		const ${querySelector.split(':')[1]}HydartionFunction = e.getAttribute('${querySelector}');
+		${removeAttributeString}
+		if (!${querySelector.split(':')[1]}HydartionFunction) return;
+		e.addEventListener('${eventListenerName}', () => {
+			eval(${querySelector.split(':')[1]}HydartionFunction);
+		});
+	});`;
+	return script;
+}
+
+export async function renderSSRHydrationCode(template: string, reduceJavascript = false) {
+	let script = '';
+
+	if (template.includes('appState.contents.') || template.includes('data-token')) {
+		script += `
+		const { getAppState, initAppState } = await import('/src/main.ts');
+		await initAppState();
+		const appState = getAppState();
+		` + ReactifyTemplate.toString() + 'ReactifyTemplate(appState);';
+	}
+
+	if (template.includes('d-on:click')) {
+		script += SSRHydrateElement('*[d-on:click]', 'click');
+	}
+
+	if (template.includes('d-if')) {
+		script += hydrateIfAttributes.toString() + 'hydrateIfAttributes(appState);';
+	}
+
+	if (template.includes('d-on:mouseDown')) {
+		script += SSRHydrateElement('*[d-on:mouseDown]', 'mousedown');
+	}
+
+	if (template.includes('d-on:mouseUp')) {
+		script += SSRHydrateElement('*[d-on:mouseUp]', 'mouseup');
+	}
+
+	if (template.includes('d-model')) {
+		if (!script.includes('const { getAppState, initAppState } = ')) script += 'const { getAppState , initAppState } = await import(\'/src/main.ts\');';
+		if (!script.includes('const appState =')) script += 'await initAppState();\nconst appState = getAppState();';
+		script += hydrateModelAttributes.toString() + 'hydrateModelAttributes(appState);';
+	}
+
+	// check if there are links to hydrate
+	if (template.includes('<a') && !reduceJavascript) {
+		script += `
+		const anchorElms = document.querySelectorAll('a');
+		anchorElms.forEach((e) => {
+			if (e.href === window.location.href) {
+				e.setAttribute('link:active', '');
+				e.setAttribute('tabindex', '-1');
+			}
+		});`;
+	}
+
+	if (template.includes('d-on:keydown.')) {
+		script += hydrateKeyDown.toString() + 'hydrateKeyDown();';
+	}
+
+	if (template.includes('d-on:pointerEnter')) {
+		script += SSRHydrateElement('*[d-on:pointerEnter]', 'pointerenter');
+	}
+
+	if (template.includes('d-on:pointerExit')) {
+		script += SSRHydrateElement('*[d-on:pointerExit]', 'pointerleave');
+	}
+
+	return script;
+}

day61/src/lib/router/hydrationManager.ts

@@ -0,0 +1,266 @@
+import { getAppState, initAppState } from '../../main';
+import { renderPage } from './pageRenderer';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { getCookie, setCookie } from '../cookieManager';
+import { Reactive } from '../ReactiveObject';
+
+export let ctrlPressed = false;
+
+export function setCtrl(ctrl: boolean) {
+	ctrlPressed = ctrl;
+}
+
+// function to turn the template into reactive content "hydating" a page
+export async function hydratePage(reduceJavascript?: boolean) {
+	if (import.meta.env.SSR) return;
+	if (reduceJavascript === undefined) reduceJavascript = false;
+	await initAppState();
+	const appState = getAppState();
+	const documentBody = document.getElementById('app');
+	if (!documentBody) {
+		throw new Error('Fatal Error: element with id app not found');
+	}
+
+	ReactifyTemplate(appState);
+
+	// here we look for elements with the d-on:click attribute and on click run the function in the attribute
+	hydrateElement('*[d-on:click]', appState, 'click', getCookie, setCookie);
+
+	// here we determine if an element should be deleted form the DOM via the d-if directive
+	hydrateIfAttributes(appState);
+
+	hydrateElement('*[d-on:pointerEnter]', appState, 'pointerenter', getCookie, setCookie);
+
+	hydrateElement('*[d-on:pointerExit]', appState, 'pointerleave', getCookie, setCookie);
+
+	hydrateElement('*[d-on:mouseDown]', appState, 'mousedown', getCookie, setCookie);
+
+	hydrateElement('*[d-on:mouseUp]', appState, 'mouseup', getCookie, setCookie);
+
+	// here we look for elements with the d-model attribute and if there is any input in the element then we update the appState item with the name
+	// of the attribute value
+	// example: if the user types "hello" into a text field with the d-model attribute of "text" then we update the appState item with the name "text"
+	//          to "hello"
+	// similar to vue.js v-model attribute
+	hydrateModelAttributes(appState);
+
+	hydrateHeadElements(appState);
+
+	hydrateAnchorElements(reduceJavascript);
+
+	hydrateKeyDown(appState);
+}
+
+export function ReactifyTemplate(appState: Reactive) {
+	// for every item in the appState lets check for any element with the "checksum", a hex code equivalent of the item name
+	Object.keys(appState.contents).forEach((e: string) => {
+		if (e === undefined) return;
+		// here we check for elements with the name of "data-token-<hex code of the item name>"
+		const uuid = e.split('').map((c: string) => c.charCodeAt(0).toString(16).padStart(2, '0')).join('');
+		const listeningElements = document.querySelectorAll(`[${'data-token-' + uuid}]`);
+		listeningElements.forEach((elm) => {
+			if (elm.parentElement?.getAttribute('d-once') !== null) {
+				elm.parentElement?.removeAttribute('d-once');
+				return;
+			}
+
+			if (elm.parentElement?.getAttribute('d-html') !== null) {
+				appState.listen(e, (change: string) => elm.innerHTML = change);
+				elm.parentElement?.removeAttribute('d-html');
+			} else {
+				appState.listen(e, (change: string) => elm.textContent = change);
+			}
+		});
+	});
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function hydrateIfAttributes(appState: Reactive) {
+	const conditionalElms = Array.from(document.querySelectorAll('*[d-if]'));
+	if (conditionalElms.length === 0) return;
+	conditionalElms.forEach(async (e: Element) => {
+		const condition = e.getAttribute('d-if');
+
+		const siblingConditionalElms: Array<Element> = [];
+		// recursively check for subsequent elements with the d-else of d-else-if attribute
+		function checkForConditionSibling(elm: Element) {
+			if (!elm.nextElementSibling || typeof elm.nextElementSibling == 'undefined') return;
+			if (elm.nextElementSibling?.getAttribute('d-else-if') !== null) {
+				siblingConditionalElms.push(elm.nextElementSibling);
+				if (!elm.nextElementSibling) return;
+				checkForConditionSibling(elm.nextElementSibling);
+			}
+
+			if (elm.nextElementSibling?.getAttribute('d-else') !== null) {
+				siblingConditionalElms.push(elm.nextElementSibling);
+			}
+		}
+		checkForConditionSibling(e);
+
+		if (siblingConditionalElms == undefined) return;
+
+		function resetHTML() {
+			e.innerHTML = '<!-- d-if -->';
+			for (let i = 0; i < siblingConditionalElms.length; i++) {
+				const element = siblingConditionalElms[i];
+				if (!element) return;
+				element.innerHTML = '<!-- d-if -->';
+			}
+		}
+
+		let ifStatement = `if (!!eval(condition)) {
+            e.innerHTML = originalHTML
+        } `;
+
+		for (let i = 0; i < siblingConditionalElms.length; i++) {
+			const element = siblingConditionalElms[i];
+			if (!element) return;
+			const originHTML = element.innerHTML;
+			element.innerHTML = '<!-- d-if -->';
+			let statementDirective = 'else';
+			if (element.getAttribute('d-else-if') !== null) {
+				statementDirective = 'else if';
+			}
+			const condition = eval('element.getAttribute(\'d-\' + statementDirective.split(\' \').join(\'-\'))');
+
+			if (statementDirective == 'else if') {
+				statementDirective = 'else if (' + condition + ')';
+			}
+
+			ifStatement = ifStatement + statementDirective + `{
+                siblingConditionalElms[${i}].innerHTML = "${originHTML}"
+            }`;
+		}
+
+		e.removeAttribute('d-if');
+		const originalHTML = e.innerHTML;
+		if (!condition || originalHTML == undefined) return;
+		resetHTML();
+		if (condition.includes('appState.contents.')) {
+			let reactiveProp: Array<string> | string | null | undefined = /appState\.contents\.[a-zA-Z]+/.exec(condition);
+			if (!reactiveProp || !reactiveProp[0]) return;
+			reactiveProp = reactiveProp[0].split('.')[2];
+			if (!reactiveProp) return;
+			appState.listen(reactiveProp, () => {
+				resetHTML();
+				eval(ifStatement);
+			});
+		}
+
+
+		eval(ifStatement);
+	});
+}
+
+export function hydrateElement(querySelector: string, appState: Reactive, eventListenerName: string, getCookie: CallableFunction, setCookie: CallableFunction, removeAttribute?: boolean) {
+	const queryName: Array<string> | null = /(?<=\[).+?(?=\])/.exec(querySelector);
+	if (!queryName || !queryName[0]) return;
+	const querySelectorAll = (querySelector.replace(':', '\\\\3A '));
+	querySelector = queryName[0];
+	const elms = eval(`Array.from(document.querySelectorAll('${querySelectorAll.toString()}'));`);
+	if (elms.length === 0) return;
+	elms.forEach(async (e: Element) => {
+		const hydrationFunction = e.getAttribute(`${querySelector}`);
+
+		if (removeAttribute === undefined || removeAttribute === true) {
+			e.removeAttribute(`${querySelector}`);
+		}
+		if (!hydrationFunction) return;
+		e.addEventListener(eventListenerName, () => {
+			eval(hydrationFunction);
+		});
+	});
+}
+
+export function hydrateModelAttributes(appState: Reactive) {
+	const modelElms = Array.from(document.querySelectorAll('input[d-model], textarea[d-model]'));
+	if (modelElms.length === 0) return;
+	modelElms.forEach((e: Element) => {
+		const modelName = e.getAttribute('d-model');
+		if (!modelName) return;
+		e.addEventListener('input', (input: Event) => {
+			const target = input.target as HTMLInputElement;
+			appState.contents[modelName] = target.value;
+		});
+	});
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function hydrateHeadElements(appState: Reactive) {
+	const headContent = document.head.innerHTML;
+	const headElements = Array.from(document.querySelectorAll('devto\\3A head'));
+	if (headElements.length === 0) return;
+	headElements.forEach((e: Element) => {
+		if (e.childNodes.length == 0) return;
+		e.childNodes.forEach((elm) => {
+			const child = elm as Element;
+			if (child.nodeType !== 1) return;
+			if (!document.head.querySelectorAll(child.tagName)) return;
+			document.head.appendChild(child);
+		});
+		e.remove();
+	});
+
+	document.addEventListener('router:naviagte', () => {
+		document.head.innerHTML = headContent;
+	}, { once: true });
+}
+
+export function hydrateAnchorElements(reduceJavascript: boolean) {
+	const anchorElms = Array.from(document.querySelectorAll('a'));
+	anchorElms.forEach((e: HTMLAnchorElement) => {
+		if (!reduceJavascript && e.href === window.location.href) {
+			e.setAttribute('link:active', '');
+			e.setAttribute('tabindex', '-1');
+		}
+		e.addEventListener('click', async (click: MouseEvent) => {
+			if (!event || click.ctrlKey) return;
+			const target = click.target as HTMLElement;
+			event.preventDefault();
+
+			if (!target) return;
+			const url: string | null = target.getAttribute('href');
+
+			if (!url) return;
+			await renderPage(url);
+		});
+	});
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function hydrateKeyDown(appState: Reactive) {
+	Array.from(document.body.querySelectorAll('*')).forEach((e) => {
+		const keydownElms = Array.from(e.attributes).filter((arrElm) => {
+			return arrElm.name.startsWith('d-on:keydown');
+		});
+
+		if (keydownElms.length === 0) return;
+		for (let i = 0; i < keydownElms.length; i++) {
+			const item = keydownElms[i].name;
+			const key = item.split('.')[1]?.toLowerCase();
+			let correctedKey = '';
+			if (key && key?.length > 0) {
+				key.split('').forEach((e, i, arr) => {
+					if (i === 0) {
+						arr[i] = e.toUpperCase();
+					}
+					correctedKey += arr[i];
+				});
+			}
+			e.addEventListener('keydown', (keydown) => {
+				const keyboardEvent = <KeyboardEvent>keydown;
+				let keyName = keyboardEvent.key;
+				if (keyName === ' ') {
+					keyName = 'Space';
+				}
+				const firstLetter = keyName.split('')[0];
+				keyName = firstLetter?.toUpperCase() + keyName.slice(1);
+				if (keyName == correctedKey) {
+					const itemCode = e.getAttribute(item);
+					if (!itemCode) return;
+					eval(itemCode);
+				}
+			});
+		}
+	});
+}

day61/src/lib/router/pageRenderer.ts

@@ -0,0 +1,320 @@
+import { compileToString } from '../templateRenderer';
+import { appState, isSSR, isHTML, debugMode } from '../../main';
+import { LRUCache } from '../lruCache';
+
+if (!appState) console.error('no reactive data found');
+
+let documentBody: string | HTMLElement | null;
+const cache = new LRUCache(15);
+
+if (import.meta.env.SSR) {
+	const fs = await import('fs');
+	const path = await import('path');
+	documentBody = fs.readFileSync(
+		path.resolve('index.html'),
+		'utf-8'
+	);
+} else {
+	documentBody = document.getElementById('app');
+}
+
+
+// Global function to handle rendering a page and navigation
+export async function renderPage(route?: string) {
+	if (isSSR() || typeof documentBody == 'string') return;
+
+	if (!window.history) {
+		throw new Error('window.history is not supported, please update your browser');
+	}
+
+	if (!documentBody) {
+		throw new Error('Fatal Error: element with id app not found');
+	}
+
+	if (route && route === window.location.pathname) return;
+
+	if (route) {
+		history.pushState('', '', route);
+		document.dispatchEvent(new Event('router:naviagte'));
+	}
+
+	let fileName: string | Array<string> = window.location.pathname.split('/');
+	if (fileName[1] === '') {
+		fileName = '/index';
+	} else {
+		fileName = fileName.join('/').toLowerCase().trim();
+	}
+
+	let page: string = await fetchPage(fileName, 'pages');
+
+	if (!page) return;
+
+	const metaObj = { 'layout': 'default', 'reduceJavascript': false, 'suspendUntilHydrated': true };
+
+	parseFromRegex(page, /<script>[\s\S]*?<\/script>/gi).map((e: string | undefined) => {
+		if (!e) return;
+		if (e.startsWith('<script>') && e.endsWith('</script>')) {
+			parseFromRegex(e, /definePageMeta\({(.*?)}\)(;){0,1}/g).map((metaElm: string | undefined) => {
+				if (!metaElm) return;
+				if (metaElm.startsWith('definePageMeta({')) {
+					let metaObjString = metaElm.split('(')[1]?.split(')')[0];
+					if (!metaObjString) return;
+					metaObjString = metaObjString.replaceAll(' ', '').replaceAll('{', '{\'').replaceAll(':', '\':').replaceAll(',', ',\'').replaceAll('\'', '"');
+					const newMetaObj = JSON.parse(metaObjString);
+					Object.keys(newMetaObj).forEach((key) => {
+						metaObj[key] = newMetaObj[key];
+					});
+				}
+			});
+		}
+	});
+
+	let layout: string;
+	try {
+		layout = await fetchPage(`/${metaObj.layout}`, 'layouts', false);
+	} catch {
+		layout = '<slot />';
+	}
+
+	if (!layout) return;
+
+	page = layout.replaceAll('<slot />', page);
+
+	const stringifiedTemplate = await compileToString(page);
+
+	if (!stringifiedTemplate) return;
+
+	if (debugMode) {
+		console.groupCollapsed('✨ Redered page ' + fileName.slice(1));
+		console.log('Template: ' + page);
+		console.info('stringified template: ' + stringifiedTemplate.fnStr);
+		console.groupEnd();
+	}
+
+	// since we have all the html content ready to place in the app, we first need to remove all the old injected content
+	if (route) {
+		const childrenToRemove = document.head.querySelectorAll('*[local]');
+		childrenToRemove.forEach(child => document.head.removeChild(child));
+	}
+
+	if (metaObj.suspendUntilHydrated) {
+		// here we are hiding the body and hydrating the page "suspending"
+		document.body.style.display = 'none';
+	}
+
+	documentBody.innerHTML = await eval(stringifiedTemplate.fnStr);
+
+	if (stringifiedTemplate.styles) {
+		const cssElement = document.createElement('style');
+		cssElement.type = 'text/css';
+		cssElement.setAttribute('local', 'true');
+		cssElement.innerHTML = stringifiedTemplate.styles;
+		document.head.appendChild(cssElement);
+	}
+
+	if (stringifiedTemplate.script || stringifiedTemplate.setupScript) {
+		const scriptElement = document.createElement('script');
+		scriptElement.async = true;
+		scriptElement.type = 'module';
+		scriptElement.setAttribute('local', 'true');
+		scriptElement.innerHTML = stringifiedTemplate.setupScript + stringifiedTemplate.script;
+		document.head.appendChild(scriptElement);
+	}
+
+	// here we hydrate/re-hydrate the page content
+	const { hydratePage } = await import('./hydrationManager');
+	await hydratePage(metaObj.reduceJavascript);
+
+	if (metaObj.suspendUntilHydrated) {
+		// here we show the page as its been hydtated
+		document.body.style.display = 'block';
+	}
+
+	// tell the document that the client has fully rendered and hydrated the page
+	document.dispatchEvent(new Event('router:client:load'));
+}
+
+async function fetchPage(url: string, dir: string, return404?: boolean): Promise<string> {
+	if (import.meta.env.SSR) return '';
+	if (isSSR()) throw new Error('page shouldnt be loaded on server side');
+	if (return404 === undefined) return404 = true;
+	let path: string;
+	(import.meta.env.PROD) ? path = '/' : path = '/src/';
+
+	let file: string | undefined;
+	const cachedFile = cache.get(dir + url);
+
+	if (cachedFile) {
+		if (debugMode) {
+			console.groupCollapsed(`🗃️ Loaded page ${dir}${url} from cache`);
+			console.log(cachedFile);
+			console.groupEnd();
+		}
+
+		file = cachedFile;
+	} else {
+		file = await fetch(path + `${dir}${url}.devto`).then((response) => {
+			if (response.ok) {
+				return response.text();
+			}
+			throw new Error('File not found');
+		})
+			.then((data) => {
+				if (!data) return undefined;
+				cache.set(dir + url, data);
+				console.groupCollapsed(`🌐 Fetched page ${dir}${url}`);
+				console.log(data);
+				console.groupEnd();
+				return data;
+			})
+			.catch(async () => {
+				if (!return404) {
+					throw new Error('object not found and not returning a 404 page');
+				}
+				return (await fetch(path + 'layouts/404.devto').then((response) => {
+					if (response.ok) {
+						return response.text();
+					}
+					throw new Error('Error fetching 404 page');
+				})
+					.then((data) => {
+						if (!data) return undefined;
+						return data;
+					}));
+			});
+	}
+
+
+	if (!file) return '';
+
+	let template = file;
+	const elements: Array<string> = file.split('<');
+	const renderedComponents: Array<string> = [];
+
+	await Promise.all(elements.map(async (component: string | undefined) => {
+		if (!component || !file) return;
+		component = component.split(' ')[0];
+		if (component?.includes('/') || component?.includes('{') || !component) return;
+		component = component.split('>')[0];
+		if (!component) return;
+		if (isHTML(component)) return;
+		const slotedComponent = template.split('<' + component + '>');
+		let isSloted = false;
+		let slotData: string | undefined;
+		if (slotedComponent.length > 1) {
+			isSloted = true;
+			slotedComponent.forEach((splitComponent, i, arr) => {
+				if (splitComponent.includes('</' + component + '>')) {
+					slotData = arr[i]?.split('</' + component + '>')[0];
+				}
+			});
+			template = template.split('<' + component + '>' + slotData + '</' + component + '>').join('<!--' + component + '-->');
+		}
+
+		if (renderedComponents.indexOf(component) == -1) {
+			renderedComponents.push(component);
+			file = await renderComponent(component, path);
+			if (isSloted && slotData) {
+				file = file.replaceAll('<slot />', slotData);
+			}
+
+			let componentName = '<' + component;
+			(!isSloted) ? componentName += ' />' : componentName = '<!--' + component + '-->';
+
+			template = template.replaceAll(componentName, file);
+		}
+	})
+	);
+
+	return template;
+}
+
+async function renderComponent(component: string, path: string) {
+	const componentName = component;
+	const cachedComponent = cache.get('components/' + component);
+
+	if (cachedComponent) {
+		if (debugMode) {
+			console.groupCollapsed(`🗃️ Loaded component ${component} from cache`);
+			console.log(cachedComponent);
+			console.groupEnd();
+		}
+
+		component = cachedComponent;
+	} else {
+		await fetch(path + `components/${component}.devto`).then((response) => {
+			if (response.ok) {
+				return response.text();
+			}
+			return '';
+		})
+			.then((data) => {
+				cache.set('components/' + component, data);
+				if (debugMode) {
+					console.groupCollapsed(`🌐 Fetched component ${component}`);
+					console.log('Template:', data);
+					console.groupEnd();
+				}
+				component = data;
+			});
+	}
+
+	const elements = component.split('<');
+	await Promise.all(elements.map(async (componentInComponent: string | undefined) => {
+		if (!componentInComponent) return;
+		componentInComponent = componentInComponent.split(' ')[0];
+		if (componentInComponent?.includes('/') || componentInComponent?.includes('{') || !componentInComponent) return;
+		componentInComponent = componentInComponent.split('>')[0];
+		if (!componentInComponent) return;
+		if (isHTML(componentInComponent)) return;
+		if (componentInComponent === componentName) {
+			console.error('Cannot include a component in itself, ignoring component (rendering ' + componentInComponent + ')');
+			return;
+		}
+		const slotedComponent = component.split('<' + componentInComponent + '>');
+		let isSloted = false;
+		let slotData: string | undefined;
+		if (slotedComponent.length > 1) {
+			isSloted = true;
+			slotedComponent.forEach((splitComponent, i, arr) => {
+				if (splitComponent.includes('</' + componentInComponent + '>')) {
+					slotData = arr[i]?.split('</' + componentInComponent + '>')[0];
+				}
+			});
+			component = component.split('<' + componentInComponent + '>' + slotData + '</' + componentInComponent + '>').join('<!--' + componentInComponent + '-->');
+		}
+
+		let componentReplacement = await renderComponent(componentInComponent, path);
+		if (isSloted && slotData) {
+			componentReplacement = componentReplacement.replaceAll('<slot />', slotData);
+		}
+		let replacementComponentName = '<' + componentInComponent;
+		(!isSloted) ? replacementComponentName += ' />' : replacementComponentName = '<!--' + componentInComponent + '-->';
+		component = component.replaceAll(replacementComponentName, componentReplacement);
+	}));
+
+	return component;
+}
+
+function parseFromRegex(template: string, regex: RegExp) {
+	let result = regex.exec(template);
+	regex.lastIndex = 0;
+	const arr = [];
+	let firstPos;
+
+	while (result) {
+		firstPos = result.index;
+		if (firstPos !== 0) {
+			arr.push(template.substring(0, firstPos));
+			template = template.slice(firstPos);
+		}
+
+		arr.push(result[0]);
+		template = template.slice(result[0]?.length);
+		result = regex.exec(template);
+		regex.lastIndex = 0;
+	}
+
+	if (template) arr.push(template);
+	return arr;
+}

day61/src/lib/templateRenderer.ts

@@ -0,0 +1,214 @@
+import { debugMode } from '../main';
+
+export const compileToString = async (template: string) => {
+	let styles = '';
+
+	const style = parseFromRegex(template, /<style[\s\S]*?>[\s\S]*?<\/style>/gi);
+
+	if (style) {
+		style.map(async (styleData) => {
+			if (!styleData) return;
+			if (styleData.startsWith('<style') && styleData.endsWith('</style>')) {
+				styles += styleData.split('<style')[1]?.split('>')[1]?.split('</style')[0];
+			}
+
+			// remove the style from the body
+			template = template.split('<style>' + styles + '</style>').join('');
+		});
+	}
+
+	let scriptInjection = '';
+	let script = '';
+	const meta = { layout: 'default', reduceJavascript: false };
+
+	const scriptContent = parseFromRegex(template, /<script>[\s\S]*?<\/script>/gi);
+
+	if (scriptContent) {
+		scriptContent.map(async (scriptData) => {
+			if (!scriptData) return;
+			if (scriptData.startsWith('<script>') && scriptData.endsWith('</script>')) {
+				// if (scriptData.includes('appState.contents.')) {
+				// 	scriptInjection += 'const { getAppState, initAppState } = await import("/src/main.ts");\nasync initAppState();\nconst appState = getAppState();';
+				// }
+				const metaElms = parseFromRegex(scriptData, /definePageMeta\({(.*?)}\)(;){0,1}/g);
+				metaElms.forEach((metaElm: string | undefined) => {
+					if (!metaElm || !scriptData) return;
+					if (metaElm.startsWith('definePageMeta({')) {
+						scriptData = scriptData.split(metaElm).join('');
+						template = template.split(metaElm).join('');
+						let metaObjString = metaElm.split('(')[1]?.split(')')[0];
+						if (!metaObjString) return;
+						metaObjString = metaObjString.replaceAll(' ', '').replaceAll('{', '{\'').replaceAll(':', '\':').replaceAll(',', ',\'').replaceAll('\'', '"');
+						const newMeta = JSON.parse(metaObjString);
+						Object.keys(newMeta).forEach((key) => {
+							newMeta[key] = meta[key];
+						});
+					}
+				});
+
+				if (scriptData.includes('getCookie')) {
+					scriptInjection += 'const { getCookie } = await import("/src/lib/cookieManager.ts");';
+				}
+
+				if (scriptData.includes('setCookie')) {
+					scriptInjection += 'const { setCookie } = await import("/src/lib/cookieManager.ts");';
+				}
+
+				if (scriptData.includes('isSSR()')) {
+					scriptInjection += 'const { isSSR } = await import("/src/main.ts");';
+				}
+
+				script += scriptData.split('<script>')[1]?.split('</script>')[0];
+				const minishScript = script.replace(/[\n\r]/g, '').trim();
+				if (!minishScript) return;
+				template = template.split('<script>' + script + '</script>').join('');
+				scriptInjection += 'document.addEventListener(\'router:client:load\', () => {\n' + minishScript + '\n}, { once: true });';
+			}
+
+			// remove the script from the body
+			template = template.split('<script>' + script + '</script>').join('');
+			script = '';
+		});
+	}
+
+	const scriptContentSetup = parseFromRegex(template, /<script setup[\s\S]*?>[\s\S]*?<\/script>/gi);
+	let setupScriptInjection = '';
+	let setupScript = '';
+	if (scriptContentSetup) {
+		scriptContentSetup.map(async (scriptData) => {
+			if (!scriptData) return;
+			if (scriptData.startsWith('<script setup') && scriptData.endsWith('</script>')) {
+				// if (scriptData.includes('appState.contents.') && !scriptInjection.includes('initAppState')) {
+				// 	scriptInjection = 'const { getAppState, initAppState } = await import("/src/main.ts"); //aaahahahahahahah' + scriptInjection;
+				// }
+
+				if (scriptData.includes('getCookie')) {
+					setupScriptInjection += 'const { getCookie } = await import("/src/lib/cookieManager.ts");';
+				}
+
+				if (scriptData.includes('setCookie')) {
+					setupScriptInjection += 'const { setCookie } = await import("/src/lib/cookieManager.ts");';
+				}
+
+				if (scriptData.includes('isSSR()')) {
+					setupScriptInjection += 'const { isSSR } = await import("/src/main.ts");';
+				}
+
+				setupScript += scriptData.split('<script setup>')[1]?.split('</script>')[0];
+				setupScriptInjection = scriptData.split('<script setup>')[1]?.split('</script>')[0] + setupScriptInjection;
+			}
+
+			// remove the script from the body
+			template = template.split('<script setup>' + setupScript + '</script>').join('');
+		});
+	}
+
+	let headInjection = '';
+	let head = '';
+	if (import.meta.env.SSR) {
+		const headInjectionContent = parseFromRegex(template, /<devto:head[\s\S]*?>[\s\S]*?<\/devto:head>/gi);
+		if (headInjectionContent) {
+			headInjectionContent.map(async (headData) => {
+				if (!headData) return;
+				if (headData.startsWith('<devto:head>') && headData.endsWith('</devto:head>')) {
+					const newHeadContent = headData.split('<devto:head>')[1]?.split('</devto:head>')[0];
+					if (!newHeadContent) return;
+					head = newHeadContent;
+					const elements = newHeadContent.split('\n');
+					elements.forEach((e, i, arr) => {
+						if (!e.trim()) return;
+						function isCompleteElement() {
+							if (!e.endsWith('>')) {
+								return false;
+							} else {
+								return true;
+							}
+						}
+						if (!isCompleteElement()) {
+							arr[i] = '';
+							arr[i + 1] = e + arr[i + 1];
+						}
+						if (!isCompleteElement()) return;
+						headInjection += e;
+					});
+				}
+			});
+			template = template.split('<devto:head>' + head + '</devto:head>').join('');
+		}
+	}
+
+
+	if (template.includes('getCookie') && !script.includes('getCookie')) {
+		scriptInjection += 'const getCookie = await import("/src/lib/cookieManager.ts");';
+	}
+
+	if (template.includes('setCookie') && !script.includes('setCookie')) {
+		scriptInjection += 'const { setCookie } = await import("/src/lib/cookieManager.ts");';
+	}
+
+	const ast: (string | undefined)[] = parseFromRegex(template, /{(.*?)}/g);
+	let fnStr = '``';
+
+	if (!ast) return;
+
+	ast.map(async (t: string | undefined) => {
+		if (!t) return;
+		// checking to see if it is an interpolation
+		if (t.startsWith('{') && t.endsWith('}')) {
+			// TODO: rewrite comment
+			const bracketVariable = t.split(/{|}/).filter(Boolean)[0]?.trim();
+			if (!bracketVariable) return;
+			const parentElement = fnStr.split(t)[0]?.split('>');
+			if (!parentElement || !parentElement[parentElement.length - 2] || typeof parentElement[parentElement.length - 2] == 'undefined') return;
+			const isRawHTML = parentElement[parentElement.length - 2]?.includes('d-html');
+			if (bracketVariable.startsWith('appState.contents.')) {
+				const uuid = bracketVariable.substring(bracketVariable.length, 18).split('').map((c: string) => c.charCodeAt(0).toString(16).padStart(2, '0')).join('');
+				fnStr = fnStr.substring(0, fnStr.length - 1) + `<span data-token-${uuid}>\``;
+			} else {
+				fnStr = fnStr.substring(0, fnStr.length - 1) + '<span>`';
+			}
+			let runVar = `((${bracketVariable}).toString().replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'))`;
+
+			if (isRawHTML) {
+				runVar = `(${bracketVariable})`;
+			}
+
+			fnStr += `+ (${runVar})` + '+`</span>`';
+		} else {
+			// append the string to the fnStr
+			fnStr += `+\`${t}\``;
+		}
+	});
+
+	if (debugMode) {
+		console.groupCollapsed('⚒️ Compiled tempalte to String');
+		console.info('Template String: ' + fnStr);
+		console.groupEnd();
+	}
+
+
+	return { fnStr, styles, script: scriptInjection, setupScript: setupScriptInjection, head: headInjection, layouts: meta };
+};
+
+const parseFromRegex = (template: string, regex: RegExp) => {
+	let result = regex.exec(template);
+	regex.lastIndex = 0;
+	const arr = [];
+	let firstPos;
+
+	while (result) {
+		firstPos = result.index;
+		if (firstPos !== 0) {
+			arr.push(template.substring(0, firstPos));
+			template = template.slice(firstPos);
+		}
+
+		arr.push(result[0]);
+		template = template.slice(result[0]?.length);
+		result = regex.exec(template);
+		regex.lastIndex = 0;
+	}
+
+	if (template) arr.push(template);
+	return arr;
+};