ryanflorence

function App() {
  return (
    <Routes>
      <Route path="/" element={<Root />}>
        <Route index element={<Index />} />
        <Route path="projects" element={<Projects />} />
      </Route>
    </Routes>
  );
}

ryanflorence

import type { V2_HtmlMetaDescriptor, V2_MetaFunction } from "@remix-run/node";

export const mergeMeta = (
  overrideFn: V2_MetaFunction,
  appendFn?: V2_MetaFunction,
): V2_MetaFunction => {
  return arg => {
    // get meta from parent routes
    let mergedMeta = arg.matches.reduce((acc, match) => {
      return acc.concat(match.meta || []);

ryanflorence

import { riff, route, html, indexRoute } from "../riff/riff.mjs";
import { serve } from "../riff/riff-express.mjs";
import {
  deleteTask,
  getProjects,
  getTasks,
  getUser,
  sendEmail,
  updateTask,
  createTask,

ryanflorence

import { useFetcher } from "@remix-run/react";
import { useCallback, useMemo } from "react";

export function useRevalidator() {
  let fetcher = useFetcher();

  let revalidate = useCallback(
    () => {
      fetcher.submit(null, { action: "/", method: "post" });
    },

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 {