📦 Move to ESM only

package.json

@@ -33,8 +33,8 @@
     "@remix-run/node": "~1.17.0",
     "@remix-run/react": "~1.17.0",
     "@tailwindcss/typography": "^0.5.9",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
+    "@types/react": "^18.2.24",
+    "@types/react-dom": "^18.2.8",
     "concurrently": "^8.2.0",
     "eslint-config-curvenote": "^0.0.3",
     "npm-run-all": "^4.1.5",

packages/diagrams/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@myst-theme/diagrams",
   "version": "0.5.7",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": ">=16"
+  },
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist",
-    "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.js",
+    "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.cjs",
     "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\"",
     "dev": "npm-run-all --parallel \"build:* -- --watch\"",
-    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
-    "build:esm": "tsc --module es2020 --outDir dist/esm",
-    "build:types": "tsc --declaration --emitDeclarationOnly --declarationMap --outDir dist/types",
-    "build": "npm-run-all -l clean -p build:cjs build:esm build:types"
+    "build:esm": "tsc",
+    "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {
     "@myst-theme/providers": "^0.5.7",

packages/diagrams/src/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 async function parse(id: string, text: string): Promise<string> {
   const { default: mermaid } = await import('mermaid');
   return await new Promise<string>((resolve) => {
-    mermaid.render(id, text, (code) => {
+    (mermaid as any).render(id, text, (code: any) => {
       resolve(code);
     });
   });

packages/frontmatter/package.json

@@ -1,28 +1,29 @@
 {
   "name": "@myst-theme/frontmatter",
   "version": "0.5.7",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": ">=16"
+  },
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist",
-    "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.js",
+    "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.cjs",
     "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\"",
     "dev": "npm-run-all --parallel \"build:* -- --watch\"",
-    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
-    "build:esm": "tsc --module es2020 --outDir dist/esm",
-    "build:types": "tsc --declaration --emitDeclarationOnly --declarationMap --outDir dist/types",
-    "build": "npm-run-all -l clean -p build:cjs build:esm build:types"
+    "build:esm": "tsc",
+    "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
     "@radix-ui/react-popover": "^1.0.6",
-    "@scienceicons/react": "^0.0.5",
+    "@scienceicons/react": "^0.0.6",
     "classnames": "^2.3.2",
     "myst-common": "*",
     "myst-frontmatter": "*"

packages/frontmatter/src/AuthorPopover.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as Popover from '@radix-ui/react-popover';
 import type { PageFrontmatter } from 'myst-frontmatter';
-import { Affiliation } from './Affiliations';
+import { Affiliation } from './Affiliations.js';
 
 type Author = Required<PageFrontmatter>['authors'][0];
 type Affiliations = Required<PageFrontmatter>['affiliations'];

packages/frontmatter/src/Authors.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import type { PageFrontmatter } from 'myst-frontmatter';
 import { OrcidIcon, EmailIcon, TwitterIcon } from '@scienceicons/react/24/solid';
-import { AuthorPopover } from './AuthorPopover';
-import { Affiliation } from './Affiliations';
+import { AuthorPopover } from './AuthorPopover.js';
+import { Affiliation } from './Affiliations.js';
 
 export function Author({
   author,

packages/frontmatter/src/FrontmatterBlock.tsx

@@ -3,9 +3,9 @@ import classNames from 'classnames';
 import type { PageFrontmatter } from 'myst-frontmatter';
 import { SourceFileKind } from 'myst-spec-ext';
 import { JupyterIcon, OpenAccessIcon, GithubIcon, TwitterIcon } from '@scienceicons/react/24/solid';
-import { LicenseBadges } from './licenses';
-import { DownloadsDropdown } from './downloads';
-import { AuthorAndAffiliations, AuthorsList } from './Authors';
+import { LicenseBadges } from './licenses.js';
+import { DownloadsDropdown } from './downloads.js';
+import { AuthorAndAffiliations, AuthorsList } from './Authors.js';
 
 function ExternalOrInternalLink({
   to,

packages/frontmatter/src/downloads.tsx

@@ -1,6 +1,5 @@
 import { Menu } from '@headlessui/react';
-import DocumentIcon from '@heroicons/react/24/outline/DocumentIcon';
-import ArrowDownTrayIcon from '@heroicons/react/24/outline/ArrowDownTrayIcon';
+import { DocumentIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import { useCallback } from 'react';
 

packages/frontmatter/src/index.ts

@@ -1,5 +1,5 @@
-export * from './FrontmatterBlock';
-export * from './licenses';
-export * from './downloads';
-export * from './Authors';
-export * from './Affiliations';
+export * from './FrontmatterBlock.js';
+export * from './licenses.js';
+export * from './downloads.js';
+export * from './Authors.js';
+export * from './Affiliations.js';

packages/frontmatter/src/licenses.tsx

@@ -7,7 +7,7 @@ import {
   CcZeroIcon,
   OsiIcon,
 } from '@scienceicons/react/24/solid';
-import ScaleIcon from '@heroicons/react/24/outline/ScaleIcon';
+import { ScaleIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 
 type License = {

packages/icons/package.json

@@ -2,22 +2,23 @@
   "name": "@myst-theme/icons",
   "version": "0.5.7",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": ">=16"
+  },
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist",
     "lint": "eslint src/**/**.ts*",
     "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\"",
     "dev": "npm-run-all --parallel \"build:* -- --watch\"",
-    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
-    "build:esm": "tsc --module es2020 --outDir dist/esm",
-    "build:types": "tsc --declaration --emitDeclarationOnly --declarationMap --outDir dist/types",
-    "build": "npm-run-all -l clean -p build:cjs build:esm build:types"
+    "build:esm": "tsc",
+    "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {},
   "peerDependencies": {

packages/icons/src/index.tsx

@@ -1 +1 @@
-export * from './myst';
+export * from './myst.js';

packages/jupyter/package.json

@@ -1,38 +1,39 @@
 {
   "name": "@myst-theme/jupyter",
   "version": "0.5.7",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": ">=16"
+  },
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist",
-    "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.js",
+    "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.cjs",
     "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\"",
     "dev": "npm-run-all --parallel \"build:* -- --watch\"",
-    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
-    "build:esm": "tsc --module es2020 --outDir dist/esm",
-    "build:types": "tsc --declaration --emitDeclarationOnly --declarationMap --outDir dist/types",
-    "build": "npm-run-all -l clean -p build:cjs build:esm build:types",
+    "build:esm": "tsc",
+    "build": "npm-run-all -l clean -p build:esm",
     "test": "vitest run",
     "test:watch": "vitest watch"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
     "@myst-theme/providers": "^0.5.7",
-    "@scienceicons/react": "^0.0.5",
+    "@scienceicons/react": "^0.0.6",
     "ansi-to-react": "^6.1.6",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
-    "myst-spec-ext": "^1.1.8",
     "myst-common": "^1.1.8",
     "myst-config": "^1.1.8",
     "myst-frontmatter": "^1.1.8",
     "myst-spec": "^0.0.4",
+    "myst-spec-ext": "^1.1.8",
     "myst-to-react": "^0.5.7",
     "nanoid": "^4.0.2",
     "nbtx": "^0.2.3",

packages/jupyter/src/ConnectionStatusTray.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useThebeServer } from 'thebe-react';
-import { useComputeOptions } from './providers';
+import { useComputeOptions } from './providers.js';
 import type { ThebeEventData, ThebeEventType } from 'thebe-core';
-import { selectAreExecutionScopesBuilding, useExecutionScope } from './execute';
+import { selectAreExecutionScopesBuilding, useExecutionScope } from './execute/index.js';
 
 export function ConnectionStatusTray() {
   const { thebe } = useComputeOptions();

packages/jupyter/src/ErrorTray.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import type { PassiveCellRenderer } from 'thebe-core';
 import type { IThebeNotebookError } from 'thebe-react';
 import { useThebeLoader } from 'thebe-react';
-import { useBusyErrors } from './execute/busy';
+import { useBusyErrors } from './execute/busy.js';
 
 function ErrorDecoration({ children, idx }: React.PropsWithChildren<{ idx?: number }>) {
   return (

packages/jupyter/src/components.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { useLongContent } from './hooks';
+import { useLongContent } from './hooks.js';
 
 export const MaybeLongContent = ({
   content,

packages/jupyter/src/controls/ArticleCellControls.tsx

@@ -1,8 +1,8 @@
 import { useThebeServer } from 'thebe-react';
-import { useNotebookExecution } from '../execute/hooks';
-import { Reset, Run, SpinnerStatusButton } from './Buttons';
+import { useNotebookExecution } from '../execute/hooks.js';
+import { Reset, Run, SpinnerStatusButton } from './Buttons.js';
 
-import { selectAreExecutionScopesBuilding } from '../execute';
+import { selectAreExecutionScopesBuilding } from '../execute/index.js';
 
 export function ArticleStatusBadge({ id }: { id: string }) {
   const { connect, connecting } = useThebeServer();

packages/jupyter/src/controls/Buttons.tsx

@@ -1,13 +1,15 @@
-import PlayCircleIcon from '@heroicons/react/24/outline/PlayCircleIcon';
-import ArrowPathIcon from '@heroicons/react/24/outline/ArrowPathIcon';
-import MinusCircleIcon from '@heroicons/react/24/outline/MinusCircleIcon';
-import ArrowTopRightOnSquareIcon from '@heroicons/react/24/outline/ArrowTopRightOnSquareIcon';
-import ArrowUturnLeft from '@heroicons/react/24/outline/ArrowUturnLeftIcon';
-import Bolt from '@heroicons/react/24/outline/BoltIcon';
-import PowerIcon from '@heroicons/react/24/outline/PowerIcon';
-import BoltIconSolid from '@heroicons/react/24/solid/BoltIcon';
+import {
+  PlayCircleIcon,
+  ArrowPathIcon,
+  MinusCircleIcon,
+  ArrowTopRightOnSquareIcon,
+  ArrowUturnLeftIcon,
+  BoltIcon,
+  PowerIcon,
+} from '@heroicons/react/24/outline';
+import { BoltIcon as BoltIconSolid } from '@heroicons/react/24/solid';
 import classNames from 'classnames';
-import { Spinner } from './Spinner';
+import { Spinner } from './Spinner.js';
 
 export function SpinnerStatusButton({
   ready,
@@ -28,7 +30,7 @@ export function SpinnerStatusButton({
   let icon = <PowerIcon width="1.5rem" height="1.5rem" />;
   if (ready) {
     if (modified) {
-      icon = <Bolt width="1.5rem" height="1.5rem" className="text-green-600" />;
+      icon = <BoltIcon width="1.5rem" height="1.5rem" className="text-green-600" />;
     } else {
       icon = <BoltIconSolid width="1.5rem" height="1.5rem" className="text-green-600" />;
     }
@@ -202,7 +204,9 @@ export function Reset({
       disabled={disabled}
       title={title ?? 'reset notebook'}
       onClick={onClick}
-      icon={<ArrowUturnLeft width="1.5rem" height="1.5rem" className="inline-block align-top" />}
+      icon={
+        <ArrowUturnLeftIcon width="1.5rem" height="1.5rem" className="inline-block align-top" />
+      }
     />
   );
 }

packages/jupyter/src/controls/NotebookCellControls.tsx

@@ -1,5 +1,5 @@
-import { useCellExecution } from '../execute/hooks';
-import { Clear, Run } from './Buttons';
+import { useCellExecution } from '../execute/hooks.js';
+import { Clear, Run } from './Buttons.js';
 
 export function NotebookRunCell({ id }: { id: string }) {
   const { ready, cellIsExecuting, notebookIsBusy, execute } = useCellExecution(id);

packages/jupyter/src/controls/NotebookToolbar.tsx

@@ -4,11 +4,11 @@ import {
   selectAreExecutionScopesBuilding,
   selectExecutionScopeStatus,
   useBusyScope,
-} from '../execute';
+} from '../execute/index.js';
 import { useThebeServer } from 'thebe-react';
-import PowerIcon from '@heroicons/react/24/outline/PowerIcon';
-import { Spinner } from './Spinner';
-import { Clear, Launch, Reset, Run } from './Buttons';
+import { PowerIcon } from '@heroicons/react/24/outline';
+import { Spinner } from './Spinner.js';
+import { Clear, Launch, Reset, Run } from './Buttons.js';
 import classNames from 'classnames';
 
 export function NotebookToolbar({ showLaunch = false }: { showLaunch?: boolean }) {
@@ -42,7 +42,7 @@ export function NotebookToolbar({ showLaunch = false }: { showLaunch?: boolean }
   if (computable)
     return (
       <div className="sticky top-[60px] flex justify-end w-full z-20 pointer-events-none">
-        <div className="flex p-1 m-1 border rounded-full shadow pointer-events-auto space-x-1 border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur">
+        <div className="flex p-1 m-1 space-x-1 border rounded-full shadow pointer-events-auto border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur">
           {!ready && (
             <div className="rounded">
               <button

packages/jupyter/src/controls/index.ts

@@ -1,4 +1,4 @@
-export * from './Buttons';
-export * from './NotebookCellControls';
-export * from './NotebookToolbar';
-export * from './Spinner';
+export * from './Buttons.js';
+export * from './NotebookCellControls.js';
+export * from './NotebookToolbar.js';
+export * from './Spinner.js';

packages/jupyter/src/decoration.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { GenericNode } from 'myst-common';
 import { SourceFileKind } from 'myst-spec-ext';
-import { useCellExecution } from './execute';
+import { useCellExecution } from './execute/index.js';
 import {
   ArticleResetNotebook,
   ArticleRunNotebook,
   ArticleStatusBadge,
-} from './controls/ArticleCellControls';
+} from './controls/ArticleCellControls.js';
 import { JupyterIcon } from '@scienceicons/react/24/solid';
 import { useLinkProvider, useBaseurl, withBaseurl, useThemeTop } from '@myst-theme/providers';
 

packages/jupyter/src/embed.tsx

@@ -1,5 +1,5 @@
 import { type GenericNode } from 'myst-common';
-import { OutputDecoration } from './decoration';
+import { OutputDecoration } from './decoration.js';
 import { MyST } from 'myst-to-react';
 
 export function Embed({ node }: { node: GenericNode }) {

packages/jupyter/src/error.tsx

@@ -1,7 +1,7 @@
 import Ansi from 'ansi-to-react';
 import { ensureString } from 'nbtx';
 import type { MinifiedErrorOutput } from 'nbtx';
-import { MaybeLongContent } from './components';
+import { MaybeLongContent } from './components.js';
 
 export default function Error({ output }: { output: MinifiedErrorOutput }) {
   return (

packages/jupyter/src/execute/actions.ts

@@ -1,5 +1,5 @@
 import type { SourceFileKind, Dependency } from 'myst-spec-ext';
-import type { BuildStatus, Computable } from './types';
+import type { BuildStatus, Computable } from './types.js';
 import type { IRenderMimeRegistry, ThebeNotebook, ThebeSession } from 'thebe-core';
 import type { GenericParent } from 'myst-common';