devongovett

import {ChevronLeft, ChevronRight} from 'lucide-react';
import {useEffect, useState} from 'react';

export function Pagination({carousel}: {carousel: HTMLElement}) {
  // Scroll by 1 page in the given direction (-1 or +1).
  // This uses the width of the carousel minus the padding and gap between items.
  // Use behavior: 'smooth' and the browser will animate the scrolling.
  let scroll = (dir: number) => {
    let style = window.getComputedStyle(carousel);
    carousel.scrollBy({

alexanderson1993

"use client";
import * as React from "react";
import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,

bvaughn

// Simplistic (probably most common) approach.
//
// This approach assumes either that:
// 1) passive effects are always run asynchronously, after paint, or
// 2) passive effects never attach handlers for bubbling events
//
// If both of the above are wrong (as can be the case) then problems might occur!
useEffect(() => {
  const handleDocumentClick = (event: MouseEvent) => {
    // It's possible that a "click" event rendered the component with this effect,

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

import React from "react";
import { Link } from "react-router-dom";

export function createResource(getPromise) {
  let cache = {};
  let inflight = {};
  let errors = {};

  function load(key) {
    inflight[key] = getPromise(key)

ryanflorence

animated.DialogOverlay = animated(DialogOverlay)
animated.DialogContent = animated(DialogContent)

function NewPostDialog({ date, show, onDismiss }) {
  const rootRef = useRef(null)

  const transitions = useTransition(show, null, {
    from: { opacity: 0, y: -10, blur: 0 },
    enter: { opacity: 1, y: 0, blur: 8 },
    leave: { opacity: 0, y: -10, blur: 0 },

kitze

import {React, Component} from 'react';

class LongPress extends Component {
  shouldShortPress = true;

  componentDidMount() {
    this.listenForTouch();
  }

  componentWillUnmount() {

ebidel

/**
 * @author ebidel@ (Eric Bidelman)
 * License Apache-2.0
 */
 
// Prints the bytes cached by service worker. Breaks out each cache
// overall in-memory bytes used by the Cache Storage API for the site.
 
async function getCacheStoragesAssetTotalSize() {
  // Note: opaque (i.e. cross-domain, without CORS) responses in the cache will return a size of 0.

vincentriemer

// @flow

import * as React from "react";
import ResizeObserver from "resize-observer-polyfill";
import invariant from "invariant";

type Entry = {
  +contentRect: {
    +width: number,
    +height: number

ceejbot

ESM modules in node: npm edition

The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.

Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.

This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma