na2hiro

Remix request cheatsheet

Navigates?	declarative?	Makes GET, triggers loader	Makes POST, triggers action	No requests
navigates	declarative	<Link to=""> <Form method="get">	<Form method="post">	<Link to="#...">
navigates	imperative	navigate() setSearchParams()	submit()	navigate("#")
stays	declarative	<fetcher.Form method="get">	<fetcher.Form method="post">	(doesn't make sense)
s

jacob-ebey

import { createHash } from "crypto";
import fs from "fs";
import fsp from "fs/promises";
import path from "path";
import https from "https";
import { PassThrough } from "stream";
import type { Readable } from "stream";
import type { LoaderFunction } from "remix";
import sharp from "sharp";
import type { Request as NodeRequest } from "@remix-run/node";

kiliman

💡 HOWTO: Debug your server-side Remix code using VSCode

✨ New in Remix v1.3.5

The latest release of Remix fixes sourcemaps so you no longer need to use any hacks to set breakpoints in your route modules. Simply start the debugger and Remix will hit the breakpoint in your loaders and actions.

Debugging session even survives edits and Live Reload.

mjackson

Redirects in React Router v6

An important part of "routing" is handling redirects. Redirects usually happen when you want to preserve an old link and send all the traffic bound for that destination to some new URL so you don't end up with broken links.

The way we recommend handling redirects has changed in React Router v6. This document explains why.

Background

In React Router v4/5 (they have the same API, you can read about why we had to bump the major version here) we had a <Redirect> component that you could use to tell the router when to automatically redirect to another URL. You might have used it like this:

kentcdodds

type CacheMetadata = {
  createdTime: number
  maxAge: number | null
  expires: number | null
}

function shouldRefresh(metadata: CacheMetadata) {
  if (metadata.maxAge) {
    return Date.now() > metadata.createdTime + metadata.maxAge
  }

itsMapleLeaf

This is no longer needed! Remix's built-in types have improved significantly. But I'll keep this here for historical reasons.

---

Typed helpers for low-boilerplate type inference with Remix data.

• I suffix them with *Typed so I don't accidentally import the core remix helpers.
• This doesn't support regular Response objects to prevent accidentally using them with the typed helpers.

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

mcansh

Things to note to make this work:

1. you'll need to have your remix registry token available in your shell under REMIX_TOKEN
2. you'll need to add secrets to your GitHub repo for the following items:
   • REMIX_TOKEN
   • VERCEL_TOKEN (https://vercel.com/account/tokens)
   • VERCEL_ORG_ID
   • VERCEL_PROJECT_ID
3. you'll need to have your REMIX_TOKEN available in your vercel repo as an environment variable

ryanflorence

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

kentcdodds

{
  "name": "workshop-setup",
  "version": "1.0.0",
  "description": "This is the common setup script for most of my workshops",
  "bin": "./setup.js"
}