- Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
- pathname - The "file/directory" portion of the URL, like
invoices/123
- search - The stuff after
?
in a URL like/assignments?showGrades=1
. - query - A parsed version of search, usually an object but not a standard browser feature.
- hash - The
#
portion of the URL. This is not available to servers inrequest.url
so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things. - state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.
- pathname - The "file/directory" portion of the URL, like
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 crypto from "crypto"; | |
import { renderToStaticMarkup } from "react-dom/server"; | |
import createMailgun from "mailgun-js"; | |
import type { ActionFunction, LoaderFunction, Session } from "remix"; | |
import { createCookieSessionStorage, json, redirect } from "remix"; | |
/******************************************************************************* | |
* Before we can do anything, we need to make sure the environment has | |
* everything we need. If anything is missing, we just prevent the app from | |
* starting up. |
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
var http = require("http"), | |
url = require("url"), | |
path = require("path"), | |
fs = require("fs") | |
port = process.argv[2] || 8888; | |
http.createServer(function(request, response) { | |
var uri = url.parse(request.url).pathname | |
, filename = path.join(process.cwd(), uri); |
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 { V2_HtmlMetaDescriptor, V2_MetaFunction } from "@remix-run/node"; | |
export const mergeMeta = ( | |
overrideFn: V2_MetaFunction, | |
appendFn?: V2_MetaFunction, | |
): V2_MetaFunction => { | |
return arg => { | |
// get meta from parent routes | |
let mergedMeta = arg.matches.reduce((acc, match) => { | |
return acc.concat(match.meta || []); |
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 localforage from "localforage"; | |
import { matchSorter } from "match-sorter"; | |
import sortBy from "sort-by"; | |
export async function getContacts(query) { | |
await fakeNetwork(`getContacts:${query}`); | |
let contacts = await localforage.getItem("contacts"); | |
if (!contacts) contacts = []; | |
if (query) { | |
contacts = matchSorter(contacts, query, { keys: ["first", "last"] }); |
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
// TODO: make `pages` optional and measure the div when unspecified, this will | |
// allow more normal document flow and make it easier to do both mobile and | |
// desktop. | |
import { | |
createContext, | |
useCallback, | |
useContext, | |
useEffect, | |
useMemo, | |
useRef, |
While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
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
const pageMachine = Machine({ | |
id: 'pageTransition', | |
initial: 'idle', | |
context: { | |
location: '/', | |
nextLocation: null, | |
data: {}, | |
forms: new Map(), | |
error: null |
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 { createCookieSessionStorage } from "remix"; | |
let { getSession, commitSession, destroySession } = createCookieSessionStorage({ | |
cookie: { | |
name: "__session", | |
secrets: ["r3m1xr0ck5"] | |
} | |
}); | |
export { getSession, commitSession, destroySession }; |
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
// Available variables: | |
// - Machine | |
// - interpret | |
// - assign | |
// - send | |
// - sendParent | |
// - spawn | |
// - raise | |
// - actions |
NewerOlder