Skip to content

Instantly share code, notes, and snippets.

Avatar

Ryan Florence ryanflorence

View GitHub Profile
View reduce.js
// don't clutter up lines with function blocks
let obj = items.reduce((memo, item) => {
memo[item.id] = item.name;
return memo;
});
// just use the comma operator for super clean code!
let obj = items.reduce((memo, item) => (memo[item.id] = item.name, memo));
// lol
View compiler.js
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var path = require('path');
var config = require('./config.js');
var rollup = require('rollup');
var alias = require('@rollup/plugin-alias');
var babel = require('@rollup/plugin-babel');
var commonjs = require('@rollup/plugin-commonjs');
View stale-app-link.js
View custom-remix-cache-shared-denormalized-data.js
// src/entry-browser.js
import React from "react";
import { unstable_createRoot as createRoot } from "react-dom";
import Remix from "@remix-run/react/browser";
import App from "./components/App";
// default cache, every location gets its own data, even at the same pathname
function createLocationCache() {
return {
write({ cache, data, routeModule, location, params, routeId }) {
View custom-remix-cache-shared-denormalized-data.js
// src/entry-browser.js
import React from "react";
import { unstable_createRoot as createRoot } from "react-dom";
import Remix from "@remix-run/react/browser";
import App from "./components/App";
// create a custom cache by defining just write/read
const cache = {
// write gets called for each route that matched, so for the "copy"
// operations we just won't call write at all
View build.mjs
////////////////////////////////////////////////////////////////////////////////
// Create a directory called "pages" next to
// this file, put markdown files in there, and
// then run:
//
// ```
// $ node build.mjs
// ```
//
// Then deploy the "build" directory somewhere.
View react-three-routes.jsx
import ReactDOM from "react-dom";
import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "react-three-fiber";
// yarn add react-router-dom@next history
import {
BrowserRouter,
Routes,
Route,
Link,
View route-config.md

Route Config

I think I just figured out two major things I wanted to work out:

  1. Not sending the entire route config to the client, only the ones that matched and that are linked to on the page.

  2. Defining routes manually in replace of, or in addition to, the conventional file-system routes

The reason I've been hesitant on (2) is because of (1). Take a highly interactive blog where each article is a full blown React component like our blog instead of just markdown you can lookup and parse on the server.

View useUpdateEffect.js
// I've only used this for focus management, I'm willing to bet you don't
// actually want to do this unless it's focus management
function useUpdateEffect(effect, deps) {
let mounted = useRef(false)
useEffect(() => {
if (mounted.current) {
return effect()
} else {
mounted.current = true
You can’t perform that action at this time.