Convert @ethdebug/format to ESM and enable ESM imports in web app

packages/format/bin/generate-schema-yamls.js

@@ -1,9 +1,12 @@
-const fs = require("fs");
-const path = require("path");
-const YAML = require("yaml");
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import YAML from "yaml";
 
-const filename = __dirname;
-const repositoryRoot = path.resolve(filename, "../../../");
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const repositoryRoot = path.resolve(__dirname, "../../../");
 const schemasRoot = path.resolve(repositoryRoot, "./schemas");
 
 const readSchemaYamls = (directory) => {

packages/format/package.json

@@ -2,6 +2,7 @@
   "name": "@ethdebug/format",
   "version": "0.1.0-0",
   "description": "ethdebug/format schemas distributed as NPM package",
+  "type": "module",
   "main": "dist/src/index.js",
   "repository": "https://github.com/ethdebug/format",
   "license": "MIT",

packages/format/src/describe.ts

@@ -1,6 +1,6 @@
 import * as YAML from "yaml";
 
-import { schemaYamls } from "./schemas/yamls";
+import { schemaYamls } from "./schemas/yamls.js";
 
 import type { JSONSchema as JSONSchemaTyped } from "json-schema-typed/draft-2020-12";
 
@@ -181,7 +181,7 @@
   return YAML.stringify(doc);
 }
 
 type Impossible<K extends keyof any> = {
   [P in K]: never;
 };
 

packages/format/src/index.ts

@@ -1,4 +1,4 @@
-export * from "./describe";
-export { schemas, schemaIds, type Schema } from "./schemas";
+export * from "./describe.js";
+export { schemas, schemaIds, type Schema } from "./schemas/index.js";
 
-export * from "./types";
+export * from "./types/index.js";

packages/format/src/schemas/examples.test.ts

@@ -1,11 +1,11 @@
 import { expect, describe, it } from "vitest";
 
-import { schemaExtensions } from "../../test/extensions";
-import { schemas } from ".";
-import type { JSONSchema } from "../describe";
+import { schemaExtensions } from "../../test/extensions.js";
+import { schemas } from "./index.js";
+import type { JSONSchema } from "../describe.js";
 
 // loads schemas into global hyperjump json schema validator
-import "../../test/hyperjump";
+import "../../test/hyperjump.js";
 
 const idsOfSchemasAllowedToOmitExamples = new Set([
   "schema:ethdebug/format/type",

packages/format/src/schemas/index.ts

@@ -1,6 +1,6 @@
-import { describeSchema } from "../describe";
-import { schemaYamls } from "./yamls";
-export type { Schema } from "./yamls";
+import { describeSchema } from "../describe.js";
+import { schemaYamls } from "./yamls.js";
+export type { Schema } from "./yamls.js";
 
 export const schemaIds: string[] = Object.keys(schemaYamls);
 export const schemas = schemaIds

packages/format/src/schemas/validity.test.ts

@@ -5,10 +5,10 @@ import {
   InvalidSchemaError,
 } from "@hyperjump/json-schema/draft-2020-12";
 
-import { schemas } from ".";
+import { schemas } from "./index.js";
 
 // loads schemas into global hyperjump json schema validator
-import "../../test/hyperjump";
+import "../../test/hyperjump.js";
 
 const printErrors = (output: { errors?: OutputUnit[] }): string =>
   output

packages/format/src/types/data/index.test.ts

@@ -1,4 +1,4 @@
-import { testSchemaGuards } from "../../../test/guards";
+import { testSchemaGuards } from "../../../test/guards.js";
 
 import { Data } from "./index.js";
 

packages/format/src/types/index.ts

@@ -1,5 +1,5 @@
-export * from "./data";
-export * from "./materials";
-export * from "./type";
-export * from "./pointer";
-export * from "./program";
+export * from "./data/index.js";
+export * from "./materials/index.js";
+export * from "./type/index.js";
+export * from "./pointer/index.js";
+export * from "./program/index.js";

packages/format/src/types/materials/index.test.ts

@@ -1,5 +1,5 @@
-import { testSchemaGuards } from "../../../test/guards";
-import { Materials } from "./index";
+import { testSchemaGuards } from "../../../test/guards.js";
+import { Materials } from "./index.js";
 
 testSchemaGuards("ethdebug/format/materials", [
   {

packages/format/src/types/materials/index.ts

@@ -1,4 +1,4 @@
-import { Data } from "../data";
+import { Data } from "../data/index.js";
 
 export namespace Materials {
   export type Id = number | string;
@@ -57,7 +57,7 @@
       name: string;
       version: string;
     };
     settings?: any;
     sources: Source[];
   }
 

packages/format/src/types/pointer/index.ts

@@ -1 +1 @@
-export { Pointer, isPointer } from "./pointer";
+export { Pointer, isPointer } from "./pointer.js";

packages/format/src/types/pointer/pointer.test.ts

@@ -1,6 +1,6 @@
-import { testSchemaGuards } from "../../../test/guards";
+import { testSchemaGuards } from "../../../test/guards.js";
 
-import { Pointer, isPointer } from "./pointer";
+import { Pointer, isPointer } from "./pointer.js";
 
 const expressionSchema = "schema:ethdebug/format/pointer/expression";
 testSchemaGuards("ethdebug/format/pointer", [

packages/format/src/types/program/context.test.ts

@@ -1,5 +1,5 @@
-import { testSchemaGuards } from "../../../test/guards";
-import { Context, isContext } from "./context";
+import { testSchemaGuards } from "../../../test/guards.js";
+import { Context, isContext } from "./context.js";
 
 testSchemaGuards("ethdebug/format/program/context", [
   {

packages/format/src/types/program/context.ts

@@ -1,6 +1,6 @@
-import { Materials } from "../materials";
-import { Type, isType } from "../type";
-import { Pointer, isPointer } from "../pointer";
+import { Materials } from "../materials/index.js";
+import { Type, isType } from "../type/index.js";
+import { Pointer, isPointer } from "../pointer/index.js";
 
 export type Context =
   | Context.Code

packages/format/src/types/program/index.ts

@@ -1 +1 @@
-export { Program, isProgram } from "./program";
+export { Program, isProgram } from "./program.js";

packages/format/src/types/program/instruction.test.ts

@@ -1,5 +1,5 @@
-import { testSchemaGuards } from "../../../test/guards";
-import { isInstruction } from "./instruction";
+import { testSchemaGuards } from "../../../test/guards.js";
+import { isInstruction } from "./instruction.js";
 
 testSchemaGuards("ethdebug/format/program/instruction", [
   {

packages/format/src/types/program/instruction.ts

@@ -1,6 +1,6 @@
-import { Data } from "../data";
+import { Data } from "../data/index.js";
 
-import { Context, isContext } from "./context";
+import { Context, isContext } from "./context.js";
 
 export interface Instruction {
   offset: Data.Value;

packages/format/src/types/program/program.test.ts

@@ -1,5 +1,5 @@
-import { testSchemaGuards } from "../../../test/guards";
-import { isProgram } from "./program";
+import { testSchemaGuards } from "../../../test/guards.js";
+import { isProgram } from "./program.js";
 
 testSchemaGuards("ethdebug/format/program", [
   {

packages/format/src/types/program/program.ts

@@ -1,11 +1,11 @@
-import { Materials } from "../materials";
+import { Materials } from "../materials/index.js";
 
-import { Context as _Context, isContext as _isContext } from "./context";
+import { Context as _Context, isContext as _isContext } from "./context.js";
 
 import {
   Instruction as _Instruction,
   isInstruction as _isInstruction,
-} from "./instruction";
+} from "./instruction.js";
 
 export interface Program {
   compilation?: Materials.Reference<Materials.Compilation>;

packages/format/src/types/type/base.test.ts

@@ -1,5 +1,5 @@
-import { testSchemaGuards } from "../../../test/guards";
-import * as Base from "./base";
+import { testSchemaGuards } from "../../../test/guards.js";
+import * as Base from "./base.js";
 
 testSchemaGuards("ethdebug/format/type/base", [
   {

packages/format/src/types/type/index.test.ts

@@ -1,5 +1,5 @@
-import { testSchemaGuards } from "../../../test/guards";
-import { Type, isType } from "./index";
+import { testSchemaGuards } from "../../../test/guards.js";
+import { Type, isType } from "./index.js";
 
 testSchemaGuards("ethdebug/format/type", [
   {

packages/format/src/types/type/index.ts

@@ -1,7 +1,7 @@
-import { Data } from "../data";
-import { Materials } from "../materials";
+import { Data } from "../data/index.js";
+import { Materials } from "../materials/index.js";
 
-import * as _Base from "./base";
+import * as _Base from "./base.js";
 
 export type Type = Type.Known | Type.Unknown;
 
@@ -33,7 +33,7 @@
         Object.values(value.contains).every(Type.isWrapper)));
 
   export interface Wrapper {
     type: Type | { id: any };
   }
 
   export const isWrapper = (value: unknown): value is Wrapper =>
@@ -238,7 +238,7 @@
     export interface Enum {
       class?: "elementary";
       kind: "enum";
       values: any[];
       definition?: Definition;
     }
 

packages/format/test/guards.ts

@@ -1,6 +1,6 @@
 import { expect, describe, it } from "vitest";
 
-import { type DescribeSchemaOptions, describeSchema } from "../src";
+import { type DescribeSchemaOptions, describeSchema } from "../src/index.js";
 
 export interface SchemaGuard extends DescribeSchemaOptions {
   guard(value: unknown): boolean;

packages/format/test/hyperjump.ts

@@ -4,15 +4,14 @@ import {
   validate,
   setMetaSchemaOutputFormat,
 } from "@hyperjump/json-schema/draft-2020-12";
-// @ts-expect-error no types for experimental export
 import { BASIC } from "@hyperjump/json-schema/experimental";
 import * as YAML from "yaml";
 import indentString from "indent-string";
 import { highlight } from "cli-highlight";
 
-import { describeSchema, type DescribeSchemaOptions } from "../src/describe";
+import { describeSchema, type DescribeSchemaOptions } from "../src/describe.js";
 
-import { schemas } from "../src/schemas";
+import { schemas } from "../src/schemas/index.js";
 
 const main = () => {
   setMetaSchemaOutputFormat(BASIC);

packages/format/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "target": "es2017",
-    "module": "commonjs",
-    "moduleResolution": "node10",
+    "target": "es2020",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "exactOptionalPropertyTypes": true,
     "rootDir": "./",
     "outDir": "./dist/"

packages/format/vitest.d.ts

@@ -1,5 +1,5 @@
 import "vitest";
-import type { DescribeSchemaOptions } from "./src/describe";
+import type { DescribeSchemaOptions } from "./src/describe.js";
 
 interface CustomMatchers<R = unknown> {
   toValidate(schemaOptions: DescribeSchemaOptions): R;

packages/web/docusaurus.config.ts

@@ -45,6 +45,20 @@ const config: Config = {
         name: "custom-resolve",
         configureWebpack(config: Configuration) {
           return {
+            module: {
+              rules: [
+                {
+                  test: /\.m?js$/,
+                  include: /node_modules\/@ethdebug/,
+                  use: {
+                    loader: "babel-loader",
+                    options: {
+                      presets: [["@babel/preset-env", { modules: false }]],
+                    },
+                  },
+                },
+              ],
+            },
             resolve: {
               alias: {
                 react: path.resolve("../../node_modules/react"),
@@ -53,6 +67,7 @@ const config: Config = {
                 buffer: false,
                 util: false,
               },
+              fullySpecified: false,
             },
           };
         },

packages/web/package.json

@@ -22,6 +22,7 @@
     "@docusaurus/tsconfig": "^3.9.2",
     "@docusaurus/types": "^3.9.2",
     "@ethdebug/format": "^0.1.0-0",
+    "@ethdebug/pointers": "^0.1.0-0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
@@ -44,9 +45,12 @@
     "yaml-template": "^1.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.6",
+    "@babel/preset-env": "^7.28.6",
     "@docusaurus/module-type-aliases": "^3.9.2",
     "@docusaurus/tsconfig": "^3.9.2",
     "@docusaurus/types": "^3.9.2",
+    "babel-loader": "^10.0.0",
     "json-schema-typed": "8.0.1",
     "typescript": "^5.9.3"
   },

yarn.lock

@@ -266,7 +266,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/core@^7.25.9":
+"@babel/core@^7.25.9", "@babel/core@^7.28.6":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.28.6.tgz#531bf883a1126e53501ba46eb3bb414047af507f"
   integrity sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==
@@ -1969,7 +1969,7 @@
     core-js-compat "^3.31.0"
     semver "^6.3.1"
 
-"@babel/preset-env@^7.25.9":
+"@babel/preset-env@^7.25.9", "@babel/preset-env@^7.28.6":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.28.6.tgz#b4586bb59d8c61be6c58997f4912e7ea6bd17178"
   integrity sha512-GaTI4nXDrs7l0qaJ6Rg06dtOXTBCG6TMDB44zbqofCIC4PqC7SEvmFFtpxzCDw9W5aJ7RKVshgXTLvLdBFV/qw==
@@ -6145,6 +6145,13 @@ axios@^1.8.3:
     form-data "^4.0.4"
     proxy-from-env "^1.1.0"
 
+babel-loader@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-10.0.0.tgz#b9743714c0e1e084b3e4adef3cd5faee33089977"
+  integrity sha512-z8jt+EdS61AMw22nSfoNJAZ0vrtmhPRVi6ghL3rCeRZI8cdNYFiV5xeV3HbE7rlZZNmGH8BVccwWt8/ED0QOHA==
+  dependencies:
+    find-up "^5.0.0"
+
 babel-loader@^9.2.1:
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.2.1.tgz#04c7835db16c246dd19ba0914418f3937797587b"
@@ -8318,7 +8325,7 @@ etag@~1.8.1:
   resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
-ethereum-cryptography@^2.2.1:
+ethereum-cryptography@^2.1.3, ethereum-cryptography@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ethereum-cryptography/-/ethereum-cryptography-2.2.1.tgz#58f2810f8e020aecb97de8c8c76147600b0b8ccf"
   integrity sha512-r/W8lkHSiTLxUxW8Rf3u4HGB0xQweG2RyETjywylKZSzLWoWAijRz8WCuOtJ6wah+avllXBqZuk29HCCvhEIRg==