add day16

2022-10-09 01:12:08 -05:00
parent b37cfee924
commit a00c923e08
30 changed files with 6436 additions and 0 deletions
--- a/day16/index.html
+++ b/day16/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script async src="/src/entry-client.js" type="module"></script>
+    <!--style-outlet-->
+</head>
+<body><div
+        id="app"
+      >
+      <!--ssr-outlet--><noscript><div class="fixed bg-zinc-900 border-t border-neutral-700 shadow-md w-screen bottom-0 p-6 text-lg">Javascript is reccommended to run this app</div></noscript></div>
+</body>
+</html>
--- a/day16/index.js
+++ b/day16/index.js
@@ -0,0 +1,119 @@
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import express from 'express'
+import { createServer as createViteServer } from 'vite'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const tags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "decorator", "del", "details", "dfn", "dir", "div", "dl", "dt", "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li", "link", "listing", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "plaintext", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "shadow", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp"]
+function isHTML(tag) {
+    return tags.indexOf(tag.trim().toLowerCase()) > -1;
+}
+
+async function createServer() {
+    const app = express()
+
+    app.use(express.static(__dirname + '/public'))
+    app.use((req, res, next) => {
+        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,Authorization,cache-control');
+        res.setHeader("Cache-Control", "max-age=84600, public");
+
+        next()
+    })
+
+    // Create Vite server in middleware mode and configure the app type as
+    // 'custom', disabling Vite's own HTML serving logic so parent server
+    // can take control
+    const vite = await createViteServer({
+        server: { middlewareMode: true },
+        appType: 'custom'
+    })
+
+    // use vite's connect instance as middleware
+    // if you use your own express router (express.Router()), you should use router.use
+    app.use(vite.middlewares)
+
+    app.use('*', async (req, res, next) => {
+        const url = req.originalUrl
+
+        try {
+            // 1. Read index.html
+            let template
+            template = fs.readFileSync(
+                path.resolve(__dirname, 'index.html'),
+                'utf-8'
+            )
+
+            let fileName = url.split('/');
+            if (fileName[1] === '') {
+                fileName = '/index';
+            } else {
+                fileName = fileName.join('/').toLowerCase().trim();
+            }
+
+            // 2. Apply Vite HTML transforms. This injects the Vite HMR client, and
+            //    also applies HTML transforms from Vite plugins, e.g. global preambles
+            //    from @vitejs/plugin-react
+            template = await vite.transformIndexHtml(url, template)
+
+            // 3. Load the server entry. vite.ssrLoadModule automatically transforms
+            //    your ESM source code to be usable in Node.js! There is no bundling
+            //    required, and provides efficient invalidation similar to HMR.
+            const { SSRPage } = await vite.ssrLoadModule('/src/entry-server.js')
+
+            let pageData
+            try {
+                pageData = fs.readFileSync(
+                    path.resolve(__dirname, './src/pages' + fileName + '.devto'),
+                    'utf-8',
+                )
+            } catch (e) {
+                pageData = fs.readFileSync(
+                    path.resolve(__dirname, './src/layouts/404.devto'),
+                    'utf-8'
+                )
+            }
+
+            pageData.split('<').forEach(e => {
+                let item = e.split(' ')[0]
+                if (item.includes('/') || item.includes('{') || item.includes('}') || !item) return
+                item = item.split('>')[0]
+                if (isHTML(item)) return
+                const component = fs.readFileSync(
+                    path.resolve('./src/components/' + item + '.devto'),
+                    'utf-8',
+                )
+                pageData = pageData.replace('<' + item + ' />', component)
+            })
+
+            // 4. render the app HTML. This assumes entry-server.js's exported `render`
+            //    function calls appropriate framework SSR APIs,
+            //    e.g. ReactDOMServer.renderToString()
+            const appHtml = await SSRPage(pageData)
+
+            const styles = await vite.ssrLoadModule('/src/style.css')
+
+            const main = await vite.ssrLoadModule('/src/main')
+
+            const appState = main.appState
+            // 5. Inject the app-rendered HTML into the template.
+            const stylizedTemplate = template.replace('<!--style-outlet-->', '<style type="text/css">' + styles.default + '</style>')
+
+            const html = stylizedTemplate.replace(`<!--ssr-outlet-->`, eval(appHtml))
+
+            // 6. Send the rendered HTML back.
+            res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+        } catch (e) {
+            // If an error is caught, let Vite fix the stack trace so it maps back to
+            // your actual source code.
+            vite.ssrFixStacktrace(e)
+            res.status(500).end(e.stack)
+            next(e)
+        }
+    })
+
+    app.listen(3000)
+}
+
+createServer()
--- a/day16/package-lock.json
+++ b/day16/package-lock.json
--- a/day16/package.json
+++ b/day16/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "devto",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "dev:client": "vite --config vite.config.js dev",
+    "dev:server": "nodemon --watch index.js --watch src/ index.js",
+    "build": "rimraf dist && npm run build:client && npm run build:server && npm run copy-files",
+    "build:client": "vite build --outDir dist/client --ssrManifest",
+    "build:server": "vite build --ssr index.js --outDir dist/server",
+    "copy-files": "copyfiles public/* dist/assets && copyfiles index.html dist"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/express": "^4.17.14",
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.17",
+    "tailwindcss": "^3.1.8"
+  },
+  "dependencies": {
+    "express": "^4.18.1",
+    "nodemon": "^2.0.20",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.8.4",
+    "concurrently": "7.3.0",
+    "copyfiles": "^2.4.1",
+    "vite": "^3.1.4",
+    "@types/node": "18.0.6",
+    "autoprefixer": "10.4.7",
+    "cssnano": "5.1.12",
+    "postcss": "8.4.14",
+    "postcss-import": "14.1.0",
+    "postcss-nesting": "10.1.10",
+    "tailwindcss": "3.1.6"
+  }
+}
--- a/day16/postcss.config.cjs
+++ b/day16/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/day16/public/favicon.ico
+++ b/day16/public/favicon.ico
--- a/day16/public/minus.svg
+++ b/day16/public/minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -11 24 24" width="24" fill="white"><path d="M1 0h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z"></path></svg>
--- a/day16/public/plus.svg
+++ b/day16/public/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4.5 -4.5 24 24" width="24" fill="white"><path d="M8.9 6.9v-5a1 1 0 1 0-2 0v5h-5a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0v-5h5a1 1 0 1 0 0-2h-5z"></path></svg>
--- a/day16/public/refresh.svg
+++ b/day16/public/refresh.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -2.5 24 24" width="24" fill="white"><path d="M17.83 4.194l.42-1.377a1 1 0 1 1 1.913.585l-1.17 3.825a1 1 0 0 1-1.248.664l-3.825-1.17a1 1 0 1 1 .585-1.912l1.672.511A7.381 7.381 0 0 0 3.185 6.584l-.26.633a1 1 0 1 1-1.85-.758l.26-.633A9.381 9.381 0 0 1 17.83 4.194zM2.308 14.807l-.327 1.311a1 1 0 1 1-1.94-.484l.967-3.88a1 1 0 0 1 1.265-.716l3.828.954a1 1 0 0 1-.484 1.941l-1.786-.445a7.384 7.384 0 0 0 13.216-1.792 1 1 0 1 1 1.906.608 9.381 9.381 0 0 1-5.38 5.831 9.386 9.386 0 0 1-11.265-3.328z"></path></svg>
--- a/day16/src/components/Counter.devto
+++ b/day16/src/components/Counter.devto
@@ -0,0 +1,20 @@
+<div class="mb-2">
+    <h2 class="text-xl font-semibold text-center">count is: { appState.contents.count }</h2>
+</div>
+<div class="flex justify-center">
+    <button d-on:click="appState.contents.count--"
+        class="transition-colors p-3 duration-300 active:bg-red-700 hover:bg-red-600 hover:text-zinc-100 mr-1">
+        <img src='/minus.svg'
+            alt="minus" />
+    </button>
+    <button d-on:click="appState.contents.count = 0"
+        class="transition-colors p-3 duration-300 active:bg-zinc-700 hover:bg-zinc-800 hover:text-red-100 mr-1">
+        <img src='/refresh.svg'
+            alt="reset">
+    </button>
+    <button d-on:click="appState.contents.count++"
+        class="transition-colors p-3 duration-300 active:bg-green-700 hover:bg-green-600 hover:text-green-100">
+        <img src='/plus.svg'
+            alt="plus" />
+    </button>
+</div>
--- a/day16/src/components/RouterLink.devto
+++ b/day16/src/components/RouterLink.devto
@@ -0,0 +1 @@
+<p>TODO</p>
--- a/day16/src/components/cookieInput.ts
+++ b/day16/src/components/cookieInput.ts
@@ -0,0 +1,12 @@
+export const CookieInput = () => {
+    return `
+    <div class="mb-2">
+    <h2 class="text-xl font-semibold text-center">Username cookie is: {appState.contents.cookie}</h2>
+</div>
+<div class="flex justify-center flex-col">
+    <input placeholder="username..." class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" d-model="cookiedata" />
+    {appState.contents.cookiedata}
+    <button class="bg-blue-600 font-semibold rounded-md py-1 px-2 text-sm" d-click="appState.contents.cookie = appState.contents.cookiedata; setCookie('username', appState.contents.cookiedata, '365');">Submit Cookie</button>
+</div>
+    `
+}
--- a/day16/src/components/htmlInput.ts
+++ b/day16/src/components/htmlInput.ts
@@ -0,0 +1,12 @@
+export const HtmlInput = () => {
+    return `
+    <div class="mb-2">
+    <h2 class="text-xl font-semibold text-center" d-html>html input is: {appState.contents.html}</h2>
+</div>
+<div class="flex justify-center">
+<div>
+    <input placeholder="text..." class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" d-model="html" />
+    </div>
+    </div>
+    `
+}
--- a/day16/src/components/myDad.ts
+++ b/day16/src/components/myDad.ts
@@ -0,0 +1,23 @@
+export const MyDad = () => {
+    return `
+    <div class="mb-2">
+    <h2 class="text-xl font-semibold text-center">My dad {appState.contents.year}</h2>
+</div>
+<div class="flex justify-center">
+<input placeholder="ex: 1985" class="no-arrows py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300" type="number" d-model="year">
+</div>
+<style>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+</style>
+    `
+}
--- a/day16/src/components/textInput.devto
+++ b/day16/src/components/textInput.devto
@@ -0,0 +1,10 @@
+<div class="mb-2">
+    <h2 class="text-xl font-semibold text-center">Input is: {appState.contents.text}</h2>
+</div>
+<div class="flex justify-center">
+    <div>
+        <input placeholder="text..."
+            class="py-2 px-4 resize-none bg-zinc-800 rounded-md shadow-md my-2 border border-zinc-800 placeholder:italic placeholder:text-gray-300"
+            d-model="text" />
+    </div>
+</div>
--- a/day16/src/entry-client.js
+++ b/day16/src/entry-client.js
@@ -0,0 +1,34 @@
+import { renderPage, hydratePage } from './lib/router';
+import { appState } from '/src/main';
+
+export async function mount(mounted) {
+    eval(mounted)
+}
+
+let SSR
+
+export function isSSR() {
+    if (!import.meta.env.SSR) {
+        if (SSR !== undefined) return SSR
+        if (document.getElementById('app').childNodes[1].childNodes.length == null) {
+            SSR = false
+        } else {
+            SSR = document.getElementById('app').childNodes[1].childNodes.length > 0
+        }
+        return SSR
+    }
+}
+
+if (!import.meta.env.SSR) {
+    // waits for the page to fully load to render the page from the virtDOM
+    console.log(document.getElementById('app').childNodes[1].childNodes.length > 0)
+    if (!document.getElementById('app').childNodes[1].childNodes.length > 0) {
+        await import('/src/style.css')
+        await renderPage()
+        window.onpopstate = async () => {
+            await renderPage()
+        }
+    } else {
+        hydratePage()
+    }
+}
--- a/day16/src/entry-server.js
+++ b/day16/src/entry-server.js
@@ -0,0 +1,6 @@
+import { render } from './lib/templateRenderer';
+import { appState } from './main';
+
+export function SSRPage(pageName) {
+    return render(pageName)
+}
--- a/day16/src/layouts/404.devto
+++ b/day16/src/layouts/404.devto
@@ -0,0 +1,5 @@
+    <div class="grid place-items-center p-3 content-center min-h-screen">
+        <h1 class="text-4xl font-bold">404</h1>
+        <h2 class="text-2xl font-semibold">Looks like you're lost</h3>
+        <h3 class="text-xl font-semibold">Go <a href="/" d-on:click="event.preventDefault(); renderPage('/')">home</a></h3>
+    </div>
--- a/day16/src/lib/ReactiveObject.js
+++ b/day16/src/lib/ReactiveObject.js
@@ -0,0 +1,39 @@
+export class Reactive {
+    constructor(obj) {
+        this.contents = obj;
+        this.listeners = {};
+        this.makeReactive(obj);
+    }
+
+    makeReactive(obj) {
+        Object.keys(obj).forEach(prop => this.makePropReactive(obj, prop));
+    }
+
+    makePropReactive(obj, key) {
+        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, handler) {
+        if (!this.listeners[prop]) this.listeners[prop] = [];
+
+        this.listeners[prop].push(handler);
+    }
+
+    notify(prop) {
+        if (!this.listeners[prop]) return
+        this.listeners[prop].forEach((listener) => listener(this.contents[prop]));
+    }
+}
--- a/day16/src/lib/cookieManager.js
+++ b/day16/src/lib/cookieManager.js
@@ -0,0 +1,41 @@
+export function setCookie(name, value, expires, path, domain) {
+  if (import.meta.env.SSR) return
+    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) {
+  if (import.meta.env.SSR) return
+    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 "";
+  }
--- a/day16/src/lib/router.js
+++ b/day16/src/lib/router.js
@@ -0,0 +1,334 @@
+import { compileToString } from './templateRenderer'
+import { isSSR } from '../entry-client'
+import { appState } from '../main'
+const tags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "decorator", "del", "details", "dfn", "dir", "div", "dl", "dt", "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li", "link", "listing", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "plaintext", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "shadow", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp"]
+let enabled = true;
+
+function isHTML(tag) {
+    return tags.indexOf(tag.trim().toLowerCase()) > -1;
+}
+
+let documentBody
+
+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) {
+    if (!window.history) {
+        enabled = false;
+        return;
+    }
+
+    if (isSSR() && route) window.location.href = route
+    if (isSSR()) return;
+
+    if (!documentBody) {
+        throw new Error('Fatal Error: element with id app not found')
+    }
+
+    if (route) history.pushState('', '', route);
+
+    let fileName = window.location.pathname.split('/');
+    if (fileName[1] === '') {
+        fileName = '/index';
+    } else {
+        fileName = fileName.join('/').toLowerCase().trim();
+    }
+
+    const page = await loadPage(fileName);
+
+    const stringifiedTemplate = await compileToString(page);
+
+    if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD) {
+        console.groupCollapsed('Loaded page ' + fileName);
+        console.info('Template: ' + page)
+        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) {
+    if (import.meta.env.SSR) return;
+    if (isSSR()) return;
+    const file = await fetchPage(page)
+
+    let template = file
+
+    return template;
+}
+
+// TODO: Fix this function, client side problems only
+async function fetchPage(url) {
+    let file
+
+    await fetch('/src/pages' + url + '.devto').then((response) => {
+        if (response.ok) {
+            return response.text();
+        }
+        throw new Error('Something went wrong');
+    })
+        .then((data) => {
+            file = data
+        })
+        .catch(async (error) => {
+            await fetch('/src/layouts/404.devto').then((response) => {
+                if (response.ok) {
+                    return response.text();
+                }
+                throw new Error('Something went wrong');
+            })
+                .then((data) => {
+                    file = data
+                })
+        });
+
+    let elements = file.split('<')
+    let template = file
+
+    await Promise.all(elements.map(async (component) => {
+        component = component.split(' ')[0]
+        if (component.includes('/') || component.includes('{') || !component) return
+        component = component.split('>')[0]
+        if (isHTML(component)) return
+        await fetch('/src/components/' + component + '.devto').then((response) => {
+            if (response.ok) {
+                return response.text();
+            }
+            throw new Error('Something went wrong');
+        })
+            .then((data) => {
+                file = data
+            })
+        template = template.replace('<' + component + ' />', file)
+    })
+    )
+
+
+    return template
+}
+
+// function to turn the template into reactive content "hydating" a page
+export async function hydratePage() {
+    if (import.meta.env.SSR) return
+    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) => elm.innerHTML = change);
+                elm.parentElement?.removeAttribute('d-html')
+            } else {
+                appState.listen(e, (change) => 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 = []
+        // recursively check for subsequent elements with the d-else of d-else-if attribute
+        function checkForConditionSibling(elm) {
+            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++) {
+            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 = /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) => {
+            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) => {
+            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) => {
+            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) => {
+            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) => {
+            appState.contents[modelName] = event.target.value
+        })
+    })
+
+    if (isSSR()) {
+        let prefetchedPages = []
+
+        function prefetchLink(url) {
+            const prefetchElm = document.createElement('link')
+            prefetchElm.rel = 'prefetch'
+            prefetchElm.href = url
+            prefetchElm.as = 'document'
+
+            if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD) {
+                prefetchElm.onload = () => { console.log('prefetched url: ' + url) }
+                prefetchElm.onerror = (err) => { console.error('cant prefetch url: ' + url, err) }
+            }
+
+            document.head.appendChild(prefetchElm)
+            prefetchedPages.push(url)
+        }
+
+        if (!('IntersectionObserver' in window)) return
+        const visibleObserver = new IntersectionObserver((entries, observer) => {
+            entries.forEach((entry) => {
+                const url = entry.target.getAttribute('href')
+                if (prefetchedPages.includes(url)) {
+                    observer.unobserve(entry.target);
+                    return
+                }
+                if (entry.isIntersecting) {
+                    prefetchLink(url)
+                    observer.unobserve(entry.target)
+                }
+            });
+        })
+
+        let anchorElms = document.querySelectorAll('a');
+        anchorElms.forEach((e) => {
+            console.log(e)
+            const prefetch = e.getAttribute('client\:prefetch');
+            let method
+            if (prefetch == null) return
+            if (!!prefetch) method = prefetch
+            if (e.href.includes(document.location.origin) && !e.href.includes('#') && !e.href !== (document.location.href || document.location.href + '/')) {
+                // page would be a valid prefetch
+                if (method == 'hover') {
+                    const url = e.getAttribute('href')
+                    e.addEventListener('pointerenter', () => prefetchLink(url), { once: true })
+                } else {
+                    // method is empty, visible, or invalid, either way we so the default of visible
+                    visibleObserver.observe(e)
+                }
+            }
+        })
+    }
+}
--- a/day16/src/lib/templateRenderer.js
+++ b/day16/src/lib/templateRenderer.js
@@ -0,0 +1,66 @@
+export const compileToString = async (template) => {
+    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,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'))`
+
+            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) => {
+    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) => {
+    return compileToString(template)
+}
--- a/day16/src/main.js
+++ b/day16/src/main.js
@@ -0,0 +1,11 @@
+import { Reactive } from './lib/ReactiveObject'
+import { getCookie } from './lib/cookieManager';
+
+export const appState = new Reactive({
+    count: 0,
+    cookie: getCookie('username'),
+    text: '',
+    html: '',
+    year: '',
+    cookiedata: "",
+});
--- a/day16/src/pages/index.devto
+++ b/day16/src/pages/index.devto
@@ -0,0 +1,8 @@
+<div class="grid place-items-center p-3 content-center min-h-screen">
+  <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+    <Counter />
+    <textInput />
+    <a href="/page2" client:prefetch>Navigate</a>
+    <a href="/page3" client:prefetch="hover">Navigate</a>
+  </div>
+</div>
--- a/day16/src/pages/page2.devto
+++ b/day16/src/pages/page2.devto
@@ -0,0 +1,6 @@
+<div class="grid place-items-center p-3 content-center min-h-screen">
+    <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <a href="/"
+            d-on:click="event.preventDefault(); renderPage('/')">Home</a>
+    </div>
+</div>
--- a/day16/src/pages/page3.devto
+++ b/day16/src/pages/page3.devto
@@ -0,0 +1,6 @@
+<div class="grid place-items-center p-3 content-center min-h-screen">
+    <div class="p-6 border-neutral-800 rounded-lg container__content  border">
+        <a href="/"
+            d-on:click="event.preventDefault(); renderPage('/')">Home</a>
+    </div>
+</div>
--- a/day16/src/style.css
+++ b/day16/src/style.css
@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+    background-color: #101010;
+    color: #FEFEFE;
+    font-family: Helvetica, Arial, Sans-Serif;
+    padding: 0;
+    margin: 0;
+    min-height: 100vh;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.container__content {
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
--- a/day16/tailwind.config.cjs
+++ b/day16/tailwind.config.cjs
@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{devto,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        gray: colors.zinc
+      }
+    },
+  },
+  plugins: [],
+}
--- a/day16/vite.config.js
+++ b/day16/vite.config.js
@@ -0,0 +1,11 @@
+/** @type {import('vite').UserConfig} */
+export default {
+    build: {
+        target: 'es2020',
+    },
+    
+    server: {
+        port: 3000,
+        host: '0.0.0.0'
+    }
+}
--- a/day16/vite.config.js.timestamp-1665100531736.mjs
+++ b/day16/vite.config.js.timestamp-1665100531736.mjs
@@ -0,0 +1,14 @@
+// vite.config.js
+var vite_config_default = {
+  build: {
+    target: "es2020"
+  },
+  server: {
+    port: 3e3,
+    host: "0.0.0.0"
+  }
+};
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9qdWxzMDcvQ29kZS9ub2RlLXByb2plY3RzLzEwMERheXNPZkNvZGUvZGF5MTRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9ob21lL2p1bHMwNy9Db2RlL25vZGUtcHJvamVjdHMvMTAwRGF5c09mQ29kZS9kYXkxNC92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vaG9tZS9qdWxzMDcvQ29kZS9ub2RlLXByb2plY3RzLzEwMERheXNPZkNvZGUvZGF5MTQvdml0ZS5jb25maWcuanNcIjsvKiogQHR5cGUge2ltcG9ydCgndml0ZScpLlVzZXJDb25maWd9ICovXG5leHBvcnQgZGVmYXVsdCB7XG4gICAgYnVpbGQ6IHtcbiAgICAgICAgdGFyZ2V0OiAnZXMyMDIwJyxcbiAgICB9LFxuICAgIFxuICAgIHNlcnZlcjoge1xuICAgICAgICBwb3J0OiAzMDAwLFxuICAgICAgICBob3N0OiAnMC4wLjAuMCdcbiAgICB9XG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQ0EsSUFBTyxzQkFBUTtBQUFBLEVBQ1gsT0FBTztBQUFBLElBQ0gsUUFBUTtBQUFBLEVBQ1o7QUFBQSxFQUVBLFFBQVE7QUFBQSxJQUNKLE1BQU07QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNWO0FBQ0o7IiwKICAibmFtZXMiOiBbXQp9Cg==
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -11 24 24" width="24" fill="white"><path d="M1 0h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z"></path></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -2.5 24 24" width="24" fill="white"><path d="M17.83 4.194l.42-1.377a1 1 0 1 1 1.913.585l-1.17 3.825a1 1 0 0 1-1.248.664l-3.825-1.17a1 1 0 1 1 .585-1.912l1.672.511A7.381 7.381 0 0 0 3.185 6.584l-.26.633a1 1 0 1 1-1.85-.758l.26-.633A9.381 9.381 0 0 1 17.83 4.194zM2.308 14.807l-.327 1.311a1 1 0 1 1-1.94-.484l.967-3.88a1 1 0 0 1 1.265-.716l3.828.954a1 1 0 0 1-.484 1.941l-1.786-.445a7.384 7.384 0 0 0 13.216-1.792 1 1 0 1 1 1.906.608 9.381 9.381 0 0 1-5.38 5.831 9.386 9.386 0 0 1-11.265-3.328z"></path></svg>