Merge pull request #428 from openameba/feat/support-react18-carousel

feat(spindle-hooks): support react18 for useCarousel
openameba · Jul 11, 2022 · 52b3ee3 · 52b3ee3
2 parents 00144b6 + 9035bd0
commit 52b3ee3
Show file tree

Hide file tree

Showing 13 changed files with 3,710 additions and 118 deletions.
diff --git a/package.json b/package.json
@@ -35,7 +35,18 @@
     "typescript": "^4.0.0",
     "yaml-lint": "^1.2.4"
   },
-  "workspaces": [
-    "packages/*"
-  ]
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+      "**/react/**",
+      "**/@testing-library/**",
+      "**/@storybook/**",
+      "**/@types/**",
+      "**/webpack/**",
+      "**/babel-*/**",
+      "**/@babel/**"
+    ]
+  }
 }
diff --git a/packages/spindle-hooks/.storybook/main.js b/packages/spindle-hooks/.storybook/main.js
@@ -6,5 +6,8 @@ module.exports = {
     '@storybook/addon-backgrounds',
     '@storybook/addon-docs',
     '@storybook/addon-viewport',
-  ]
+  ],
+  core: {
+    builder: 'webpack5',
+  },
 };
diff --git a/packages/spindle-hooks/jest.config.js b/packages/spindle-hooks/jest.config.js
@@ -2,6 +2,11 @@ module.exports = {
   verbose: true,
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   setupFilesAfterEnv: ['<rootDir>/setup-tests.ts'],
+  moduleNameMapper: {
+    // rootのnode_modulesを参照してしまってversionが競合してしまっていたので、
+    // spindle-hooksのnode_modulesのreactを使用するように指定する
+    '^react($|/.+)': '<rootDir>/node_modules/react$1',
+  },
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },

diff --git a/packages/spindle-hooks/package.json b/packages/spindle-hooks/package.json
@@ -32,25 +32,33 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@types/react": "^16.8.6 || ^17.0.0",
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.1.10",
-    "@storybook/addon-actions": "^6.1.10",
-    "@storybook/addon-backgrounds": "^6.1.10",
-    "@storybook/addon-docs": "^6.1.10",
-    "@storybook/addon-viewport": "^6.1.10",
-    "@storybook/react": "^6.1.10",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^13.0.0",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-backgrounds": "^6.5.9",
+    "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addon-viewport": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.1",
     "@types/jest": "^27.0.0",
-    "babel-loader": "^8.1.0",
+    "@types/react": "^18.0.14",
     "bundlesize": "^0.18.0",
     "jest": "^27.0.0",
-    "react": "^17.0.1",
-    "ts-jest": "^27.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^27.0.0",
+    "webpack": "^5.73.0"
   }
 }
diff --git a/packages/spindle-hooks/src/internal/useFlushSync/index.ts b/packages/spindle-hooks/src/internal/useFlushSync/index.ts
@@ -0,0 +1 @@
+export { useFlushSync } from './useFlushSync';
diff --git a/packages/spindle-hooks/src/internal/useFlushSync/useFlushSync.ts b/packages/spindle-hooks/src/internal/useFlushSync/useFlushSync.ts
@@ -0,0 +1,18 @@
+/**
+ * Polyfill for under React@16.
+ * In react@16, `flushSync` is not defined so we need to use polyfill.
+ */
+
+import ReactDOM from 'react-dom';
+
+const flushSync = (ReactDOM as any).flushSync;
+type FlushSyncCallback = () => void;
+
+export const useFlushSync = (): ((cb: FlushSyncCallback) => void) => {
+  if (flushSync) {
+    return flushSync;
+  }
+  return () => {
+    // noop
+  };
+};
diff --git a/packages/spindle-hooks/src/useCarousel/useSliderTransition.ts b/packages/spindle-hooks/src/useCarousel/useSliderTransition.ts
@@ -1,4 +1,5 @@
 import { useMemo, useState, MutableRefObject } from 'react';
+import { useFlushSync } from '../internal/useFlushSync';
 import { useValueRef } from './useValueRef';
 
 type Payload = {
@@ -20,6 +21,7 @@ export function useSliderTransition({
   const currentIndexRef = useValueRef(currentIndex);
   const [disableTransition, setDisableTransition] = useState(false);
   const [disableAutoFocus, setDisableAutoFocus] = useState(false);
+  const flushSync = useFlushSync();
 
   const listStyles = useMemo(() => {
     const transitionStyle = disableTransition ? { transition: 'none' } : {};
@@ -34,8 +36,12 @@ export function useSliderTransition({
   const handleTransitionEnd = () => {
     // if reach contents end, rewind without transition to make it look like looping
     if (!isFocus) {
-      setDisableTransition(true);
-      setCurrentIndex((prev) => (prev + itemCount) % itemCount);
+      flushSync(() => {
+        setDisableTransition(true);
+      });
+      flushSync(() => {
+        setCurrentIndex((prev) => (prev + itemCount) % itemCount);
+      });
       if (!isAutoPlaying && !disableAutoFocus) {
         linkRefs.current[
           ((currentIndex + itemCount) % itemCount) + copyCount

diff --git a/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.test.ts b/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useTimeDistance } from './useTimeDistance';
 
 describe('useTimeDistance()', () => {

diff --git a/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.ts b/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.ts
@@ -8,7 +8,7 @@ export type TimeDistanceOptions = {
 };
 
 export const useTimeDistance = (
-  date: string,
+  date: string | Date,
   options?: TimeDistanceOptions,
 ): [string, number] => {
   const value = useMemo((): [string, number] => {

diff --git a/packages/spindle-hooks/tsconfig.json b/packages/spindle-hooks/tsconfig.json
@@ -4,6 +4,10 @@
     "lib": [
       "DOM"
     ],
+    "baseUrl": ".",
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    },
     "jsx": "react"
   },
   "include": [

diff --git a/packages/spindle-ui/package.json b/packages/spindle-ui/package.json
@@ -45,6 +45,11 @@
     "@types/react": "^16.8.6 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "ameba-color-palette.css": "^4.8.0",
     "react-merge-refs": "^1.1.0"
@@ -61,6 +66,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.0.0",
     "@types/jest": "^27.0.0",
+    "@types/react": "^17.0.1",
     "autoprefixer": "^9.8.5",
     "babel-loader": "^8.1.0",
     "bundlesize": "^0.18.0",

diff --git a/packages/spindle-ui/tsconfig.json b/packages/spindle-ui/tsconfig.json
@@ -4,6 +4,10 @@
     "lib": [
       "DOM"
     ],
+    "baseUrl": ".",
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    },
     "jsx": "react"
   },
   "include": [