feat: remove cjs support and raise language level to ESNext

.eslintrc.js

@@ -5,9 +5,7 @@ module.exports = {
     'node_modules',
     'coverage',
     'storybook-build',
-    'cjs',
-    'esm',
-    'esnext',
+    'dist',
     '.github/workflows',
     '.husky',
     'CHANGELOG.md',

.github/workflows/ci-cd.yml

@@ -24,7 +24,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: bahmutov/npm-install@v1
         with:
@@ -45,7 +45,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: bahmutov/npm-install@v1
         with:
@@ -55,8 +55,9 @@ jobs:
       - name: "Build"
         run: yarn build
 
-      - name: "Tests against build"
-        run: yarn jest --selectProjects dom-cjs dom-package
+# ToDo: uncomment when https://github.com/facebook/jest/issues/13715 will be fixed
+# - name: "Tests against build"
+#   run: yarn jest --selectProjects dom-package
 
   test:
     name: "Test"
@@ -69,7 +70,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: bahmutov/npm-install@v1
         with:
@@ -114,7 +115,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: bahmutov/npm-install@v1
         with:

.github/workflows/gh-pages.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: bahmutov/npm-install@v1
         with:

.gitignore

@@ -2,6 +2,4 @@
 node_modules
 /coverage
 /storybook-build
-/cjs
-/esm
-/esnext
+/dist

.npmignore

@@ -1,4 +1,2 @@
 *
-!/cjs
-!/esm
-!/esnext
+!/dist

.storybook/main.js

@@ -17,4 +17,10 @@ module.exports = {
     fastRefresh: true,
   },
   staticDirs: ['./public'],
+  managerWebpack: (config, options) => {
+    // ToDo: maybe enable cache mack when storybook is fixed
+    options.cache.set = () => Promise.resolve(); // eslint-disable-line @typescript-eslint/no-unsafe-member-access
+
+    return config; // eslint-disable-line @typescript-eslint/no-unsafe-return
+  },
 };

CHANGELOG.md

@@ -891,13 +891,13 @@ SSR remains untouched, but requires implicit setting of
 
 ### Features
 
-* package now has /cjs, /esm, /esnext distibuted versions ([4911c9d](https://github.com/react-hookz/web/commit/4911c9d3c0813bff5e52ae98cfc4dfc542996a0b))
+* package now has /cjs, /esm distibuted versions ([4911c9d](https://github.com/react-hookz/web/commit/4911c9d3c0813bff5e52ae98cfc4dfc542996a0b))
 
 # [1.7.0](https://github.com/react-hookz/web/compare/v1.6.2...v1.7.0) (2021-04-23)
 
 ### Features
 
-* package now has /cjs, /esm, /esnext distibuted versions ([4911c9d](https://github.com/react-hookz/web/commit/4911c9d3c0813bff5e52ae98cfc4dfc542996a0b))
+* package now has /cjs, /esm distibuted versions ([4911c9d](https://github.com/react-hookz/web/commit/4911c9d3c0813bff5e52ae98cfc4dfc542996a0b))
 
 ## [1.6.2](https://github.com/react-hookz/web/compare/v1.6.1...v1.6.2) (2021-04-22)
 

README.md

@@ -32,32 +32,32 @@ yarn add @react-hookz/web
 
 As hooks was introduced to the world in React 16.8, `@react-hookz/web` requires - you guessed it -
 `react` and `react-dom` 16.8+.
-Also, as React does not support IE, `@react-hookz/web` does not do so either. You'll have to
-transpile your `node-modules` in order to run in IE.
+Also, as React does not support IE, `@react-hookz/web` don't either.
 
 ## Usage
 
-This package provides three levels of compilation:
+> This package distributed with ESNext language level and ES modules syntax. It helps us to ease the
+> support and provide you with the best hooks quality.  
+> But also this means that depending on your browser target and bundling configuration you might need
+> to transpile it. Every major bundler provides a way to transpile `node_modules` fully or partially.
+> Address your bundler documentation for more details.
 
-1. **Main**, the `/cjs` folder — CommonJS modules, with ES5 lang level.
-2. **ESM**, the `/esm` folder — ES modules (browser compatible), with ES5 lang level.
-3. **ESNext**, the `/esnext` folder — ES modules (browser compatible), with ESNext lang level.
-
-So, if you need the `useMountEffect` hook, depending on your needs, you can import it in three ways
-(there are actually more, but these are the three most common):
+You can import hooks two ways:
 
 ```ts
-// in case you need cjs modules
+// from the root of package
 import { useMountEffect } from '@react-hookz/web';
-// in case you need esm modules
-import { useMountEffect } from '@react-hookz/web/esm';
-// in case you want all the recent ES features
-import { useMountEffect } from '@react-hookz/web/esnext';
+// or single hook directly
+import { useMountEffect } from '@react-hookz/web/useMountEffect';
 ```
 
+In case your bundler supports tree-shaking (most of modern does) - both variants are equal and only
+necessary code will get into your bundle. Direct hook imports should be considered otherwise.
+
 ## Migrating from react-use
 
-`@react-hookz/web` was built as a [spiritual successor](https://github.com/streamich/react-use/issues/1974) of `react-use` by one of its former maintainers.
+`@react-hookz/web` was built as a [spiritual successor](https://github.com/streamich/react-use/issues/1974)
+of `react-use` by one of its former maintainers.
 
 Coming from `react-use`? Check out our
 [migration guide](https://react-hookz.github.io/web/?path=/docs/migrating-from-react-use--page).

jest.config.js → jest.config.ts

@@ -1,33 +1,33 @@
-module.exports = {
+import { type Config } from 'jest';
+
+const cfg: Config = {
   projects: [
     {
       displayName: 'dom',
-      preset: 'ts-jest',
+      transform: {
+        '\\.[jt]sx?$': '@swc/jest',
+      },
       testEnvironment: 'jsdom',
       testMatch: ['<rootDir>/src/**/__tests__/dom.[jt]s?(x)'],
       setupFiles: ['./src/__tests__/setup.ts'],
     },
+
     {
       displayName: 'ssr',
-      preset: 'ts-jest',
+      transform: {
+        '\\.[jt]sx?$': '@swc/jest',
+      },
       testEnvironment: 'node',
       testMatch: ['<rootDir>/src/**/__tests__/ssr.[jt]s?(x)'],
     },
 
     // needed for output bundle testing
-    {
-      displayName: 'dom-cjs',
-      preset: 'ts-jest',
-      testEnvironment: 'jsdom',
-      testMatch: ['<rootDir>/src/**/__tests__/dom.[jt]s?(x)'],
-      setupFiles: ['./src/__tests__/setup.ts'],
-      moduleNameMapper: {
-        '^../..$': '<rootDir>/cjs',
-      },
-    },
     {
       displayName: 'dom-package',
-      preset: 'ts-jest',
+      transformIgnorePatterns: [],
+      transform: {
+        '\\.[jt]sx?$': '@swc/jest',
+      },
       testEnvironment: 'jsdom',
       testMatch: ['<rootDir>/src/**/__tests__/dom.[jt]s?(x)'],
       setupFiles: ['./src/__tests__/setup.ts'],
@@ -40,3 +40,6 @@ module.exports = {
   coverageDirectory: './coverage',
   collectCoverageFrom: ['./src/**/*.{ts,js,tsx,jsx}', '!**/__tests__/**', '!**/__docs__/**'],
 };
+
+// eslint-disable-next-line import/no-default-export
+export default cfg;

package.json

@@ -21,23 +21,22 @@
     "access": "public"
   },
   "files": [
-    "cjs",
-    "esm",
-    "esnext"
+    "dist"
   ],
-  "main": "cjs/index.js",
-  "esnext": "esnext/index.js",
-  "types": "cjs/index.d.ts",
-  "module": "esm/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "esnext": {
+    "browser": "dist/index.js",
+    "module": "dist/index.js"
+  },
   "sideEffects": false,
   "scripts": {
     "prepare": "husky install",
     "commit": "git-cz",
-    "build": "yarn build:cleanup && concurrently yarn:build:cjs yarn:build:esm yarn:build:esnext --kill-others-on-fail",
-    "build:cleanup": "rimraf ./cjs ./esm ./esnext ./types",
-    "build:cjs": "ttsc -p ./tsconfig.build.json --module CommonJS --target ES5 --outDir ./cjs",
-    "build:esm": "ttsc -p ./tsconfig.build.json --module ES6 --target ES5 --outDir ./esm",
-    "build:esnext": "ttsc -p ./tsconfig.build.json --module ESNext --target ESNext --outDir ./esnext",
+    "build": "yarn build:cleanup && yarn build:dist",
+    "build:cleanup": "rimraf ./dist",
+    "build:dist": "ttsc -p ./tsconfig.build.json",
     "new-hook": "node ./utility/add-new-hook.js",
     "test": "jest --selectProjects dom ssr",
     "test:coverage": "yarn test --coverage",
@@ -99,6 +98,8 @@
     "@storybook/react": "^6.5.15",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^6.5.14",
+    "@swc/core": "^1.3.24",
+    "@swc/jest": "^0.2.24",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.2.5",
@@ -108,7 +109,6 @@
     "babel-loader": "^9.1.0",
     "commitizen": "^4.2.6",
     "commitlint": "^17.2.0",
-    "concurrently": "^7.6.0",
     "husky": "^8.0.3",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
@@ -119,7 +119,6 @@
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "semantic-release": "^19.0.5",
-    "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
     "ttypescript": "^1.5.15",
     "typescript": "^4.9.4",

src/__docs__/ImportPath.tsx

@@ -1,15 +1,26 @@
 import { DocsContext, Source } from '@storybook/addon-docs';
 import React, { FC, useContext } from 'react';
 
-export const ImportPath: FC = () => {
+export interface ImportPathProps {
+  root?: boolean;
+  direct?: boolean;
+}
+
+export const ImportPath: FC<ImportPathProps> = ({ root = true, direct = true }) => {
   const context = useContext(DocsContext);
-  const componentName = context.kind?.split('/')[1] || 'UnknownComponent';
+  const componentName = context.title?.split('/')[1] || 'UnknownComponent';
+
+  const imports: string[] = [];
+
+  if (root) {
+    imports.push(`// root import\nimport { ${componentName} } from '@react-hookz/web';`);
+  }
 
-  const path = `
-import { ${componentName} } from '@react-hookz/web'; // cjs
-import { ${componentName} } from '@react-hookz/web/esm'; // esm
-import { ${componentName} } from '@react-hookz/web/esnext' // esnext
-  `;
+  if (direct) {
+    imports.push(
+      `// direct import\nimport { ${componentName} } from '@react-hookz/web/${componentName}';`
+    );
+  }
 
-  return <Source language="js" code={path} />;
+  return <Source language="js" code={imports.join('\n')} />;
 };

src/__docs__/Introduction.story.mdx

@@ -9,7 +9,7 @@ import {Meta} from '@storybook/addon-docs';
 [![NPM Version](https://flat.badgen.net/npm/v/@react-hookz/web)](https://www.npmjs.com/package/@react-hookz/web)
 [![NPM Downloads](https://flat.badgen.net/npm/dm/@react-hookz/web)](https://www.npmjs.com/package/@react-hookz/web)
 [![NPM Dependents](https://flat.badgen.net/npm/dependents/@react-hookz/web)](https://www.npmjs.com/package/@react-hookz/web)
-[![Build](https://img.shields.io/github/workflow/status/react-hookz/web/CI?style=flat-square)](https://github.com/react-hookz/web/actions)
+[![Build](https://img.shields.io/github/actions/workflow/status/react-hookz/web/ci-cd.yml?branch=master&style=flat-square)](https://github.com/react-hookz/web/actions)
 [![Coverage](https://flat.badgen.net/codecov/c/github/react-hookz/web)](https://app.codecov.io/gh/react-hookz/web)
 [![Types](https://flat.badgen.net/npm/types/@react-hookz/web)](https://www.npmjs.com/package/@react-hookz/web)
 [![Tree Shaking](https://flat.badgen.net/bundlephobia/tree-shaking/@react-hookz/web)](https://bundlephobia.com/result?p=@react-hookz/web)
@@ -41,27 +41,28 @@ transpile your `node-modules` in order to run in IE.
 
 ## Usage
 
-This package provides three levels of compilation:
+> This package distributed with ESNext language level and ES modules syntax. It helps us to ease the
+support and provide you with the best hooks quality.  
+> But also this means that depending on your browser target and bundling configuration you might need
+to transpile it. Every major bundler provides a way to transpile `node_modules` fully or partially.
+Address your bundler documentation for more details.
 
-1. **Main**, the `/cjs` folder — CommonJS modules, with ES5 lang level.
-2. **ESM**, the `/esm` folder — ES modules (browser compatible), with ES5 lang level.
-3. **ESNext**, the `/esnext` folder — ES modules (browser compatible), with ESNext lang level.
-
-So, if you need the `useMountEffect` hook, depending on your needs, you can import it in three ways
-(there are actually more, but these are the three most common):
+You can import hooks two ways:
 
 ```ts
-// in case you need cjs modules
+// from the root of package
 import { useMountEffect } from '@react-hookz/web';
-// in case you need esm modules
-import { useMountEffect } from '@react-hookz/web/esm';
-// in case you want all the recent ES features
-import { useMountEffect } from '@react-hookz/web/esnext';
+// or single hook directly
+import { useMountEffect } from '@react-hookz/web/useMountEffect';
 ```
 
+In case your bundler supports tree-shaking (most of modern does) - both variants are equal and only
+necessary code will get into your bundle. Direct hook imports should be considered otherwise.
+
 ## Migrating from react-use
 
-`@react-hookz/web` was built as a [spiritual successor](https://github.com/streamich/react-use/issues/1974) of `react-use` by one of its former maintainers.
+`@react-hookz/web` was built as a [spiritual successor](https://github.com/streamich/react-use/issues/1974) 
+of `react-use` by one of its former maintainers.
 
 Coming from `react-use`? Check out our
 [migration guide](https://react-hookz.github.io/web/?path=/docs/migrating-from-react-use--page).