add day 81 & 82
This commit is contained in:
241
day82/src/lib/templateRenderer.ts
Normal file
241
day82/src/lib/templateRenderer.ts
Normal file
@@ -0,0 +1,241 @@
|
||||
import { debugMode } from '../main';
|
||||
import { LRUCache } from './lruCache';
|
||||
const templateCache = new LRUCache(15);
|
||||
|
||||
function stringToHash(string: string) {
|
||||
let hash = 0;
|
||||
|
||||
if (string.length == 0) return hash;
|
||||
|
||||
for (let i = 0; i < string.length; i++) {
|
||||
const char = string.charCodeAt(i);
|
||||
hash = ((hash << 5) - hash) + char;
|
||||
hash = hash & hash;
|
||||
}
|
||||
|
||||
return hash;
|
||||
}
|
||||
|
||||
export const compileToString = async (template: string) => {
|
||||
const templateHash = stringToHash(template).toString();
|
||||
|
||||
const cachedTemplate: string | Record<string, string | Record<string, string | boolean>> | undefined = templateCache.get(templateHash);
|
||||
if (cachedTemplate && typeof cachedTemplate == 'object') {
|
||||
const { fnStr, styles, script, setupScript, head, layouts } = cachedTemplate;
|
||||
|
||||
if (debugMode) {
|
||||
console.groupCollapsed('🗃️ loaded template from cache');
|
||||
console.info('Template String: ' + fnStr);
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
return { fnStr, styles, script, setupScript, head, layouts };
|
||||
}
|
||||
|
||||
let styles = '';
|
||||
|
||||
const style = parseFromRegex(template, /<style[\s\S]*?>[\s\S]*?<\/style>/gi);
|
||||
|
||||
if (style) {
|
||||
style.forEach(async (styleData) => {
|
||||
if (!styleData) return;
|
||||
if (!styleData.startsWith('<style') || !styleData.endsWith('</style>')) return;
|
||||
|
||||
styles += styleData.split('<style')[1]?.split('>')[1]?.split('</style')[0];
|
||||
|
||||
template = template.split('<style>' + styles + '</style>').join('');
|
||||
});
|
||||
}
|
||||
|
||||
let scriptInjection = '';
|
||||
let script = '';
|
||||
const meta = { layout: 'default', reduceJavascript: false, suspendUntilHydrated: true };
|
||||
|
||||
const scriptContent = parseFromRegex(template, /<script>[\s\S]*?<\/script>/gi);
|
||||
|
||||
if (scriptContent) {
|
||||
scriptContent.forEach(async (scriptData) => {
|
||||
if (!scriptData) return;
|
||||
if (!scriptData.startsWith('<script>') || !scriptData.endsWith('</script>')) return;
|
||||
// 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({')) return;
|
||||
|
||||
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.forEach(async (scriptData) => {
|
||||
if (!scriptData) return;
|
||||
if (!scriptData.startsWith('<script setup') || !scriptData.endsWith('</script>')) return;
|
||||
// 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.forEach(async (headData) => {
|
||||
if (!headData) return;
|
||||
if (!headData.startsWith('<devto:head>') || !headData.endsWith('</devto:head>')) return;
|
||||
|
||||
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() {
|
||||
return e.endsWith('>');
|
||||
}
|
||||
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.forEach(async (t: string | undefined) => {
|
||||
if (!t) return;
|
||||
// checking to see if it is an template string
|
||||
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,'&').replace(/</g,'<').replace(/>/g,'>'))`;
|
||||
|
||||
if (isRawHTML) {
|
||||
runVar = `(${bracketVariable})`;
|
||||
}
|
||||
|
||||
fnStr += `+ (${runVar})` + '+`</span>`';
|
||||
} else {
|
||||
// append the string to the fnStr
|
||||
fnStr += `+\`${t}\``;
|
||||
}
|
||||
});
|
||||
|
||||
if (debugMode) {
|
||||
console.groupCollapsed('⚒️ Compiled template to String');
|
||||
console.info('Template String: ' + fnStr);
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
|
||||
templateCache.set(templateHash, { fnStr, styles, script: scriptInjection, setupScript: setupScriptInjection, head: headInjection, layouts: meta });
|
||||
return { fnStr, styles, script: scriptInjection, setupScript: setupScriptInjection, head: headInjection, layouts: meta };
|
||||
};
|
||||
|
||||
function parseFromRegex(template: string, regex: RegExp) {
|
||||
const matches = template.match(regex);
|
||||
if (!matches) {
|
||||
return [template];
|
||||
}
|
||||
|
||||
const arr = [];
|
||||
let startIndex = 0;
|
||||
for (const match of matches) {
|
||||
const matchIndex = template.indexOf(match, startIndex);
|
||||
if (matchIndex > 0) {
|
||||
arr.push(template.substring(startIndex, matchIndex));
|
||||
}
|
||||
arr.push(match);
|
||||
startIndex = matchIndex + match.length;
|
||||
}
|
||||
|
||||
if (startIndex < template.length) {
|
||||
arr.push(template.substring(startIndex));
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
Reference in New Issue
Block a user