ryanflorence

import React from "react";
import { IconCopy } from "./icons";

export default function CopyButton({ value }) {
  let [copied, setCopied] = React.useState(false);

  React.useEffect(() => {
    if (copied) {
      let id = setTimeout(() => {
        setCopied(false);

ryanflorence

Calling Loaders/Actions Outside of Navigation

Some might call them "API routes".

Use cases:

• Combobox suggestions in a form.
  • This is not semantically navigation
• Single action buttons that don't quite feel like navigation
• like clicking a bunch of delete buttons really fast in a list

ryanflorence

Route Module Pending Component Export

There are two primary approaches to page transitions (ignoring suspense's ditched attempt at a third)

1. Indefinitely wait on the old screen
2. Transition immediately to spinners/skeleton

Right now Remix has picked #1, but with a new export to a route module, we could support both.

Today, if you have this, Remix will wait for all data to load before displaying the page

ryanflorence

<LoadingButton
  ariaErrorAlert={"There was an error creating your account"}
  ariaLoadingAlert={
    authState === AuthState.CreatingUser
      ? "Registering account, please wait..."
      : authState === AuthState.FulfillingPurchase
      ? "Generating license, please wait..."
      : "Loading..."
  }
  ariaSuccessAlert="Account created! Redirecting."

ryanflorence

const fsp = require("fs").promises;
const path = require("path");
const { execSync } = require("child_process");

const chalk = require("chalk");
const Confirm = require("prompt-confirm");
const jsonfile = require("jsonfile");
const semver = require("semver");

const packagesDir = path.resolve(__dirname, "../packages");

ryanflorence

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    process.env.NODE_ENV === "production" && require("cssnano"),
  ].filter(Boolean),
};

ryanflorence

import ReactDOMServer from "react-dom/server";
import type { EntryContext } from "@remix-run/core";
import Remix from "@remix-run/react/server";
import { renderToString } from "react-dom/server";
import { ServerStyleSheet } from "styled-components";

import StylesContext from "./stylesContext";

export default function handleRequest(
  request: Request,

ryanflorence

// My DB has multiple collections (tables), they can extend
// this since the only difference is the data an collection,
// they're passed in as generics
export interface Record<TData, TCollection> {
  data: TData;
  ref: {
    collection: {
      id: TCollection;
    };
    id: string;

ryanflorence

/**
 * The Anatomy of a Remix Route
 */
import { parseFormBody, json, redirect } from "@remix-run/data";
import {
  Form,
  useRouteData,
  usePendingFormSubmit,
  preload,
} from "@remix-run/react";

ryanflorence

declare module "@architect/functions" {
  /**
   * Requests are passed to your handler function in an object, and include the following parameters
   */

  export interface Request {
    /**
     * Payload version (e.g. 2.0)
     */
    version: string;