28

Author: vvscode

lessons/lesson28/code/routing-examples/README.md

@@ -0,0 +1,3 @@
+# vanilla-client-side-routing-examples
+
+Created with CodeSandbox

lessons/lesson28/code/routing-examples/examples/hash-api.js

@@ -0,0 +1,28 @@
+/* eslint-disable */
+
+const render = () => {
+  const route = location.hash.replace("#", "") || "/";
+  document.getElementById("root").innerHTML = `<h2>"${route}" page</h2>`;
+};
+
+// 1. Handle initial page load
+window.addEventListener("load", () => {
+  render(); // 👈
+});
+
+// 2. Handle hash changes
+window.addEventListener("hashchange", () => {
+  render(); // 👈
+});
+
+// 3. Catch <a> tag clicks
+document.body.addEventListener("click", (event) => {
+  if (!event.target.matches("a")) {
+    return;
+  }
+  event.preventDefault();
+  const url = event.target.getAttribute("href");
+  location.hash = url; // doesn't reload page
+  // location.href = url; // reloads page
+  // location.replace(url); // reloads page
+});

lessons/lesson28/code/routing-examples/examples/history-api.js

@@ -0,0 +1,28 @@
+/* eslint-disable */
+
+const render = () => {
+  const route = location.pathname;
+  document.getElementById("root").innerHTML = `<h2>"${route}" page</h2>`;
+};
+
+// 1. Handle initial page load
+window.addEventListener("load", () => {
+  render(); // 👈
+});
+
+// 2. Handle history navigations. alternative "window.onpopstate"
+window.addEventListener("popstate", (event) => {
+  render();
+});
+
+// 3. Catch <a> tag clicks + trigger change handler
+document.body.addEventListener("click", (event) => {
+  if (!event.target.matches("a")) {
+    return;
+  }
+  event.preventDefault();
+  let url = event.target.getAttribute("href");
+  history.pushState({ foo: "bar" }, document.title, url);
+  // history.replaceState({ foo: "bar" }, url, url);
+  render(); // 👈
+});

lessons/lesson28/code/routing-examples/examples/practice.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+/**
+ * TODO: modify router.js to support
+ * 1. unsubscribe function.
+ *    Hint: inside Router.go function return unsubscribe function,
+ *          which will remove listener by id
+ * 2. onLeave callback
+ *    Hint: Add 3rd 'onLeave' parameter to Router.on + save in listener object
+ *          Check in Router.handleListener if previousPath matches listener
+ */
+
+const render = (content) =>
+  (document.getElementById("root").innerHTML = `<h2>${content}</h2>`);
+
+const createLogger =
+  (content, shouldRender = true) =>
+  (...args) => {
+    console.log(`LOGGER: ${content} args=${JSON.stringify(args)}`);
+    if (shouldRender) {
+      render(content);
+    }
+  };
+
+const router = Router();
+
+const unsubscribe = router.on(/.*/, createLogger("/.*"));
+router.on(
+  (path) => path === "/contacts",
+  createLogger("/contacts"), // onEnter
+  createLogger("[leaving] /contacts", false) // onLeave
+);
+router.on("/about", createLogger("/about"));
+router.on("/about/us", createLogger("/about/us"));
+
+document.body.addEventListener("click", (event) => {
+  if (!event.target.matches("a")) {
+    return;
+  }
+  event.preventDefault();
+  let url = event.target.getAttribute("href");
+  router.go(url);
+  unsubscribe();
+});

lessons/lesson28/code/routing-examples/examples/router.js

@@ -0,0 +1,92 @@
+/* eslint-disable */
+
+// IMPLEMENTATION
+function Router() {
+  let listeners = [];
+  let currentPath = location.pathname;
+  let previousPath = null;
+
+  const isMatch = (match, path) =>
+    (match instanceof RegExp && match.test(path)) ||
+    (typeof match === "function" && match(path)) ||
+    (typeof match === "string" && match === path);
+
+  const handleListener = ({ match, onEnter, onLeave }) => {
+    const args = { currentPath, previousPath, state: history.state };
+
+    isMatch(match, currentPath) && onEnter(args);
+    onLeave && isMatch(match, previousPath) && onLeave(args);
+  };
+
+  const handleAllListeners = () => listeners.forEach(handleListener);
+
+  const generateId = () => {
+    const getRandomNumber = () =>
+      Math.floor(Math.random() * listeners.length * 1000);
+    const doesExist = (id) => listeners.find((listener) => listener.id === id);
+
+    let id = getRandomNumber();
+    while (doesExist(id)) {
+      id = getRandomNumber();
+    }
+    return id;
+  };
+
+  const on = (match, onEnter, onLeave) => {
+    const id = generateId();
+
+    const listener = { id, match, onEnter, onLeave };
+    listeners.push(listener);
+    handleListener(listener);
+
+    return () => {
+      listeners = listeners.filter((listeners) => listeners.id !== id);
+    };
+  };
+
+  const go = (url, state) => {
+    previousPath = currentPath;
+    history.pushState(state, url, url);
+    currentPath = location.pathname;
+
+    handleAllListeners();
+  };
+
+  window.addEventListener("popstate", handleAllListeners);
+
+  return { on, go };
+}
+
+// USAGE
+const render = (content) =>
+  (document.getElementById("root").innerHTML = `<h2>${content}</h2>`);
+
+const createLogger =
+  (content, shouldRender = true) =>
+  (...args) => {
+    console.log(`LOGGER: ${content} args=${JSON.stringify(args)}`);
+    if (shouldRender) {
+      render(content);
+    }
+  };
+
+const router = Router();
+
+const unsubscribe = router.on(/.*/, createLogger("/.*"));
+router.on(
+  (path) => path === "/contacts",
+  createLogger("/contacts"), // onEnter
+  createLogger("[leaving] /contacts", false) // onLeave
+);
+router.on("/about", createLogger("/about"));
+router.on("/about/us", createLogger("/about/us"));
+
+document.body.addEventListener("click", (event) => {
+  if (!event.target.matches("a")) {
+    return;
+  }
+  event.preventDefault();
+  let url = event.target.getAttribute("href");
+  router.go(url);
+  unsubscribe();
+});

lessons/lesson28/code/routing-examples/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Client-Side URL change examples</title>
+  </head>
+  <body>
+    <header>
+      <h1>Client-side URL change examples</h1>
+      <nav style="display: flex; justify-content: space-around">
+        <a href="/">Home</a>
+        <a href="/contacts">Contacts</a>
+        <a href="/about">About</a>
+        <a href="/about/us">About / Us</a>
+      </nav>
+    </header>
+    <article id="root"></article>
+
+    <!-- <script src="/examples/hash-api.js"></script> -->
+    <!-- <script src="/examples/history-api.js"></script> -->
+    <script src="/examples/router.js"></script>
+    <!-- <script src="/examples/practice.js"></script> -->
+    <script>
+      /* Debug */
+      window.addEventListener("load", () =>
+        console.log(`PAGE FULLY RELOADED ${Date.now()}`)
+      );
+    </script>
+  </body>
+</html>

lessons/lesson28/code/routing-examples/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "vanilla-client-side-routing-examples",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.html",
+  "scripts": {
+    "start": "serve",
+    "build": "echo This is a static template, there is no bundler or bundling involved!"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codesandbox-app/static-template.git"
+  },
+  "keywords": [],
+  "author": "Ives van Hoorne",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/codesandbox-app/static-template/issues"
+  },
+  "homepage": "https://github.com/codesandbox-app/static-template#readme",
+  "devDependencies": {
+    "serve": "^11.2.0"
+  }
+}

lessons/lesson28/code/routing-examples/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}