ryanflorence

type InitFunction = (send: SendFunction) => CleanupFunction;
type SendFunction = (event: string, data: string) => void;
type CleanupFunction = () => void;

export function eventStream(request: Request, init: InitFunction) {
  let stream = new ReadableStream({
    start(controller) {
      let encoder = new TextEncoder();
      let send = (event: string, data: string) => {
        controller.enqueue(encoder.encode(`event: ${event}\n`));

ryanflorence

import invariant from "tiny-invariant";

class AmalgoBox extends HTMLElement {
  get input() {
    return this.querySelector("input") as HTMLInputElement;
  }

  get button() {
    return this.querySelector("button") as HTMLButtonElement;
  }

ryanflorence

// WIP, just finding all the boxes and glue, implementation is woefully incomplete

import type { DOMAttributes } from "react";
import { assign, createMachine, interpret } from "@xstate/fsm";
import invariant from "tiny-invariant";

type CustomElement<T> = Partial<
  T & DOMAttributes<T> & { children: any; class: string }
>;

ryanflorence

import { useLocation, useTransition } from "@remix-run/react";
import * as React from "react";

/**
 * An enhanced `<details>` component that's intended to be used as a menu (a bit
 * like a menu-button).
 */
export let DetailsMenu = React.forwardRef<
  HTMLDetailsElement,
  React.ComponentPropsWithRef<"details">

ryanflorence

import localforage from "localforage";
import { matchSorter } from "match-sorter";
import sortBy from "sort-by";

export async function getContacts(query) {
  await fakeNetwork(`getContacts:${query}`);
  let contacts = await localforage.getItem("contacts");
  if (!contacts) contacts = [];
  if (query) {
    contacts = matchSorter(contacts, query, { keys: ["first", "last"] });

ryanflorence

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {

ryanflorence

// TODO: make `pages` optional and measure the div when unspecified, this will
// allow more normal document flow and make it easier to do both mobile and
// desktop.
import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,

ryanflorence

import { useLocation } from "@remix-run/react";
import * as React from "react";

/**
 * An enhanced `<details>` component that's intended to be used as a menu (a bit
 * like a menu-button).
 */
export let DetailsMenu = React.forwardRef<
  HTMLDetailsElement,
  React.ComponentPropsWithRef<"details">

ryanflorence

import fsp from "fs/promises";
import invariant from "tiny-invariant";
import path from "path";

/**
 * Fetches the contents of a file in a repository or from your local disk.
 *
 * @param ref The GitHub ref, use `"local"` for local docs development
 * @param filepath The filepath inside the repo (including "docs/")
 * @returns The text of the file

ryanflorence

import "./index.css";
import React from "react";
import ReactDOM from "react-dom";
import {
  DataBrowserRouter,
  Route,
  useLoaderData,
  Form,
  useNavigation,
} from "react-router-dom";