Trevor Manz manzt

My Minimal TypeScript Monorepo Setup for ESM Libraries

After a deep dive looking up best practices for TypeScript monorepos recently, I couldn't find anything that suited my needs:

Publish individual (typed) packages to NPM with minimal config.
Supports fast unit testing that spans the entire project (e.g., via Vitest)
Ability to have an interactive playground to experiment with the API in a real-time (e.g., via Vite)

Most solutions point to TypeScript project references,

pnpm install
pnpm dev

	import { assert } from "jsr:@std/[email protected]";
	import * as fflate from "npm:[email protected]";
	import * as pako from "npm:[email protected]";

	async function decode_stream(stream: ReadableStream) {
	const reader = stream
	.pipeThrough(new DecompressionStream("gzip"))
	.getReader();
	let bytes: Uint8Array;
	{

	import base64
	import dataclasses

	import httpx
	import zarr
	import zarr.storage
	import zarr.util


	def get_tile_size(info: dict) -> int:

	country,year,population,gdp_per_capita,life_expectancy,continent
	Afghanistan,1800,3280000,683,28.21,Asia
	Afghanistan,1801,3280000,683,28.2,Asia
	Afghanistan,1802,3280000,683,28.19,Asia
	Afghanistan,1803,3280000,683,28.18,Asia
	Afghanistan,1804,3280000,683,28.17,Asia
	Afghanistan,1805,3280000,683,28.16,Asia
	Afghanistan,1806,3280000,683,28.15,Asia
	Afghanistan,1807,3280000,683,28.14,Asia
	Afghanistan,1808,3280000,683,28.13,Asia

	import anywidget
	import traitlets

	class ExampleWidget(anywidget.AnyWidget):
	_esm = """
	export function render({ model, el }) {
	el.classList.add("custom-widget");
	function valueChanged() {
	el.textContent = model.get("value");
	}

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Interactive Observable Plot</title>
	<script type="module" src="/main.js"></script>
	</head>
	<style>
	:root {
	font-family: sans-serif;

	export function sayHello() {
	console.log("hello from github gist")
	}