Better ESM imports

datocms · Jun 28, 2023 · adc3d20 · adc3d20
1 parent e53a6fb
commit adc3d20
Show file tree

Hide file tree

Showing 17 changed files with 613 additions and 625 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
       "js"
     ],
     "transform": {
-      "\\.(ts|tsx)$": "ts-jest"
+      "\\.(ts|tsx)$": ["ts-jest", { "useESM": true }]
     },
     "setupFiles": [
       "raf/polyfill"
@@ -133,7 +133,10 @@
     ],
     "snapshotSerializers": [
       "enzyme-to-json/serializer"
-    ]
+    ],
+    "moduleNameMapper": {
+      "^(\\.\\.?\\/.+)\\.js$": "$1"
+    }
   },
   "dependencies": {
     "datocms-listen": "^0.1.9",

diff --git a/rollup.config.ts b/rollup.config.ts
diff --git a/src/Image/__tests__/index.test.tsx b/src/Image/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
 import 'intersection-observer';
-import { Image } from '../index';
+import { Image } from '../index.js';
 import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
 
 const data = {

diff --git a/src/Image/index.tsx b/src/Image/index.tsx
@@ -9,7 +9,7 @@ import React, {
   useEffect,
   version,
 } from 'react';
-import { useInView } from './useInView';
+import { useInView } from './useInView.js';
 import { encode } from 'universal-base64';
 
 const isSsr = typeof window === 'undefined';
@@ -375,10 +375,10 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
           ...(layout === 'fill'
             ? absolutePositioning
             : layout === 'intrinsic'
-            ? { position: 'relative', width: '100%', maxWidth: width }
-            : layout === 'fixed'
-            ? { position: 'relative', width }
-            : { position: 'relative', width: '100%' }),
+              ? { position: 'relative', width: '100%', maxWidth: width }
+              : layout === 'fixed'
+                ? { position: 'relative', width }
+                : { position: 'relative', width: '100%' }),
           ...style,
         }}
       >

diff --git a/src/Image/useInView.tsx → src/Image/useInView.ts b/src/Image/useInView.tsx → src/Image/useInView.ts
diff --git a/src/Seo/__tests__/index.test.tsx b/src/Seo/__tests__/index.test.tsx
@@ -5,8 +5,8 @@ import {
   renderMetaTagsToString,
   toNextMetadata,
   toRemixMeta,
-} from '..';
-import { TitleMetaLinkTag } from '../types';
+} from '../index.js';
+import { TitleMetaLinkTag } from '../types.js';
 
 const metaTags: TitleMetaLinkTag[] = [
   {

diff --git a/src/Seo/index.ts b/src/Seo/index.ts
@@ -1,5 +1,5 @@
-export * from './types';
-export * from './remixUtils';
-export * from './nextUtils';
-export * from './renderMetaTags';
-export * from './renderMetaTagsToString';
+export * from './types.js';
+export * from './remixUtils.js';
+export * from './nextUtils.js';
+export * from './renderMetaTags.js';
+export * from './renderMetaTagsToString.js';
diff --git a/src/Seo/nextUtils.ts b/src/Seo/nextUtils.ts
@@ -8,7 +8,7 @@ import {
   isSeoLinkTag,
   isSeoMetaTag,
   isSeoOrFaviconTag,
-} from './types';
+} from './types.js';
 
 export type AppleIcon = {
   sizes: string;

diff --git a/src/Seo/remixUtils.ts b/src/Seo/remixUtils.ts
@@ -1,4 +1,4 @@
-import { TitleMetaLinkTag, SeoOrFaviconTag } from './types';
+import { TitleMetaLinkTag, SeoOrFaviconTag } from './types.js';
 
 interface RemixHtmlMetaDescriptor {
   [name: string]: string | string[];

diff --git a/src/Seo/renderMetaTags.tsx b/src/Seo/renderMetaTags.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TitleMetaLinkTag, SeoOrFaviconTag } from './types';
+import { TitleMetaLinkTag, SeoOrFaviconTag } from './types.js';
 
 export function renderMetaTags(
   data: TitleMetaLinkTag[] | SeoOrFaviconTag[],

diff --git a/src/Seo/renderMetaTagsToString.tsx b/src/Seo/renderMetaTagsToString.tsx
@@ -1,4 +1,4 @@
-import { TitleMetaLinkTag, SeoOrFaviconTag } from './types';
+import { TitleMetaLinkTag, SeoOrFaviconTag } from './types.js';
 
 export function renderMetaTagsToString(
   data: TitleMetaLinkTag[] | SeoOrFaviconTag[],

diff --git a/src/Seo/types.tsx → src/Seo/types.ts b/src/Seo/types.tsx → src/Seo/types.ts
diff --git a/src/StructuredText/__tests__/index.test.tsx b/src/StructuredText/__tests__/index.test.tsx
@@ -6,7 +6,7 @@ import {
   StructuredTextDocument,
   RenderError,
   renderNodeRule,
-} from '../index';
+} from '../index.js';
 import { isHeading } from 'datocms-structured-text-utils';
 import { renderMarkRule } from 'datocms-structured-text-generic-html-renderer';
 

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
-export * from './Image';
-export * from './Seo';
-export * from './useQuerySubscription';
-export * from './StructuredText';
-export * from './useSiteSearch';
+export * from './Image/index.js';
+export * from './Seo/index.js';
+export * from './useQuerySubscription/index.js';
+export * from './StructuredText/index.js';
+export * from './useSiteSearch/index.js';
diff --git a/tsconfig.esnext.json b/tsconfig.esnext.json
@@ -5,5 +5,6 @@
     "outDir": "./dist/esm",
     "declarationDir": "./dist/esm",
     "isolatedModules": true,
+    "moduleResolution": "NodeNext"
   },
-}
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,17 +4,29 @@
     "declarationDir": "./dist/types",
     "module": "commonjs",
     "noImplicitAny": true,
-    "lib": ["es2017", "es7", "es6", "dom"],
+    "lib": [
+      "es2017",
+      "es7",
+      "es6",
+      "dom"
+    ],
     "outDir": "./dist/cjs",
     "target": "es3",
-    "moduleResolution": "node",
+    "moduleResolution": "NodeNext",
     "jsx": "react",
     "resolveJsonModule": true,
     "strictNullChecks": true,
     "esModuleInterop": true,
     "skipLibCheck": false,
     "sourceMap": true
   },
-  "include": ["src/**/*", "test/jest-dom.d.ts", "react-extras.d.ts"],
-  "exclude": ["node_modules", "dist"]
+  "include": [
+    "src/**/*",
+    "test/jest-dom.d.ts",
+    "react-extras.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }