jacob-ebey

setInterval(() => {
  const tweets = document.querySelectorAll(
    `[data-testid="cellInnerDiv"] [data-testid="tweet"]`
  );

  for (const tweet of tweets) {
    if (tweet.querySelector(`[data-testid="icon-verified"]`)) {
      tweet.style.display = "none";
    }
  }

jacob-ebey

React Server Components Exploration

High level:

• Separation of SSR vs RSC rendering environments is both unnecessary and a pain point for existing application migration to the new paradigms.
• "Client Component can't import Server Component" seems to be an artificial limitation of the mental model of separate SSR vs RSC env and the lack of built in support for inlining RSC streams into the HTML document
• Removal of "client only hooks" is also an artificial limitation brought on by trying to make SSR and RSC independent concepts. Zero reason to remove hooks that work in SSR today to support RSC.
• Inlining of RSC JSON representation should not be needed and the intermediate tree should be able to be revived from the SSR'd DOM, not an inlined RSC format.

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
   */