From c41094737e09953fdc35637a809b8a710362a44f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 28 Jan 2023 16:59:42 +0100 Subject: [PATCH] docs: cleanup highlighted lines and imports (#5294) --- docs/guides/api-routes.md | 2 +- docs/guides/constraints.md | 6 +++--- docs/guides/data-writes.md | 18 +++++++++--------- docs/guides/disabling-javascript.md | 2 +- docs/guides/envvars.md | 6 +++--- docs/hooks/use-matches.md | 3 +-- docs/other-api/adapter.md | 2 +- docs/pages/technical-explanation.md | 2 +- 8 files changed, 20 insertions(+), 21 deletions(-) diff --git a/docs/guides/api-routes.md b/docs/guides/api-routes.md index 28c752fb212..280ee2d1536 100644 --- a/docs/guides/api-routes.md +++ b/docs/guides/api-routes.md @@ -45,7 +45,7 @@ export async function loader({ request }: LoaderArgs) { And then `useFetcher` along with Reach UI's combobox input: -```tsx [2,11,14,19,21,23] +```tsx lines=[2,11,14,19,21,23] function CitySearchCombobox() { const cities = useFetcher(); diff --git a/docs/guides/constraints.md b/docs/guides/constraints.md index d217c613551..bb95b3beb2e 100644 --- a/docs/guides/constraints.md +++ b/docs/guides/constraints.md @@ -265,7 +265,7 @@ The most common scenario is initializing a third party API when your module is i This ensures the library is only initialized if there is a `document`, meaning you're in the browser. We recommend `document` over `window` because server runtimes like Deno have a global `window` available. -```js [3] +```js lines=[3] import firebase from "firebase/app"; if (typeof document !== "undefined") { @@ -279,7 +279,7 @@ export { firebase }; This strategy defers initialization until the library is actually used: -```js [4] +```js lines=[4] import { loadStripe } from "@stripe/stripe-js"; export async function redirectToStripeCheckout(sessionId) { @@ -331,7 +331,7 @@ function useLocalStorage(key) { You can fix this by moving the code into `useEffect`, which only runs in the browser. -```js [2,4-6] +```jsx lines=[2,4-6] function useLocalStorage(key) { const [state, setState] = useState(null); diff --git a/docs/guides/data-writes.md b/docs/guides/data-writes.md index 8808b9addd5..5e5457d09d0 100644 --- a/docs/guides/data-writes.md +++ b/docs/guides/data-writes.md @@ -209,9 +209,9 @@ const [errors, project] = await createProject(formData); If there are validation errors, we want to go back to the form and display them. -```tsx lines=[1, 5, 7-10] -import { redirect, json } from "@remix-run/node"; // or cloudflare/deno -// ... +```tsx lines=[1,5,7-10] +import { json, redirect } from "@remix-run/node"; // or cloudflare/deno + export const action = async ({ request }: ActionArgs) => { const formData = await request.formData(); const [errors, project] = await createProject(formData); @@ -229,7 +229,7 @@ Just like `useLoaderData` returns the values from the `loader`, `useActionData` ```tsx lines=[3,10,20,25-29,37,42-46] import type { ActionArgs } from "@remix-run/node"; // or cloudflare/deno -import { redirect, json } from "@remix-run/node"; // or cloudflare/deno +import { json, redirect } from "@remix-run/node"; // or cloudflare/deno import { useActionData } from "@remix-run/react"; export const action = async ({ request }: ActionArgs) => { @@ -291,8 +291,8 @@ You can ship this code as-is. The browser will handle the pending UI and interru Let's use progressive enhancement to make this UX a bit more fancy. By changing it from `
` to ``, Remix will emulate the browser behavior with `fetch`. It will also give you access to the pending form data so you can build pending UI. -```tsx [2, 11] -import { redirect, json } from "@remix-run/node"; // or cloudflare/deno +```tsx lines=[2,11] +import { json, redirect } from "@remix-run/node"; // or cloudflare/deno import { useActionData, Form } from "@remix-run/react"; // ... @@ -315,8 +315,8 @@ If you don't have the time or drive to do the rest of the job here, use ``FormData` object. You'll be most interested in the `formData.get()` method. -```tsx [5, 13, 19, 65-67] -import { redirect, json } from "@remix-run/node"; // or cloudflare/deno +```tsx lines=[5,13,19,65-67] +import { json, redirect } from "@remix-run/node"; // or cloudflare/deno import { useActionData, Form, @@ -428,7 +428,7 @@ function ValidationMessage({ error, isSubmitting }) { Now we can wrap our old error messages in this new fancy component, and even turn the borders of our fields red that have errors: -```tsx [21-24, 31-34, 44-48, 53-56] +```tsx lines=[21-24,31-34,44-48,53-56] export default function NewProject() { const transition = useTransition(); const actionData = useActionData(); diff --git a/docs/guides/disabling-javascript.md b/docs/guides/disabling-javascript.md index 6b01a6e35c7..727333e531a 100644 --- a/docs/guides/disabling-javascript.md +++ b/docs/guides/disabling-javascript.md @@ -17,7 +17,7 @@ export const handle = { hydrate: true }; Now open `root.tsx`, bring in `useMatches` and add this: -```tsx [6,10,13-15,27] +```tsx lines=[6,10,13-15,27] import { Meta, Links, diff --git a/docs/guides/envvars.md b/docs/guides/envvars.md index a4ad4241c2d..5ca64c3f8da 100644 --- a/docs/guides/envvars.md +++ b/docs/guides/envvars.md @@ -81,7 +81,7 @@ Instead we recommend keeping all of your environment variables on the server (al 1. **Return `ENV` for the client from the root loader** - Inside your loader you can access your server's environment variables. Loaders only run on the server and are never bundled into your client-side JavaScript. - ```tsx [3-6] + ```tsx lines=[3-6] export async function loader() { return json({ ENV: { @@ -109,7 +109,7 @@ Instead we recommend keeping all of your environment variables on the server (al 2. **Put `ENV` on window** - This is how we hand off the values from the server to the client. Make sure to put this before `` - ```tsx [10, 19-25] + ```tsx lines=[10,19-25] export async function loader() { return json({ ENV: { @@ -144,7 +144,7 @@ Instead we recommend keeping all of your environment variables on the server (al 3. **Access the values** - ```tsx [6-8] + ```tsx lines=[6-8] import { loadStripe } from "@stripe/stripe-js"; export async function redirectToStripeCheckout( diff --git a/docs/hooks/use-matches.md b/docs/hooks/use-matches.md index 7a9c40a41a6..491f08d09f2 100644 --- a/docs/hooks/use-matches.md +++ b/docs/hooks/use-matches.md @@ -60,8 +60,7 @@ You can put whatever you want on a route `handle`. Here we'll use `breadcrumb`. 3. Now we can put it all together in our root route with `useMatches`. - ```tsx [6, 20-31] - // root.tsx + ```tsx filename=root.tsx lines=[5,19-30] import { Links, Scripts, diff --git a/docs/other-api/adapter.md b/docs/other-api/adapter.md index ce121caaa1b..c2cf17080d8 100644 --- a/docs/other-api/adapter.md +++ b/docs/other-api/adapter.md @@ -43,7 +43,7 @@ createRequestHandler({ build, getLoadContext }); Here's a full example with express: -```ts [2-4, 11-22] +```ts lines=[2-4,11-22] const express = require("express"); const { createRequestHandler, diff --git a/docs/pages/technical-explanation.md b/docs/pages/technical-explanation.md index 3eaa39a71da..2920e6138dc 100644 --- a/docs/pages/technical-explanation.md +++ b/docs/pages/technical-explanation.md @@ -34,7 +34,7 @@ It's built on the [Web Fetch API][fetch] instead of Node.js. This enables Remix This is what Remix looks like when running in an express app: -```js [2,6-9] +```js lines=[2,6-9] const express = require("express"); const remix = require("@remix-run/express");