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;

ryanflorence

Route Transition API

Definitions

The goal of the route transition API is to enable suspense-like transition in React Router without using Suspense (much like v1).

On location changes, React Router will continue to send down the old location, activating pending hooks for loading states and optimistic UI, and wait for your Route's preloading hooks to resolve before sending down the new location and updating your app.

This enables you to declare data dependencies on your routes, allowing your route elements to expect data and not need to manage their own loading states.