Ryota Murakami ryota-murakami

The experience of using Node.JS with TypeScript, ts-node, and ESM is horrible.

There are countless guides of how to integrate them, but none of them seem to work.

Here's what worked for me.

Just add the following files and run npm run dev. You'll be good to go!

`package.json`

This is a work in progress. Please don't take this as something that will definitely happen, we all know what happens to well laid plans and I need to present it to the rest of the TypeScript team in order to figure out a lot of feasibility questions.

Intro

The examples in this PR assumes [CLI DX] Improve positioning of compiler error messaging info #45717 is merged

In 4.4, all diagnostic messages from TypeScript are treated the same, we have a massive .JSON file of ±2000 diagnostic messages which are used everywhere from compiler messages to CLI help. Aside from some simple string manipulation, these are effectively what we output for all error messages. I'd like to propose that we break this pattern, just for error TS2322.

TS2322 is our 'type x is not assignable to y' error, you'd see it for const str: string = 123 and I expect it is the most seen

Cheat sheet: JavaScript Array methods

Deriving a new Array from an existing Array:

['■','●','▲'].slice(1, 3)          ⟼ ['●','▲']
['■','●','■'].filter(x => x==='■') ⟼ ['■','■']
    ['▲','●'].map(x => x+x)        ⟼ ['▲▲','●●']
    ['▲','●'].flatMap(x => [x,x])  ⟼ ['▲','▲','●','●']

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.

Storybook Controls w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Controls. It's also an introduction to Storybook Args, which is a major update to Storybook's Component Story Format (CSF): a more portable and ergonomic way to write stories.

This walkthrough gives you:

Auto-generated controls in the addons panel
Auto-generated controls in your Docs
Auto-generated actions for event logging
An introduction to the future of CSF

babel-plugin-transform-mui-imports

A plugin to make authoring with MUI components efficient, both for humans and bundlers.

	import { AnyZodObject, z } from 'zod'
	import { Metadata, ResolvingMetadata } from 'next'

	type InferParams<Params> = Params extends readonly string[]
	? {
	[K in Params[number]]: string
	}
	: Params extends AnyZodObject
	? z.infer<Params>
	: unknown

	import React from 'react';

	import Jumbotron from 'react-bootstrap/Jumbotron';
	import Alert from 'react-bootstrap/Alert';
	import Button from 'react-bootstrap/Button';

	import { FallbackProps } from 'react-error-boundary';


	interface AEFProps extends FallbackProps {

	import React from "react";

	export type ColorScheme = "light" \| "dark";

	export default function useColorSchemePreference(
	defaultColorScheme: ColorScheme = "light"
	) {
	let darkQuery = "(prefers-color-scheme: dark)";
	let [colorScheme, setColorScheme] = React.useState<ColorScheme>(
	typeof window === "object" && window.matchMedia

	// Backend
	import formidable from 'formidable';

	export const config = {
	api: {
	bodyParser: false,
	},
	};

	export default async (req, res) => {