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

Format package changes:
- Add "type": "module" to package.json
- Update tsconfig.json to use module: "nodenext"
- Add explicit .js extensions to all relative imports
- Convert bin/generate-schema-yamls.js from CommonJS to ESM

Web package changes:
- Add babel-loader to transpile @ethdebug/* ESM packages
- Add @ethdebug/pointers as a dependency
- Configure webpack with fullySpecified: false for ESM compatibility

Author: gnidan

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";
 

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", [
   {