Create a simple, Vanilla JavaScript SPA

$ cd ~/Workspace
$ git clone git@github.com:<your username>/vanilla-js-spa.github.io.git
Cloning into vanilla-js-spa.github.io

$ cd vanilla-js-spa.github.io
$ struct
📦 vanilla-js-spa.github.io
 ├── 📄 .gitignore
 └── 📄 README.md

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: 

$ struct
📦 vanilla-js-spa.github.io
 ├── 📄 .gitignore
 ├── 📄 package.json
 └── 📄 README.md

$ npm i -D @ironkinoko/rollup-plugin-styles @rollup/plugin-commonjs @rollup/plugin-node-resolve cssnano postcss postcss-cli rollup rollup-plugin-dts rollup-plugin-node-externals rollup-plugin-typescript2 stylus ts-node tsconfig-paths tslib typescript 
added 295 packages, and audited 296 packages in 7s

found 0 vulnerabilities
$ npm i -S diff-dom
added 1 package, and audited 2 packages in 438ms

found 0 vulnerabilities
$ struct
📦 vanilla-js-spa.github.io
 ├── 📁 node_modules
 ├── 📄 .gitignore
 ├── 📄 package-lock.json
 ├── 📄 package.json
 └── 📄 README.md

{
  …
  "scripts": {
    "clean": "rm -rf dist/*",
    "assets": "mkdir -p dist && cp -a ./public/. ./dist/ && cp -a ./src/assets/. ./dist/",
    "prebuild": "npm run clean && npm run assets",
    "build": "rollup -c rollup.config.js",
    "postbuild": "bash -c 'mv -f ./dist/*.{js,map} ./dist/js'",
    "build:watch": "rollup -c rollup.config.js -w",
    "dev": "npx browser-sync start -s \"dist\" --files \"dist/*.*\"  --single"
  },
  …
}

{
  "name": "vanilla-js-spa.github.io",
  "version": "1.0.0",
  "type": "module",
  "description": "Vanilla JavaScript SPA",
  "scripts": {
    "clean": "rm -rf dist/*",
    "assets": "mkdir -p dist && cp -a ./public/. ./dist/ && cp -a ./src/assets/. ./dist/",
    "prebuild": "npm run clean && npm run assets",
    "build": "rollup -c rollup.config.js",
    "postbuild": "bash -c 'mv -f ./dist/*.{js,map} ./dist/js'",
    "build:watch": "rollup -c rollup.config.js -w",
    "dev": "npx browser-sync start -s \"dist\" --files \"dist/*.*\"  --single"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/<your username>/vanilla-js-spa.github.io.git"
  },
  "bugs": {
    "url": "https://github.com/<your username>/vanilla-js-spa.github.io/issues"
  },
  "engines": {
    "node": ">=18.16.0",
    "npm": ">=9.5.1"
  },
  "homepage": "https://github.com/<your username>/vanilla-js-spa.github.io#readme",
  "devDependencies": {
    "@ironkinoko/rollup-plugin-styles": "^4.0.3",
    "@rollup/plugin-commonjs": "^25.0.1",
    "@rollup/plugin-node-resolve": "^15.0.2",
    "cssnano": "^6.0.0",
    "postcss": "^8.4.23",
    "postcss-cli": "^10.1.0",
    "rollup": "^3.22.0",
    "rollup-plugin-dts": "^5.3.0",
    "rollup-plugin-node-externals": "^6.0.1",
    "rollup-plugin-typescript2": "^0.35.0",
    "stylus": "^0.59.0",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.2.0",
    "tslib": "^2.3.1",
    "typescript": "^5.1.3"
  },
  "dependencies": {
    "diff-dom": "^5.0.7"
  }
}

$ struct
📦 vanilla-js-spa.github.io
 ├── 📁 node_modules
 ├── 📄 .browserslistrc
 ├── 📄 .editorconfig
 ├── 📄 .gitignore
 ├── 📄 .postcssrc.cjs
 ├── 📄 .stylintrc
 ├── 📄 package-lock.json
 ├── 📄 package.json
 ├── 📄 README.md
 ├── 📄 tsconfig.json
 └── 📄 tslint.json

$ touch rollup.config.js
$ struct
📦 vanilla-js-spa.github.io
 ├── 📁 node_modules
 ├── 📄 .browserslistrc
 ├── 📄 .editorconfig
 ├── 📄 .gitignore
 ├── 📄 .postcssrc.cjs
 ├── 📄 .stylintrc
 ├── 📄 package-lock.json
 ├── 📄 package.json
 ├── 📄 README.md
 └── 📄 rollup.config.js

import { nodeResolve } from '@rollup/plugin-node-resolve';
import ts from 'rollup-plugin-typescript2';
import typescript from 'typescript';
import styles from '@ironkinoko/rollup-plugin-styles';
import svg from 'rollup-plugin-svg-import';
import commonjs from '@rollup/plugin-commonjs';

export default [
  {
    input: ['src/main.ts'],
    output: {
      format: 'es',
      sourcemap: true,
      exports: 'named',
      dir: 'dist',
      assetFileNames: '[name][extname]'
    },
    plugins: [
      svg({
        stringify: true
      }),
      styles({
        mode: ['extract', './css/vanilla-js-spa.css'],
        url: false,
        minimize: true
      }),
      nodeResolve(),
      commonjs(),
      ts({
        useTsconfigDeclarationDir: true,
        sourceMap: false,
        typescript
      })
    ]
  }
];

$ struct
📦 vanilla-js-spa.github.io
 ├── 📁 node_modules
 …
 ├── 📁 public
   └── 📄 index.html
 ├── 📁 src
   ├── 📁 assets
     ├── 📁 css
     ├── 📁 img
     ├── 📁 js
   ├── 📁 components
   ├── 📁 config
   ├── 📁 features
   ├── 📁 lib
   ├── 📁 pages
   ├── 📁 styles
   ├── 📁 types
   ├── 📄 app.ts
   └── 📄 main.ts
 …
 └── 📄 rollup.config.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>vanilla-js-spa</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="app"></div>
    <link async href="/css/vanilla-js-spa.css" rel="stylesheet" type="text/css" />
    <script
      defer
      type="module"
      src="/js/main.js"
      type="text/javascript"
    ></script>
  </body>
</html>

$ cd src/styles
$ touch index.styl
$ struct
  └── 📄 index.styl

import './styles/index.styl';

$ struct
📦 vanilla-js-spa.github.io
 …
 ├── 📁 src
   ├── …
   ├── 📁 lib
     └── 📁 spa
       └── 📄 index.ts
   └── …
 …

import {
  FunctionType,
  EventArray,
  EventDataAction,
  EventDataId,
  RouteDetails,
  EventType,
  StateContext,
  UseStateValue,
  UseStateReturn
} from './types';

import { waitFor } from './utils/wait-for';
import { setTitle } from './utils/set-title';
import { updateNodes } from './utils/update-nodes';

/**
 * The main functionality that is to be replaced if a framework is to be used
 * instead. The functionality that spa provides, is the same principles and naming that React uses,
 * except for the global event handlers like `addOnClick`.
 */
export const spa = (() => {
  const _root: HTMLElement | null = document.querySelector('#app');

  if (!_root) {
    throw new Error(
      'Missing element for application! Please make sure you have an element with the id of `app` in the DOM'
    );
  }

  const stateHooks: Record<string, StateContext> = {};
  const effectHooks: unknown[] = [];

  let _templateCallback;
  let _page;
  let clickEventArray: EventArray<EventDataId> = [];
  let onRouteChangeEventArray: EventArray<EventDataId> = [];
  let onAfterAppRenderEventArray: EventArray<EventDataId> = [];
  let effectIndex = 0;

  const init = async (
    // eslint-disable-next-line no-unused-vars
    templateCallback: FunctionType,
    routeDetails: RouteDetails
  ) => {
    if (!templateCallback) {
      throw new Error('Missing param `templateCallback` for `init()`');
    }

    if (!routeDetails) {
      throw new Error('Missing param `routeDetails` for `init()`');
    }

    const { page } = routeDetails;

    if (!page) {
      throw new Error('Missing page');
    }

    _templateCallback = templateCallback;
    _page = page;

    await render(routeDetails);
  };
  const render = async (routeDetails?: RouteDetails) => {
    let page = _page;
    let routeChanged = false;

    if (routeDetails) {
      page = routeDetails.page;
      routeChanged = routeDetails.routeChanged;
    }

    console.info(`trying to render "${page?.route?.name}"`);
    clickEventArray = [];
    onRouteChangeEventArray = [];
    onAfterAppRenderEventArray = [];
    // reset state indexes
    Object.keys(stateHooks).forEach(
      (context) => (stateHooks[context].index = 0)
    );

    effectIndex = 0;

    document.dispatchEvent(
      new CustomEvent('eventBeforeAppRender', {
        bubbles: true,
        cancelable: true
      })
    );

    let _html = '';
    let error = false;

    try {
      _html = await _templateCallback(page);
    } catch (e) {
      if (e.message.indexOf('404') !== -1) {
        setTitle('404, page not found');
        _html = `<h1>404, page not found</h1>`;
      } else {
        _html = await _templateCallback('ErrorPage', {
          error: e
        });

        error = true;
        console.error(e);
        console.info(
          `failed to render "${page?.route?.name}", rendering error page`
        );
      }
    }

    updateNodes(_root, _html);

    await waitFor(10);

    document.removeEventListener(
      'eventAfterRouteChanged',
      handleOnRouteChangedListener
    );
    document.addEventListener(
      'eventAfterRouteChanged',
      handleOnRouteChangedListener
    );

    if (routeChanged) {
      document.dispatchEvent(
        new CustomEvent('eventAfterRouteChanged', {
          bubbles: true,
          cancelable: true,
          detail: {
            routeDetails
          }
        })
      );
    }

    const onRender = () => {
      if (
        page &&
        page.route &&
        page.route.page.onRender &&
        typeof page.route.page.onRender === 'function'
      ) {
        page.route.page.onRender();
      }

      document.dispatchEvent(
        new CustomEvent(`eventAfterPage${page.route.name}Render`, {
          bubbles: true,
          cancelable: true
        })
      );

      if (
        _templateCallback &&
        _templateCallback.onRender &&
        typeof _templateCallback.onRender === 'function'
      ) {
        _templateCallback.onRender();
      }

      document.dispatchEvent(
        new CustomEvent('eventAfterAppRender', {
          bubbles: true,
          cancelable: true
        })
      );
    };

    document.removeEventListener(
      'eventAfterAppRender',
      handleAfterAppRenderListeners
    );
    document.addEventListener(
      'eventAfterAppRender',
      handleAfterAppRenderListeners
    );

    onRender();

    document.removeEventListener('click', handleClickListeners);
    document.addEventListener('click', handleClickListeners);
  };
  const handleAfterAppRenderListeners = () => {
    onAfterAppRenderEventArray.forEach((callback: EventDataAction) => {
      callback();
    });
  };
  const handleOnRouteChangedListener = () => {
    onRouteChangeEventArray.forEach((action: EventDataId) =>
      action.callback()
    );
  };
  const handleClickListeners = (e: EventType<HTMLElement>) => {
    clickEventArray.forEach((target: EventDataId) => {
      if (e.target.id === target.id) {
        target.callback(e);
      }
    });
  };
  /**
   * To be able to add event listeners to the "string html" produced by the
   * components, we have to use "global" event handlers.
   * Every usages of this type of function (like `addOnClick`) is to be replaced if
   * a framework is used.
   * @param {string} id The id used for the event
   * @param {Function} callback The callback to use on the event
   */
  // eslint-disable-next-line no-unused-vars
  const addOnClick = (id: string, callback: FunctionType) => {
    clickEventArray.push({ id, callback });
  };
  const addOnRouteChange = (callback: FunctionType) => {
    onRouteChangeEventArray.push(callback);
  };
  const addOnAfterAppRender = (callback: FunctionType) => {
    onAfterAppRenderEventArray.push(callback);
  };
  const useState = (
    initValue: UseStateValue,
    context: string
  ): UseStateReturn => {
    if (!context || typeof context !== 'string' || context === '') {
      throw new Error('Missing parameter `context` for `useState`');
    }

    if (!stateHooks[context]) {
      stateHooks[context] = { state: [], index: 0 };
    }

    const contextStateIndex = stateHooks[context].index;
    const state = (
      stateHooks[context].state[contextStateIndex] !== undefined
        ? stateHooks[context].state[contextStateIndex]
        : initValue
    ) as UseStateValue;
    const _contextStateIndex = contextStateIndex;
    const setState = (newValue: UseStateValue) => {
      if (stateHooks[context].state[_contextStateIndex] !== newValue) {
        stateHooks[context].state[_contextStateIndex] = newValue;
      }

      render();
    };

    stateHooks[context].index++;

    return [state, setState];
  };
  const useEffect = async (
    callback: unknown | Promise<FunctionType> | FunctionType,
    dependencyArray: unknown[]
  ) => {
    const oldDependencies = effectHooks[effectIndex];

    let hasChanged = true;

    if (oldDependencies) {
      hasChanged = dependencyArray.some(
        (dep: unknown, i: number) => !Object.is(dep, oldDependencies[i])
      );
    }

    effectHooks[effectIndex] = dependencyArray;
    effectIndex++;

    if (hasChanged && callback && typeof callback === 'function') {
      if (callback.constructor.name === 'AsyncFunction') {
        await callback();
      } else {
        callback();
      }
    }
  };

  return {
    addOnClick,
    addOnRouteChange,
    addOnAfterAppRender,
    useEffect,
    useState,
    init,
    render
  };
})();

export const {
  addOnClick,
  addOnRouteChange,
  addOnAfterAppRender,
  useEffect,
  useState,
  init,
  render
} = spa;

export default spa;

$ struct
📦 vanilla-js-spa.github.io
 …
 ├── 📁 src
   ├── …
   ├── 📁 lib
     └── 📁 spa
       └── 📁 types
         └── 📄 index.ts
       └── 📄 index.ts
   └── …
 …

…
// eslint-disable-next-line no-unused-vars
export type FunctionType = (...args: unknown[]) => void;


export type EventDataId = {
  id: string;
  // eslint-disable-next-line no-unused-vars
  callback: EventDataAction;
};

// eslint-disable-next-line no-unused-vars
export type EventDataAction = (...args: unknown[]) => void;

export type EventDataSelector = {
  selector: string;
  // eslint-disable-next-line no-unused-vars
  callback: EventDataAction;
};

// eslint-disable-next-line no-unused-vars
export type EventDataUnion<T> = FunctionType | T;

export type EventArray<T> = EventDataUnion<T>[];

export type UseStateValue =
  | boolean
  | string
  | number
  | unknown[]
  | Record<string, unknown>;

// eslint-disable-next-line no-unused-vars
export type UseStateReturn = [
  UseStateValue,
  FunctionType
];

export type StateContext = {
  state: UseStateValue[];
  index: number;
};

$ struct
📦 vanilla-js-spa.github.io
 …
 ├── 📁 src
   ├── …
   └── 📁 lib
     └── 📁 spa
       └── 📁 router
         ├── 📁 utils
           ├── 📄 get-router-match.ts
           └── 📄 potential-matches-mapper.ts
         ├── 📄 routes.ts
         └── 📄 index.ts
 …

import { getParams } from '../utils/get-params';

import { Route, RouterMatch } from '../types';

import { getRouterMatch } from './utils/get-router-match';

import { routes } from './routes';

let previousPage: RouterMatch = {
  route: { name: 'none' }
};
let previousParams = {};

export const router = () => {
  const page: RouterMatch = getRouterMatch(routes);
  const currentParams = getParams(page);

  let paramsChanged = false;
  let routeChanged = false;

  if (previousPage.route.name === (page.route as Route).name) {
    if (JSON.stringify(previousParams) !== JSON.stringify(currentParams)) {
      paramsChanged = true;
      routeChanged = true;
      window.scrollTo(0, 0);
      document.dispatchEvent(
        new CustomEvent('eventParamsChanged', {
          bubbles: true,
          cancelable: true,
          detail: {
            previousParams,
            currentParams
          }
        })
      );
    }
  } else {
    routeChanged = true;
    window.scrollTo(0, 0);
  }

  previousParams = getParams(page);
  previousPage = page as RouterMatch;

  const routeDetails = {
    page,
    previousPage,
    previousParams,
    currentParams,
    paramsChanged,
    routeChanged
  };

  if (routeChanged) {
    document.dispatchEvent(
      new CustomEvent('eventBeforeRouteChanged', {
        bubbles: true,
        cancelable: true,
        detail: {
          routeDetails
        }
      })
    );
  }

  return routeDetails;
};

import { Route } from '../types';

export const routes: Route[] = [
  { path: '/', page: 'StartPage', name: 'Start', regex: /^\/$/ },
  { path: '/about', page: 'AboutPage', name: 'About', regex: /^\/about$/ }
];

import { RouterMatch, Routes } from '../../types';
import { potentialMatchesMapper } from './potential-matches-mapper';

export const getRouterMatch = (routes: Routes): RouterMatch => {
  // Test each route for a potential match.
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const potentialMatches = routes.map(potentialMatchesMapper as any);

  let match = potentialMatches.find(
    (potentialMatch: RouterMatch) => potentialMatch.result !== null
  ) as RouterMatch;

  if (!match) {
    // javascript, i'm looking at you!!
    const pathName = decodeURI(location.pathname) + '';

    match = {
      route: { path: '/404', page: 'PageNotFoundPage', name: 'Page not found' },
      result: [pathName]
    };
  }

  return match;
};

import { RouterMatch, Route } from '../../types';

export const potentialMatchesMapper = (
  route: Route
): RouterMatch => {
  // javascript, i'm looking at you!!
  let pathName = decodeURI(location.pathname) + '';

  return {
    route: route,
    result: route.regex ? pathName.match(route.regex) : null
  };
};

$ struct
📦 vanilla-js-spa.github.io
 …
 └── 📁 src
   └── 📁 lib
     └── 📁 spa
       └── 📁 utils
         ├── 📄 bootstrap.ts
         ├── 📄 dom-content-loaded.ts
         ├── 📄 event-after-app-render.ts
         ├── 📄 popstate.ts
         ├── 📄 event-matches.ts
         ├── 📄 get-params.ts
         ├── 📄 navigate-to.ts
         ├── 📄 update-nodes.ts
         ├── 📄 string-to-html.ts
         ├── 📄 set-title.ts
         └── 📄 wait-for.ts
 …

import App from '../../../app';

import { RouteDetails } from '../types';
import { init } from '../';

export const bootstrap = async (routeDetails: RouteDetails) => {
  await init(App, routeDetails);
};

import { NavigateToEvent, EventType } from '../types';

import { router } from '../router';
import { bootstrap } from './bootstrap';
import { eventMatches } from './event-matches';
import { navigateTo } from './navigate-to';

// When DOM is loaded
export const DOMContentLoaded = async () => {
  // If any navigation is fired through a custom event
  document.addEventListener('navigateTo', (e: NavigateToEvent) => {
    const { to } = e.detail;

    navigateTo(to);
  });
  // If a user clicks a link that should change the popstate, instead of hard routing
  document.body.addEventListener(
    'click',
    async (e: EventType<HTMLElement>) => {
      const el = eventMatches(e, '[data-link]') as HTMLAnchorElement;

      if (el) {
        e.preventDefault();
        await navigateTo(el.href);
      }
    }
  );

  // Get current route
  const routeDetails = router();

  // Reinitialisze the SPA
  await bootstrap(routeDetails);
  
};

…
/**
 * Represents the event object for an element.
 * @template T - Type of the element used as a target.
 */
export type EventType<T> = Event & {
  target: T & {
    files?: FileList | null;
    id: string;
    parentElement: Element | null;
  };
  currentTarget: HTMLElement & {
    documentElement: HTMLElement;
  };
};

/**
 * Represents the keyboard event object for an element.
 * @template T - Type of the element used as a target.
 */
export type KeyboardEventType<T> = KeyboardEvent & {
  target: T & {
    id: string;
  };
  currentTarget: HTMLElement & {
    documentElement: HTMLElement;
  };
};

export type NavigateToEvent = Event & {
  detail: {
    to: string;
  };
};

export const eventAfterAppRender = () => {
  // Preserve focus state on render
  if (
    document.activeElement &&
    !document.activeElement.isEqualNode(globalThis.activeElement)
  ) {
    const { id } = globalThis.activeElement;

    if (id) {
      const elementToFocus = document.getElementById(id);

      if (elementToFocus) {
        elementToFocus.focus();
      }
    }
  }
};

import { router } from '../router';
import { bootstrap } from './bootstrap';

export const popstate = async () => {
  const routeDetails = router();

  await bootstrap(routeDetails);
};

import { EventType } from '../types';

/**
 * @param {Event} event The event.
 * @param {string} selector The selector.
 * @returns {Element}
 *   The closest ancestor of the event target (or the event target itself) which matches the selectors given in parameter.
 */
export const eventMatches = (
  event: EventType<HTMLElement>,
  selector: string
): HTMLElement | undefined => {
  // <svg> in IE does not have `Element#msMatchesSelector()` (that should be copied to `Element#matches()` by a polyfill).
  // Also a weird behavior is seen in IE where DOM tree seems broken when `event.target` is on <svg>.
  // Therefore this function simply returns `undefined` when `event.target` is on <svg>.
  const { target, currentTarget } = event;

  if (typeof target.matches === 'function') {
    if (target.matches(selector)) {
      // If event target itself matches the given selector, return it
      return target;
    }

    if (target.matches(`${selector} *`)) {
      const closest: HTMLElement | null = target.closest(selector);

      if (
        closest &&
        (currentTarget.nodeType === Node.DOCUMENT_NODE
          ? currentTarget.documentElement
          : currentTarget
        ).contains(closest)
      ) {
        return closest;
      }
    }
  }

  return undefined;
};

import { RouterMatch } from '../types';

export const getParams = (match: RouterMatch) => {
  if (!match.result) return {};

  const values = match.result.slice(1);

  if (!match.route.path) return {};

  const keys = Array.from(match.route.path.matchAll(/:([\w]+)/g)).map(
    (result: string[]) => result[1]
  );

  return Object.fromEntries(keys.map((key, i) => [key, values[i]]));
};

import App from '../../../app';

import { init } from '../';
import { router } from '../router';

export const navigateTo = async (url: string) => {
  history.pushState(null, '', url);

  const routeDetails = router();

  await init(App, routeDetails);
};

import { stringToHTML } from './string-to-html';

import { DiffDOM } from 'diff-dom';

/**
 * A wrapper to be able to update DOM nodes, using the 3rd party library `diff-dom`.
 * This compares the old DOM nodes with the new DOM nodes and applies any changes.
 * It is the same modus operandi as the inner working of a modern-day JS framework, e.g., React.
 *
 * The `updateNodes` function takes two parameters: `root` and `html`.
 * The root parameter is an `HTMLElement` where the DOM changes
 * will be applied, and the `html` parameter is a string representing
 * the new DOM nodes to be applied.
 *
 * The function uses the third-party library `diff-dom` to compare
 * the old DOM nodes with the new DOM nodes and apply any changes,
 * simulating the behavior of modern JS frameworks like React.
 * The `updateNodes` function does not return anything (returns `void`).
 *
 * 

 *
 * **NOTE:** Does not detect text changes. See [fiduswriter/diffDOM#advanced-merging-of-text-node-changes](https://github.com/fiduswriter/diffDOM#advanced-merging-of-text-node-changes)
 *
 * 
 *
 * @see [diffDOM](https://github.com/fiduswriter/diffDOM)
 * @param {HTMLElement} root - The root HTMLElement where the DOM changes will be applied.
 * @param {string} html - The HTML string representing the new DOM nodes to be applied.
 * @returns {void} - This function does not return anything (returns void).
 *
 * @example
 * ```ts
 * const rootElement = document.getElementById('app');
 * const newHTML = App();
 * // Updates only the changed DOM elements
 * updateNodes(rootElement, newHTML);
 * ```
 */
export const updateNodes = (root: HTMLElement, html: string): void => {
  const currentDOM = stringToHTML(root.innerHTML);
  const newDOM = stringToHTML(html);
  const dd = new DiffDOM();
  const diff = dd.diff(currentDOM, newDOM);

  dd.apply(root, diff);
};

/**
 * Convert a template string into HTML DOM nodes.
 *
 * The `stringToHTML` function takes a parameter `str`, which is
 * the template string to be converted into HTML.
 * It uses the `DOMParser` to parse the template string into HTML DOM nodes and
 * then returns the `body` of the parsed document as a `Node`.
 *
 * @param {string} str - The template string to be converted into HTML.
 * @returns {Element} - The template HTML represented as DOM nodes.
 */
export const stringToHTML = (str: string): Element => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(str, 'text/html');

  return doc.body;
};

/**
 * Sets the title of the document.
 *
 * @param {string} title - The title to set for the document.
 *
 * @example
 * ```ts
 * // Sets the document title to "My Page Title"
 * setTitle('My Page Title');
 * ```
 */
export const setTitle = (title: string): void => {
  document.title = title;
};

/**
 * Delays execution for the specified time.
 *
 * @param {number} ms - The time to wait in milliseconds.
 * @returns {Promise<void>} A Promise that resolves after the specified time.
 *
 * @example
 * ```ts
 * // Wait for 2 seconds
 * await waitFor(2000);
 * ```
 */
export const waitFor = (ms: number): Promise<void> =>
  new Promise((resolve) => setTimeout(resolve, ms));

// Global events
import { DOMContentLoaded } from './lib/spa/utils/dom-content-loaded';
import { eventAfterAppRender } from './lib/spa/utils/event-after-app-render';
import { popstate } from './lib/spa/utils/popstate';

// Styles
import './styles/index.styl';

// Events that happens on URL change in our SPA
window.addEventListener('popstate', popstate);
// Events that happens after DOM is loaded
document.addEventListener('DOMContentLoaded', DOMContentLoaded);
// Events that happens after eveyr App render
document.addEventListener('eventAfterAppRender', eventAfterAppRender);

import { getParams } from './lib/spa/utils/get-params';
import { RouterMatch } from './lib/spa/types';
import { addOnAfterAppRender } from './lib/spa';

const App = async (match: RouterMatch, params: unknown) => {
  let _page: string;
  let _params = params;

  if (typeof match === 'string') {
    _params = params;
    _page = 'ErrorPage';
  } else {
    const { route } = match;
    const { page } = route;

    if (!page) {
      _page = 'ErrorPage';
    } else {
      _page = page;
    }

    _params = getParams(match);
  }

  globalThis.activeElement = document.activeElement;
  
  let content = '';

  if (_page === 'StartPage') {
    const { StartPage: currentPage } = await import('./pages/StartPage');

    content = await currentPage();
    
  } else if (_page === 'AboutPage') {
    const { AboutPage: currentPage } = await import('./pages/AboutPage');

    content = await currentPage();
    
  } else if (_page === 'ErrorPage') {
    const { ErrorPage: currentPage } = await import('./pages/ErrorPage');

    content = currentPage({ params: _params });
  } else {
    const { PageNotFoundPage: currentPage } = await import(
      './pages/PageNotFoundPage'
    );

    content = currentPage();
  }

  return `<main>${content}</main>`;
};

export default App;

export type Route = {
  name: string;
  path?: string;
  page?: string;
  regex?: RegExp;
  layout?: string;
};

export type PreviousRoute = {
  name: string;
};

export type Routes = Route[];

export type RouteDetails = {
  page: RouterMatch;
  previousPage: RouterMatch;
  previousParams: unknown;
  currentParams: unknown;
  paramsChanged: boolean;
  routeChanged: boolean;
};

export type RouterMatch = {
  route: Route;
  result?: RegExpMatchArray | null;
};

export const StartPage = async () => {
  return `<div>
  <h1>
    Hello world
  </h1>
  <p>
    Here is the link to <a href="/about" data-link="/about">The about page</a>
  </p>
</div>`;
};

export const AboutPage = async () => {
  return `<div>
  <h1>
    About
  </h1>
  <p>
    Here is the link to <a href="/" data-link="/">The home page</a>
  </p>
</div>`;
};

export const ErrorPage = ({ params }) => {
  const { error } = params;

  return `<div>
      <h1>Something went wrong</h1>
      <p>${error}</p>
      <pre>
        <code>${error.stack}</code>
      </pre>
    </div>`;
};

export const PageNotFoundPage = () => {
  return html`Page not found`;
};

$ npm run build
> vanilla-js-spa@1.0.0 prebuild
> npm run clean && npm run assets
> vanilla-js-spa@1.0.0 clean
> rm -rf dist/*
> vanilla-js-spa@1.0.0 assets
> mkdir -p dist && cp -a ./public/. ./dist/ && cp -a ./src/assets/. ./dist/
> vanilla-js-spa@1.0.0 build
> rollup -c rollup.config.js
src/main.ts → dist...
created dist in 1.2s
> vanilla-js-spa@1.0.0 postbuild
> bash -c 'mv -f ./dist/*.{js,map} ./dist/js'

$ npm run dev
> vanilla-js-spa@1.0.0 dev
> npx browser-sync start -s "dist" --files "dist/*.*"  --single
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3002
    External: http://192.168.86.36:3002
 --------------------------------------
          UI: http://localhost:3003
 UI External: http://localhost:3003
 --------------------------------------
[Browsersync] Serving files from: dist
[Browsersync] Watching files...

$ struct
📦 vanilla-js-spa.github.io
 ├── 📁 node_modules
 ├── 📁 src
   ├── 📁 assets
     ├── 📁 css
     ├── 📁 img
     ├── 📁 js
   ├── 📁 components
   ├── 📁 config
   ├── 📁 features
   ├── 📁 lib
     └── 📁 spa
       ├── 📁 router
         ├── 📁 utils
           ├── 📄 get-router-match.ts
           └── 📄 potential-matches-mapper.ts
         ├── 📄 routes.ts
         └── 📄 index.ts
       ├── 📁 types
         └── 📄 index.ts
       ├── 📁 utils
         ├── 📄 bootstrap.ts
         ├── 📄 dom-content-loaded.ts
         ├── 📄 event-after-app-render.ts
         ├── 📄 popstate.ts
         ├── 📄 event-matches.ts
         ├── 📄 get-params.ts
         ├── 📄 navigate-to.ts
         ├── 📄 update-nodes.ts
         ├── 📄 string-to-html.ts
         ├── 📄 set-title.ts
         └── 📄 wait-for.ts
       └── 📄 index.ts
   ├── 📁 pages
    ├── 📁 ErrorPage
      └── 📄 index.ts
    ├── 📁 PageNotFoundPage
      └── 📄 index.ts
    └── 📁 StartPage
      └── 📄 index.ts
   ├── 📁 styles
   ├── 📄 app.ts
   └── 📄 main.ts
 ├── 📄 .browserslistrc
 ├── 📄 .editorconfig
 ├── 📄 .gitignore
 ├── 📄 .postcssrc.cjs
 ├── 📄 .stylintrc
 ├── 📄 package-lock.json
 ├── 📄 package.json
 ├── 📄 README.md
 ├── 📄 rollup.config.js
 ├── 📄 tsconfig.json
 └── 📄 tslint.json