Steve Miller millerized

`cjyes`

🔍 see jay, yes! 🎉 / 👨🏻‍💻 see, JS! 👾 / ⚓️ sea JS ⛴

If you're publishing ES Modules, you need to also publish CommonJS versions of those modules.

This isn't to support old browsers or Node versions: even in Node 14, using require() to load a module won't work if it's only available as ESM.

cjyes is the bare minimum fix for this problem. You write ES Modules and fill out a valid package.json, and it'll generate the corresponding CommonJS files pretty much instantly. cjyes takes up 500kb of disk space including its two dependencies.

TypeScript - Intellisense support for ES modules

This patch, based on commit https://github.com/Microsoft/TypeScript/commit/beebda3574be7f9a51f33ac24ab117f696ca9055, will add Intellisense support to projects which utilise the .mjs file extension for JavaScript modules.

⚠️ Warning

I have only used this from within tsserver. I did not attempt to use the tsc tool to do any kind of compilation of .mjs files.
This patch causes tsserver to treat all .mjs files as regular JavaScript files. This might be semantically wrong since these files have different semantics.

What works

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

This document has moved!

It's now here, in The Programmer's Compendium. The content is the same as before, but being part of the compendium means that it's actively maintained.

No, `.mjs` is not a Python 3-like split

Seen a few tweets on this. I want to dispel some FUD.

Node is probably going to introduce a new file extension for JavaScript modules, .mjs. The reasons for this are long and perilous, and trying to summarize the discussion that led to it is maddening. The short version is that ES6 modules have different semantics from existing scripts, and need to be executed differently. In browsers, this is done with <script type="module">. In Node, this will be done by analyzing the file extension of the imported file.

I'll be honest: I don't love this solution! I was rooting for the TC39 counter-proposal. But I also understand the solution that the Node developers chose, and why they chose it.

The new file extension is a good enough solution. You can read the [draft spec](https://github.com/nodejs/node-eps/

	import { useState } from 'react';

	export const store = {
	state: {},
	setState(value) {
	this.state = value;
	this.setters.forEach(setter => setter(this.state));
	},
	setters: []
	};

	//
	// MIT License
	//
	// Copyright (c) 2018 Ali Sharif
	//
	// Permission is hereby granted, free of charge, to any person obtaining a copy
	// of this software and associated documentation files (the "Software"), to deal
	// in the Software without restriction, including without limitation the rights
	// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	// copies of the Software, and to permit persons to whom the Software is

	import React from 'react';
	import {withRouter} from 'react-router-dom';
	import PropTypes from 'prop-types';

	/**
	* A replacement component for the react-router `Prompt`.
	* Allows for more flexible dialogs.
	*
	* @example
	* <NavigationPrompt when={this.props.isDirty}>

	var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' +
	'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 \|\| true;};for (let vre of a()) {' +
	'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' +
	': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

	try {
	eval(str);
	} catch(e) {
	alert('Your browser does not support ES6!')
	}

	#!/bin/bash

	for file in $(git diff --cached --name-only \| grep -E '\.(js\|jsx)$')
	do
	git show ":$file" \| node_modules/.bin/eslint --stdin --stdin-filename "$file" # we only want to lint the staged changes, not any un-staged changes
	if [ $? -ne 0 ]; then
	echo "ESLint failed on staged file '$file'. Please check your code and try again. You can run ESLint manually via npm run eslint."
	exit 1 # exit with failure status
	fi
	done