antfu

Example

Name Description

dai-shi

const path = require('path');

const dot = require(path.resolve(process.argv[2]));

const output = {
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [],

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

bvaughn

useSubscription and useMutableSource¹ tearing and deopt behavior.

Mounting a new tree

The tree below represents a React application mounting. During mount, two components read from an external, mutable source. The first one (List) reads version 1 of that data and the second one (Item) reads version 2.

Deopt

useSubscription (legacy mode)

N/A.

bvaughn

Pre-rendering virtual rows

Example list with ten total rows and a viewport large enough to display two rows.

Legend

█ - Visible row ▓ - Hidden/display-locked row ░ - Empty space (nothing rendered here)

nathanpeck

import ec2 = require('@aws-cdk/aws-ec2');
import ecs = require('@aws-cdk/aws-ecs');
import elbv2 = require('@aws-cdk/aws-elasticloadbalancingv2');
import cdk = require('@aws-cdk/core');

class PublicFargateService extends cdk.Stack {
  constructor(scope: cdk.App, id: string) {
    super(scope, id);

    // Create VPC and Fargate Cluster

vincentriemer

/**
 * @flow
 */

opaque type Ruleset = { [string]: string | number };

type CreateInput = {
  [styleName: string]: CSSProperties
};

vincentriemer

/**
 * @flow
 */

import VisuallyHidden from "@reach/visually-hidden";
import instyle from "instyle";
import * as React from "react";
import { Focus } from "react-events/focus";
import { Drag } from "react-events/drag";
import { Press } from "react-events/press";

sophiebits

const {useCallback, useEffect, useReducer, useRef} = require('react');

let effectCapture = null;

exports.useReducerWithEmitEffect = function(reducer, initialArg, init) {
  let updateCounter = useRef(0);
  let wrappedReducer = useCallback(function(oldWrappedState, action) {
    effectCapture = [];
    try {
      let newState = reducer(oldWrappedState.state, action.action);

ForsakenHarmony

function h (tagName, attributes = {}, children = []) {
  return {
    tagName,
    attributes,
    children,
  };
}

function diffAttrs (element, attributes) {
  const newAttrs = Object.keys(attributes);