add day 11
This commit is contained in:
39
day11/src/lib/ReactiveObject.ts
Normal file
39
day11/src/lib/ReactiveObject.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
export class Reactive {
|
||||
[x: string]: any;
|
||||
constructor(obj: any) {
|
||||
this.contents = obj;
|
||||
this.listeners = {};
|
||||
this.makeReactive(obj);
|
||||
}
|
||||
|
||||
makeReactive(obj: any) {
|
||||
Object.keys(obj).forEach(prop => this.makePropReactive(obj, prop));
|
||||
}
|
||||
|
||||
makePropReactive(obj: any, key: string) {
|
||||
let value = obj[key];
|
||||
|
||||
// Gotta be careful with this here
|
||||
const that = this;
|
||||
|
||||
Object.defineProperty(obj, key, {
|
||||
get() {
|
||||
return value;
|
||||
},
|
||||
set(newValue) {
|
||||
value = newValue;
|
||||
that.notify(key)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
listen(prop: any, handler: any) {
|
||||
if (!this.listeners[prop]) this.listeners[prop] = [];
|
||||
|
||||
this.listeners[prop].push(handler);
|
||||
}
|
||||
|
||||
notify(prop: any) {
|
||||
this.listeners[prop].forEach((listener: (arg0: any) => any) => listener(this.contents[prop]));
|
||||
}
|
||||
}
|
||||
39
day11/src/lib/cookieManager.ts
Normal file
39
day11/src/lib/cookieManager.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
export function setCookie(name: string, value: string, expires: any, path?: string, domain?: string) {
|
||||
var 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.toGMTString() + ";";
|
||||
}
|
||||
|
||||
if (path)
|
||||
cookie += "path=" + path + ";";
|
||||
if (domain)
|
||||
cookie += "domain=" + domain + ";";
|
||||
|
||||
document.cookie = cookie;
|
||||
}
|
||||
|
||||
export function getCookie(name: string) {
|
||||
let cname = name + "=";
|
||||
let decodedCookie = decodeURIComponent(document.cookie);
|
||||
let ca = decodedCookie.split(';');
|
||||
for(let i = 0; i <ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(cname) == 0) {
|
||||
return c.substring(cname.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
206
day11/src/lib/router.ts
Normal file
206
day11/src/lib/router.ts
Normal file
@@ -0,0 +1,206 @@
|
||||
import { compileToString } from './templateRenderer'
|
||||
import { appState } from '../main'
|
||||
const documentBody = document.getElementById('app')
|
||||
|
||||
// Global function to handle rendering a page and navigation
|
||||
export async function renderPage(route?: string) {
|
||||
if (!documentBody) {
|
||||
throw new Error('Fatal Error: element with id app not found')
|
||||
}
|
||||
|
||||
if (route) history.pushState('', '', route);
|
||||
|
||||
let fileName: any = window.location.pathname.split('/');
|
||||
if (fileName[1] === '') {
|
||||
fileName = '/index';
|
||||
} else {
|
||||
fileName = fileName.join('/').toLowerCase().trim();
|
||||
}
|
||||
|
||||
const template = await loadPage(fileName);
|
||||
|
||||
const stringifiedTemplate = await compileToString(template);
|
||||
|
||||
if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD) {
|
||||
console.groupCollapsed('Loaded page ' + fileName);
|
||||
console.info('Template: ' + template)
|
||||
console.info('stringified template: ' + stringifiedTemplate)
|
||||
console.groupEnd()
|
||||
}
|
||||
|
||||
documentBody.innerHTML = await eval(stringifiedTemplate);
|
||||
// here we hydrate/re-hydrate the page content
|
||||
await hydratePage()
|
||||
}
|
||||
|
||||
async function loadPage(page: string) {
|
||||
let file
|
||||
try {
|
||||
file = await import(/* @vite-ignore */ '../pages' + page);
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
file = await import(/* @vite-ignore */ '../layouts/404');
|
||||
}
|
||||
const template = await file.default();
|
||||
|
||||
return template;
|
||||
}
|
||||
|
||||
// function to turn the template into reactive content "hydating" a page
|
||||
export async function hydratePage() {
|
||||
if (!documentBody) {
|
||||
throw new Error('Fatal Error: element with id app not found')
|
||||
}
|
||||
|
||||
// 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) => {
|
||||
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 => 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: any) => elm.innerHTML = change);
|
||||
elm.parentElement?.removeAttribute('d-html')
|
||||
} else {
|
||||
appState.listen(e, (change: any) => elm.textContent = change);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// here we look for elements with the d-on:click attribute and on click run the function in the attribute
|
||||
let elms = documentBody.querySelectorAll('*[d-on\\3A click]')
|
||||
elms.forEach((e) => {
|
||||
const clickFunction = e.getAttribute("d-on\:click")
|
||||
e.removeAttribute('d-on\:click')
|
||||
if (!clickFunction) return;
|
||||
e.addEventListener('click', () => {
|
||||
eval(clickFunction)
|
||||
})
|
||||
})
|
||||
|
||||
// here we determine if an element should be deleted form the DOM via the d-if directive
|
||||
let conditionalElms = document.querySelectorAll('*[d-if]')
|
||||
conditionalElms.forEach(async (e) => {
|
||||
const condition = e.getAttribute('d-if')
|
||||
|
||||
let siblingConditionalElms: any = []
|
||||
// recursively check for subsequent elements with the d-else of d-else-if attribute
|
||||
function checkForConditionSibling(elm: any) {
|
||||
if (elm.nextElementSibling?.getAttribute('d-else-if') !== null) {
|
||||
siblingConditionalElms.push(elm.nextElementSibling)
|
||||
checkForConditionSibling(elm.nextElementSibling)
|
||||
}
|
||||
|
||||
if (elm.nextElementSibling?.getAttribute('d-else') !== null) {
|
||||
siblingConditionalElms.push(elm.nextElementSibling)
|
||||
}
|
||||
}
|
||||
checkForConditionSibling(e)
|
||||
|
||||
function resetHTML() {
|
||||
e.innerHTML = '<!-- d-if -->'
|
||||
for (let i = 0; i < siblingConditionalElms.length; i++) {
|
||||
siblingConditionalElms[i].innerHTML = '<!-- d-if -->'
|
||||
}
|
||||
}
|
||||
|
||||
let ifStatement = `if (!!eval(condition)) {
|
||||
e.innerHTML = originalHTML
|
||||
} `
|
||||
|
||||
for (let i = 0; i < siblingConditionalElms.length; i++) {
|
||||
console.log(i)
|
||||
const originHTML = siblingConditionalElms[i].innerHTML
|
||||
siblingConditionalElms[i].innerHTML = '<!-- d-if -->'
|
||||
let statementDirective = 'else'
|
||||
if (siblingConditionalElms[i].getAttribute('d-else-if') !== null) {
|
||||
statementDirective = 'else if'
|
||||
}
|
||||
const condition = eval(`siblingConditionalElms[i].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) return;
|
||||
if (condition.includes("appState.contents.")) {
|
||||
let reactiveProp: any = /appState\.contents\.[a-zA-Z]+/.exec(condition)
|
||||
if (!reactiveProp) return;
|
||||
reactiveProp = reactiveProp[0].split('.')[2]
|
||||
appState.listen(reactiveProp, () => {
|
||||
resetHTML()
|
||||
eval(ifStatement)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
eval(ifStatement)
|
||||
})
|
||||
|
||||
let pointerEnterElms = document.querySelectorAll('*[d-on\\3A pointerEnter]')
|
||||
pointerEnterElms.forEach((e) => {
|
||||
const enterFunction = e.getAttribute('d-on\:pointerEnter')
|
||||
e.removeAttribute('d-on\:pointerEnter')
|
||||
if (!enterFunction) return;
|
||||
e.addEventListener('pointerenter', (event: any) => {
|
||||
eval(enterFunction)
|
||||
})
|
||||
})
|
||||
|
||||
let pointerExitElms = document.querySelectorAll('*[d-on\\3A pointerExit]')
|
||||
pointerExitElms.forEach((e) => {
|
||||
const exitFunction = e.getAttribute('d-on\:pointerExit')
|
||||
e.removeAttribute('d-on\:pointerExit')
|
||||
if (!exitFunction) return;
|
||||
e.addEventListener('pointerleave', (event: any) => {
|
||||
eval(exitFunction)
|
||||
})
|
||||
})
|
||||
|
||||
let mouseDownElms = document.querySelectorAll('*[d-on\\3A mouseDown]')
|
||||
mouseDownElms.forEach((e) => {
|
||||
const downFunction = e.getAttribute('d-on\:mouseDown')
|
||||
e.removeAttribute('d-on\:mouseDown')
|
||||
if (!downFunction) return;
|
||||
e.addEventListener('mousedown', (event: any) => {
|
||||
eval(downFunction)
|
||||
})
|
||||
})
|
||||
|
||||
let mouseUpElms = document.querySelectorAll('*[d-on\\3A mouseUp]')
|
||||
mouseUpElms.forEach((e) => {
|
||||
const dupFunction = e.getAttribute('d-on\:mouseUp')
|
||||
e.removeAttribute('d-on\:mouseUp')
|
||||
if (!dupFunction) return;
|
||||
e.addEventListener('mouseup', (event: any) => {
|
||||
eval(dupFunction)
|
||||
})
|
||||
})
|
||||
|
||||
// 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
|
||||
let modelElms = document.querySelectorAll('input[d-model], textarea[d-model]');
|
||||
modelElms.forEach((e) => {
|
||||
const modelName = e.getAttribute("d-model")
|
||||
if (!modelName) return;
|
||||
e.addEventListener('input', (event: any) => {
|
||||
appState.contents[modelName] = event.target.value
|
||||
})
|
||||
})
|
||||
}
|
||||
65
day11/src/lib/templateRenderer.ts
Normal file
65
day11/src/lib/templateRenderer.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
export const compileToString = async (template: string) => {
|
||||
const ast = parse(template);
|
||||
let fnStr = `\`\``;
|
||||
|
||||
ast.map(async t => {
|
||||
// checking to see if it is an interpolation
|
||||
if (t.startsWith("{") && t.endsWith("}")) {
|
||||
// TODO: rewrite comment
|
||||
let bracketVariable = t.split(/{|}/).filter(Boolean)[0].trim();
|
||||
const parentElement = fnStr.split(t)[0].split('>')
|
||||
const isRawHTML = parentElement[parentElement.length-2].includes('d-html')
|
||||
if (bracketVariable.startsWith("appState.contents.")) {
|
||||
const uuid = bracketVariable.substring(bracketVariable.length, 18).split('').map(c => 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 (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD) {
|
||||
console.groupCollapsed('Compiled tempalte to String')
|
||||
console.info('Template String: ' + fnStr)
|
||||
console.groupEnd()
|
||||
}
|
||||
|
||||
return fnStr;
|
||||
}
|
||||
|
||||
// this function will turn a string like "hi {user}" into an array that looks something like "["hi", "{user}"] so we can loop over the array elements
|
||||
// when compiling the template
|
||||
var parse = (template: string) => {
|
||||
let result = /{(.*?)}/g.exec(template);
|
||||
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 = /{(.*?)}/g.exec(template);
|
||||
}
|
||||
|
||||
if (template) arr.push(template);
|
||||
return arr;
|
||||
}
|
||||
|
||||
export const render = (template: string) => {
|
||||
return compileToString(template)
|
||||
}
|
||||
Reference in New Issue
Block a user