feat: package is now ESM (#549)

* feat: package is now ESM BREAKING CHANGE: this package is now ESM * fix: add missing file extension in relative file path import
octokit · Feb 25, 2024 · 8b126b5 · 8b126b5
1 parent 92eaa59
commit 8b126b5
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -47,8 +47,7 @@ Node
 Install with <code>npm install @octokit/graphql</code>
 
 ```js
-const { graphql } = require("@octokit/graphql");
-// or: import { graphql } from "@octokit/graphql";
+import { graphql } from "@octokit/graphql";
 ```
 
 </td></tr>
@@ -108,7 +107,7 @@ const { repository } = await graphqlWithAuth(`
 For more complex authentication strategies such as GitHub Apps or Basic, we recommend the according authentication library exported by [`@octokit/auth`](https://github.com/octokit/auth.js).
 
 ```js
-const { createAppAuth } = require("@octokit/auth-app");
+const { createAppAuth } = await import("@octokit/auth-app");
 const auth = createAppAuth({
   appId: process.env.APP_ID,
   privateKey: process.env.PRIVATE_KEY,
@@ -167,7 +166,7 @@ const { repository } = await graphql(
 ### Pass query together with headers and variables
 
 ```js
-const { graphql } = require("@octokit/graphql");
+import { graphql } from("@octokit/graphql");
 const { repository } = await graphql({
   query: `query lastIssues($owner: String!, $repo: String!, $num: Int = 3) {
     repository(owner: $owner, name: $repo) {
@@ -191,7 +190,7 @@ const { repository } = await graphql({
 ### Use with GitHub Enterprise
 
 ```js
-let { graphql } = require("@octokit/graphql");
+import { graphql } from "@octokit/graphql";
 graphql = graphql.defaults({
   baseUrl: "https://github-enterprise.acme-inc.com/api",
   headers: {
@@ -216,8 +215,8 @@ const { repository } = await graphql(`
 ### Use custom `@octokit/request` instance
 
 ```js
-const { request } = require("@octokit/request");
-const { withCustomRequest } = require("@octokit/graphql");
+import { request } from "@octokit/request";
+import { withCustomRequest } from "@octokit/graphql";
 
 let requestCounter = 0;
 const myRequest = request.defaults({
@@ -267,7 +266,7 @@ In case of a GraphQL error, `error.message` is set to a combined message describ
 All errors can be accessed at `error.errors`. `error.request` has the request options such as query, variables and headers set for easier debugging.
 
 ```js
-let { graphql, GraphqlResponseError } = require("@octokit/graphql");
+import { graphql, GraphqlResponseError } from "@octokit/graphql";
 graphql = graphql.defaults({
   headers: {
     authorization: `token secret123`,
@@ -314,7 +313,7 @@ try {
 A GraphQL query may respond with partial data accompanied by errors. In this case we will throw an error but the partial data will still be accessible through `error.data`
 
 ```js
-let { graphql } = require("@octokit/graphql");
+import { graphql } from "@octokit/graphql";
 graphql = graphql.defaults({
   headers: {
     authorization: `token secret123`,
@@ -379,10 +378,10 @@ try {
 You can pass a replacement for [the built-in fetch implementation](https://github.com/bitinn/node-fetch) as `request.fetch` option. For example, using [fetch-mock](http://www.wheresrhys.co.uk/fetch-mock/) works great to write tests
 
 ```js
-const assert = require("assert");
-const fetchMock = require("fetch-mock/es5/server");
+import assert from "assert";
+import fetchMock from "fetch-mock";
 
-const { graphql } = require("@octokit/graphql");
+import { graphql } from "@octokit/graphql";
 
 graphql("{ viewer { login } }", {
   headers: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,13 +4,14 @@
   "publishConfig": {
     "access": "public"
   },
+  "type": "module",
   "description": "GitHub GraphQL API client for browsers and Node",
   "scripts": {
     "build": "node scripts/build.mjs && tsc -p tsconfig.json",
     "lint": "prettier --check {src,test}/* README.md package.json",
     "lint:fix": "prettier --write {src,test}/* README.md package.json",
     "pretest": "npm run lint -s",
-    "test": "jest --coverage"
+    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" npx jest --coverage"
   },
   "repository": "github:octokit/graphql.js",
   "keywords": [
@@ -22,12 +23,12 @@
   "author": "Gregor Martynus (https://github.com/gr2m)",
   "license": "MIT",
   "dependencies": {
-    "@octokit/request": "^8.0.1",
+    "@octokit/request": "^9.0.0",
     "@octokit/types": "^12.0.0",
-    "universal-user-agent": "^6.0.0"
+    "universal-user-agent": "^7.0.0"
   },
   "devDependencies": {
-    "@octokit/tsconfig": "^2.0.0",
+    "@octokit/tsconfig": "^3.0.0",
     "@types/fetch-mock": "^7.2.5",
     "@types/jest": "^29.0.0",
     "@types/node": "^20.0.0",
@@ -37,15 +38,19 @@
     "jest": "^29.0.0",
     "prettier": "3.2.5",
     "semantic-release-plugin-update-version-in-files": "^1.0.0",
-    "ts-jest": "^29.0.0",
-    "typescript": "^5.0.0"
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.3.0"
   },
   "jest": {
+    "extensionsToTreatAsEsm": [
+      ".ts"
+    ],
     "transform": {
       "^.+\\.(ts|tsx)$": [
         "ts-jest",
         {
-          "tsconfig": "test/tsconfig.test.json"
+          "tsconfig": "test/tsconfig.test.json",
+          "useESM": true
         }
       ]
     },

diff --git a/scripts/build.mjs b/scripts/build.mjs
@@ -39,27 +39,14 @@ async function main() {
 
   const entryPoints = ["./pkg/dist-src/index.js"];
 
-  await Promise.all([
-    // Build the a CJS Node.js bundle
-    esbuild.build({
-      entryPoints,
-      outdir: "pkg/dist-node",
-      bundle: true,
-      platform: "node",
-      target: "node18",
-      format: "cjs",
-      ...sharedOptions,
-    }),
-    // Build an ESM browser bundle
-    esbuild.build({
-      entryPoints,
-      outdir: "pkg/dist-web",
-      bundle: true,
-      platform: "browser",
-      format: "esm",
-      ...sharedOptions,
-    }),
-  ]);
+  await esbuild.build({
+    entryPoints,
+    outdir: "pkg/dist-bundle",
+    bundle: true,
+    platform: "neutral",
+    format: "esm",
+    ...sharedOptions,
+  });
 
   // Copy the README, LICENSE to the pkg folder
   await copyFile("LICENSE", "pkg/LICENSE");
@@ -78,10 +65,12 @@ async function main() {
       {
         ...pkg,
         files: ["dist-*/**", "bin/**"],
-        main: "dist-node/index.js",
-        module: "dist-web/index.js",
-        types: "dist-types/index.d.ts",
-        source: "dist-src/index.js",
+       exports: {
+          ".": {
+            types: "./dist-types/index.d.ts",
+            import: "./dist-bundle/index.js",
+          },
+        },
         sideEffects: false,
       },
       null,

diff --git a/src/index.ts b/src/index.ts
@@ -13,8 +13,8 @@ export const graphql = withDefaults(request, {
   url: "/graphql",
 });
 
-export type { GraphQlQueryResponseData } from "./types";
-export { GraphqlResponseError } from "./error";
+export type { GraphQlQueryResponseData } from "./types.js";
+export { GraphqlResponseError } from "./error.js";
 
 export function withCustomRequest(customRequest: typeof request) {
   return withDefaults(customRequest, {

diff --git a/test/graphql.test.ts b/test/graphql.test.ts
@@ -1,10 +1,10 @@
 import fetchMock from "fetch-mock";
 import { getUserAgent } from "universal-user-agent";
-import * as OctokitTypes from "@octokit/types";
+import type * as OctokitTypes from "@octokit/types";
 
 import { graphql } from "../src";
 import { VERSION } from "../src/version";
-import { RequestParameters } from "../src/types";
+import type { RequestParameters } from "../src/types";
 
 const userAgent = `octokit-graphql.js/${VERSION} ${getUserAgent()}`;
 

diff --git a/test/tsconfig.test.json b/test/tsconfig.test.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "emitDeclarationOnly": false,
     "noEmit": true,
-    "verbatimModuleSyntax": false,
     "allowImportingTsExtensions": true
   },
   "include": ["src/**/*"]