Matt Berridge mattboon

ES Modules are terrible, actually

This post was adapted from an earlier Twitter thread.

It's incredible how many collective developer hours have been wasted on pushing through the turd that is ES Modules (often mistakenly called "ES6 Modules"). Causing a big ecosystem divide and massive tooling support issues, for... well, no reason, really. There are no actual advantages to it. At all.

It looks shiny and new and some libraries use it in their documentation without any explanation, so people assume that it's the new thing that must be used. And then I end up having to explain to them why, unlike CommonJS, it doesn't actually work everywhere yet, and may never do so. For example, you can't import ESM modules from a CommonJS file! (Update: I've released a module that works around this issue.)

And then there's Rollup, which apparently requires ESM to be u

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

	type AnyFunction = (...args: any[]) => any

	function useEvent<T extends AnyFunction>(callback?: T) {
	const ref = useRef<AnyFunction \| undefined>(() => {
	throw new Error("Cannot call an event handler while rendering.")
	})
	// Or useInsertionEffect if it's React 18
	useLayoutEffect(() => {
	ref.current = callback
	})

	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;

	import requests
	import json
	import re
	from more_itertools import unique_everseen
	import time
	from oauth2client import client, GOOGLE_TOKEN_URI, GOOGLE_REVOKE_URI
	import httplib2

	# INPUTS

	import { mountWithIntl } from 'helpers/intl-enzyme-test-helper.js';

	const wrapper = mountWithIntl(
	<CustomComponent />
	);

	expect(wrapper.state('foo')).to.equal('bar'); // OK
	expect(wrapper.text()).to.equal('Hello World!'); // OK

	// setup.js
	import hook from 'css-modules-require-hook'
	import sass from 'node-sass'

	hook({
	extensions: [ '.scss' ],
	preprocessCss: data => sass.renderSync({ data }).css
	})

	// array utils
	// =================================================================================================

	const combine = (...arrays) => [].concat(...arrays);

	const compact = arr => arr.filter(Boolean);

	const contains = (() => Array.prototype.includes
	? (arr, value) => arr.includes(value)
	: (arr, value) => arr.some(el => el === value)