ryanflorence

// 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

ryanflorence

'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');

ryanflorence

// If the user has been on the page for over 12 hours, the next link
// click will do a full page transition to get new code
import React from "react";
import { BrowserRouter, useLocation } from "react-router-dom";

let hour = 3600000;

export default function StaleAppRouter(props) {
  let [isStale, setIsStale] = useState(false);

ryanflorence

// 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 }) {

ryanflorence

// 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

ryanflorence

////////////////////////////////////////////////////////////////////////////////
// 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.

ryanflorence

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,

ryanflorence

test

ryanflorence

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.

ryanflorence

// 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