diff --git a/package.json b/package.json index a9fd645a..a402a4e7 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,15 @@ "react", "ssr" ], - "main": "lib/index.js", + "main": "./lib/cjs/cjs-relay-hooks.js", + "module": "./lib/es-relay-hooks.mjs", + "exports": { + ".": { + "import": "./lib/es-relay-hooks.mjs", + "require": "./lib/cjs/cjs-relay-hooks.js" + }, + "./package.json": "./package.json" + }, "license": "MIT", "description": "Relay Hooks", "author": { @@ -21,7 +29,7 @@ }, "scripts": { "clean": "rimraf lib", - "compile": "npm run clean && tsc && npm run build:js && npm run rollup", + "compile": "npm run clean && tsc && tsc --project tsconfig.esm.json && npm run build:js && npm run rollup", "rollup": "rollup -c", "build": "npm run compile && npm run test", "test": "cross-env NODE_ENV=test jest --coverage", @@ -29,10 +37,9 @@ "format:ci": "prettier --list-different \"src/**/*.{j,t}s*\"", "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx", "prepublishOnly": "npm run build", - "build:js": "babel lib --out-dir lib --extensions \".js,.jsx\"" + "build:js": "babel lib/cjs --out-dir lib/cjs --extensions \".js,.jsx\"" }, "dependencies": { - "@restart/hooks": "^0.3.1", "fbjs": "^3.0.0" }, "peerDependencies": { diff --git a/rollup.config.js b/rollup.config.js index 76794e50..597be85e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -8,6 +8,7 @@ import replace from '@rollup/plugin-replace'; import sourceMaps from 'rollup-plugin-sourcemaps'; import { terser } from 'rollup-plugin-terser'; import typescript from 'rollup-plugin-typescript2'; +import { promises as fs } from "fs"; import pkg from './package.json'; const makeExternalPredicate = (externalArr) => { @@ -24,7 +25,7 @@ function createConfigInternal({ format, production }) { return { input: 'src/index.ts', output: { - file: 'lib/' + format + '-relay-hooks' + (production ? '.min' : '') + '.js', + file: 'lib/' + (format === "cjs" ? "cjs/" : "") + format + '-relay-hooks' + (production ? '.min' : '') + '.js', format, name: 'relay-hooks', indent: false, @@ -32,7 +33,6 @@ function createConfigInternal({ format, production }) { 'fbjs/lib/areEqual': 'areEqual', 'fbjs/lib/invariant': 'invariant', 'fbjs/lib/warning': 'warning', - '@restart/hooks/useMounted': 'useMounted', react: 'React', 'relay-runtime': 'relayRuntime', }, @@ -83,6 +83,28 @@ function createConfigInternal({ format, production }) { toplevel: format === 'cjs', warnings: true, }), + format === "cjs" && { + name: "writePkgJSON", + writeBundle: async () => { + await fs.writeFile( + "lib/cjs/package.json", + JSON.stringify({ + type: "commonjs", + }) + ); + } + }, + format === "es" && { + name: "writePkgJSON", + writeBundle: async () => { + await fs.writeFile( + "lib/package.json", + JSON.stringify({ + type: "module", + }) + ); + } + }, ], }; } diff --git a/src/useMutation.ts b/src/useMutation.ts index 54e40f50..c97e50fe 100644 --- a/src/useMutation.ts +++ b/src/useMutation.ts @@ -1,4 +1,3 @@ -import useMounted from '@restart/hooks/useMounted'; import * as invariant from 'fbjs/lib/invariant'; import * as React from 'react'; import { Environment, MutationParameters, commitMutation } from 'relay-runtime'; @@ -38,7 +37,13 @@ export function useMutation( error: null, }); - const isMounted = useMounted(); + const isMountedRef = React.useRef(true); + React.useEffect( + (): (() => void) => (): void => { + isMountedRef.current = false; + }, + [], + ); const relayEnvironment = useRelayEnvironment(); const resolvedEnvironment = environment || relayEnvironment; @@ -69,7 +74,7 @@ export function useMutation( invariant(mergedConfig.variables, 'you must specify variables'); - if (isMounted()) { + if (isMountedRef.current) { setState({ loading: true, data: mergedConfig.optimisticResponse, @@ -79,7 +84,7 @@ export function useMutation( return new Promise((resolve, reject) => { function handleError(error: any): void { - if (isMounted()) { + if (isMountedRef.current) { setState({ loading: false, data: null, @@ -106,7 +111,7 @@ export function useMutation( return; } - if (isMounted()) { + if (isMountedRef.current) { setState({ loading: false, data: response, @@ -134,7 +139,6 @@ export function useMutation( optimisticUpdater, optimisticResponse, updater, - isMounted, ], ); diff --git a/tsconfig.esm.json b/tsconfig.esm.json new file mode 100644 index 00000000..fb278b9d --- /dev/null +++ b/tsconfig.esm.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "outDir": "lib", + "rootDir": "src", + "module": "ESNext", + "target": "ES2020", + "moduleResolution": "node", + "noEmitOnError": true, + "declaration": true, + "lib": ["dom", "es6", "esnext.asynciterable", "es2017.object"], + "jsx": "react", + "skipLibCheck": true + }, + "exclude": ["lib", "__tests__", "examples", "__mocks__", "coverage", "scripts"], + "compileOnSave": true +} diff --git a/tsconfig.json b/tsconfig.json index 628af437..0718b8e3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,12 +1,12 @@ { "compilerOptions": { - "outDir": "lib", + "outDir": "lib/cjs", "rootDir": "src", "module": "commonjs", "target": "es5", "moduleResolution": "node", "noEmitOnError": true, - "declaration": true, + "declaration": false, "lib": ["dom", "es6", "esnext.asynciterable", "es2017.object"], "jsx": "react", "skipLibCheck": true