Skip to content

Instantly share code, notes, and snippets.

@kiliman
kiliman / index.tsx
Created February 7, 2023 21:31
Remix `useSubmitPromise` hook
View index.tsx
import type { ActionArgs, LoaderArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import type { SubmitOptions } from "@remix-run/react";
import { useActionData, useNavigation, useSubmit } from "@remix-run/react";
import { useCallback, useEffect, useMemo } from "react";
export function loader({ request }: LoaderArgs) {
return json({ message: "Hello World" });
}
@kiliman
kiliman / env.server.ts
Last active January 24, 2023 20:18
Use zod to parse/validate environment variables
View env.server.ts
import { z } from 'zod';
import { getParams } from './params';
const envSchema = z.object({
NODE_ENV: z.string(),
DATABASE_URL: z.string(),
SESSION_SECRET: z.string(),
AUTH_SECRET: z.string(),
ENABLE_REGISTRATION: z.boolean().default(false),
SMTP_HOST: z.string(),
@kiliman
kiliman / @remix-run+react+1.7.5.patch
Created November 10, 2022 00:35
Patches for Remix to resolve issues with `index` route handling
View @remix-run+react+1.7.5.patch
diff --git a/node_modules/@remix-run/react/dist/esm/components.js b/node_modules/@remix-run/react/dist/esm/components.js
index e884e7b..56ddff4 100644
--- a/node_modules/@remix-run/react/dist/esm/components.js
+++ b/node_modules/@remix-run/react/dist/esm/components.js
@@ -746,6 +746,7 @@ FormImpl.displayName = "FormImpl";
*/
function useFormAction(action, // TODO: Remove method param in v2 as it's no longer needed and is a breaking change
method = "get") {
+ let { manifest }= useRemixEntryContext()
let {
@kiliman
kiliman / README.md
Created October 13, 2022 15:06
Patch to backport React Router "non-alphanumeric route prefix" fix to Remix
View README.md

Patch bug in React Router 6.3

This is a backport of React Router PR #9300 to React Router 6.3 which is the version pinned in Remix.

This fix allows non-alphanumeric characters to start a route path. This means /@user or /.well-known/ or even /😍 will work.

Currently this only patches the development build as the production files are minified. I will update the patch once I setup to build React Router locally.

@kiliman
kiliman / @remix-run+react+1.7.2.patch
Created October 11, 2022 20:08
Patch to fix button formMethod support
View @remix-run+react+1.7.2.patch
diff --git a/node_modules/@remix-run/react/dist/components.js b/node_modules/@remix-run/react/dist/components.js
index 26189ce..9210ce0 100644
--- a/node_modules/@remix-run/react/dist/components.js
+++ b/node_modules/@remix-run/react/dist/components.js
@@ -737,7 +737,6 @@ let FormImpl = /*#__PURE__*/React__namespace.forwardRef(({
event.preventDefault();
let submitter = event.nativeEvent.submitter;
submit(submitter || event.currentTarget, {
- method,
replace
@kiliman
kiliman / remix-example
Created July 24, 2022 17:34
Shell script to download Remix example from GitHub without having to clone entire repo
View remix-example
#! /usr/bin/env bash
if [ -z "$1" ]; then
echo USAGE: "$0" EXAMPLE
exit
fi
url="https://github.com/remix-run/remix/examples/$1"
# default to branch master
branch=main
@kiliman
kiliman / relative-path.ts
Last active July 20, 2022 17:49
Remix relative paths
View relative-path.ts
function useRelativePath() {
const location = useLocation()
const base = new URL(`http://dummy${location.pathname}${location.search}`)
return (relativePath: string) => {
const relative = new URL(relativePath, base)
return `${relative.pathname}${relative.search}`
}
}
// path = /parent/child/?a=1
@kiliman
kiliman / remix.ts
Created July 16, 2022 15:19
Remix re-export with superjson
View remix.ts
import { useActionData, useLoaderData } from "@remix-run/react";
import * as _superjson from "superjson";
export {
AbortController,
createCookie,
createCookieSessionStorage,
createFileSessionStorage,
createMemorySessionStorage,
createReadableStreamFromReadable,
@kiliman
kiliman / email.server.tsx
Last active July 15, 2022 17:45
Send email from Remix using `nodemailer`
View email.server.tsx
import type { Transporter } from 'nodemailer'
import nodemailer from 'nodemailer'
import Mail from 'nodemailer/lib/mailer'
declare global {
var transport: Transporter
}
const transporter: Transporter =
global.transport ?? (global.transport = getTransport())
function getTransport() {
@kiliman
kiliman / updateremix.sh
Created July 15, 2022 13:59
Update Remix packages
View updateremix.sh
#!/usr/bin/env bash
npm outdated | grep -Eo '@remix-run/[-a-z]+' | uniq | xargs npm up