Make Quill an ESM package (#4047)

slab · Mar 12, 2024 · 80f22d8 · 80f22d8
1 parent 6e2ae54
commit 80f22d8
Show file tree

Hide file tree

Showing 99 changed files with 494 additions and 467 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/quill/.eslintrc.json b/packages/quill/.eslintrc.json
@@ -2,7 +2,8 @@
   "extends": [
     "eslint:recommended",
     "plugin:prettier/recommended",
-    "plugin:import/recommended"
+    "plugin:import/recommended",
+    "plugin:require-extensions/recommended"
   ],
   "env": {
     "browser": true,
@@ -27,7 +28,7 @@
         "plugin:import/typescript"
       ],
       "excludedFiles": "*.d.ts",
-      "plugins": ["@typescript-eslint"],
+      "plugins": ["@typescript-eslint", "require-extensions"],
       "rules": {
         "@typescript-eslint/consistent-type-imports": "error",
         "@typescript-eslint/ban-ts-comment": "off",

diff --git a/packages/quill/babel.config.js → packages/quill/babel.config.cjs b/packages/quill/babel.config.js → packages/quill/babel.config.cjs
@@ -3,10 +3,10 @@ const pkg = require('./package.json');
 module.exports = {
   presets: [
     ['@babel/preset-env', { modules: false }],
-    '@babel/preset-typescript'
+    '@babel/preset-typescript',
   ],
   plugins: [
     ['transform-define', { QUILL_VERSION: pkg.version }],
-    './scripts/babel-svg-inline-import',
+    './scripts/babel-svg-inline-import.cjs',
   ],
 };
diff --git a/packages/quill/package.json b/packages/quill/package.json
@@ -5,10 +5,11 @@
   "author": "Jason Chen <[email protected]>",
   "homepage": "https://quilljs.com",
   "main": "quill.js",
+  "type": "module",
   "dependencies": {
     "eventemitter3": "^5.0.1",
     "lodash-es": "^4.17.21",
-    "parchment": "^3.0.0-alpha.2",
+    "parchment": "0.0.0-experimental-c450721b1-20240312",
     "quill-delta": "^5.1.0"
   },
   "devDependencies": {
@@ -34,6 +35,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-require-extensions": "^0.1.3",
     "highlight.js": "^9.18.1",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.3",

diff --git a/packages/quill/playwright.config.ts b/packages/quill/playwright.config.ts
@@ -26,7 +26,7 @@ export default defineConfig({
     { name: 'Safari', use: { ...devices['Desktop Safari'] } },
   ],
   webServer: {
-    command: `npx webpack serve --config test/e2e/__dev_server__/webpack.config.ts --env port=${port}`,
+    command: `npx webpack serve --config test/e2e/__dev_server__/webpack.config.cjs --env port=${port}`,
     port,
     ignoreHTTPSErrors: true,
     reuseExistingServer: !process.env.CI,

diff --git a/.../quill/scripts/babel-svg-inline-import.js → ...quill/scripts/babel-svg-inline-import.cjs b/.../quill/scripts/babel-svg-inline-import.js → ...quill/scripts/babel-svg-inline-import.cjs
diff --git a/packages/quill/src/blots/block.ts b/packages/quill/src/blots/block.ts
@@ -7,9 +7,9 @@ import {
 } from 'parchment';
 import type { Blot, Parent } from 'parchment';
 import Delta from 'quill-delta';
-import Break from './break';
-import Inline from './inline';
-import TextBlot from './text';
+import Break from './break.js';
+import Inline from './inline.js';
+import TextBlot from './text.js';
 
 const NEWLINE_LENGTH = 1;
 

diff --git a/packages/quill/src/blots/cursor.ts b/packages/quill/src/blots/cursor.ts
@@ -1,8 +1,8 @@
 import { EmbedBlot, Scope } from 'parchment';
 import type { Parent, ScrollBlot } from 'parchment';
-import type Selection from '../core/selection';
-import TextBlot from './text';
-import type { EmbedContextRange } from './embed';
+import type Selection from '../core/selection.js';
+import TextBlot from './text.js';
+import type { EmbedContextRange } from './embed.js';
 
 class Cursor extends EmbedBlot {
   static blotName = 'cursor';

diff --git a/packages/quill/src/blots/embed.ts b/packages/quill/src/blots/embed.ts
@@ -1,6 +1,6 @@
 import type { ScrollBlot } from 'parchment';
 import { EmbedBlot } from 'parchment';
-import TextBlot from './text';
+import TextBlot from './text.js';
 
 const GUARD_TEXT = '\uFEFF';
 

diff --git a/packages/quill/src/blots/inline.ts b/packages/quill/src/blots/inline.ts
@@ -1,7 +1,7 @@
 import { EmbedBlot, InlineBlot, Scope } from 'parchment';
 import type { BlotConstructor } from 'parchment';
-import Break from './break';
-import Text from './text';
+import Break from './break.js';
+import Text from './text.js';
 
 class Inline extends InlineBlot {
   static allowedChildren: BlotConstructor[] = [Inline, Break, EmbedBlot, Text];

diff --git a/packages/quill/src/blots/scroll.ts b/packages/quill/src/blots/scroll.ts
@@ -1,11 +1,11 @@
 import { ContainerBlot, LeafBlot, Scope, ScrollBlot } from 'parchment';
 import type { Blot, Parent, EmbedBlot, ParentBlot, Registry } from 'parchment';
 import Delta, { AttributeMap, Op } from 'quill-delta';
-import Emitter from '../core/emitter';
-import type { EmitterSource } from '../core/emitter';
-import Block, { BlockEmbed, bubbleFormats } from './block';
-import Break from './break';
-import Container from './container';
+import Emitter from '../core/emitter.js';
+import type { EmitterSource } from '../core/emitter.js';
+import Block, { BlockEmbed, bubbleFormats } from './block.js';
+import Break from './break.js';
+import Container from './container.js';
 
 type RenderBlock =
   | {

diff --git a/packages/quill/src/core.ts b/packages/quill/src/core.ts
@@ -1,21 +1,21 @@
-import Quill from './core/quill';
+import Quill from './core/quill.js';
 
-import Block, { BlockEmbed } from './blots/block';
-import Break from './blots/break';
-import Container from './blots/container';
-import Cursor from './blots/cursor';
-import Embed from './blots/embed';
-import Inline from './blots/inline';
-import Scroll from './blots/scroll';
-import TextBlot from './blots/text';
+import Block, { BlockEmbed } from './blots/block.js';
+import Break from './blots/break.js';
+import Container from './blots/container.js';
+import Cursor from './blots/cursor.js';
+import Embed from './blots/embed.js';
+import Inline from './blots/inline.js';
+import Scroll from './blots/scroll.js';
+import TextBlot from './blots/text.js';
 
-import Clipboard from './modules/clipboard';
-import History from './modules/history';
-import Keyboard from './modules/keyboard';
-import Uploader from './modules/uploader';
+import Clipboard from './modules/clipboard.js';
+import History from './modules/history.js';
+import Keyboard from './modules/keyboard.js';
+import Uploader from './modules/uploader.js';
 import Delta, { Op, OpIterator, AttributeMap } from 'quill-delta';
-import Input from './modules/input';
-import UINode from './modules/uiNode';
+import Input from './modules/input.js';
+import UINode from './modules/uiNode.js';
 
 export { Delta, Op, OpIterator, AttributeMap };
 

diff --git a/packages/quill/src/core/composition.ts b/packages/quill/src/core/composition.ts
@@ -1,6 +1,6 @@
-import Embed from '../blots/embed';
-import type Scroll from '../blots/scroll';
-import Emitter from './emitter';
+import Embed from '../blots/embed.js';
+import type Scroll from '../blots/scroll.js';
+import Emitter from './emitter.js';
 
 class Composition {
   isComposing = false;

diff --git a/packages/quill/src/core/editor.ts b/packages/quill/src/core/editor.ts
@@ -2,12 +2,12 @@ import { cloneDeep, isEqual, merge } from 'lodash-es';
 import { LeafBlot, EmbedBlot, Scope, ParentBlot } from 'parchment';
 import type { Blot } from 'parchment';
 import Delta, { AttributeMap, Op } from 'quill-delta';
-import Block, { BlockEmbed, bubbleFormats } from '../blots/block';
-import Break from '../blots/break';
-import CursorBlot from '../blots/cursor';
-import type Scroll from '../blots/scroll';
-import TextBlot, { escapeText } from '../blots/text';
-import { Range } from './selection';
+import Block, { BlockEmbed, bubbleFormats } from '../blots/block.js';
+import Break from '../blots/break.js';
+import CursorBlot from '../blots/cursor.js';
+import type Scroll from '../blots/scroll.js';
+import TextBlot, { escapeText } from '../blots/text.js';
+import { Range } from './selection.js';
 
 const ASCII = /^[ -~]*$/;
 

diff --git a/packages/quill/src/core/emitter.ts b/packages/quill/src/core/emitter.ts
@@ -1,6 +1,6 @@
 import { EventEmitter } from 'eventemitter3';
-import instances from './instances';
-import logger from './logger';
+import instances from './instances.js';
+import logger from './logger.js';
 
 const debug = logger('quill:events');
 const EVENTS = ['selectionchange', 'mousedown', 'mouseup', 'click'];

diff --git a/packages/quill/src/core/instances.ts b/packages/quill/src/core/instances.ts
@@ -1,3 +1,3 @@
-import type Quill from '../core';
+import type Quill from '../core.js';
 
 export default new WeakMap<Node, Quill>();
diff --git a/packages/quill/src/core/module.ts b/packages/quill/src/core/module.ts
@@ -1,4 +1,4 @@
-import type Quill from './quill';
+import type Quill from './quill.js';
 
 abstract class Module<T extends {} = {}> {
   static DEFAULTS = {};

diff --git a/packages/quill/src/core/quill.ts b/packages/quill/src/core/quill.ts
@@ -2,27 +2,27 @@ import { cloneDeep, merge } from 'lodash-es';
 import * as Parchment from 'parchment';
 import type { Op } from 'quill-delta';
 import Delta from 'quill-delta';
-import type { BlockEmbed } from '../blots/block';
-import type Block from '../blots/block';
-import type Scroll from '../blots/scroll';
-import type Clipboard from '../modules/clipboard';
-import type History from '../modules/history';
-import type Keyboard from '../modules/keyboard';
-import type Uploader from '../modules/uploader';
-import Editor from './editor';
-import Emitter from './emitter';
-import type { EmitterSource } from './emitter';
-import instances from './instances';
-import logger from './logger';
-import type { DebugLevel } from './logger';
-import Module from './module';
-import Selection, { Range } from './selection';
-import type { Bounds } from './selection';
-import Composition from './composition';
-import Theme from './theme';
-import type { ThemeConstructor } from './theme';
-import scrollRectIntoView from './utils/scrollRectIntoView';
-import type { Rect } from './utils/scrollRectIntoView';
+import type { BlockEmbed } from '../blots/block.js';
+import type Block from '../blots/block.js';
+import type Scroll from '../blots/scroll.js';
+import type Clipboard from '../modules/clipboard.js';
+import type History from '../modules/history.js';
+import type Keyboard from '../modules/keyboard.js';
+import type Uploader from '../modules/uploader.js';
+import Editor from './editor.js';
+import Emitter from './emitter.js';
+import type { EmitterSource } from './emitter.js';
+import instances from './instances.js';
+import logger from './logger.js';
+import type { DebugLevel } from './logger.js';
+import Module from './module.js';
+import Selection, { Range } from './selection.js';
+import type { Bounds } from './selection.js';
+import Composition from './composition.js';
+import Theme from './theme.js';
+import type { ThemeConstructor } from './theme.js';
+import scrollRectIntoView from './utils/scrollRectIntoView.js';
+import type { Rect } from './utils/scrollRectIntoView.js';
 
 const debug = logger('quill');
 

diff --git a/packages/quill/src/core/selection.ts b/packages/quill/src/core/selection.ts
@@ -1,10 +1,10 @@
 import { LeafBlot, Scope } from 'parchment';
 import { cloneDeep, isEqual } from 'lodash-es';
-import Emitter from './emitter';
-import type { EmitterSource } from './emitter';
-import logger from './logger';
-import type Cursor from '../blots/cursor';
-import type Scroll from '../blots/scroll';
+import Emitter from './emitter.js';
+import type { EmitterSource } from './emitter.js';
+import logger from './logger.js';
+import type Cursor from '../blots/cursor.js';
+import type Scroll from '../blots/scroll.js';
 
 const debug = logger('quill:selection');
 

diff --git a/packages/quill/src/core/theme.ts b/packages/quill/src/core/theme.ts
@@ -1,9 +1,9 @@
-import type Quill from '../core';
-import type Clipboard from '../modules/clipboard';
-import type History from '../modules/history';
-import type Keyboard from '../modules/keyboard';
-import type { ToolbarProps } from '../modules/toolbar';
-import type Uploader from '../modules/uploader';
+import type Quill from '../core.js';
+import type Clipboard from '../modules/clipboard.js';
+import type History from '../modules/history.js';
+import type Keyboard from '../modules/keyboard.js';
+import type { ToolbarProps } from '../modules/toolbar.js';
+import type Uploader from '../modules/uploader.js';
 
 export interface ThemeOptions {
   modules: Record<string, unknown> & {

diff --git a/packages/quill/src/formats/background.ts b/packages/quill/src/formats/background.ts
@@ -1,5 +1,5 @@
 import { ClassAttributor, Scope } from 'parchment';
-import { ColorAttributor } from './color';
+import { ColorAttributor } from './color.js';
 
 const BackgroundClass = new ClassAttributor('background', 'ql-bg', {
   scope: Scope.INLINE,

diff --git a/packages/quill/src/formats/blockquote.ts b/packages/quill/src/formats/blockquote.ts
@@ -1,4 +1,4 @@
-import Block from '../blots/block';
+import Block from '../blots/block.js';
 
 class Blockquote extends Block {
   static blotName = 'blockquote';

diff --git a/packages/quill/src/formats/bold.ts b/packages/quill/src/formats/bold.ts
@@ -1,4 +1,4 @@
-import Inline from '../blots/inline';
+import Inline from '../blots/inline.js';
 
 class Bold extends Inline {
   static blotName = 'bold';

diff --git a/packages/quill/src/formats/code.ts b/packages/quill/src/formats/code.ts
@@ -1,10 +1,10 @@
-import Block from '../blots/block';
-import Break from '../blots/break';
-import Cursor from '../blots/cursor';
-import Inline from '../blots/inline';
-import TextBlot, { escapeText } from '../blots/text';
-import Container from '../blots/container';
-import Quill from '../core/quill';
+import Block from '../blots/block.js';
+import Break from '../blots/break.js';
+import Cursor from '../blots/cursor.js';
+import Inline from '../blots/inline.js';
+import TextBlot, { escapeText } from '../blots/text.js';
+import Container from '../blots/container.js';
+import Quill from '../core/quill.js';
 
 class CodeBlockContainer extends Container {
   static create(value: string) {

diff --git a/packages/quill/src/formats/formula.ts b/packages/quill/src/formats/formula.ts
@@ -1,4 +1,4 @@
-import Embed from '../blots/embed';
+import Embed from '../blots/embed.js';
 
 class Formula extends Embed {
   static blotName = 'formula';

diff --git a/packages/quill/src/formats/header.ts b/packages/quill/src/formats/header.ts
@@ -1,4 +1,4 @@
-import Block from '../blots/block';
+import Block from '../blots/block.js';
 
 class Header extends Block {
   static blotName = 'header';