fix: use extension in relative imports (better ESM compatibility) (#117)

Author: alanpoulain

.eslintrc.cjs

@@ -20,17 +20,30 @@ module.exports = {
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
     "prettier",
     "plugin:prettier/recommended"
   ],
 
   rules: {
     "prettier/prettier": "error",
+    "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/no-empty-interface": [
       "error",
       { allowSingleExtends: true }
     ],
     "@typescript-eslint/no-use-before-define": ["error", { functions: false }],
-    '@typescript-eslint/no-explicit-any': [0]
+    "@typescript-eslint/no-explicit-any": [0],
+    "import/no-named-as-default-member": [0],
+    // Waiting for https://github.com/import-js/eslint-plugin-import/issues/2111
+    //"import/extensions": ["error", "ignorePackages"]
+  },
+
+  settings: {
+    "import/resolver": {
+      typescript: true,
+      node: true
+    }
   }
 };

jest.config.ts

@@ -1,12 +1,19 @@
 import type { Config } from '@jest/types';
 
 const config: Config.InitialOptions = {
-  preset: 'ts-jest/presets/default-esm',
+  extensionsToTreatAsEsm: ['.ts'],
   setupFilesAfterEnv: ['./jest.setup.ts'],
-  globals: {
-    'ts-jest': {
-      useESM: true,
-    }
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  transform: {
+    '^.+\\.ts$': [
+      'ts-jest',
+      {
+        useESM: true,
+        tsconfig: './tsconfig.esm.json',
+      },
+    ],
   },
 };
 

jest.setup.ts

@@ -1,4 +1,3 @@
-import fetch from "jest-fetch-mock";
+import jestMock from "jest-fetch-mock";
 
-// @ts-ignore
-global.fetch = fetch;
+jestMock.enableMocks();

package.json

@@ -26,18 +26,20 @@
     "@types/jest": "^29.0.0",
     "@types/jsonld": "^1.5.0",
     "@types/lodash.get": "^4.4.0",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^8.0.0",
+    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-watch": "^8.0.0",
     "jest": "^29.0.0",
     "jest-fetch-mock": "^3.0.0",
     "openapi-types": "^12.0.0",
     "prettier": "^2.2.0",
-    "ts-jest": "^28.0.0",
+    "ts-jest": "^29.0.0",
     "ts-node": "^10.9.0",
     "typescript": "^4.1.0"
   },

src/Api.ts

@@ -1,6 +1,6 @@
-import { Resource } from "./Resource";
-import { assignSealed } from "./utils/assignSealed";
-import { Nullable } from "./types";
+import { assignSealed } from "./utils/assignSealed.js";
+import type { Resource } from "./Resource.js";
+import type { Nullable } from "./types.js";
 
 export interface ApiOptions
   extends Nullable<{

src/Field.ts

@@ -1,6 +1,6 @@
-import { assignSealed } from "./utils/assignSealed";
-import { Resource } from "./Resource";
-import { Nullable } from "./types";
+import { assignSealed } from "./utils/assignSealed.js";
+import type { Resource } from "./Resource.js";
+import type { Nullable } from "./types.js";
 
 export type FieldType =
   | "string"

src/Operation.ts

@@ -1,5 +1,5 @@
-import { assignSealed } from "./utils/assignSealed";
-import { Nullable } from "./types";
+import { assignSealed } from "./utils/assignSealed.js";
+import type { Nullable } from "./types.js";
 
 export type OperationType = "show" | "edit" | "delete" | "list" | "create";
 

src/Resource.ts

@@ -1,8 +1,8 @@
-import { Field } from "./Field";
-import { Operation } from "./Operation";
-import { Parameter } from "./Parameter";
-import { assignSealed } from "./utils/assignSealed";
-import { Nullable } from "./types";
+import { assignSealed } from "./utils/assignSealed.js";
+import type { Field } from "./Field.js";
+import type { Operation } from "./Operation.js";
+import type { Parameter } from "./Parameter.js";
+import type { Nullable } from "./types.js";
 
 export interface ResourceOptions
   extends Nullable<{

src/graphql/fetchQuery.ts

@@ -1,4 +1,4 @@
-import { ExecutionResult } from "graphql";
+import type { ExecutionResult } from "graphql";
 
 const setOptions = (query: string, options: RequestInit): RequestInit => {
   if (!options.method) {

src/graphql/index.ts

@@ -1,2 +1,2 @@
-export { default as fetchQuery } from "./fetchQuery";
-export { default as parseGraphQl } from "./parseGraphQl";
+export { default as fetchQuery } from "./fetchQuery.js";
+export { default as parseGraphQl } from "./parseGraphQl.js";

src/graphql/parseGraphQl.ts

@@ -1,13 +1,13 @@
-import {
-  getIntrospectionQuery,
+import { getIntrospectionQuery } from "graphql/utilities";
+import fetchQuery from "./fetchQuery.js";
+import { Api } from "../Api.js";
+import { Field } from "../Field.js";
+import { Resource } from "../Resource.js";
+import type {
   IntrospectionObjectType,
   IntrospectionOutputTypeRef,
   IntrospectionQuery,
 } from "graphql/utilities";
-import fetchQuery from "./fetchQuery";
-import { Api } from "../Api";
-import { Field } from "../Field";
-import { Resource } from "../Resource";
 
 const getRangeFromGraphQlType = (type: IntrospectionOutputTypeRef): string => {
   if (type.kind === "NON_NULL") {

src/hydra/fetchJsonLd.test.ts

@@ -1,5 +1,6 @@
-import { FetchMock } from "jest-fetch-mock";
-import fetchJsonLd, { ResponseDocument } from "./fetchJsonLd";
+import fetchJsonLd from "./fetchJsonLd.js";
+import type { FetchMock } from "jest-fetch-mock";
+import type { ResponseDocument } from "./fetchJsonLd.js";
 
 const fetchMock = fetch as FetchMock;
 

src/hydra/fetchJsonLd.ts

@@ -1,5 +1,5 @@
-import { Document, JsonLd, RemoteDocument } from "jsonld/jsonld-spec";
-import { RequestInitExtended } from "./types";
+import type { Document, JsonLd, RemoteDocument } from "jsonld/jsonld-spec";
+import type { RequestInitExtended } from "./types.js";
 
 const jsonLdMimeType = "application/ld+json";
 

src/hydra/fetchResource.ts

@@ -1,6 +1,6 @@
 import get from "lodash.get";
-import fetchJsonLd from "./fetchJsonLd";
-import type { IriTemplateMapping, RequestInitExtended } from "./types";
+import fetchJsonLd from "./fetchJsonLd.js";
+import type { IriTemplateMapping, RequestInitExtended } from "./types.js";
 
 export default (
   resourceUrl: string,

src/hydra/getParameters.ts

@@ -1,7 +1,7 @@
-import { Parameter } from "../Parameter";
-import { Resource } from "../Resource";
-import fetchResource from "./fetchResource";
-import { RequestInitExtended } from "./types";
+import { Parameter } from "../Parameter.js";
+import fetchResource from "./fetchResource.js";
+import type { Resource } from "../Resource.js";
+import type { RequestInitExtended } from "./types.js";
 
 export default (
   resource: Resource,

src/hydra/getType.ts

@@ -1,4 +1,4 @@
-import { FieldType } from "../Field";
+import type { FieldType } from "../Field.js";
 
 const getType = (id: string, range: string): FieldType => {
   switch (id) {

src/hydra/index.ts

@@ -1,5 +1,5 @@
-export { default as fetchJsonLd } from "./fetchJsonLd";
+export { default as fetchJsonLd } from "./fetchJsonLd.js";
 export {
   default as parseHydraDocumentation,
   getDocumentationUrlFromHeaders,
-} from "./parseHydraDocumentation";
+} from "./parseHydraDocumentation.js";

src/hydra/parseHydraDocumentation.test.ts

@@ -1,7 +1,7 @@
-import { FetchMock, MockParams } from "jest-fetch-mock";
-import parseHydraDocumentation from "./parseHydraDocumentation";
-import { Api } from "../Api";
-import parsedJsonReplacer from "../utils/parsedJsonReplacer";
+import parseHydraDocumentation from "./parseHydraDocumentation.js";
+import parsedJsonReplacer from "../utils/parsedJsonReplacer.js";
+import type { FetchMock, MockParams } from "jest-fetch-mock";
+import type { Api } from "../Api.js";
 
 const fetchMock = fetch as FetchMock;
 

src/hydra/parseHydraDocumentation.ts

@@ -1,20 +1,21 @@
 import jsonld from "jsonld";
 import get from "lodash.get";
-import { Api } from "../Api";
-import { Field } from "../Field";
-import { Resource } from "../Resource";
-import { Operation, OperationType } from "../Operation";
-import { Parameter } from "../Parameter";
-import fetchJsonLd from "./fetchJsonLd";
-import getParameters from "./getParameters";
-import getType from "./getType";
-import {
+import { Api } from "../Api.js";
+import { Field } from "../Field.js";
+import { Resource } from "../Resource.js";
+import { Operation } from "../Operation.js";
+import fetchJsonLd from "./fetchJsonLd.js";
+import getParameters from "./getParameters.js";
+import getType from "./getType.js";
+import type { OperationType } from "../Operation.js";
+import type { Parameter } from "../Parameter.js";
+import type {
   ExpandedClass,
   ExpandedDoc,
   Entrypoint,
   ExpandedRdfProperty,
   RequestInitExtended,
-} from "./types";
+} from "./types.js";
 
 /**
  * Extracts the short name of a resource.

src/index.ts

@@ -1,8 +1,8 @@
-export * from "./Api";
-export * from "./Field";
-export * from "./Operation";
-export * from "./Parameter";
-export * from "./Resource";
+export * from "./Api.js";
+export * from "./Field.js";
+export * from "./Operation.js";
+export * from "./Parameter.js";
+export * from "./Resource.js";
 export * from "./graphql";
 export * from "./hydra";
 export * from "./openapi3";

src/openapi3/getType.ts

@@ -1,5 +1,5 @@
 import inflection from "inflection";
-import { FieldType } from "../Field";
+import type { FieldType } from "../Field.js";
 
 const getType = (openApiType: string, format?: string): FieldType => {
   if (format) {

src/openapi3/handleJson.test.ts

@@ -1,6 +1,6 @@
-import { OpenAPIV3 } from "openapi-types";
-import handleJson from "./handleJson";
-import parsedJsonReplacer from "../utils/parsedJsonReplacer";
+import handleJson from "./handleJson.js";
+import parsedJsonReplacer from "../utils/parsedJsonReplacer.js";
+import type { OpenAPIV3 } from "openapi-types";
 
 const openApi3Definition: OpenAPIV3.Document = {
   openapi: "3.0.2",

src/openapi3/handleJson.ts

@@ -1,13 +1,14 @@
-import { OpenAPIV3 } from "openapi-types";
 import { parse as dereference } from "jsonref";
 import get from "lodash.get";
 import inflection from "inflection";
-import { Field } from "../Field";
-import { Operation, OperationType } from "../Operation";
-import { Parameter } from "../Parameter";
-import { Resource } from "../Resource";
-import getResourcePaths from "../utils/getResources";
-import getType from "./getType";
+import { Field } from "../Field.js";
+import { Operation } from "../Operation.js";
+import { Parameter } from "../Parameter.js";
+import { Resource } from "../Resource.js";
+import getResourcePaths from "../utils/getResources.js";
+import getType from "./getType.js";
+import type { OpenAPIV3 } from "openapi-types";
+import type { OperationType } from "../Operation.js";
 
 const isRef = <T>(maybeRef: T | OpenAPIV3.ReferenceObject): maybeRef is T =>
   !("$ref" in maybeRef);

src/openapi3/index.ts

@@ -1,2 +1,2 @@
-export { default as parseOpenApi3Documentation } from "./parseOpenApi3Documentation";
-export * from "./parseOpenApi3Documentation";
+export { default as parseOpenApi3Documentation } from "./parseOpenApi3Documentation.js";
+export * from "./parseOpenApi3Documentation.js";

src/openapi3/parseOpenApi3Documentation.ts

@@ -1,6 +1,6 @@
-import { OpenAPIV3 } from "openapi-types";
-import { Api } from "../Api";
-import handleJson, { removeTrailingSlash } from "./handleJson";
+import { Api } from "../Api.js";
+import handleJson, { removeTrailingSlash } from "./handleJson.js";
+import type { OpenAPIV3 } from "openapi-types";
 
 export interface ParsedOpenApi3Documentation {
   api: Api;

src/swagger/handleJson.test.ts

@@ -1,6 +1,6 @@
-import { OpenAPIV2 } from "openapi-types";
-import { Field } from "../Field";
-import handleJson from "./handleJson";
+import handleJson from "./handleJson.js";
+import type { OpenAPIV2 } from "openapi-types";
+import type { Field } from "../Field.js";
 
 const swaggerApiDefinition: OpenAPIV2.Document = {
   swagger: "2.0",

src/swagger/handleJson.ts

@@ -1,10 +1,10 @@
-import { OpenAPIV2 } from "openapi-types";
 import get from "lodash.get";
 import inflection from "inflection";
-import { Field } from "../Field";
-import { Resource } from "../Resource";
-import getResourcePaths from "../utils/getResources";
-import getType from "../openapi3/getType";
+import { Field } from "../Field.js";
+import { Resource } from "../Resource.js";
+import getResourcePaths from "../utils/getResources.js";
+import getType from "../openapi3/getType.js";
+import type { OpenAPIV2 } from "openapi-types";
 
 export const removeTrailingSlash = (url: string): string => {
   if (url.endsWith("/")) {

src/swagger/index.ts

@@ -1,2 +1,2 @@
-export { default as parseSwaggerDocumentation } from "./parseSwaggerDocumentation";
-export * from "./parseSwaggerDocumentation";
+export { default as parseSwaggerDocumentation } from "./parseSwaggerDocumentation.js";
+export * from "./parseSwaggerDocumentation.js";

src/swagger/parseSwaggerDocumentation.ts

@@ -1,6 +1,6 @@
-import { OpenAPIV2 } from "openapi-types";
-import { Api } from "../Api";
-import handleJson, { removeTrailingSlash } from "./handleJson";
+import { Api } from "../Api.js";
+import handleJson, { removeTrailingSlash } from "./handleJson.js";
+import type { OpenAPIV2 } from "openapi-types";
 
 export interface ParsedSwaggerDocumentation {
   api: Api;

src/utils/getResources.test.ts

@@ -1,4 +1,4 @@
-import getResourcePaths from "./getResources";
+import getResourcePaths from "./getResources.js";
 
 test("should get resource paths", () => {
   const paths = {

src/utils/getResources.ts

@@ -1,4 +1,4 @@
-import { OpenAPIV2, OpenAPIV3 } from "openapi-types";
+import type { OpenAPIV2, OpenAPIV3 } from "openapi-types";
 
 const getResources = (
   paths: OpenAPIV2.PathsObject | OpenAPIV3.PathsObject