add day 52
This commit is contained in:
282
day52/src/lib/router/pageRenderer.ts
Normal file
282
day52/src/lib/router/pageRenderer.ts
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user