Make Parchment an ESM package

.eslintrc.json

@@ -6,11 +6,12 @@
   "extends": [
     "eslint:recommended",
     "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:require-extensions/recommended"
   ],
   "ignorePatterns": ["vite.config.ts", "scripts"],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "require-extensions"],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",

package.json

@@ -7,13 +7,14 @@
   "main": "./dist/parchment.umd.js",
   "module": "./dist/parchment.mjs",
   "types": "./dist/parchment.d.ts",
+  "type": "module",
   "files": [
     "tsconfig.json",
     "dist",
     "src"
   ],
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.36.3",
+    "@microsoft/api-extractor": "^7.42.3",
     "@types/node": "^18.15.11",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",

src/attributor/attributor.ts

@@ -1,4 +1,4 @@
-import Scope from '../scope';
+import Scope from '../scope.js';
 
 export interface AttributorOptions {
   scope?: Scope;

src/attributor/class.ts

@@ -1,4 +1,4 @@
-import Attributor from './attributor';
+import Attributor from './attributor.js';
 
 function match(node: HTMLElement, prefix: string): string[] {
   const className = node.getAttribute('class') || '';

src/attributor/store.ts

@@ -1,9 +1,9 @@
-import type { Formattable } from '../blot/abstract/blot';
-import Registry from '../registry';
-import Scope from '../scope';
-import Attributor from './attributor';
-import ClassAttributor from './class';
-import StyleAttributor from './style';
+import type { Formattable } from '../blot/abstract/blot.js';
+import Registry from '../registry.js';
+import Scope from '../scope.js';
+import Attributor from './attributor.js';
+import ClassAttributor from './class.js';
+import StyleAttributor from './style.js';
 
 class AttributorStore {
   private attributes: { [key: string]: Attributor } = {};

src/attributor/style.ts

@@ -1,4 +1,4 @@
-import Attributor from './attributor';
+import Attributor from './attributor.js';
 
 function camelize(name: string): string {
   const parts = name.split('-');

src/blot/abstract/blot.ts

@@ -1,7 +1,7 @@
-import type LinkedList from '../../collection/linked-list';
-import type LinkedNode from '../../collection/linked-node';
-import type { RegistryDefinition } from '../../registry';
-import Scope from '../../scope';
+import type LinkedList from '../../collection/linked-list.js';
+import type LinkedNode from '../../collection/linked-node.js';
+import type { RegistryDefinition } from '../../registry.js';
+import Scope from '../../scope.js';
 
 export interface BlotConstructor {
   blotName: string;

src/blot/abstract/container.ts

@@ -1,6 +1,6 @@
-import Scope from '../../scope';
-import BlockBlot from '../block';
-import ParentBlot from './parent';
+import Scope from '../../scope.js';
+import BlockBlot from '../block.js';
+import ParentBlot from './parent.js';
 
 class ContainerBlot extends ParentBlot {
   public static blotName = 'container';

src/blot/abstract/leaf.ts

@@ -1,6 +1,6 @@
-import Scope from '../../scope';
-import type { Leaf } from './blot';
-import ShadowBlot from './shadow';
+import Scope from '../../scope.js';
+import type { Leaf } from './blot.js';
+import ShadowBlot from './shadow.js';
 
 class LeafBlot extends ShadowBlot implements Leaf {
   public static scope = Scope.INLINE_BLOT;

src/blot/abstract/parent.ts

@@ -1,8 +1,8 @@
-import LinkedList from '../../collection/linked-list';
-import ParchmentError from '../../error';
-import Scope from '../../scope';
-import type { Blot, BlotConstructor, Parent, Root } from './blot';
-import ShadowBlot from './shadow';
+import LinkedList from '../../collection/linked-list.js';
+import ParchmentError from '../../error.js';
+import Scope from '../../scope.js';
+import type { Blot, BlotConstructor, Parent, Root } from './blot.js';
+import ShadowBlot from './shadow.js';
 
 function makeAttachedBlot(node: Node, scroll: Root): Blot {
   const found = scroll.find(node);

src/blot/abstract/shadow.ts

@@ -1,7 +1,13 @@
-import ParchmentError from '../../error';
-import Registry from '../../registry';
-import Scope from '../../scope';
-import type { Blot, BlotConstructor, Formattable, Parent, Root } from './blot';
+import ParchmentError from '../../error.js';
+import Registry from '../../registry.js';
+import Scope from '../../scope.js';
+import type {
+  Blot,
+  BlotConstructor,
+  Formattable,
+  Parent,
+  Root,
+} from './blot.js';
 
 class ShadowBlot implements Blot {
   public static blotName = 'abstract';

src/blot/block.ts

@@ -1,10 +1,15 @@
-import Attributor from '../attributor/attributor';
-import AttributorStore from '../attributor/store';
-import Scope from '../scope';
-import type { Blot, BlotConstructor, Formattable, Root } from './abstract/blot';
-import LeafBlot from './abstract/leaf';
-import ParentBlot from './abstract/parent';
-import InlineBlot from './inline';
+import Attributor from '../attributor/attributor.js';
+import AttributorStore from '../attributor/store.js';
+import Scope from '../scope.js';
+import type {
+  Blot,
+  BlotConstructor,
+  Formattable,
+  Root,
+} from './abstract/blot.js';
+import LeafBlot from './abstract/leaf.js';
+import ParentBlot from './abstract/parent.js';
+import InlineBlot from './inline.js';
 
 class BlockBlot extends ParentBlot implements Formattable {
   public static blotName = 'block';

src/blot/embed.ts

@@ -1,5 +1,5 @@
-import type { Formattable, Root } from './abstract/blot';
-import LeafBlot from './abstract/leaf';
+import type { Formattable, Root } from './abstract/blot.js';
+import LeafBlot from './abstract/leaf.js';
 
 class EmbedBlot extends LeafBlot implements Formattable {
   public static formats(_domNode: HTMLElement, _scroll: Root): any {

src/blot/inline.ts

@@ -1,15 +1,15 @@
-import Attributor from '../attributor/attributor';
-import AttributorStore from '../attributor/store';
-import Scope from '../scope';
+import Attributor from '../attributor/attributor.js';
+import AttributorStore from '../attributor/store.js';
+import Scope from '../scope.js';
 import type {
   Blot,
   BlotConstructor,
   Formattable,
   Parent,
   Root,
-} from './abstract/blot';
-import LeafBlot from './abstract/leaf';
-import ParentBlot from './abstract/parent';
+} from './abstract/blot.js';
+import LeafBlot from './abstract/leaf.js';
+import ParentBlot from './abstract/parent.js';
 
 // Shallow object comparison
 function isEqual(

src/blot/scroll.ts

@@ -1,9 +1,9 @@
-import Registry, { type RegistryDefinition } from '../registry';
-import Scope from '../scope';
-import type { Blot, BlotConstructor, Root } from './abstract/blot';
-import ContainerBlot from './abstract/container';
-import ParentBlot from './abstract/parent';
-import BlockBlot from './block';
+import Registry, { type RegistryDefinition } from '../registry.js';
+import Scope from '../scope.js';
+import type { Blot, BlotConstructor, Root } from './abstract/blot.js';
+import ContainerBlot from './abstract/container.js';
+import ParentBlot from './abstract/parent.js';
+import BlockBlot from './block.js';
 
 const OBSERVER_CONFIG = {
   attributes: true,

src/blot/text.ts

@@ -1,6 +1,6 @@
-import Scope from '../scope';
-import type { Blot, Leaf, Root } from './abstract/blot';
-import LeafBlot from './abstract/leaf';
+import Scope from '../scope.js';
+import type { Blot, Leaf, Root } from './abstract/blot.js';
+import LeafBlot from './abstract/leaf.js';
 
 class TextBlot extends LeafBlot implements Leaf {
   public static readonly blotName = 'text';

src/collection/linked-list.ts

@@ -1,4 +1,4 @@
-import type LinkedNode from './linked-node';
+import type LinkedNode from './linked-node.js';
 
 class LinkedList<T extends LinkedNode> {
   public head: T | null;

src/parchment.ts

@@ -1,20 +1,20 @@
-import ContainerBlot from './blot/abstract/container';
-import LeafBlot from './blot/abstract/leaf';
-import ParentBlot from './blot/abstract/parent';
+import ContainerBlot from './blot/abstract/container.js';
+import LeafBlot from './blot/abstract/leaf.js';
+import ParentBlot from './blot/abstract/parent.js';
 
-import BlockBlot from './blot/block';
-import EmbedBlot from './blot/embed';
-import InlineBlot from './blot/inline';
-import ScrollBlot from './blot/scroll';
-import TextBlot from './blot/text';
+import BlockBlot from './blot/block.js';
+import EmbedBlot from './blot/embed.js';
+import InlineBlot from './blot/inline.js';
+import ScrollBlot from './blot/scroll.js';
+import TextBlot from './blot/text.js';
 
-import Attributor from './attributor/attributor';
-import ClassAttributor from './attributor/class';
-import AttributorStore from './attributor/store';
-import StyleAttributor from './attributor/style';
+import Attributor from './attributor/attributor.js';
+import ClassAttributor from './attributor/class.js';
+import AttributorStore from './attributor/store.js';
+import StyleAttributor from './attributor/style.js';
 
-import Registry from './registry';
-import Scope from './scope';
+import Registry from './registry.js';
+import Scope from './scope.js';
 
 export {
   ParentBlot,
@@ -33,16 +33,16 @@ export {
   Scope,
 };
 
-export type { RegistryInterface, RegistryDefinition } from './registry';
-export type { default as ShadowBlot } from './blot/abstract/shadow';
-export type { default as LinkedList } from './collection/linked-list';
-export type { default as LinkedNode } from './collection/linked-node';
-export type { AttributorOptions } from './attributor/attributor';
+export type { RegistryInterface, RegistryDefinition } from './registry.js';
+export type { default as ShadowBlot } from './blot/abstract/shadow.js';
+export type { default as LinkedList } from './collection/linked-list.js';
+export type { default as LinkedNode } from './collection/linked-node.js';
+export type { AttributorOptions } from './attributor/attributor.js';
 export type {
   Blot,
   BlotConstructor,
   Formattable,
   Leaf,
   Parent,
   Root,
-} from './blot/abstract/blot';
+} from './blot/abstract/blot.js';

src/registry.ts

@@ -1,11 +1,11 @@
-import Attributor from './attributor/attributor';
+import Attributor from './attributor/attributor.js';
 import {
   type Blot,
   type BlotConstructor,
   type Root,
-} from './blot/abstract/blot';
-import ParchmentError from './error';
-import Scope from './scope';
+} from './blot/abstract/blot.js';
+import ParchmentError from './error.js';
+import Scope from './scope.js';
 
 export type RegistryDefinition = Attributor | BlotConstructor;
 

tests/__helpers__/registry/attributor.ts

@@ -1,7 +1,7 @@
-import Attributor from '../../../src/attributor/attributor';
-import ClassAttributor from '../../../src/attributor/class';
-import StyleAttributor from '../../../src/attributor/style';
-import Scope from '../../../src/scope';
+import Attributor from '../../../src/attributor/attributor.js';
+import ClassAttributor from '../../../src/attributor/class.js';
+import StyleAttributor from '../../../src/attributor/style.js';
+import Scope from '../../../src/scope.js';
 
 export const Color = new StyleAttributor('color', 'color', {
   scope: Scope.INLINE_ATTRIBUTE,

tests/__helpers__/registry/block.ts

@@ -1,4 +1,4 @@
-import BlockBlot from '../../../src/blot/block';
+import BlockBlot from '../../../src/blot/block.js';
 
 export class HeaderBlot extends BlockBlot {
   static readonly blotName = 'header';

tests/__helpers__/registry/break.ts

@@ -1,4 +1,4 @@
-import EmbedBlot from '../../../src/blot/embed';
+import EmbedBlot from '../../../src/blot/embed.js';
 
 export class BreakBlot extends EmbedBlot {
   static readonly blotName = 'break';

tests/__helpers__/registry/embed.ts

@@ -1,5 +1,5 @@
-import EmbedBlot from '../../../src/blot/embed';
-import Scope from '../../../src/scope';
+import EmbedBlot from '../../../src/blot/embed.js';
+import Scope from '../../../src/scope.js';
 
 export class ImageBlot extends EmbedBlot {
   declare domNode: HTMLImageElement;

tests/__helpers__/registry/inline.ts

@@ -1,4 +1,4 @@
-import InlineBlot from '../../../src/blot/inline';
+import InlineBlot from '../../../src/blot/inline.js';
 
 export class AuthorBlot extends InlineBlot {
   static readonly blotName = 'author';

tests/__helpers__/registry/list.ts

@@ -1,5 +1,5 @@
-import ContainerBlot from '../../../src/blot/abstract/container';
-import BlockBlot from '../../../src/blot/block';
+import ContainerBlot from '../../../src/blot/abstract/container.js';
+import BlockBlot from '../../../src/blot/block.js';
 
 export class ListItem extends BlockBlot {
   static readonly blotName = 'list';

tests/setup.ts

@@ -7,25 +7,25 @@ import {
   InlineBlot,
   TextBlot,
   type BlotConstructor,
-} from '../src/parchment';
+} from '../src/parchment.js';
 import {
   AuthorBlot,
   BoldBlot,
   ItalicBlot,
   ScriptBlot,
-} from './__helpers__/registry/inline';
+} from './__helpers__/registry/inline.js';
 import {
   Align,
   Color,
   Family,
   Id,
   Indent,
   Size,
-} from './__helpers__/registry/attributor';
-import { HeaderBlot } from './__helpers__/registry/block';
-import { ImageBlot, VideoBlot } from './__helpers__/registry/embed';
-import { ListContainer, ListItem } from './__helpers__/registry/list';
-import { BreakBlot } from './__helpers__/registry/break';
+} from './__helpers__/registry/attributor.js';
+import { HeaderBlot } from './__helpers__/registry/block.js';
+import { ImageBlot, VideoBlot } from './__helpers__/registry/embed.js';
+import { ListContainer, ListItem } from './__helpers__/registry/list.js';
+import { BreakBlot } from './__helpers__/registry/break.js';
 
 const getTestRegistry = () => {
   const reg = new Registry();

tests/types/attributor.test-d.ts

@@ -1,5 +1,5 @@
 import { assertType } from 'vitest';
-import { ClassAttributor } from '../../src/parchment';
+import { ClassAttributor } from '../../src/parchment.js';
 
 class IndentAttributor extends ClassAttributor {
   value(node: HTMLElement) {

tests/types/parent.test-d.ts

@@ -5,7 +5,7 @@ import {
   Registry,
   ScrollBlot,
   ParentBlot,
-} from '../../src/parchment';
+} from '../../src/parchment.js';
 
 const registry = new Registry();
 const root = document.createElement('div');

tests/unit/attributor.test.ts

@@ -4,10 +4,10 @@ import type {
   BlockBlot,
   Formattable,
   InlineBlot,
-} from '../../src/parchment';
-import type { HeaderBlot } from '../__helpers__/registry/block';
-import type { BoldBlot } from '../__helpers__/registry/inline';
-import { setupContextBeforeEach } from '../setup';
+} from '../../src/parchment.js';
+import type { HeaderBlot } from '../__helpers__/registry/block.js';
+import type { BoldBlot } from '../__helpers__/registry/inline.js';
+import { setupContextBeforeEach } from '../setup.js';
 
 describe('Attributor', function () {
   const ctx = setupContextBeforeEach();