zoeissleeping/100DaysOfCode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add day 52

Browse Source
This commit is contained in:
Zoe
2022-11-13 19:12:01 -06:00
parent 8e98a80221
commit c18f52de89
45 changed files with 11634 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
day52/src/lib/router/SSR/ssrHydrationGenerator.ts Normal file
View File

@@ -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;
}

277
day52/src/lib/router/hydrationManager.ts Normal file
View File

@@ -0,0 +1,277 @@
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]'));
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 (Array.from(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]'));
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'));
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;
const uniqueAttributes = ['content', 'href'];
document.head.querySelectorAll(child.tagName).forEach((headEl: Element) => {
if (headEl.attributes.length == 0) {
headEl.remove();
}
for (let i = 0; i < headEl.attributes.length; i++) {
if (!headEl.attributes.item(i)) return;
const itemName = headEl.attributes.item(i)?.name;
if (!itemName) return;
if (uniqueAttributes.indexOf(itemName) == -1) {
if (child.attributes.getNamedItem(itemName)?.nodeValue == headEl.attributes.item(i)?.nodeValue) {
headEl.remove();
}
}
}
});
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) => {
for (let i = 0; i < e.attributes.length; i++) {
const item = e.attributes.item(i)?.name;
if (!item) return;
if (item.startsWith('d-on:keydown')) {
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);
}
});
}
}
});
}

282
day52/src/lib/router/pageRenderer.ts Normal file
View File

@@ -0,0 +1,282 @@
import { compileToString } from '../templateRenderer';
import { appState, isSSR, isHTML } 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 loadPage(fileName, 'pages');
if (!page) return;
const metaObj = { 'layout': 'default', 'reduceJavascript': false };
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 loadPage(`/${metaObj.layout}`, 'layouts', false);
} catch {
layout = '<slot />';
}
if (!layout) return;
page = layout.replace('<slot />', page);
const stringifiedTemplate = await compileToString(page);
if (!stringifiedTemplate) return;
if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD && !import.meta.env.SSR) {
console.groupCollapsed('Loaded page ' + fileName);
console.info('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));
}
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) {
const scriptElement = document.createElement('script');
scriptElement.async = true;
scriptElement.type = 'module';
scriptElement.setAttribute('local', 'true');
scriptElement.innerHTML = stringifiedTemplate.script;
document.head.appendChild(scriptElement);
}
// here we hydrate/re-hydrate the page content
const { hydratePage } = await import('./hydrationManager');
await hydratePage(metaObj.reduceJavascript);
// this is super bad but it works s good, fix later
setTimeout(() => {
// tell the document that the client has fully rendered and hydrated the page
document.dispatchEvent(new Event('router:client:load'));
}, 15);
}
async function loadPage(page: 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;
const file = await fetchPage(page, dir, return404);
return file;
}
async function fetchPage(url: string, dir: string, return404: boolean): Promise<string> {
let path: string;
(import.meta.env.PROD) ? path = '/' : path = '/src/';
let file: string | undefined;
const cachedFile = cache.get(dir + url);
if (cachedFile) {
if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD && !import.meta.env.SSR) {
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);
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('<');
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 + '-->');
}
file = await renderComponent(component, path);
if (isSloted && slotData) {
file = file.replace('<slot />', slotData);
}
let componentName = '<' + component;
(!isSloted) ? componentName += ' />' : componentName = '<!--' + component + '-->';
template = template.replace(componentName, file);
})
);
return template;
}
async function renderComponent(component: string, path: string) {
const cachedComponent = cache.get('components/' + component);
if (cachedComponent) {
if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD && !import.meta.env.SSR) {
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);
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];
//console.log(componentInComponent);
if (!componentInComponent) return;
if (isHTML(componentInComponent)) return;
const componentReplacement = await renderComponent(componentInComponent, path);
component = component.replace('<' + componentInComponent + ' />', 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;
}