ESM build for squiggle-lang; ESM-only components

packages/components/.storybook/main.js → packages/components/.storybook/main.cjs

@@ -1,16 +1,29 @@
-//const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const custom = require("../webpack.config.js");
+// import type { StorybookConfig } from "@storybook/core-common";
 
-module.exports = {
+const config = {
   webpackFinal: async (config) => {
+    const { default: custom } = await import("../webpack.config.js");
     config.resolve.alias = custom.resolve.alias;
+    config.resolve.extensionAlias = custom.resolve.extensionAlias;
     return {
       ...config,
       module: {
         ...config.module,
-        rules: config.module.rules.concat(
-          custom.module.rules.filter((x) => x.loader === "ts-loader")
-        ),
+        rules: [
+          ...config.module.rules,
+          custom.module.rules.find((x) => x.loader === "ts-loader"),
+          {
+            test: /\.(m?js)$/,
+            type: "javascript/auto",
+            resolve: {
+              fullySpecified: false,
+            },
+          },
+          // {
+          //   test: /src\/styles\/main\.css$/,
+          //   use: ["style-loader", "css-loader", "postcss-loader"],
+          // },
+        ],
       },
     };
   },
@@ -43,3 +56,5 @@ module.exports = {
     },
   },
 };
+
+module.exports = config;

packages/components/.storybook/preview.js → packages/components/.storybook/preview.tsx

@@ -1,4 +1,5 @@
-import "../src/styles/main.css";
+import * as React from "react";
+// import "../src/styles/main.css";
 import "!style-loader!css-loader!postcss-loader!../src/styles/main.css";
 import { SquiggleContainer } from "../src/components/SquiggleContainer";
 

packages/components/jest.config.js

@@ -1,10 +1,20 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
-  preset: "ts-jest",
-  setupFilesAfterEnv: ["<rootDir>/test/setup.js"],
+const jestConfig = {
+  preset: "ts-jest/presets/default-esm-legacy",
   testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/test/setup.ts"],
   moduleNameMapper: {
-    "^d3$": "<rootDir>/../../node_modules/d3/dist/d3.min.js",
-    "^d3-(.*)$": `<rootDir>/../../node_modules/d3-$1/dist/d3-$1`,
+    "^(\\.{1,2}/.*)\\.js$": "$1",
   },
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        useESM: true,
+      },
+    ],
+  },
+  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/dist"],
 };
+
+export default jestConfig;

packages/components/package.json

@@ -17,10 +17,10 @@
     "d3": "^7.8.2",
     "framer-motion": "^10.10.0",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "react": "^18.1.0",
     "react-hook-form": "^7.43.3",
     "react-use": "^17.4.0",
-    "uuid": "^9.0.0",
     "vscode-uri": "^3.0.7",
     "yup": "^1.0.2"
   },
@@ -42,7 +42,6 @@
     "@types/lodash": "^4.14.188",
     "@types/node": "^18.14.2",
     "@types/react": "^18.0.21",
-    "@types/uuid": "^9.0.1",
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "canvas": "^2.11.0",
     "cross-env": "^7.0.3",
@@ -75,19 +74,19 @@
   },
   "scripts": {
     "start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
-    "build:cjs": "rm -rf dist/src && rm -f dist/tsconfig.tsbuildinfo && tsc -b",
+    "build:typescript": "rm -rf dist/esm && rm -rf dist/cjs && tsc -b tsconfig.json tsconfig.cjs.json && echo '{\"type\": \"commonjs\"}' >dist/cjs/package.json",
     "build:css": "postcss ./src/styles/main.css -o ./dist/main.css",
     "build:lezer": "cd ./src/languageSupport; mkdir -p generated; lezer-generator ./squiggle.grammar --output generated/squiggle.ts",
     "build:storybook": "build-storybook -s public",
-    "build": "yarn run build:lezer && yarn run build:cjs && yarn run build:css && yarn run build:storybook",
+    "build": "yarn run build:lezer && yarn run build:typescript && yarn run build:css && yarn run build:storybook",
     "bundle": "webpack",
     "all": "yarn bundle && yarn build",
     "lint": "prettier --check . && eslint --ignore-path .gitignore .",
     "format": "prettier --write .",
-    "prepack": "yarn run build:cjs && yarn run bundle",
-    "test": "jest",
-    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
-    "test:profile": "node --cpu-prof node_modules/.bin/jest --runInBand"
+    "prepack": "yarn run build:typescript && yarn run bundle",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:debug": "node --inspect-brk --experimental-vm-modules node_modules/.bin/jest --runInBand",
+    "test:profile": "node --cpu-prof --experimental-vm-modules node_modules/.bin/jest --runInBand"
   },
   "eslintConfig": {
     "extends": [
@@ -121,7 +120,19 @@
       "last 1 safari version"
     ]
   },
-  "source": "./src/index.ts",
-  "main": "./dist/src/index.js",
-  "types": "./dist/src/index.d.ts"
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js",
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./dist/main.css": {
+      "default": "./dist/main.css"
+    }
+  },
+  "module": "./dist/esm/src/index.js",
+  "main": "./dist/cjs/src/index.js",
+  "types": "./dist/types/src/index.js",
+  "source": "./src/index.ts"
 }

packages/components/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+const config = {
   plugins: {
     "postcss-import": {},
     "tailwindcss/nesting": {},
@@ -7,3 +7,5 @@ module.exports = {
     cssnano: {},
   },
 };
+
+export default config;

packages/components/src/components/Alert.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import {
-  XCircleIcon,
-  InformationCircleIcon,
   CheckCircleIcon,
-} from "@heroicons/react/solid";
-import clsx from "clsx";
+  InformationCircleIcon,
+  XCircleIcon,
+} from "@heroicons/react/solid/esm/index.js";
+import { clsx } from "clsx";
 
 export const Alert: React.FC<{
   heading: string;

packages/components/src/components/CodeEditor.tsx

@@ -1,7 +1,5 @@
 import React, { FC, useEffect, useMemo, useRef } from "react";
 
-import squiggle from "../languageSupport/squiggle";
-
 import { SqLocation } from "@quri/squiggle-lang";
 
 import { syntaxHighlighting } from "@codemirror/language";
@@ -10,6 +8,8 @@ import { EditorView, keymap } from "@codemirror/view";
 import { defaultKeymap } from "@codemirror/commands";
 import { setDiagnostics } from "@codemirror/lint";
 
+import squiggle from "../languageSupport/squiggle.js";
+
 // From basic setup
 import {
   lineNumbers,
@@ -34,7 +34,7 @@ import {
   bracketMatching,
   foldKeymap,
 } from "@codemirror/language";
-import { lightThemeHighlightingStyle } from "../languageSupport/highlightingStyle";
+import { lightThemeHighlightingStyle } from "../languageSupport/highlightingStyle.js";
 
 interface CodeEditorProps {
   value: string;

packages/components/src/components/DistributionChart.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
 import { SqDistribution } from "@quri/squiggle-lang";
+import * as React from "react";
 import {
   MultiDistributionChart,
   MultiDistributionChartProps,
-} from "./MultiDistributionChart";
+} from "./MultiDistributionChart/index.js";
 
-export { DistributionChartSettings } from "./MultiDistributionChart";
+export { DistributionChartSettings } from "./MultiDistributionChart/index.js";
 
 export type DistributionChartProps = Omit<
   MultiDistributionChartProps,

packages/components/src/components/FunctionChart/FunctionChart1Dist.tsx

@@ -1,27 +1,25 @@
 import { Env, result, SqError, SqLambda, SqValue } from "@quri/squiggle-lang";
-import groupBy from "lodash/groupBy";
+import groupBy from "lodash/groupBy.js";
 import * as React from "react";
 import { FC, useEffect, useMemo, useRef } from "react";
-import useMeasure from "react-use/lib/useMeasure";
+import * as d3 from "d3";
 
-import { extent as d3Extent } from "d3-array";
-import { format as d3Format } from "d3-format";
-import { area as d3Area, line as d3Line } from "d3-shape";
 import {
   drawAxes,
   drawVerticalCursorLine,
   getFunctionImage,
   Padding,
   primaryColor,
-} from "../../lib/drawUtils";
-import { useCanvas, useCanvasCursor } from "../../lib/hooks";
-import { ErrorAlert } from "../Alert";
+} from "../../lib/drawUtils.js";
+import { useCanvas, useCanvasCursor } from "../../lib/hooks/index.js";
+import { ErrorAlert } from "../Alert.js";
 import {
   DistributionChart,
   DistributionChartSettings,
-} from "../DistributionChart";
-import { NumberShower } from "../NumberShower";
-import { FunctionChartSettings } from "./index";
+} from "../DistributionChart.js";
+import { NumberShower } from "../NumberShower.js";
+import { FunctionChartSettings } from "./index.js";
+import { useMeasure } from "../../lib/hooks/react-use.js";
 
 function unwrap<a, b>(x: result<a, b>): a {
   if (x.ok) {
@@ -174,7 +172,7 @@ const InnerDistFunctionChart: FC<
 
     const { xScale, yScale, padding, chartWidth, chartHeight } = drawAxes({
       suggestedPadding: { left: 20, right: 10, top: 10, bottom: 20 },
-      xDomain: d3Extent(data, (d) => d.x) as [number, number],
+      xDomain: d3.extent(data, (d) => d.x) as [number, number],
       yDomain: [
         Math.min(
           ...data.map((d) =>
@@ -204,7 +202,8 @@ const InnerDistFunctionChart: FC<
     context.fillStyle = primaryColor;
     for (const { width, opacity } of intervals) {
       context.globalAlpha = opacity;
-      d3Area<Datum>()
+      d3
+        .area<Datum>()
         .x((d) => xScale(d.x))
         .y1((d) => yScale(d.areas[width][0]))
         .y0((d) => yScale(d.areas[width][1]))
@@ -218,7 +217,8 @@ const InnerDistFunctionChart: FC<
     context.lineWidth = 2;
     context.imageSmoothingEnabled = true;
 
-    d3Line<Datum>()
+    d3
+      .line<Datum>()
       .x((d) => xScale(d.x))
       .y((d) => yScale(d[50]))
       .context(context)(data);
@@ -237,7 +237,7 @@ const InnerDistFunctionChart: FC<
         chartWidth,
         chartHeight,
         xScale,
-        tickFormat: d3Format(",.4r"),
+        tickFormat: d3.format(",.4r"),
         context,
       });
     }

packages/components/src/components/FunctionChart/FunctionChart1Number.tsx

@@ -3,14 +3,18 @@ import { line as d3Line } from "d3-shape";
 
 import * as React from "react";
 import { FC, useEffect, useMemo } from "react";
-import useMeasure from "react-use/lib/useMeasure";
 
 import { SqLambda } from "@quri/squiggle-lang";
 
-import { ErrorAlert } from "../Alert";
-import { FunctionChartSettings } from "./index";
-import { drawAxes, getFunctionImage, primaryColor } from "../../lib/drawUtils";
-import { useCanvas } from "../../lib/hooks";
+import {
+  drawAxes,
+  getFunctionImage,
+  primaryColor,
+} from "../../lib/drawUtils.js";
+import { useCanvas } from "../../lib/hooks/index.js";
+import { ErrorAlert } from "../Alert.js";
+import { FunctionChartSettings } from "./index.js";
+import { useMeasure } from "../../lib/hooks/react-use.js";
 
 type Props = {
   fn: SqLambda;

packages/components/src/components/FunctionChart/index.tsx

@@ -4,12 +4,12 @@ import * as yup from "yup";
 
 import { SqLambda, Env, SqError } from "@quri/squiggle-lang";
 
-import { MessageAlert } from "../Alert";
-import { SquiggleErrorAlert } from "../SquiggleErrorAlert";
-import { DistributionChartSettings } from "../DistributionChart";
+import { MessageAlert } from "../Alert.js";
+import { SquiggleErrorAlert } from "../SquiggleErrorAlert.js";
+import { DistributionChartSettings } from "../DistributionChart.js";
 
-import { FunctionChart1Dist } from "./FunctionChart1Dist";
-import { FunctionChart1Number } from "./FunctionChart1Number";
+import { FunctionChart1Dist } from "./FunctionChart1Dist.js";
+import { FunctionChart1Number } from "./FunctionChart1Number.js";
 
 export const functionSettingsSchema = yup.object({}).shape({
   start: yup.number().required().positive().integer().default(0).min(0),

packages/components/src/components/MultiDistributionChart/SummaryTable.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
 import { FC, PropsWithChildren } from "react";
 
-import { XIcon } from "@heroicons/react/solid";
+import { XIcon } from "@heroicons/react/solid/esm/index.js";
 import {
   Env,
   result,
   SqDistribution,
   SqDistributionError,
 } from "@quri/squiggle-lang";
-import { NumberShower } from "../NumberShower";
-import { Tooltip } from "../ui/Tooltip";
-import { Plot } from "./types";
+import { NumberShower } from "../NumberShower.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { Plot } from "./types.js";
 
 const TableHeadCell: FC<PropsWithChildren> = ({ children }) => (
   <th className="border border-slate-200 bg-slate-50 py-1 px-2 text-slate-500 font-semibold">