Skip to content

Instantly share code, notes, and snippets.

@kiliman
kiliman / email.server.tsx
Last active July 15, 2022 17:45
Send email from Remix using `nodemailer`
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
#!/usr/bin/env bash
npm outdated | grep -Eo '@remix-run/[-a-z]+' | uniq | xargs npm up
@kiliman
kiliman / getRelativePath.ts
Created July 11, 2022 16:00
Function to generate relative URL paths
function getRelativePath(location: Location, relativePath: string) {
const base = new URL(`http://dummy${location.pathname}${location.search}`)
const relative = new URL(relativePath, base)
return `${relative.pathname}${relative.search}`
}
// path = /parent/child/?a=1
const location = useLocation()
const relative = getRelativePath(location, '..?b=2')
// relative = /parent/?b=2
@kiliman
kiliman / README.md
Created July 6, 2022 13:26
Replace param prefix from $ to any character

I created a function that will let you change the param prefix $ to any other character. This is helpful if you use a shell that treats $ as a variable prefix and you need to constantly escape it in your terminal.

Just add this to remix.config. I've imported the default convention, so it will continue to work in the future. This simply replaces your desired prefix with :, which is what Remix expects. Remember, this is the final route definition. The default convention converts $ to :.

You can use any prefix character (I chose ^). It supports catch-all as well as multi-param routes.

// remix.config.js
const {
  defineConventionalRoutes,
} = require("@remix-run/dev/dist/config/routesConvention");
@kiliman
kiliman / LiveReload.tsx
Last active July 4, 2022 14:21
Remix: only purge require cache on changes instead of every request
// Replachment LiveReload component
// Now calls the `/build/__purge__` endpoint prior to reload
export const LiveReload =
process.env.NODE_ENV !== "development"
? () => null
: function LiveReload({
port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002),
nonce = undefined,
}: {
port?: number;
@kiliman
kiliman / @remix-run+dev+1.4.3.patch
Created May 19, 2022 19:08
Remix patch to add additional watch directories (see PR #3188)
diff --git a/node_modules/@remix-run/dev/compiler.js b/node_modules/@remix-run/dev/compiler.js
index 902b251..9b6c54d 100644
--- a/node_modules/@remix-run/dev/compiler.js
+++ b/node_modules/@remix-run/dev/compiler.js
@@ -210,7 +210,10 @@ async function watch(config$1, {
if (config$1.serverEntryPoint) {
toWatch.push(config$1.serverEntryPoint);
}
-
+ config$1.watchDirectories?.forEach((directory) => {
@ECHO off
GOTO start
:find_dp0
SET dp0=%~dp0
EXIT /b
:start
SETLOCAL
CALL :find_dp0
IF EXIST "%dp0%\node.exe" (
@kiliman
kiliman / @remix-run+dev+1.2.3.patch
Last active March 3, 2022 22:18
Patch to enable breakpoint debugging in Remix route modules
diff --git a/node_modules/@remix-run/dev/compiler.js b/node_modules/@remix-run/dev/compiler.js
index 9bbf9b1..783ccad 100644
--- a/node_modules/@remix-run/dev/compiler.js
+++ b/node_modules/@remix-run/dev/compiler.js
@@ -371,7 +371,7 @@ async function createServerBuild(config, options, assetsManifestPromiseRef) {
bundle: true,
logLevel: "silent",
incremental: options.incremental,
- sourcemap: options.sourcemap ? "inline" : false,
+ sourcemap: options.sourcemap,
@kiliman
kiliman / ErrorBoundary.tsx
Created February 25, 2022 19:03
ErrorBoundary that displays the actual source file and highlights the line
export const ErrorBoundary = ({ error }: any) => {
const [source, setSource] = useState('')
const lines = error.stack.split('\n')
const match = lines[1].match(/(?<path>.+):(?<line>\d+):(?<column>\d+)/)
let path = ''
let linenumber = 0
let column = 0
if (match) {
path = match.groups.path
linenumber = Number(match.groups.line)
@kiliman
kiliman / main.js
Last active January 25, 2022 00:30
Remix Electron to add menus and navigate to routes
// @ts-check
const electron = require("electron");
const { app, BrowserWindow, dialog, Menu } = electron;
const { startServer } = require("./server");
let win;
let server;
async function main() {
await app.whenReady();