From 4887d038d6fc6f301910d1d3090e59194a87c254 Mon Sep 17 00:00:00 2001 From: wener Date: Mon, 26 Sep 2022 16:07:23 +0800 Subject: [PATCH] reaction: deps on utils, create deep compare hook, uniform build, add ErrorSuspenseBoundary utils: add server entrypoint --- .gitignore | 2 + node.mk | 2 +- packages/reaction/package.json | 21 +++-- packages/reaction/rollup.bundle.js | 8 ++ packages/reaction/rollup.config.js | 80 ------------------- packages/reaction/rollup.dev.js | 8 ++ .../src/components/ErrorSuspenseBoundary.tsx | 15 ++++ .../reaction/src/hooks/useCompareEffect.ts | 4 +- .../reaction/src/hooks/useDeepCompareHooks.ts | 7 ++ packages/reaction/src/index.ts | 7 ++ packages/utils/package.json | 63 ++++++++------- packages/utils/server.ts | 1 + packages/utils/src/server.ts | 1 + packages/utils/src/server/polyfill.ts | 5 ++ packages/utils/src/shim/urljoin.test.ts | 2 +- pnpm-lock.yaml | 12 +-- prettier.config.js | 1 + rollup.mjs | 4 +- 18 files changed, 107 insertions(+), 136 deletions(-) create mode 100644 packages/reaction/rollup.bundle.js delete mode 100644 packages/reaction/rollup.config.js create mode 100644 packages/reaction/rollup.dev.js create mode 100644 packages/reaction/src/components/ErrorSuspenseBoundary.tsx create mode 100644 packages/reaction/src/hooks/useDeepCompareHooks.ts create mode 100644 packages/utils/server.ts create mode 100644 packages/utils/src/server.ts create mode 100644 packages/utils/src/server/polyfill.ts diff --git a/.gitignore b/.gitignore index 24e7a426..1840ccd2 100644 --- a/.gitignore +++ b/.gitignore @@ -114,3 +114,5 @@ packages/*/.next packages/*/storybook components/*/lib components/*/dist +components/*/out +out diff --git a/node.mk b/node.mk index c3593edb..43133820 100644 --- a/node.mk +++ b/node.mk @@ -144,7 +144,7 @@ sync-mirror: endif fmt: - $(EXEC) prettier src -w + $(EXEC) prettier -w src package.json fix: LINT_FIX=1 fix: lint diff --git a/packages/reaction/package.json b/packages/reaction/package.json index 8a087401..e8ace5bf 100644 --- a/packages/reaction/package.json +++ b/packages/reaction/package.json @@ -1,6 +1,6 @@ { "name": "@wener/reaction", - "version": "1.2.13", + "version": "1.2.14", "description": "React hooks, utils & reaction", "keywords": [ "components", @@ -24,18 +24,20 @@ "exports": { ".": { "types": "./src/index.ts", - "import": "./lib/esm/index.mjs", + "import": "./lib/index.js", "system": { - "development": "./dist/system/index.development.js", - "default": "./dist/system/index.min.js" + "default": "./dist/system/index.js" }, "require": "./dist/cjs/index.js" }, + "./types": { + "types": "./src/types.d.ts" + }, "./src/*": "./src/", "./package.json": "./package.json" }, "main": "dist/cjs/index.js", - "import": "lib/esm/index.mjs", + "import": "lib/index.js", "types": "src/index.ts", "files": [ "src", @@ -66,16 +68,12 @@ ] }, "dependencies": { - "prop-types": ">=15", - "react-dom": ">=18" + "@wener/utils": "^1" }, "devDependencies": { - "@types/node": "^16", "@types/prop-types": "^15", "@types/react": "^18", - "@types/react-dom": "^18", - "react": "^18", - "typescript": "^4" + "@types/react-dom": "^18" }, "peerDependencies": { "prop-types": ">=15", @@ -83,6 +81,7 @@ "react-dom": ">=16" }, "publishConfig": { + "registry": "https://registry.npmjs.org", "access": "public" } } diff --git a/packages/reaction/rollup.bundle.js b/packages/reaction/rollup.bundle.js new file mode 100644 index 00000000..0d475f9d --- /dev/null +++ b/packages/reaction/rollup.bundle.js @@ -0,0 +1,8 @@ +import { prod } from '@wener/wode/rollup.mjs'; + +export default { + input: prod.input, + output: prod.output, + plugins: prod.plugins, + external: prod.external, +}; diff --git a/packages/reaction/rollup.config.js b/packages/reaction/rollup.config.js deleted file mode 100644 index 82aa5d4d..00000000 --- a/packages/reaction/rollup.config.js +++ /dev/null @@ -1,80 +0,0 @@ -import typescript from '@rollup/plugin-typescript'; -import replace from '@rollup/plugin-replace'; -import { terser } from 'rollup-plugin-terser'; -import { readFile } from 'node:fs/promises'; - -const pkg = JSON.parse(await readFile(new URL('./package.json', import.meta.url))); -// const outputName = pkg.name.replaceAll('@', '').replaceAll('/', '-'); - -// more consistent & intuitive output name -const outputName = 'index'; -const external = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})]; - -const env = process.env.NODE_ENV ?? 'production'; -const isProduction = env === 'production'; -const replaceProd = replace({ - 'process.env.NODE_ENV': JSON.stringify(env), - __DEV__: String(!isProduction), - preventAssignment: true, -}); -const replaceDev = replace({ - 'process.env.NODE_ENV': JSON.stringify('development'), - __DEV__: String(true), - preventAssignment: true, -}); -export default [ - { - input: 'src/index.ts', - output: [ - { - file: `dist/system/${outputName}.min.js`, - format: 'system', - sourcemap: true, - }, - { - file: `dist/esm/${outputName}.min.js`, - format: 'esm', - sourcemap: true, - }, - ], - plugins: [replaceProd, typescript(), terser()], - external, - }, - { - input: 'src/index.ts', - output: [ - { - file: `dist/system/${outputName}.development.js`, - format: 'system', - sourcemap: true, - }, - { - file: `dist/esm/${outputName}.development.js`, - format: 'esm', - sourcemap: true, - }, - ], - plugins: [replaceDev, typescript()], - external, - }, - { - input: 'src/index.ts', - output: [ - { - entryFileNames: '[name].mjs', - exports: 'named', - preserveModules: true, - dir: 'lib/esm', - format: 'esm', - sourcemap: true, - }, - { - file: `dist/cjs/${outputName}.js`, - format: 'cjs', - sourcemap: true, - }, - ], - plugins: [typescript()], - external, - }, -]; diff --git a/packages/reaction/rollup.dev.js b/packages/reaction/rollup.dev.js new file mode 100644 index 00000000..2df86114 --- /dev/null +++ b/packages/reaction/rollup.dev.js @@ -0,0 +1,8 @@ +import { dev } from '@wener/wode/rollup.mjs'; + +export default { + input: dev.input, + output: dev.output, + plugins: dev.plugins, + external: dev.external, +}; diff --git a/packages/reaction/src/components/ErrorSuspenseBoundary.tsx b/packages/reaction/src/components/ErrorSuspenseBoundary.tsx new file mode 100644 index 00000000..6821235b --- /dev/null +++ b/packages/reaction/src/components/ErrorSuspenseBoundary.tsx @@ -0,0 +1,15 @@ +import React, { ReactNode, Suspense } from 'react'; +import { ErrorBoundary, ErrorBoundaryProps } from './ErrorBoundary'; + +export const ErrorSuspenseBoundary: React.FC<{ fallback?: ReactNode } & ErrorBoundaryProps> = ({ + fallback, + renderError, + onError = ({ error, errorInfo }) => console.error(`ErrorSuspenseBoundary: `, errorInfo, error), + children, +}) => { + return ( + + {children} + + ); +}; diff --git a/packages/reaction/src/hooks/useCompareEffect.ts b/packages/reaction/src/hooks/useCompareEffect.ts index 45025f2f..e86e4492 100644 --- a/packages/reaction/src/hooks/useCompareEffect.ts +++ b/packages/reaction/src/hooks/useCompareEffect.ts @@ -1,7 +1,5 @@ import React, { DependencyList, EffectCallback, useEffect } from 'react'; -import { shallow } from '../utils/shallow'; - -// import isEqual from 'react-fast-compare'; +import { shallow } from '@wener/utils'; /** * useCompareEffect will call callback if deps is changed diff --git a/packages/reaction/src/hooks/useDeepCompareHooks.ts b/packages/reaction/src/hooks/useDeepCompareHooks.ts new file mode 100644 index 00000000..2c8487d8 --- /dev/null +++ b/packages/reaction/src/hooks/useDeepCompareHooks.ts @@ -0,0 +1,7 @@ +import { createDeepCompareHooks } from '../utils/createDeepCompareHooks'; +import { dequal } from '@wener/utils'; + +const { useDeepCompareMemoize, useDeepCompareCallback, useDeepCompareEffect, useDeepCompareMemo } = + createDeepCompareHooks(dequal); + +export { useDeepCompareMemoize, useDeepCompareCallback, useDeepCompareEffect, useDeepCompareMemo }; diff --git a/packages/reaction/src/index.ts b/packages/reaction/src/index.ts index ec3b9105..fdc0dd37 100644 --- a/packages/reaction/src/index.ts +++ b/packages/reaction/src/index.ts @@ -18,7 +18,14 @@ export { useEventListener, createEventListenerHook } from './hooks/useEventListe export { useWindowEventListener, useDocumentEventListener, useBodyEventListener } from './hooks/useDomEventListener'; export type { HandlersOfEventMap } from './hooks/useEventListener'; export { usePrevious } from './hooks/usePrevious'; +export { + useDeepCompareMemo, + useDeepCompareCallback, + useDeepCompareEffect, + useDeepCompareMemoize, +} from './hooks/useDeepCompareHooks'; +export { ErrorSuspenseBoundary } from './components/ErrorSuspenseBoundary'; export { ErrorBoundary } from './components/ErrorBoundary'; export { ReactShadowRoot } from './components/ReactShadowRoot'; diff --git a/packages/utils/package.json b/packages/utils/package.json index dc9727be..57a3be9d 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,54 +1,57 @@ { "name": "@wener/utils", - "version": "1.1.2", - "description": "Utils for daily use", + "version": "1.1.3", "type": "module", - "sideEffects": false, - "keywords": [ - "utils", - "core library", - "helper" - ], + "description": "Utils for daily use", "repository": { "type": "git", "url": "git+https://github.com/wener/wode.git" }, - "license": "MIT", + "homepage": "https://github.com/wenerme/wode#readme", "author": "wener", + "license": "MIT", + "engines": { + "node": "16", + "npm": "8" + }, + "main": "dist/cjs/index.js", "exports": { ".": { "types": "./src/index.ts", - "import": "./lib/esm/index.mjs", + "import": "./lib/index.js", "system": { - "development": "./dist/system/index.development.js", - "default": "./dist/system/index.min.js" + "default": "./dist/system/index.js" }, "require": "./dist/cjs/index.js" }, "./types": { "types": "./src/types.d.ts" }, + "./server": { + "types": "./src/server.ts", + "import": "./lib/server.js", + "system": { + "default": "./dist/system/server.js" + }, + "require": "./dist/cjs/server.js" + }, "./src/*": "./src/", "./package.json": "./package.json" }, - "main": "dist/cjs/index.js", - "import": "lib/esm/index.mjs", "types": "src/index.ts", - "homepage": "https://github.com/wenerme/wode#readme", "files": [ - "index.js", - "index.d.ts", - "lib", "dist", + "index.ts", + "lib", + "server.ts", "src", - "README.md", - "rollup.config.ts", - "jest.config.js", - "jest.setup.js", - "tsconfig.rollup.json", - "tsconfig.jest.json", "tsconfig.json" ], + "keywords": [ + "utils", + "core library", + "helper" + ], "scripts": { "build": "make prepublish", "clean": "make clean", @@ -63,10 +66,7 @@ "publishConfig": { "access": "public" }, - "engines": { - "node": "16", - "npm": "8" - }, + "sideEffects": false, "ava": { "extensions": { "ts": "module" @@ -74,5 +74,12 @@ "nodeArguments": [ "--loader=tsx" ] + }, + "import": "lib/index.js", + "rollup": { + "input": [ + "./src/index.ts", + "./src/server.ts" + ] } } diff --git a/packages/utils/server.ts b/packages/utils/server.ts new file mode 100644 index 00000000..41d2120e --- /dev/null +++ b/packages/utils/server.ts @@ -0,0 +1 @@ +export * from './src/server'; diff --git a/packages/utils/src/server.ts b/packages/utils/src/server.ts new file mode 100644 index 00000000..11942e38 --- /dev/null +++ b/packages/utils/src/server.ts @@ -0,0 +1 @@ +export { polyfill } from './server/polyfill'; diff --git a/packages/utils/src/server/polyfill.ts b/packages/utils/src/server/polyfill.ts new file mode 100644 index 00000000..7f515fbe --- /dev/null +++ b/packages/utils/src/server/polyfill.ts @@ -0,0 +1,5 @@ +export async function polyfill() { + if (!('crypto' in globalThis)) { + (globalThis as any).crypto = (await import('node:crypto')).webcrypto; + } +} diff --git a/packages/utils/src/shim/urljoin.test.ts b/packages/utils/src/shim/urljoin.test.ts index 1d704615..80321394 100644 --- a/packages/utils/src/shim/urljoin.test.ts +++ b/packages/utils/src/shim/urljoin.test.ts @@ -1,5 +1,5 @@ -import { urljoin } from './urljoin'; import test from 'ava'; +import { urljoin } from './urljoin'; test('join ext', (t) => { t.is(urljoin('http://wener.me/sub/', '/a/', '/hello.js'), 'http://wener.me/sub/a/hello.js'); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 24da5d86..0d4c5d6d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -404,24 +404,16 @@ importers: packages/reaction: specifiers: - '@types/node': ^16 '@types/prop-types': ^15 '@types/react': ^18 '@types/react-dom': ^18 - prop-types: '>=15' - react: ^18 - react-dom: '>=18' - typescript: ^4 + '@wener/utils': ^1 dependencies: - prop-types: 15.8.1 - react-dom: 18.2.0_react@18.2.0 + '@wener/utils': link:../utils devDependencies: - '@types/node': 16.11.58 '@types/prop-types': 15.7.5 '@types/react': 18.0.19 '@types/react-dom': 18.0.6 - react: 18.2.0 - typescript: 4.8.3 packages/utils: specifiers: diff --git a/prettier.config.js b/prettier.config.js index 82e35dfd..c31b96bf 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -26,6 +26,7 @@ module.exports = { plugins: [ // require('prettier-plugin-tailwindcss'), + require('prettier-plugin-pkg'), require('@trivago/prettier-plugin-sort-imports'), // ], diff --git a/rollup.mjs b/rollup.mjs index ad27457d..828be65a 100644 --- a/rollup.mjs +++ b/rollup.mjs @@ -8,10 +8,10 @@ import { visualizer } from 'rollup-plugin-visualizer'; // const pkg = JSON.parse((await readFile(new URL(process.cwd()+'/package.json', import.meta.url))).toString()); const pkg = JSON.parse((await readFile(process.cwd() + '/package.json')).toString()); -const externalProd = [...Object.keys(pkg.peerDependencies || {})].map((v) => new RegExp(`^${v}(/|$)`)); +const externalProd = [/^node:/, ...Object.keys(pkg.peerDependencies || {})].map((v) => new RegExp(`^${v}(/|$)`)); const externalDev = [...externalProd, ...Object.keys(pkg.dependencies || {}).map((v) => new RegExp(`^${v}(/|$)`))]; -const input = await globby(['./src/index.ts', './src/index.tsx']); +const input = pkg.rollup?.input || await globby(['./src/index.ts', './src/index.tsx']); /** @type import('rollup').RollupOptions */ const dev = {