Remix snippet for a new module

rmx-snippet-output.tsx

import * as React from 'react'
import type {LoaderFunction, ActionFunction} from 'remix'
import {json, redirect, useRouteData, Form} from 'remix'

type LoaderData = {}

export const loader: LoaderFunction = async () => {
  const data: LoaderData = {}
  return json(data)
}

export const action: ActionFunction = async ({request}) => {
  return redirect(new URL(request.url).pathname)
}

export default function Screen() {
  const data = useRouteData<LoaderData>()
  return (
    <div>
      {`This is a screen and it is great. Here's the data`}
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <Form method="post" noValidate>
        <button type="submit">submit</button>
      </Form>
    </div>
  )
}

export function ErrorBoundary({error}: {error: Error}) {
  return (
    <div>
      <h1>Error</h1>
      <pre>{error.stack}</pre>
    </div>
  )
}
    

snippet.json

{
  "remix module": {
    "prefix": "rmx",
    "description": "Remix module starter",
    "body": [
      "import * as React from 'react'",
      "import type {LoaderFunction, ActionFunction} from 'remix'",
      "import {json, redirect, useRouteData, Form} from 'remix'",
      "",
      "type LoaderData = {}",
      "",
      "export const loader: LoaderFunction = async () => {",
      "  const data: LoaderData = {}",
      "  return json(data)",
      "}",
      "",
      "export const action: ActionFunction = async ({request}) => {",
      "  return redirect(new URL(request.url).pathname)",
      "}",
      "",
      "export default function ${0:Screen}() {",
      "  const data = useRouteData<LoaderData>()",
      "  return (",
      "    <div>",
      "      {`This is a screen and it is great. Here's the data`}",
      "      <pre>{JSON.stringify(data, null, 2)}</pre>",
      "      <Form method=\"post\" noValidate>",
      "        <button type=\"submit\">submit</button>",
      "      </Form>",
      "    </div>",
      "  )",
      "}",
      "",
      "export function ErrorBoundary({error}: {error: Error}) {",
      "  return (",
      "    <div>",
      "      <h1>Error</h1>",
      "      <pre>{error.stack}</pre>",
      "    </div>",
      "  )",
      "}"
    ]
  },
}