Geoff Goodman ggoodman

Route Transition API

Definitions

The goal of the route transition API is to enable suspense-like transition in React Router without using Suspense (much like v1).

On location changes, React Router will continue to send down the old location, activating pending hooks for loading states and optimistic UI, and wait for your Route's preloading hooks to resolve before sending down the new location and updating your app.

This enables you to declare data dependencies on your routes, allowing your route elements to expect data and not need to manage their own loading states.

Create New App

JavaScript Template

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

`cjyes`

🔍 see jay, yes! 🎉 / 👨🏻‍💻 see, JS! 👾 / ⚓️ sea JS ⛴

If you're publishing ES Modules, you need to also publish CommonJS versions of those modules.

This isn't to support old browsers or Node versions: even in Node 14, using require() to load a module won't work if it's only available as ESM.

cjyes is the bare minimum fix for this problem. You write ES Modules and fill out a valid package.json, and it'll generate the corresponding CommonJS files pretty much instantly. cjyes takes up 500kb of disk space including its two dependencies.

Install podman-manchine from https://github.com/boot2podman/machine/releases
Install podman via homebrew brew cask install podman

$ export PATH=$(pwd):$PATH
$ podman-machine create box
Podman machine "box" already exists
$ podman-machine start box
Starting "box"...

comlinkage

Dynamic import, but where the module you import runs in a different thread.

Powered by Comlink and Module Workers.

Available via unpkg: https://unpkg.com/comlinkage

Usage

The following section is not part of monet.js documentation, but I think it's worth showing how we can compose readers using fp-ts.

Reader composition

Let's say we have the following piece of code:

interface Dependencies {
  logger: { log: (message: string) => void }
 env: 'development' | 'production'

	const LOOKUP =
	"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

	export function encodeBase64(buffer) {
	const view = new Uint8Array(buffer);
	let out = [];
	for (let i = 0; i < view.length; i += 3) {
	const [b1, b2 = 0x10000, b3 = 0x10000] = view.subarray(i, i + 3);
	out.push(
	b1 >> 2,


	// when T is any\|unknown, Y is returned, otherwise N
	type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;

	// when T is never, Y is returned, otherwise N
	type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;

	// when T is a tuple, Y is returned, otherwise N
	// valid tuples = [string], [string, boolean],
	// invalid tuples = [], string[], (string \| number)[]

	import React from 'react';

	// Source: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/helper.d.ts
	type PropsOf<
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	E extends keyof JSX.IntrinsicElements \| React.JSXElementConstructor<any>
	> = JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;

	export interface BoxOwnProps<E extends React.ElementType = React.ElementType> {
	as?: E;

	/**
	* A quick way of using Markdown inside JSX: via tagged templates
	*
	* Downsides:
	* – Works completely dynamically (no static compilation)
	* – Big downside: You must escape backticks.
	* Potential work-around in template tag function: result.replace(/∆/ug, '`')
	*
	* Upsides:
	* – Preserves line breaks (JSX doesn’t)