Apostolos Tsakpinis apostolos

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

	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({

	"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,

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

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

	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)

	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 },

	import {React, Component} from 'react';

	class LongPress extends Component {
	shouldShortPress = true;

	componentDidMount() {
	this.listenForTouch();
	}

	componentWillUnmount() {

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

	// @flow

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

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