reaction: deps on utils, create deep compare hook, uniform build, add…

… ErrorSuspenseBoundary

utils: add server entrypoint

.gitignore

@@ -114,3 +114,5 @@ packages/*/.next
 packages/*/storybook
 components/*/lib
 components/*/dist
+components/*/out
+out

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

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,23 +68,20 @@
     ]
   },
   "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",
     "react": ">=16",
     "react-dom": ">=16"
   },
   "publishConfig": {
+    "registry": "https://registry.npmjs.org",
     "access": "public"
   }
 }

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,
+};

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,
+};

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 (
+    <ErrorBoundary renderError={renderError} onError={onError}>
+      <Suspense fallback={fallback}>{children}</Suspense>
+    </ErrorBoundary>
+  );
+};

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

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 };

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';
 

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,16 +66,20 @@
   "publishConfig": {
     "access": "public"
   },
-  "engines": {
-    "node": "16",
-    "npm": "8"
-  },
+  "sideEffects": false,
   "ava": {
     "extensions": {
       "ts": "module"
     },
     "nodeArguments": [
       "--loader=tsx"
     ]
+  },
+  "import": "lib/index.js",
+  "rollup": {
+    "input": [
+      "./src/index.ts",
+      "./src/server.ts"
+    ]
   }
 }

packages/utils/server.ts

@@ -0,0 +1 @@
+export * from './src/server';

packages/utils/src/server.ts

@@ -0,0 +1 @@
+export { polyfill } from './server/polyfill';

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;
+  }
+}

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');

prettier.config.js

@@ -26,6 +26,7 @@ module.exports = {
 
   plugins: [
     // require('prettier-plugin-tailwindcss'),
+    require('prettier-plugin-pkg'),
     require('@trivago/prettier-plugin-sort-imports'),
     //
   ],

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 = {