- Separation of SSR vs RSC rendering environments is both unnecessary and a pain point for existing application migration to the new paradigms.
- "Client Component can't import Server Component" seems to be an artificial limitation of the mental model of separate SSR vs RSC env and the lack of built in support for inlining RSC streams into the HTML document
- Removal of "client only hooks" is also an artificial limitation brought on by trying to make SSR and RSC independent concepts. Zero reason to remove hooks that work in SSR today to support RSC.
- Inlining of RSC JSON representation should not be needed and the intermediate tree should be able to be revived from the SSR'd DOM, not an inlined RSC format.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
import { useNavigate, useSubmit } from "@remix-run/react"; | |
export function useEventDelegation() { | |
const navigate = useNavigate(); | |
const submit = useSubmit(); | |
React.useEffect(() => { | |
const handleClick = (e: MouseEvent) => { | |
const target = e.target as HTMLElement; | |
if ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
setInterval(() => { | |
const tweets = document.querySelectorAll( | |
`[data-testid="cellInnerDiv"] [data-testid="tweet"]` | |
); | |
for (const tweet of tweets) { | |
if (tweet.querySelector(`[data-testid="icon-verified"]`)) { | |
tweet.style.display = "none"; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Create route configs from a list of routes using the flat routes conventions. | |
* @param appDirectory The absolute root directory the routes were looked up from. | |
* @param routePaths The absolute route paths. | |
* @param prefix The prefix to strip off of the routes. | |
*/ | |
export function flatRoutesUniversal( | |
appDirectory: string, | |
routePaths: string[], | |
prefix: string = "routes" |
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.
It isn't rocket science, but a quick recap of how frameworks such as react do SSR:
- Load data
- Render the app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// A very naive implementation of React's use() hook you can copy and paste into your app today | |
// to use with solutions such as remix's experimental `defer()` feature. | |
function use<T>(useable: Promise<T> | T) { | |
if (typeof useable != "object" || !useable || !("then" in useable)) { | |
return useable; | |
} | |
let promise = useable as Promise<T> & { _data?: T; _error?: unknown }; | |
if ("_data" in promise) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import invariant from "tiny-invariant"; | |
export function thisTestShouldFail() { | |
invariant(false, "update this test 🙂"); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { type Agent } from "https"; | |
import { | |
createSessionStorage, | |
type RequestInit, | |
type SessionData, | |
type SessionIdStorageStrategy, | |
} from "@remix-run/node"; | |
export interface UpstashSessionStorageOptions { | |
cookie?: SessionIdStorageStrategy["cookie"]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
import { defer, type LoaderArgs } from "@remix-run/node"; | |
import { | |
Await, | |
Link, | |
Outlet, | |
useLoaderData, | |
useLocation, | |
useNavigate, | |
useTransition, |