Kent C. Dodds kentcdodds

@remix-run/events and @remix-run/dom Documentation

NOTE: this was generated by Cursor from within the Remix demo using the following prompt:

Please use the example code in @public/ and the types definitions to write documentation for @remix-run/events and @remix-run/dom and stick it in a markdown file in the root of this repo.

This documentation covers two core Remix 3 packages: @remix-run/events for declarative event handling and @remix-run/dom for creating reactive UI components.

Epicshop Notifications

This gist provides notifications for the Epicshop platform. Notifications are loaded on demand and shown to users based on specific criteria.

How Notifications Work

Notifications are defined in the notifications.json5 file. Each notification is an object with the following properties:

Remix Deferred

Remix Deferred is currently implemented on top of React's Suspense model but is not limited to React. This will be a quick dive into how "promise over the wire" is accomplished.

SSR + Hydration

It isn't rocket science, but a quick recap of how frameworks such as react do SSR:

Load data
Render the app

Route Module Pending Component Export

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

Indefinitely wait on the old screen
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

	import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"
	import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js"
	import { Socket } from "net"
	import { Readable } from "stream"
	import { IncomingMessage, type ServerResponse } from "http"
	import {
	subscribeToChannel,
	unsubscribeFromChannel,
	publishMessage,
	} from "../redis.server.js"

	// 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,

	import crypto from "crypto";
	import { renderToStaticMarkup } from "react-dom/server";
	import createMailgun from "mailgun-js";
	import type { ActionFunction, LoaderFunction, Session } from "remix";
	import { createCookieSessionStorage, json, redirect } from "remix";

	/*******************************************************************************
	* Before we can do anything, we need to make sure the environment has
	* everything we need. If anything is missing, we just prevent the app from
	* starting up.

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

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

	function useOnRead({
	parentElRef,
	onRead,
	enabled = true,
	}: {
	parentElRef: React.RefObject<HTMLElement>
	onRead: () => void
	enabled: boolean
	}) {
	React.useEffect(() => {

	const path = require("path");
	const express = require("express");
	const compression = require("compression");
	const morgan = require("morgan");
	const { createRequestHandler } = require("@remix-run/express");

	////////////////////////////////////////////////////////////////////////////////
	let app = express();

	app.use(compression());