jacob-ebey

import { html } from "html-tagged";

export default function ClientNavigation() {
  return html`
    <script type="module">
      if (typeof navigation !== "undefined") {
        let lastAbortController;
        navigation.addEventListener("navigate", (event) => {
          if (!event.canIntercept) return;

jacob-ebey

/**
 * Create route configs from a list of routes using the flat routes conventions.
 * @param appDirectory The absolute root directory the routes were looked up from.
 * @param routePaths The absolute route paths.
 * @param prefix The prefix to strip off of the routes.
 */
export function flatRoutesUniversal(
  appDirectory: string,
  routePaths: string[],
  prefix: string = "routes"

jacob-ebey

Remix Deferred

Remix Deferred is currently implemented on top of React's Suspense model but is not limited to React. This will be a quick dive into how "promise over the wire" is accomplished.

SSR + Hydration

It isn't rocket science, but a quick recap of how frameworks such as react do SSR:

1. Load data
2. Render the app

jacob-ebey

// A very naive implementation of React's use() hook you can copy and paste into your app today
// to use with solutions such as remix's experimental `defer()` feature.
function use<T>(useable: Promise<T> | T) {
  if (typeof useable != "object" || !useable || !("then" in useable)) {
    return useable;
  }

  let promise = useable as Promise<T> & { _data?: T; _error?: unknown };

  if ("_data" in promise) {

jacob-ebey

import invariant from "tiny-invariant";

export function thisTestShouldFail() {
  invariant(false, "update this test 🙂");
}

jacob-ebey

import { type Agent } from "https";
import {
  createSessionStorage,
  type RequestInit,
  type SessionData,
  type SessionIdStorageStrategy,
} from "@remix-run/node";

export interface UpstashSessionStorageOptions {
  cookie?: SessionIdStorageStrategy["cookie"];

jacob-ebey

import * as React from "react";
import { defer, type LoaderArgs } from "@remix-run/node";
import {
	Await,
	Link,
	Outlet,
	useLoaderData,
	useLocation,
	useNavigate,
	useTransition,

jacob-ebey

let fs = require("fs");

// TODO: Make it configurable based on publicPath and assetsBuildDirectory
function inlineCssMiddleware() {
  /**
   *
   * @param {import("express").Request} req
   * @param {import("express").Response} res
   * @param {import("express").NextFunction} next
   */

jacob-ebey

import { readFile } from "fs/promises";
import { createRequire } from "module";
import * as URL from "url";

import { readConfig } from "./config.mjs";

let require = createRequire(import.meta.url);

let config = await readConfig(process.cwd(), "development");
let outputFile = URL.pathToFileURL(config.serverBuildPath);

jacob-ebey

import type { LoaderFunction } from "@remix-run/node";

import type { ChatMessageEvent } from "~/events.server";
import { chatEvents } from "~/events.server";

export let loader: LoaderFunction = ({ request }) => {
  if (!request.signal) {
    throw new Error("No request signal provided by the platform");
  }