tannerlinsley

This middleware does a few interesting things:

• Ensures a url shape in the zustand store, where we'll store URL information.
• Assumes we will be storing our url state slice in the ?state search parameter after it has been stringified and base 64 encoded.
• On creation, decodes stores state from the ?state search parameter into the url slice of our store.
• After each state update, updates the ?state search parameter with the new url state slice.
• Sets up an event listener that listens for popstate and re-decodes the state from the URL into our store.

tannerlinsley

import * as React from 'react'
import * as Plot from '@observablehq/plot'
import useRect from '../hooks/useRect'
import { twMerge } from 'tailwind-merge'
import { useThemeMode } from '../utils/Theme'
import { data } from '../utils/DataColors'

export function ObservablePlot({
  legend,
  legendType = 'color',

tannerlinsley

// my-core

interface FrameworkGenerics<TData = unknown> {
  // Options: unknown
}

type GetFrameworkGeneric<
  U,
  TData = unknown,
> = U extends keyof FrameworkGenerics<TData>

tannerlinsley

export function deepDiff<TObj extends object>(a: TObj, b: TObj) {
  if (Array.isArray(a)) {
    const changes = a
      .map((item, index) => deepDiff(item, b[index]))
      .filter(Boolean)
    return changes.length ? changes : undefined
  }

  if (isObject(a)) {

tannerlinsley

import * as React from 'react'

let activeTimeout = null
let reactivateFn = null

export function useOnIdle(fn, time) {
  React.useEffect(() => {
    const onUsage = () => {
      if (reactivateFn) {
        reactivateFn()

tannerlinsley

import React from 'react'
import ReactDOM from 'react-dom'

import './index.css'

import { createTable } from 'react-table'

type Row = {
  firstName: string
  lastName: string

tannerlinsley

import { multiSortBy } from 'src/shared/utils'

export type PathNode<T> = {
  id: string
  path: string
  parentId: string
  meta: T
  children?: PathNode<T>[]
}

tannerlinsley

{
      "message": [
        "Requesting backblaze auth..."
      ],
      "level": "log",
      "timestamp": 1638577536200
    },
    {
      "message": [
        "btoa error",

tannerlinsley

import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
import React from 'react'

const channels = {}

export function useBroadcastLeader(id = 'default') {
  const [isBroadcastLeader, setIsBroadcastLeader] = React.useState(false)

  React.useEffect(() => {
    if (!channels[id]) {

tannerlinsley

React Query v4 (Ezil Amron) RFC

Preface: This is an RFC, which means the concepts outlined here are a work in progress. You are reading this RFC because we need your help to discover edge cases, ask the right questions and offer feedback on how this RFC could improve.

What are we missing today without normalization?

Today, React Query uses unstructured query keys to uniquely identify queries in your application. This essentially means RQ behaves like a big key-value store and uses your query keys as the primary keys. While this makes things conceptually simple to implement and reason about on the surface, it does make other optimizations difficult (and a few others impossible):

• Finding and using Initial/placeholder single-item queries from list-like queries. While this is possible today, it's very manual, tedious, and prone to error.
• Manual optimistic updates that span multiple query types and shapes (eg. single-item queries, list queries and infinitely-paginated queries) are tedious and pr