Feature: Vite

packages/quill/package.json

@@ -4,60 +4,88 @@
   "description": "Your powerful, rich text editor",
   "author": "Jason Chen <jhchen7@gmail.com>",
   "homepage": "https://quilljs.com",
-  "main": "quill.js",
+  "main": "quill.umd.js",
+  "module": "main.js",
+  "types": "main.d.ts",
   "type": "module",
+  "exports": {
+    ".": {
+      "import": "./main.js",
+      "require": "./quill.umd.js"
+    },
+    "./assets/*": {
+      "import": "./assets/*",
+      "require": "./assets/*"
+    },
+    "./blots/*": {
+      "import": "./blots/*.js",
+      "require": "./blots/*.js"
+    },
+    "./core/*": {
+      "import": "./core/*.js",
+      "require": "./core/*.js"
+    },
+    "./fonts/*": {
+      "import": "./fonts/*",
+      "require": "./fonts/*"
+    },
+    "./formats/*": {
+      "import": "./formats/*.js",
+      "require": "./formats/*.js"
+    },
+    "./modules/*": {
+      "import": "./modules/*.js",
+      "require": "./modules/*.js"
+    },
+    "./themes/*": {
+      "import": "./themes/*.js",
+      "require": "./themes/*.js"
+    },
+    "./ui/*": {
+      "import": "./ui/*.js",
+      "require": "./ui/*.js"
+    },
+    "./css/*.css": "./quill.*.css",
+    "./*": "./*"
+  },
   "dependencies": {
     "eventemitter3": "^5.0.1",
     "lodash-es": "^4.17.21",
     "parchment": "^3.0.0",
     "quill-delta": "^5.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-typescript": "^7.23.3",
     "@playwright/test": "1.44.1",
     "@types/highlight.js": "^9.12.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.10.0",
-    "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "@vitest/browser": "^1.1.3",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-transform-define": "^2.1.4",
-    "css-loader": "^6.10.0",
-    "eslint": "^8.57.0",
+    "@types/micromatch": "^4.0.9",
+    "@types/node": "^20.19.4",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitest/browser": "^3.2.4",
+    "ajv": "^8.17.1",
+    "chalk": "^5.4.1",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-import-resolver-webpack": "^0.13.8",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-import-resolver-typescript": "^3.10.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.1",
     "eslint-plugin-require-extensions": "^0.1.3",
     "glob": "10.4.2",
-    "highlight.js": "^9.18.1",
-    "html-loader": "^4.2.0",
-    "html-webpack-plugin": "^5.5.3",
+    "highlight.js": "^10.7.3",
     "jsdom": "^22.1.0",
-    "mini-css-extract-plugin": "^2.7.6",
-    "prettier": "^3.0.3",
-    "source-map-loader": "^5.0.0",
-    "style-loader": "^3.3.3",
+    "micromatch": "^4.0.8",
+    "prettier": "^3.6.2",
     "stylus": "^0.62.0",
-    "stylus-loader": "^7.1.3",
-    "svgo": "^3.2.0",
-    "terser-webpack-plugin": "^5.3.9",
-    "transpile-webpack-plugin": "^1.1.3",
-    "ts-loader": "^9.5.1",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.4.2",
-    "vitest": "^1.1.3",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
-    "webpack-merge": "^5.10.0"
+    "tsx": "^4.20.3",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-html-resolve-alias": "^2.0.0",
+    "vite-plugin-static-copy": "^3.1.0",
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "^3.2.4"
   },
   "license": "BSD-3-Clause",
   "repository": {
@@ -75,7 +103,7 @@
     "defaults"
   ],
   "scripts": {
-    "build": "./scripts/build production",
+    "build": "npx tsx scripts/build.ts",
     "lint": "run-s lint:*",
     "lint:eslint": "eslint .",
     "lint:tsc": "tsc --noEmit --skipLibCheck",

packages/quill/playwright.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
   use: {
     actionTimeout: 0,
     trace: 'on-first-retry',
-    baseURL: `https://127.0.0.1:${port}`,
+    baseURL: `http://localhost:${port}`,
     ignoreHTTPSErrors: true,
   },
   projects: [
@@ -34,7 +34,7 @@ export default defineConfig({
     { name: 'Safari', use: { ...devices['Desktop Safari'] } },
   ],
   webServer: {
-    command: `npx webpack serve --config test/e2e/__dev_server__/webpack.config.cjs --env port=${port}`,
+    command: `vite test/e2e/__dev_server__ --port ${port}`,
     port,
     ignoreHTTPSErrors: true,
     reuseExistingServer: !process.env.CI,

packages/quill/scripts/build.ts

@@ -0,0 +1,87 @@
+import { build } from 'vite';
+import { resolve, join } from 'path';
+import esmConfig from '../vite.config.esm.js';
+import umdConfigs from '../vite.config.umd.js';
+const __dirname = import.meta.dirname || new URL('.', import.meta.url).pathname;
+import fs from 'fs';
+import c from 'chalk';
+
+const configs = [...umdConfigs, esmConfig];
+const filesToCopy = ['package.json', 'README.md', 'LICENSE'];
+
+const dist = resolve(__dirname, '../dist');
+const l = console.log;
+
+async function buildAll() {
+  const dists = [];
+
+  for (const [i, config] of configs.entries()) {
+    await build({
+      ...config,
+      build: {
+        ...config.build,
+        outDir: `${dist}/${i}`,
+      },
+    });
+
+    dists.push(`${dist}/${i}`);
+  }
+
+  return dists;
+}
+
+function mergeDirs(source: string, dest: string) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const items = fs.readdirSync(source);
+
+  for (const item of items) {
+    const sourcePath = join(source, item);
+    const destPath = join(dest, item);
+
+    if (fs.lstatSync(sourcePath).isDirectory()) {
+      mergeDirs(sourcePath, destPath);
+    } else {
+      fs.copyFileSync(sourcePath, destPath);
+    }
+  }
+}
+
+// clean up the dist directory if it exists
+if (fs.existsSync(dist)) {
+  fs.rmSync(dist, { recursive: true, force: true });
+}
+
+buildAll()
+  .then((dists) => {
+    l('\n');
+    l(c.green('Build completed successfully. Merging directories...'));
+
+    const dest = dist;
+
+    for (const source of dists) {
+      mergeDirs(source, dest);
+      fs.rmSync(source, { recursive: true, force: true });
+    }
+
+    l(
+      c.blue('Directories merged successfully. Build output is in:'),
+      c.underline(dest),
+    );
+
+    // Copy additional files to the dist directory
+    for (const file of filesToCopy) {
+      const sourcePath = resolve(__dirname, `../${file}`);
+      fs.copyFileSync(sourcePath, join(dest, file));
+
+      l(c.yellow(`Copied ${file} to dist directory.`));
+    }
+
+    l(c.green('All files copied successfully. Build is ready! 🎉'));
+  })
+  .catch((error) => {
+    l(c.red('Build failed:', error));
+    process.exit(1);
+  });

packages/quill/scripts/esmInputBuilder.ts

@@ -0,0 +1,82 @@
+import fs from 'fs';
+import { resolve } from 'path';
+import micromatch from 'micromatch';
+
+type SkipPattern = string | string[];
+interface ScanDirectoryOptions {
+  dirPrefix?: string;
+  skip?: SkipPattern;
+  skipInDest?: boolean;
+}
+
+export default class EsmInputBuilder {
+  private input: Record<string, string> = {};
+  private validFileExts = ['.ts'];
+  private stripFileExts = ['.ts'];
+
+  constructor(input: Record<string, string> = {}) {
+    this.input = input;
+  }
+
+  scanDirectory(
+    dir: string,
+    options: ScanDirectoryOptions = {},
+  ): EsmInputBuilder {
+    const { dirPrefix = '', skip = [], skipInDest = false } = options;
+
+    const fileDir = [dirPrefix, !skipInDest ? dir.split('/').pop() : '']
+      .filter(Boolean)
+      .join('/');
+
+    fs.readdirSync(dir, { withFileTypes: true }).forEach((dirent) => {
+      if (micromatch.some([fileDir, dirent.name], skip)) {
+        return;
+      }
+
+      if (dirent.isDirectory()) {
+        this.scanDirectory(resolve(dir, dirent.name), {
+          dirPrefix: fileDir,
+          skip,
+        });
+      } else if (dirent.isFile() && this.isValidFileExtension(dirent.name)) {
+        const key = `${fileDir}/${this.stripFileExtension(dirent.name)}`;
+        this.addFile(key, resolve(dir, dirent.name));
+      }
+    });
+
+    return this;
+  }
+
+  addFile(key: string, path: string) {
+    key = key.startsWith('/') ? key.slice(1) : key;
+
+    if (this.input[key]) {
+      return;
+    }
+
+    const pathIncluded = Object.values(this.input).some(
+      (filePath) => filePath === path,
+    );
+    if (pathIncluded) {
+      return;
+    }
+
+    this.input[key] = path;
+  }
+
+  build(): Record<string, string> {
+    const input = { ...this.input };
+    this.input = {};
+    return input;
+  }
+
+  isValidFileExtension(fileName: string): boolean {
+    return this.validFileExts.some((ext) => fileName.endsWith(ext));
+  }
+
+  stripFileExtension(fileName: string): string {
+    return this.stripFileExts.reduce((name, ext) => {
+      return name.endsWith(ext) ? name.slice(0, -ext.length) : name;
+    }, fileName);
+  }
+}

packages/quill/src/blots/block.ts

@@ -130,7 +130,7 @@ Block.allowedChildren = [Break, Inline, EmbedBlot, TextBlot];
 
 class BlockEmbed extends EmbedBlot {
   attributes: AttributorStore;
-  domNode: HTMLElement;
+  declare domNode: HTMLElement;
 
   attach() {
     super.attach();