"moduleResolution": "nodenext" (#187)

* Configuration changes

* Add .js extension to all imports

* Fix rollup config

* Fix mistake

* Switch from Jest to Vitest for ESM compatibility

* tweak

* Bump version to 3.3.0

Author: srmagura

.config/jest.config.cjs

@@ -6,14 +6,12 @@ module.exports = {
     'airbnb',
     'airbnb-typescript',
     'airbnb/hooks',
-    'plugin:jest/recommended',
-    'plugin:jest-dom/recommended',
     'plugin:testing-library/react',
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'prettier',
   ],
-  plugins: ['@typescript-eslint', 'jest', 'jest-dom', 'testing-library'],
+  plugins: ['@typescript-eslint', 'testing-library'],
   ignorePatterns: ['*.js', '*.cjs', 'dist/', 'vite.config.ts'],
   settings: {
     'testing-library/custom-renders': 'off',

.eslintrc.cjs

@@ -18,4 +18,4 @@ jobs:
       - name: Test
         run: yarn test
       - name: Lint
-        run: yarn run lint
+        run: yarn lint

.github/workflows/ci.yml

@@ -1,3 +1,9 @@
+## 3.3.0
+
+### Features
+
+- The library is now compatible with TypeScript's `"moduleResolution": "nodenext"` compiler option. (#187)
+
 ## 3.2.1
 
 ### Bug Fixes
@@ -12,8 +18,7 @@
 
 ### Features
 
-- The skeleton animation no longer plays for users who have enabled the
-  `prefers-reduced-motion` accessibility setting.
+- The skeleton animation no longer plays for users who have enabled the `prefers-reduced-motion` accessibility setting.
 
 ### Thanks!
 
@@ -23,8 +28,7 @@
 
 ### Chores
 
-- Add the `'use client'` directive to make the library compatible with React
-  Server Components and Next.js 13. (#162)
+- Add the `'use client'` directive to make the library compatible with React Server Components and Next.js 13. (#162)
 
 ### Thanks!
 
@@ -34,8 +38,7 @@
 
 ### Features
 
-- If `count` is set to a decimal number like 3.5, the component will display 3
-  full-width skeletons followed by 1 half-width skeleton. (#136)
+- If `count` is set to a decimal number like 3.5, the component will display 3 full-width skeletons followed by 1 half-width skeleton. (#136)
 
 ## 3.0.3
 
@@ -53,10 +56,7 @@
 
 - Fix explicitly setting a `Skeleton` prop to undefined, like `<Skeleton highlightColor={undefined}>`, blocking style options from the `SkeletonTheme`
   (#128)
-  - If you were relying on this behavior to block values from the
-    `SkeletonTheme`, you can render a nested `SkeletonTheme` to override a
-    theme defined higher up in the component tree, OR explicitly set one or
-    more `Skeleton` props back to their default values e.g. `<Skeleton baseColor="#ebebeb" />`
+  - If you were relying on this behavior to block values from the `SkeletonTheme`, you can render a nested `SkeletonTheme` to override a theme defined higher up in the component tree, OR explicitly set one or more `Skeleton` props back to their default values e.g. `<Skeleton baseColor="#ebebeb" />`
 
 ## 3.0.1
 
@@ -81,21 +81,17 @@
 ### Breaking Changes
 
 - Drop Emotion dependency, add CSS file that must be imported
-  - Dropping Emotion avoids conflicts when multiple Emotion versions are used
-    on one page and reduces bundle size
+  - Dropping Emotion avoids conflicts when multiple Emotion versions are used on one page and reduces bundle size
 - Reimplement `SkeletonTheme` using React context
-  - The old `SkeletonTheme` rendered a `<div>` which was undesirable in many
-    cases. The new `SkeletonTheme` does not render any DOM elements.
-  - The old `SkeletonTheme` did not work if the `Skeleton` was rendered in a
-    portal. The new `SkeletonTheme` does work in this case.
+  - The old `SkeletonTheme` rendered a `<div>` which was undesirable in many cases. The new `SkeletonTheme` does not render any DOM elements.
+  - The old `SkeletonTheme` did not work if the `Skeleton` was rendered in a portal. The new `SkeletonTheme` does work in this case.
 - `SkeletonTheme`: rename the `color` prop to `baseColor`
 - Convert to TypeScript
 - Publish code as ES2018 to reduce bundle size
 - Require React >= 16.8.0
 - Drop Internet Explorer support
 
-If you need to support Internet Explorer or use an old version of React, please
-continue to use `react-loading-skeleton` v2.
+If you need to support Internet Explorer or use an old version of React, please continue to use `react-loading-skeleton` v2.
 
 ### Features
 
@@ -111,15 +107,11 @@ continue to use `react-loading-skeleton` v2.
 ### Other Changes
 
 - Optimize animation performance:
-  - The old animation animated the `background-position` property which made
-    the browser repaint the gradient on every frame.
-  - The new animation animates the `transform` of a pseudoelement. This
-    avoids repaints and results in an observable decrease in CPU usage.
-- No longer require `width` and `height` to be set for the `circle` prop to
-  work
+  - The old animation animated the `background-position` property which made the browser repaint the gradient on every frame.
+  - The new animation animates the `transform` of a pseudoelement. This avoids repaints and results in an observable decrease in CPU usage.
+- No longer require `width` and `height` to be set for the `circle` prop to work
 - Change the default `duration` from 1.2 s to 1.5 s
-- Make the default `Skeleton` base color a _tiny_ bit darker so that the
-  animation is more visible
+- Make the default `Skeleton` base color a _tiny_ bit darker so that the animation is more visible
 
 ### Bug Fixes
 

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "react-loading-skeleton",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Make beautiful, animated loading skeletons that automatically adapt to your app.",
   "keywords": [
     "react",
@@ -18,22 +18,31 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./dist/skeleton.css": "./dist/skeleton.css"
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/"
   ],
   "scripts": {
-    "build": "yarn clean && tsc && rollup -c .config/rollup.config.mjs",
+    "build": "yarn clean && tsc && rollup -c",
     "clean": "rimraf dist",
     "lint": "eslint .",
     "lint-staged": "lint-staged --no-stash",
     "prepack": "yarn run build",
     "prettier-all": "prettier . --write",
     "setup": "husky install",
     "storybook": "storybook dev -p 8080",
-    "test": "jest --config .config/jest.config.cjs"
+    "test": "vitest"
   },
   "lint-staged": {
     "src/**/*.ts?(x)": [
@@ -53,11 +62,11 @@
     "@storybook/react": "^7.0.7",
     "@storybook/react-vite": "^7.0.7",
     "@swc/core": "^1.3.56",
-    "@swc/jest": "^0.2.26",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
     "@vitejs/plugin-react-swc": "^3.3.0",
@@ -66,15 +75,12 @@
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.10.3",
     "husky": "^8.0.3",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jsdom": "^21.1.1",
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
     "prettier-plugin-packagejson": "^2.4.3",
@@ -88,7 +94,8 @@
     "tslib": "^2.5.0",
     "typescript": "^5.0.4",
     "vite": "^4.3.3",
-    "vite-plugin-checker": "^0.5.6"
+    "vite-plugin-checker": "^0.5.6",
+    "vitest": "^0.30.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

package.json

@@ -6,7 +6,7 @@ export default {
   external: ['react'],
   output: [
     {
-      file: 'dist/index.mjs',
+      dir: 'dist',
       format: 'es',
 
       // This disables the warning "Mixing named and default exports"
@@ -51,7 +51,7 @@ export default {
       banner: "'use client';",
     },
     {
-      dir: 'dist',
+      file: 'dist/index.cjs',
       format: 'cjs',
       exports: 'named',
       banner: "'use client';",

.config/rollup.config.mjs renamed to rollup.config.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import React, { CSSProperties, PropsWithChildren, ReactElement } from 'react';
-import { SkeletonThemeContext } from './SkeletonThemeContext';
-import { SkeletonStyleProps } from './SkeletonStyleProps';
+import { SkeletonThemeContext } from './SkeletonThemeContext.js';
+import { SkeletonStyleProps } from './SkeletonStyleProps.js';
 
 const defaultEnableAnimation = true;
 

src/Skeleton.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, PropsWithChildren } from 'react';
-import { SkeletonStyleProps } from './SkeletonStyleProps';
-import { SkeletonThemeContext } from './SkeletonThemeContext';
+import { SkeletonStyleProps } from './SkeletonStyleProps.js';
+import { SkeletonThemeContext } from './SkeletonThemeContext.js';
 
 export type SkeletonThemeProps = PropsWithChildren<SkeletonStyleProps>;
 

src/SkeletonTheme.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SkeletonStyleProps } from './SkeletonStyleProps';
+import { SkeletonStyleProps } from './SkeletonStyleProps.js';
 
 /**
  * @internal

src/SkeletonThemeContext.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
-import { SideBySide, Post } from './components';
+import { SideBySide, Post } from './components/index.js';
 
 export default {
   component: Post,
   title: 'Post',
-} as Meta;
+} satisfies Meta;
 
 export const Default: React.FC = () => (
   <SideBySide>

src/__stories__/Post.stories.tsx

@@ -7,14 +7,14 @@ import React, {
 } from 'react';
 import ReactDOM from 'react-dom';
 import { Meta } from '@storybook/react';
-import { SideBySide, Box } from './components';
-import { Skeleton } from '../Skeleton';
+import { SideBySide, Box } from './components/index.js';
+import { Skeleton } from '../Skeleton.js';
 import './styles/Skeleton.stories.css';
 
 export default {
   component: Skeleton,
   title: 'Skeleton',
-} as Meta;
+} satisfies Meta;
 
 export const Basic: React.FC = () => <Skeleton count={5} width={400} />;
 
@@ -345,32 +345,32 @@ export const ShadowDOM: React.FC = () => {
             background-position: calc(200px + 100%) 0;
         }
     }
-    
+
     .react-loading-skeleton {
         /* If either color is changed, Skeleton.tsx must be updated as well */
         --base-color: #ebebeb;
         --highlight-color: #f5f5f5;
-    
+
         background-color: var(--base-color);
         background-image: linear-gradient(
             90deg,
             var(--base-color),
             var(--highlight-color),
             var(--base-color)
         );
-    
+
         width: 100%;
         background-size: 200px 100%;
         background-repeat: no-repeat;
         border-radius: 0.25rem;
         display: inline-block;
         line-height: 1;
-    
+
         animation-name: react-loading-skeleton;
         animation-duration: 1.5s;
         animation-timing-function: ease-in-out;
         animation-iteration-count: infinite;
-    }    
+    }
     `;
 
   const shadowContent = (

src/__stories__/Skeleton.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
-import { Post, SideBySide, Box } from './components';
-import { SkeletonTheme } from '../SkeletonTheme';
-import { Skeleton } from '../Skeleton';
+import { Post, SideBySide, Box } from './components/index.js';
+import { SkeletonTheme } from '../SkeletonTheme.js';
+import { Skeleton } from '../Skeleton.js';
 
 export default {
   component: SkeletonTheme,
   title: 'SkeletonTheme',
-} as Meta;
+} satisfies Meta;
 
 const darkBaseColor = '#333';
 const darkHighlightColor = '#999';

src/__stories__/SkeletonTheme.stories.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactElement } from 'react';
-import { Skeleton } from '../../Skeleton';
+import { Skeleton } from '../../Skeleton.js';
 
 export const postContent =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +

src/__stories__/components/Post.tsx

@@ -1,3 +1,3 @@
-export * from './SideBySide';
-export * from './Post';
-export * from './Box';
+export * from './SideBySide.js';
+export * from './Post.js';
+export * from './Box.js';

src/__stories__/components/index.ts

@@ -1,12 +1,15 @@
 import React, { PropsWithChildren } from 'react';
-import { render, screen } from '@testing-library/react';
-import { Skeleton } from '../Skeleton';
+import { it, expect, afterEach } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Skeleton } from '../Skeleton.js';
 import {
   getAllSkeletons,
   getSkeleton,
   hasLineBreak,
   skeletonSelector,
-} from './__helpers__';
+} from './__helpers__/index.js';
+
+afterEach(cleanup);
 
 it('renders a skeleton', () => {
   render(<Skeleton />);

src/__tests__/Skeleton.test.tsx

@@ -1,10 +1,12 @@
-import '@testing-library/jest-dom';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { render, screen } from '@testing-library/react';
-import { SkeletonTheme } from '../SkeletonTheme';
-import { Skeleton } from '../Skeleton';
-import { getSkeleton } from './__helpers__';
+import { it, expect, afterEach } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { SkeletonTheme } from '../SkeletonTheme.js';
+import { Skeleton } from '../Skeleton.js';
+import { getSkeleton } from './__helpers__/index.js';
+
+afterEach(cleanup);
 
 it('does not render anything', () => {
   render(