refactor: new router (#55)

This implements a new, more robust router.

.github/workflows/ci.yml

@@ -13,8 +13,8 @@ jobs:
 
     strategy:
       matrix:
-        deno: ["v1.x", "nightly"] 
-        os: [macOS-latest, ubuntu-latest] # disable on windows-latest because fly tls aint working there
+        deno: ["v1.x", "nightly"]
+        os: [macOS-latest, ubuntu-latest, windows-latest]
 
     steps:
       - name: Disable autocrlf
@@ -31,8 +31,12 @@ jobs:
       - name: Check formatting
         run: deno fmt --check
 
+      - name: Check lint
+        run: deno lint --unstable
+
       - name: Install dependencies
-        run: deno cache --no-check ./deps/mod.ts
+        run: |
+          deno cache --no-check ./deps/mod.ts ./deps/preact/mod.ts ./deps/preact/hooks.ts ./deps/preact/debug.ts ./deps/preact/ssr.ts ./example/deps.ts
 
       - name: Run Tests
         run: deno test -A --unstable

.vscode/settings.json

@@ -1,5 +1,17 @@
 {
   "deno.enable": true,
   "deno.lint": true,
-  "deno.unstable": true
+  "deno.unstable": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  }
 }

cli.ts

@@ -345,8 +345,6 @@ async function create(_options: unknown, maybeRoot?: string) {
         jsx: "react",
         jsxFactory: "h",
         jsxFragmentFactory: "Fragment",
-        importsNotUsedAsValues: "error",
-        isolatedModules: true,
       },
     }),
   );

example/deps.ts

@@ -1,4 +1,6 @@
-export { Fragment, h } from "https://deno.land/x/[email protected]/deps/preact/mod.ts";
+export { Fragment, h } from "../deps/preact/mod.ts";
+export type { JSX } from "../deps/preact/mod.ts";
+export { useLocation } from "../mod.ts";
 export type {
   AppProps,
   DocumentProps,

example/pages/index.tsx

@@ -1,11 +1,13 @@
-import { Fragment, h } from "../deps.ts";
+import { Fragment, h, useLocation } from "../deps.ts";
 import type { GetStaticData, PageProps } from "../deps.ts";
 
 interface Data {
   random: string;
 }
 
 function IndexPage(props: PageProps<Data>) {
+  const [path] = useLocation();
+
   return (
     <>
       <h1>Hello World!!!</h1>

example/tsconfig.json

@@ -3,8 +3,6 @@
     "lib": ["esnext", "dom", "deno.ns"],
     "jsx": "react",
     "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
-    "importsNotUsedAsValues": "error",
-    "isolatedModules": true
+    "jsxFragmentFactory": "Fragment"
   }
 }

src/bundle.ts

@@ -88,9 +88,6 @@ export async function bundle(
     output: outputOptions,
     preserveEntrySignatures: false,
     cache: options.cache,
-    treeshake: {
-      moduleSideEffects: false,
-    },
   };
 
   const outDir = outputOptions.dir!;

src/runtime/default_app.tsx

@@ -1,4 +1,3 @@
-import { h } from "../../deps/preact/mod.ts";
 import type { AppProps } from "./type.ts";
 
 function App(props: AppProps) {

src/runtime/memo.d.ts

@@ -0,0 +1,17 @@
+// deno-lint-ignore-file
+import {
+  ComponentProps,
+  FunctionalComponent,
+  FunctionComponent,
+} from "../../deps/preact/mod.ts";
+export function memo<P = {}>(
+  component: FunctionalComponent<P>,
+  comparer?: (prev: P, next: P) => boolean,
+): FunctionComponent<P>;
+export function memo<C extends FunctionalComponent<any>>(
+  component: C,
+  comparer?: (
+    prev: ComponentProps<C>,
+    next: ComponentProps<C>,
+  ) => boolean,
+): C;

src/runtime/memo.js

@@ -0,0 +1,34 @@
+/// <reference types="./memo.d.ts" />
+
+import { createElement } from "../../deps/preact/mod.ts";
+
+export function shallowDiffers(a, b) {
+  for (const i in a) if (i !== "__source" && !(i in b)) return true;
+  for (const i in b) if (i !== "__source" && a[i] !== b[i]) return true;
+  return false;
+}
+
+export function memo(c, comparer) {
+  function shouldUpdate(nextProps) {
+    const ref = this.props.ref;
+    const updateRef = ref == nextProps.ref;
+    if (!updateRef && ref) {
+      ref.call ? ref(null) : (ref.current = null);
+    }
+
+    if (!comparer) {
+      return shallowDiffers(this.props, nextProps);
+    }
+
+    return !comparer(this.props, nextProps) || !updateRef;
+  }
+
+  function Memoed(props) {
+    this.shouldComponentUpdate = shouldUpdate;
+    return createElement(c, props);
+  }
+  Memoed.displayName = "Memo(" + (c.displayName || c.name) + ")";
+  Memoed.prototype.isReactComponent = true;
+  Memoed._forwarded = true;
+  return Memoed;
+}

src/runtime/mod.tsx

@@ -1,32 +1,34 @@
 import { h, hydrate } from "../../deps/preact/mod.ts";
 import type { ComponentType } from "../../deps/preact/mod.ts";
-import { useEffect, useMemo, useState } from "../../deps/preact/hooks.ts";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "../../deps/preact/hooks.ts";
 import type { AppProps, PageProps } from "./type.ts";
 import { Router } from "./router/router.ts";
-import { useLocation } from "./router/location.ts";
 import { initRouter } from "./router/interceptor.ts";
+import { locationCtx } from "./router/location.ts";
+import { memo } from "./memo.js";
 
 type Route = [route: string, data: RouteData];
-
 type RouteData = [
   component: () => Promise<{ default: ComponentType<PageProps> }>,
   hasStaticData: boolean,
 ];
 
 export async function start(routes: Route[], app: ComponentType<AppProps>) {
   const router = new Router<RouteData>(routes);
-  const path = location.pathname;
+  const path = window.location.pathname;
   const [route] = router.getRoute(path);
   if (!route) throw new Error("Failed to match inital route.");
 
   const initialPage = await loadComponent(route[1][0](), route[1][1], path);
 
-  // sets up event listeners on <a> elements
-  initRouter(router);
-
   hydrate(
     <Dext router={router} app={app} initialPage={initialPage} />,
-    document.getElementById("__dext")!,
+    window.document.getElementById("__dext")!,
   );
 }
 
@@ -39,36 +41,75 @@ function Dext(props: {
   app: ComponentType<AppProps>;
   initialPage: PageComponent;
 }) {
-  const [path] = useLocation();
-  const [route, match] = useMemo(() => props.router.getRoute(path), [
-    props.router,
-    path,
-  ]);
+  const [desiredPath, setDesiredPath] = useState(window.location.pathname);
+  const [desiredRoute, desiredMatch] = useMemo(
+    () => props.router.getRoute(desiredPath),
+    [props.router, desiredPath],
+  );
 
-  const [[Page], setPage] = useState<[PageComponent | null]>([
-    props.initialPage,
-  ]);
+  const navigate = useCallback(
+    (to: string) => {
+      window.history.pushState(null, "", to);
+      setDesiredPath(to);
+    },
+    [setDesiredPath],
+  );
+
+  useEffect(() => {
+    // sets up event listeners on <a> elements
+    initRouter(props.router, navigate);
+
+    window.addEventListener("popstate", (event) => {
+      setDesiredPath(window.location.pathname);
+    });
+  }, [props.router, navigate]);
+
+  const [page, setPage] = useState<
+    [PageComponent | null, string, Record<string, string | string[]>]
+  >([props.initialPage, desiredPath, desiredMatch]);
 
   useEffect(() => {
     let cancelled = false;
-    if (route) {
-      loadComponent(route[1][0](), route[1][1], path).then((page) => {
-        if (!cancelled) setPage([page]);
-      });
+    if (desiredRoute) {
+      loadComponent(desiredRoute[1][0](), desiredRoute[1][1], desiredPath)
+        .then((page) => {
+          if (!cancelled) {
+            setPage([page, desiredPath, desiredMatch]);
+          }
+        })
+        .catch((err) => {
+          if (!cancelled) {
+            console.error(err);
+            window.location.pathname = desiredPath;
+          }
+        });
     } else {
-      setPage([null]);
+      setPage([null, desiredPath, desiredMatch]);
     }
     () => (cancelled = true);
-  }, [route]);
+  }, [desiredRoute, desiredPath, desiredMatch]);
 
-  const App = props.app;
-  return (
-    <div>
-      <App>{Page === null ? <Error404 /> : <Page route={match!} />}</App>
-    </div>
-  );
+  return <DextPage App={props.app} page={page} navigate={navigate} />;
 }
 
+const DextPage = memo(
+  (props: {
+    App: ComponentType<AppProps>;
+    page: [PageComponent | null, string, Record<string, string | string[]>];
+    navigate: (to: string) => void;
+  }) => {
+    const { App, page, navigate } = props;
+    const [Page, path, match] = page;
+    return (
+      <locationCtx.Provider value={[path, navigate]}>
+        <div>
+          <App>{Page === null ? <Error404 /> : <Page route={match!} />}</App>
+        </div>
+      </locationCtx.Provider>
+    );
+  },
+);
+
 async function loadComponent(
   componentPromise: Promise<{ default: ComponentType<PageProps> }>,
   hasStaticData: boolean,

src/runtime/prerender_page_host.tsx

@@ -16,6 +16,8 @@ const { data, route, path } = rawData.length == 0
   ? undefined
   : JSON.parse(new TextDecoder().decode(rawData));
 window.location = { pathname: path } as Location;
+// @ts-expect-error because this is a hidden variable.
+window.__DEXT_SSR = true;
 const body = render(
   <div>
     <App>

src/runtime/router/interceptor.ts

@@ -1,12 +1,14 @@
-// deno-lint-ignore-file no-undef
 import type { Router } from "./router.ts";
 
-export function initRouter(router: Router<unknown>) {
+export function initRouter(
+  router: Router<unknown>,
+  navigate: (to: string) => void,
+) {
   function routeFromLink(node: HTMLAnchorElement) {
     // only valid elements
     if (!node || !node.getAttribute) return;
 
-    let href = node.getAttribute("href"),
+    const href = node.getAttribute("href"),
       target = node.getAttribute("target");
 
     // ignore links with targets and non-path URLs
@@ -20,7 +22,7 @@ export function initRouter(router: Router<unknown>) {
 
     const [route] = router.getRoute(href);
     if (route) {
-      history.pushState(null, "", href);
+      navigate(href);
       return true;
     }