feat: switch package to module type (#1472)

BREAKING CHANGE: Hooks are now distrubutes as JS built form TS with target ESNext and ESM module resolution. There is no more sense to distribute CJS version as package is ESM-only.

Consequent of above - no more esm and cjs subfolders - hooks are importable from index.js or its own directory which don't have a prefix anymore, thanks to exports directive. All of below examples will lead to same result, choose any on your taste:

import { useFirstMountState } from '@react-hookz/web';
import { useFirstMountState } from '@react-hookz/web/';
import { useFirstMountState } from '@react-hookz/web/useFirstMountState/';
import { useFirstMountState } from '@react-hookz/web/useFirstMountState/index.js';
Thought is seems not to have subfolder, it is only due to exports directive, in real it is
@react-hookz/web/dist/useFirstMountState/index.js.

Pakage uses imports directive to define path alias #root - it stays so even in distributed code, thus, some may be affected in case their bundler configured to somehow handle such alias. Those developer shoud configure import rewriter not to handle node_modules or @react-hookz/web package exclusively.

Side-effect for current PR - documentation is broken, as storybook 6 is not working within ESM packages and I'm planning to switch to another domenting engine anyway.

.eslintignore

@@ -1,11 +1,8 @@
 .idea
 node_modules
-esm
-cjs
+dist
 coverage
-storybook-build
 CHANGELOG.md
-!.eslintrc.js
-!.prettierrc.js
-!.storybook
+!.eslintrc.cjs
+!.prettierrc.cjs
 !.github

.eslintrc.js → .eslintrc.cjs

@@ -3,9 +3,11 @@ const commonJSRules = {
 	'unicorn/prevent-abbreviations': 'off',
 	'unicorn/no-null': 'off',
 	'unicorn/no-array-for-each': 'off',
+
+	'@typescript-eslint/no-meaningless-void-operator': 'off',
+	'@typescript-eslint/no-confusing-void-expression': 'off',
 };
 
-// eslint-disable-next-line unicorn/prefer-module
 module.exports = {
 	root: true,
 

.github/workflows/ci-cd.yml

@@ -24,7 +24,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: bahmutov/npm-install@v1
         with:
@@ -45,7 +45,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: bahmutov/npm-install@v1
         with:
@@ -69,7 +69,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: bahmutov/npm-install@v1
         with:
@@ -115,7 +115,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: bahmutov/npm-install@v1
         with:

.gitignore

@@ -1,6 +1,4 @@
 /.idea
 node_modules
 /coverage
-/storybook-build
-/cjs
-/esm
+/dist

.prettierrc.cjs

@@ -0,0 +1,3 @@
+const config = require('@react-hookz/eslint-config/.prettierrc.cjs');
+
+module.exports = config;

commitlint.config.js → commitlint.config.cjs

@@ -1,4 +1,3 @@
-// eslint-disable-next-line unicorn/prefer-module
 module.exports = {
 	extends: ['@commitlint/config-conventional'],
 	rules: {

jest.config.ts

@@ -1,11 +1,18 @@
 import { type Config } from 'jest';
 
-const cfg: Config = {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const __esModule = true;
+
+export default {
+	extensionsToTreatAsEsm: ['.ts'],
 	projects: [
 		{
 			displayName: 'dom',
+			moduleNameMapper: {
+				'^((?:\\.{1,2}|#[^\\/]*)/.*)\\.js$': '$1',
+			},
 			transform: {
-				'\\.[jt]sx?$': '@swc/jest',
+				'^.+\\.[tj]sx?$': '@swc/jest',
 			},
 			testEnvironment: 'jsdom',
 			testMatch: ['<rootDir>/src/**/__tests__/dom.[jt]s?(x)'],
@@ -14,8 +21,11 @@ const cfg: Config = {
 
 		{
 			displayName: 'ssr',
+			moduleNameMapper: {
+				'^((?:\\.{1,2}|#[^\\/]*)/.*)\\.js$': '$1',
+			},
 			transform: {
-				'\\.[jt]sx?$': '@swc/jest',
+				'^.+\\.[tj]sx?$': '@swc/jest',
 			},
 			testEnvironment: 'node',
 			testMatch: ['<rootDir>/src/**/__tests__/ssr.[jt]s?(x)'],
@@ -25,20 +35,19 @@ const cfg: Config = {
 		{
 			displayName: 'dom-package',
 			transformIgnorePatterns: [],
+			moduleNameMapper: {
+				'^((?:\\.{1,2}|#[^\\/]*)/.*)\\.js$': '$1',
+				'^#root/index.js$': '<rootDir>/index.js',
+			},
 			transform: {
-				'\\.[jt]sx?$': '@swc/jest',
+				'^.+\\.[tj]sx?$': '@swc/jest',
 			},
 			testEnvironment: 'jsdom',
 			testMatch: ['<rootDir>/src/**/__tests__/dom.[jt]s?(x)'],
 			setupFiles: ['./src/__tests__/setup.ts'],
-			moduleNameMapper: {
-				'^../..$': '<rootDir>',
-			},
 		},
 	],
 	collectCoverage: false,
 	coverageDirectory: './coverage',
 	collectCoverageFrom: ['./src/**/*.{ts,js,tsx,jsx}', '!**/__tests__/**', '!**/__docs__/**'],
-};
-
-export default cfg;
+} satisfies Config;

package.json

@@ -21,28 +21,32 @@
 		"access": "public"
 	},
 	"files": [
-		"cjs",
-		"esm"
+		"dist"
 	],
-	"main": "./cjs/index.js",
-	"types": "./cjs/index.d.ts",
-	"module": "./esm/index.js",
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
 	"sideEffects": false,
+	"imports": {
+		"#root/*": "./src/*"
+	},
+	"exports": {
+		".": "./dist/index.js",
+		"./*/": "./dist/*/index.js",
+		"./*": "./dist/*"
+	},
+	"engines": {
+		"node": ">=20.0.0"
+	},
 	"scripts": {
 		"prepare": "husky install",
 		"commit": "git-cz",
-		"build": "yarn build:cleanup && concurrently yarn:build:cjs yarn:build:esm",
-		"build:cleanup": "rimraf ./dist",
-		"build:cjs": "ttsc -p ./tsconfig.build.json --module CommonJS --outDir ./cjs",
-		"build:esm": "ttsc -p ./tsconfig.build.json --module ESNext --outDir ./esm",
+		"build": "yarn rimraf ./dist && tsc --version && tsc",
 		"new-hook": "node ./utility/add-new-hook.js",
 		"test": "jest --selectProjects dom ssr",
 		"test:coverage": "yarn test --coverage",
 		"lint": "eslint .",
-		"lint:fix": "yarn lint --fix .",
-		"storybook:watch": "start-storybook -p 6006 --docs --no-manager-cache",
-		"storybook:build": "build-storybook --docs -o ./storybook-build",
-		"storybook:deploy": "storybook-to-ghpages -s storybook:build"
+		"lint:fix": "yarn lint --fix ."
 	},
 	"config": {
 		"commitizen": {
@@ -86,17 +90,7 @@
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/github": "^9.2.5",
-		"@storybook/addon-docs": "^6.5.16",
-		"@storybook/addon-essentials": "^6.5.16",
-		"@storybook/addon-links": "^6.5.16",
-		"@storybook/addon-postcss": "^2.0.0",
-		"@storybook/addons": "^6.5.16",
-		"@storybook/builder-webpack5": "^6.5.16",
-		"@storybook/manager-webpack5": "^6.5.16",
-		"@storybook/react": "^6.5.16",
-		"@storybook/storybook-deployer": "^2.8.16",
-		"@storybook/theming": "^6.5.16",
-		"@swc/core": "1.3.100",
+		"@swc/core": "^1.3.100",
 		"@swc/jest": "^0.2.29",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@types/jest": "^29.5.11",
@@ -114,14 +108,14 @@
 		"jest-environment-jsdom": "^29.7.0",
 		"js-cookie": "^3.0.5",
 		"lint-staged": "^15.2.0",
-		"prettier": "^3.1.0",
+		"prettier": "^3.1.1",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"rimraf": "^5.0.5",
 		"semantic-release": "^22.0.12",
+		"ts-jest": "^29.1.1",
 		"ts-node": "^10.9.2",
-		"ttypescript": "^1.5.15",
-		"typescript": "^4.9.5",
+		"typescript": "^5.3.3",
 		"yarn": "^1.22.21"
 	}
 }

src/__docs__/Introduction.story.mdx

@@ -1,7 +1,3 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Home" />
-
 <div style={{textAlign: 'center'}}>
 
 # ![@react-hookz/web](./logo.png)
@@ -41,7 +37,7 @@ transpile your `node-modules` in order to run in IE.
 
 ## Usage
 
-> This package distributed with ESNext language level and both, CJS and ES imports.  
+> This package distributed with ESNext language level and both, CJS and ES imports.
 > It means that depending on your browser target 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.
@@ -56,7 +52,7 @@ import { useMountEffect } from '@react-hookz/web/esm/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.  
+necessary code will get into your bundle. Direct hook imports should be considered otherwise.
 In case, for some reason, you are not able to use ES imports - you should direct-import hooks from
 `@react-hookz/web/esm` folder.
 

src/__docs__/migrating-from-react-use.story.mdx

@@ -1,7 +1,3 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Migrating from react-use" />
-
 One of `@react-hookz/web`'s primary goals is to replace
 [react-use](https://github.com/streamich/react-use), the no longer maintained project
 `@react-hookz/web` grew out of.

src/__tests__/setup.ts

@@ -2,6 +2,6 @@
  * Here goes any setup code that should be performed before actual tests and/or code imports.
  */
 
-import { setupNavigatorVibrate } from './navigator.vibrate';
+import { setupNavigatorVibrate } from './navigator.vibrate.js';
 
 setupNavigatorVibrate();