add day 85
This commit is contained in:
308
day85/src/lib/router/hydrationManager.ts
Normal file
308
day85/src/lib/router/hydrationManager.ts
Normal file
@@ -0,0 +1,308 @@
|
||||
import { getAppState } from '../../main';
|
||||
import { renderPage } from './pageRenderer';
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
import { getCookie, setCookie } from '../cookieManager';
|
||||
import { Reactive } from '../ReactiveObject';
|
||||
|
||||
// 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;
|
||||
console.log(reduceJavascript)
|
||||
const appState = await getAppState();
|
||||
const documentBody = document.getElementById('app');
|
||||
|
||||
if (!documentBody) {
|
||||
throw new Error('Fatal Error: element with id app not found');
|
||||
}
|
||||
|
||||
const hydrateEvent = (eventName: string, elementSelector: string) => {
|
||||
hydrateElement(elementSelector, appState, eventName, getCookie, setCookie);
|
||||
};
|
||||
|
||||
ReactifyTemplate(appState);
|
||||
|
||||
hydrateHeadElements(appState);
|
||||
hydrateIfAttributes(appState);
|
||||
hydrateAnchorElements(reduceJavascript);
|
||||
|
||||
// interactive hydration
|
||||
hydrateBindElements(appState, documentBody);
|
||||
hydrateEvent('click', '*[d-on:click]');
|
||||
hydrateEvent('pointerenter', '*[d-on:pointerEnter]');
|
||||
hydrateEvent('pointerleave', '*[d-on:pointerExit]');
|
||||
hydrateEvent('mousedown', '*[d-on:mouseDown]');
|
||||
hydrateEvent('mouseup', '*[d-on:mouseUp]');
|
||||
|
||||
// Update app state items with input values from elements with the "d-model" attribute.
|
||||
// Similar to Vue.js' v-model attribute.
|
||||
hydrateModelAttributes(appState);
|
||||
hydrateKeyDown(appState, documentBody);
|
||||
}
|
||||
|
||||
export function ReactifyTemplate(appState: Reactive) {
|
||||
const spanElements = Array.from(document.querySelectorAll('span'));
|
||||
|
||||
spanElements.forEach(spanElement => {
|
||||
// Get all attributes that start with "data-token-"
|
||||
const reactiveElms = Array.from(spanElement.attributes).filter(attr => attr.name.startsWith('data-token-'));
|
||||
|
||||
if (reactiveElms.length === 0) return;
|
||||
|
||||
reactiveElms.forEach(reactiveElm => {
|
||||
const item = reactiveElm.name;
|
||||
const uuid = item.split('data-token-')[1];
|
||||
|
||||
// If the uuid is not found, throw an error
|
||||
if (!uuid) throw new Error('Internal error: decoded uuid not found');
|
||||
|
||||
// Decode the uuid
|
||||
let decodedUuid = '';
|
||||
for (let i = 0; i < uuid.length; i += 2) {
|
||||
decodedUuid += String.fromCharCode(parseInt(uuid.substr(i, 2), 16));
|
||||
}
|
||||
|
||||
// If the span element's parent has the "d-once" attribute, remove it and return since we're only doing it once
|
||||
if (spanElement.parentElement?.hasAttribute('d-once')) {
|
||||
spanElement.parentElement.removeAttribute('d-once');
|
||||
return;
|
||||
}
|
||||
|
||||
// If the span element's parent has the "d-html" attribute, listen to the decoded uuid
|
||||
// and set the span element's innerHTML to the change value
|
||||
if (spanElement.parentElement?.hasAttribute('d-html')) {
|
||||
appState.listen(decodedUuid, (change: string) => spanElement.innerHTML = change);
|
||||
return;
|
||||
}
|
||||
|
||||
appState.listen(decodedUuid, (change: string | null) => spanElement.textContent = change);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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> = [];
|
||||
let currentElm = e;
|
||||
// recursively check for subsequent elements with the d-else of d-else-if attribute
|
||||
while (currentElm.nextElementSibling) {
|
||||
const nextElm = currentElm.nextElementSibling;
|
||||
if (nextElm.getAttribute('d-else-if') !== null) {
|
||||
siblingConditionalElms.push(nextElm);
|
||||
} else if (nextElm.getAttribute('d-else') !== null) {
|
||||
siblingConditionalElms.push(nextElm);
|
||||
break;
|
||||
}
|
||||
currentElm = nextElm;
|
||||
}
|
||||
|
||||
if (siblingConditionalElms == undefined) return;
|
||||
|
||||
const resetHTML = () => {
|
||||
e.innerHTML = '<!-- d-if -->';
|
||||
siblingConditionalElms.forEach((elm) => {
|
||||
elm.innerHTML = '<!-- d-if -->';
|
||||
});
|
||||
};
|
||||
|
||||
let ifStatement = `if (${condition}) {
|
||||
e.innerHTML = "${e.innerHTML}"
|
||||
} `;
|
||||
|
||||
siblingConditionalElms.forEach((element, i) => {
|
||||
const siblingHTML = element.innerHTML;
|
||||
element.innerHTML = '<!-- d-if -->';
|
||||
let statementDirective = 'else';
|
||||
element.removeAttribute('d-else');
|
||||
if (element.hasAttribute('d-else-if')) statementDirective = 'else if';
|
||||
const condition = element.getAttribute('d-' + statementDirective.split(' ').join('-'));
|
||||
|
||||
if (statementDirective == 'else if') {
|
||||
statementDirective = `else if (${condition})`;
|
||||
element.removeAttribute('d-else-if');
|
||||
}
|
||||
|
||||
ifStatement = `${ifStatement} ${statementDirective} {
|
||||
siblingConditionalElms[${i}].innerHTML = "${siblingHTML}"
|
||||
}`;
|
||||
});
|
||||
|
||||
e.removeAttribute('d-if');
|
||||
if (!condition) return;
|
||||
resetHTML();
|
||||
eval(ifStatement);
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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.split(':').join('\\3A ');
|
||||
querySelector = queryName[0];
|
||||
const elms = Array.from(document.querySelectorAll(querySelectorAll));
|
||||
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 async function hydrateAnchorElements(reduceJavascript: boolean) {
|
||||
const anchorElms = document.querySelectorAll('a');
|
||||
|
||||
Array.from(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, rootElement: Element) {
|
||||
Array.from(rootElement.querySelectorAll('*')).forEach((e: Element) => {
|
||||
const keydownElms = Array.from(e.attributes).filter((arrElm: Attr) => {
|
||||
return arrElm.name.startsWith('d-on:keydown');
|
||||
});
|
||||
|
||||
if (keydownElms.length === 0) return;
|
||||
keydownElms.forEach((attr: Attr) => {
|
||||
const item = attr.name;
|
||||
let key = item.split('.')[1]?.toLowerCase();
|
||||
if (key && key?.length > 0) {
|
||||
key = key.charAt(0).toUpperCase() + key.slice(1).toLowerCase();
|
||||
}
|
||||
e.addEventListener('keydown', (keydown: unknown) => {
|
||||
let keyName = keydown.key;
|
||||
if (keyName === ' ') {
|
||||
keyName = 'Space';
|
||||
}
|
||||
const firstLetter = keyName.split('')[0];
|
||||
keyName = firstLetter?.toUpperCase() + keyName.slice(1).toLowerCase();
|
||||
if (keyName === key) {
|
||||
const itemCode = e.getAttribute(item);
|
||||
if (!itemCode) return;
|
||||
// we use eval here because we want to be able to access the appState object
|
||||
eval(itemCode);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function hydrateBindElements(appState: Reactive, rootElement: Element) {
|
||||
Array.from(rootElement.querySelectorAll('*')).forEach((e: Element) => {
|
||||
const bindElms = Array.from(e.attributes).filter((arrElm: Attr) => {
|
||||
return arrElm.name.startsWith('d-bind:') || arrElm.name.startsWith(':');
|
||||
});
|
||||
|
||||
if (bindElms.length === 0) return;
|
||||
bindElms.forEach((attr: Attr) => {
|
||||
const item = attr.name;
|
||||
const key = item.split(':')[1]?.toLowerCase();
|
||||
const originalValue = '(' + attr.value + ')';
|
||||
let currentBinding = '';
|
||||
|
||||
e.removeAttribute(item);
|
||||
|
||||
function setAttribute() {
|
||||
if (!key) return;
|
||||
let value = 'return "' + originalValue + '"';
|
||||
const attribute = e.getAttribute(key);
|
||||
if (value.includes('(') || value.includes(')') || value.includes('?') || value.includes(':')) {
|
||||
value = eval(originalValue);
|
||||
}
|
||||
if (!value || !attribute) return;
|
||||
if (attribute) {
|
||||
const originalAttributeValue = (attribute.toString()).split(`${currentBinding}`).join('');
|
||||
currentBinding = value;
|
||||
value = originalAttributeValue + ' ' + value;
|
||||
}
|
||||
e.setAttribute(key, value);
|
||||
}
|
||||
|
||||
if (originalValue.includes('appState')) {
|
||||
originalValue.split(' ').forEach((value) => {
|
||||
const propName = value.split('appState.contents.')[1];
|
||||
if (!propName || !value.includes('appState')) return;
|
||||
appState.listen(propName.replace(')', ''), () => setAttribute());
|
||||
});
|
||||
}
|
||||
|
||||
setAttribute();
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user