Merge #1740

1740: Switch from rollup to vite, from commonjs to ecmascript modules r=Strift a=flevi29

# Pull Request

## Related issue
Fixes #1626
~~Waiting on #1739~~

## What does this PR do?
- switches bundler from [`rollup`](https://rollupjs.org/) to [`vite`](https://vite.dev/), which internally uses `rollup`, but makes things a lot shorter and simpler
  - removes the need for separate `vitest.config.js`
  - removes the need for [`scripts/file-size.js`](https://github.com/meilisearch/meilisearch-js/blob/main/scripts/file-size.js), packages `kleur`, `pretty-bytes`, `brotli-size`, `gzip-size`, as it prints sizes by default
  - removes the need for all of the `rollup` plugins and dependencies (``@rollup/plugin-terser`,` ``@babel/core`,` ``@babel/preset-env`,` ``@rollup/plugin-babel`,` ``@rollup/plugin-commonjs`,` ``@rollup/plugin-json`,` ``@rollup/plugin-node-resolve`,` `rollup-plugin-typescript2`)
  - removes the need for `shx` package, and `cleanup` script, as it clears `dist` itself
- switches from CJS to ESM ([`"type": "module"`](https://nodejs.org/api/packages.html#type))
  - every `.js` project file now needs to be written in ESM syntax, the web standard syntax
  - TypeScript files were already written in ESM syntax, so this just makes things more consistent
- updates TypeScript and makes some changes to `tsconfig.json` according to https://www.typescriptlang.org/docs/handbook/modules/guides/choosing-compiler-options.html#im-writing-a-library
  - is now used to transpile ESM version of this package
  - most importantly sets `module` to `node16` and `verbatimModuleSyntax` to `true`, this requires changes to all TypeScript files so they may be compatible with the web standard ESM
    - all imported files now require a `.js` extension
    - there is no more support for `index` directory imports, as that is only a Node.js thing, the web doesn't support it
    - when importing types, we need to explicitly specify that we're doing so with the `type` keyword

> [!WARNING]
> - DEPRECATE default export #1789
> - DEPRECATION: UMD bundle will no longer extend `window` with the exports in the future, instead it will only extend it with property `meilisearch` which contains the exports #1806
> ### Old
> ```html
> <script>
>   const client = new MeiliSearch(/* ... */);
> </script>
> ```
> ### New
> ```html
> <script>
>   const client = new meilisearch.MeiliSearch(/* ... */);
> </script>
> ```

## PR checklist
Please check if your PR fulfills the following requirements:
- [x] Does this PR fix an existing issue, or have you listed the changes applied in the PR description (and why they are needed)?
- [x] Have you read the contributing guidelines?
- [x] Have you made sure that the title is accurate and descriptive of the changes?

Thank you so much for contributing to Meilisearch!


Co-authored-by: F. Levi <[email protected]>

Author: meili-bors[bot]

.prettierrc.js

@@ -1,6 +1,6 @@
 // https://prettier.io/docs/en/options.html
 
-module.exports = {
+export default {
   plugins: ["./node_modules/prettier-plugin-jsdoc/dist/index.js"],
   // https://github.com/hosseinmd/prettier-plugin-jsdoc#tsdoc
   tsdoc: true,

README.md

@@ -69,6 +69,10 @@ Instead of using a package manager, you may also import the library directly int
 
 After installing `meilisearch-js`, you must import it into your application. There are many ways of doing that depending on your development environment.
 
+> [!WARNING]
+> - [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) is deprecated and will be removed in a future version https://github.com/meilisearch/meilisearch-js/issues/1789
+> - exports will stop being directly available on the global object (usually `window`) https://github.com/meilisearch/meilisearch-js/issues/1806
+
 #### `import` syntax <!-- omit in toc -->
 
 Usage in an ES module environment:
@@ -89,7 +93,7 @@ Usage in an HTML (or alike) file:
 ```html
 <script src='https://cdn.jsdelivr.net/npm/meilisearch@latest/dist/bundles/meilisearch.umd.js'></script>
 <script>
-  const client = new MeiliSearch({
+  const client = new meilisearch.MeiliSearch({
     host: 'http://127.0.0.1:7700',
     apiKey: 'masterKey',
   })

docker-compose.yml

@@ -16,7 +16,7 @@ services:
   meilisearch:
     image: getmeili/meilisearch:latest
     ports:
-      - "7700"
+      - "7700:7700"
     environment:
       - MEILI_MASTER_KEY=masterKey
       - MEILI_NO_ANALYTICS=true

eslint.config.js

@@ -1,16 +1,16 @@
-const eslint = require("@eslint/js");
-const tseslint = require("typescript-eslint");
-const tsdoc = require("eslint-plugin-tsdoc");
-const vitest = require("@vitest/eslint-plugin");
-const globals = require("globals");
-const prettier = require("eslint-config-prettier");
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import tsdoc from "eslint-plugin-tsdoc";
+import vitest from "@vitest/eslint-plugin";
+import globals from "globals";
+import prettier from "eslint-config-prettier";
 
-module.exports = tseslint.config([
+export default tseslint.config([
   { ignores: ["dist/", "tests/env/", "coverage/", "playgrounds/", "docs/"] },
   eslint.configs.recommended,
   {
     files: ["**/*.js"],
-    languageOptions: { sourceType: "commonjs", globals: globals.node },
+    languageOptions: { globals: globals.node },
   },
   // TSDoc
   {
@@ -25,7 +25,7 @@ module.exports = tseslint.config([
     languageOptions: {
       parserOptions: {
         projectService: true,
-        tsconfigRootDir: __dirname,
+        tsconfigRootDir: import.meta.dirname,
       },
     },
     rules: {

package.json

@@ -16,25 +16,20 @@
     "qdequele <[email protected]>"
   ],
   "license": "MIT",
-  "main": "./dist/bundles/meilisearch.cjs",
-  "module": "./dist/bundles/meilisearch.mjs",
-  "typings": "./dist/types/index.d.ts",
-  "types": "./dist/types/index.d.ts",
-  "jsdelivr": "./dist/bundles/meilisearch.umd.js",
-  "unpkg": "./dist/bundles/meilisearch.umd.js",
+  "type": "module",
+  "main": "./dist/umd/index.min.js",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "browser": "./dist/bundles/meilisearch.umd.js",
-      "import": "./dist/bundles/meilisearch.mjs",
-      "require": "./dist/bundles/meilisearch.cjs",
-      "default": "./dist/bundles/meilisearch.umd.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/umd/index.min.js"
     },
     "./token": {
       "types": "./dist/types/token.d.ts",
-      "import": "./dist/bundles/token.mjs",
-      "require": "./dist/bundles/token.cjs",
-      "default": "./dist/bundles/token.cjs"
+      "import": "./dist/esm/token.js",
+      "require": "./dist/cjs/token.cjs",
+      "default": "./dist/cjs/token.cjs"
     }
   },
   "sideEffects": false,
@@ -43,32 +38,28 @@
     "url": "https://github.com/meilisearch/meilisearch-js"
   },
   "scripts": {
-    "playground:javascript": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript start",
-    "cleanup": "shx rm -rf dist/",
-    "build": "yarn cleanup && rollup -c && rollup -c --environment NODE_ENV:production",
+    "playground:javascript": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript dev",
     "build:docs": "typedoc",
-    "watch": "yarn cleanup && rollup -c --watch",
-    "postbuild": "yarn size && yarn typingsheader",
+    "build": "vite build && tsc -p tsconfig.build.json && vite --mode production-umd build",
+    "postbuild": "node scripts/build.js",
     "test": "vitest run --coverage",
-    "types:watch": "nodemon --config nodemon.json",
-    "types": "yarn tsc",
-    "test:env:browser": "yarn build && yarn --cwd tests/env/express && yarn --cwd tests/env/express test",
+    "types": "tsc -p tsconfig.json --noEmit",
+    "types:watch": "yarn types --watch",
+    "test:env:browser": "yarn build && node scripts/copy-umd-file.js --to ./tests/env/express/public && yarn --cwd tests/env/express && yarn --cwd tests/env/express test",
     "test:watch": "vitest watch",
     "test:coverage": "yarn test",
     "test:ci": "yarn test",
     "test:env": "yarn build && yarn test:env:nodejs && yarn test:env:esm && yarn test:env:node-ts",
     "test:env:node-ts": "yarn --cwd tests/env/typescript-node start",
-    "test:env:nodejs": "yarn build && node tests/env/node/index.js && node tests/env/node/getting_started.js",
+    "test:env:nodejs": "yarn build && node tests/env/node/index.cjs && node tests/env/node/getting_started.cjs",
     "test:env:esm": "yarn --cwd tests/env/esm && yarn --cwd tests/env/esm start",
     "test:env:nitro-app": "yarn build && yarn --cwd tests/env/nitro-app test",
-    "size": "node scripts/file-size ./dist/bundles/meilisearch.mjs ./dist/bundles/meilisearch.umd.min.js",
-    "style": "yarn fmt && yarn lint",
-    "style:fix": "yarn fmt:fix && yarn lint:fix",
     "fmt": "prettier -c ./**/*.{js,ts}",
     "fmt:fix": "prettier -w ./**/*.{js,ts}",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "typingsheader": "node scripts/build.js"
+    "style": "yarn fmt && yarn lint",
+    "style:fix": "yarn fmt:fix && yarn lint:fix"
   },
   "files": [
     "src",
@@ -86,35 +77,23 @@
     ]
   },
   "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
     "@eslint/js": "^9.16.0",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "28.0.0",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "15.3.0",
     "@types/eslint__js": "^8.42.3",
     "@vitest/coverage-v8": "2.0.5",
-    "@vitest/eslint-plugin": "^1.1.4",
     "@types/node": "^22.10.1",
-    "brotli-size": "^4.0.0",
     "eslint": "^9.16.0",
+    "eslint-plugin-tsdoc": "^0.4.0",
+    "@vitest/eslint-plugin": "^1.1.23",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-tsdoc": "^0.3.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "@typescript-eslint/utils": "^8.19.0",
     "globals": "^15.14.0",
-    "gzip-size": "^6.0.0",
-    "kleur": "^4.1.5",
     "lint-staged": "15.3.0",
     "nodemon": "^3.1.9",
     "prettier": "^3.4.2",
     "prettier-plugin-jsdoc": "^1.3.0",
-    "pretty-bytes": "^5.6.0",
-    "rollup": "^4.22.5",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "shx": "^0.3.2",
     "typedoc": "^0.27.6",
-    "typescript": "^5.4.5",
     "typescript-eslint": "^8.19.0",
     "vitest": "2.0.5"
   },

rollup.config.js

@@ -1,12 +1,12 @@
 /** This file only purpose is to execute any build related tasks */
 
-const { resolve, normalize } = require("node:path");
-const { readFileSync, writeFileSync } = require("node:fs");
+import { resolve, normalize } from "node:path";
+import { fileURLToPath } from "node:url";
+import { readFileSync, writeFileSync } from "node:fs";
+import pkg from "../package.json" with { type: "json" };
 
-const pkg = require("../package.json");
-
-const ROOT = resolve(__dirname, "..");
-const TYPES_ROOT_FILE = resolve(ROOT, normalize(pkg.typings));
+const ROOT = fileURLToPath(new URL("..", import.meta.url));
+const TYPES_ROOT_FILE = resolve(ROOT, normalize(pkg.exports["."].types));
 
 main();
 

scripts/build.js

@@ -0,0 +1,20 @@
+import { parseArgs } from "node:util";
+import pkg from "../package.json" with { type: "json" };
+import { fileURLToPath } from "node:url";
+import { resolve, dirname, join, basename } from "node:path";
+import { copyFile } from "node:fs/promises";
+
+const {
+  values: { to },
+} = parseArgs({ options: { to: { type: "string" } } });
+
+if (to === undefined) {
+  throw new Error("required argument `to` missing");
+}
+
+const umdAbsolutePath = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  join("..", pkg.main),
+);
+
+await copyFile(umdAbsolutePath, join(to, basename(pkg.main)));