toss · manudeli · Oct 20, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
@@ -0,0 +1,6 @@
+---
+"@suspensive/react-await": patch
+"@suspensive/react": patch
+---
+
+fix(react): remove `<Await/>`
@@ -2,6 +2,8 @@
   - "packages/react/**/*"
 "@suspensive/react-query":
   - "packages/react-query/**/*"
+"@suspensive/react-await":
+  - "packages/react-await/**/*"
 "documentation":
   - "docs/**/*"
 "visualization":

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        command: ['pnpm lint', 'pnpm lint:pub', 'pnpm test', 'pnpm test:tsd', 'pnpm type:check']
+        command: ['lint', 'lint:attw', 'lint:pub', 'test', 'test:tsd', 'type:check']
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
@@ -31,4 +31,4 @@ jobs:
       - run: pnpm install --frozen-lockfile
       - run: pnpm prepack
       - name: Run commands
-        run: ${{ matrix.command }}
+        run: pnpm ${{ matrix.command }}
@@ -3,6 +3,7 @@
   "intro": "Getting Started",
   "react": "@suspensive/react",
   "react-query": "@suspensive/react-query",
+  "react-await": "@suspensive/react-await",
   "---": {
     "type": "separator"
   },

@@ -3,6 +3,7 @@
   "intro": "시작하기",
   "react": "@suspensive/react",
   "react-query": "@suspensive/react-query",
+  "react-await": "@suspensive/react-await",
   "---": {
     "type": "separator"
   },

@@ -14,7 +14,8 @@ Afterwards, when the Promise is fulfilled, the guaranteed awaited data can be us
 Additionally, this data is cached in the received key and can be used immediately without pending when reused.
 
 ```tsx
-import { Await, Suspense } from '@supensive/react'
+import { Await } from '@suspensive/react-await'
+import { Suspense } from '@suspensive/react'
 
 const getPost = (postId: number) => fetch(`/post/${postId}`).then((res) => res.json()) as Post
 

@@ -14,7 +14,8 @@ import { Callout } from 'nextra/components'
 또한 이 data는 받은 키에 cache되어 재사용하는 경우 pending없이 즉시 사용할 수 있습니다.
 
 ```tsx
-import { Await, Suspense } from '@supensive/react'
+import { Await } from '@suspensive/react-await'
+import { Suspense } from '@suspensive/react'
 
 const getPost = (postId: number) => fetch(`/post/${postId}`).then((res) => res.json()) as Post
 

@@ -0,0 +1,4 @@
+{
+  "installation": { "title": "Installation" },
+  "Await": { "title": "<Await/>" }
+}
@@ -0,0 +1,4 @@
+{
+  "installation": { "title": "설치하기" },
+  "Await": { "title": "<Await/>" }
+}
@@ -0,0 +1,9 @@
+# Installation
+
+@suspensive/react-await package lives in npm. To install the latest stable version, run the following command
+
+[![npm version](https://img.shields.io/npm/v/@suspensive/react-await?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-await)
+
+```shell npm2yarn
+npm install @suspensive/react-await
+```
@@ -0,0 +1,9 @@
+# 설치하기
+
+@suspensive/react-await는 npm에 있습니다. 최신 안정버전을 설치하기 위해 아래 커맨드를 실행하세요
+
+[![npm version](https://img.shields.io/npm/v/@suspensive/react-await?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-await)
+
+```shell npm2yarn
+npm install @suspensive/react-await
+```
@@ -5,6 +5,5 @@
   "ErrorBoundaryGroup": { "title": "<ErrorBoundaryGroup/>" },
   "Delay": { "title": "<Delay/>" },
   "AsyncBoundary": { "title": "<AsyncBoundary/>" },
-  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" },
-  "Await": { "title": "<Await/>" }
+  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" }
 }
@@ -5,6 +5,5 @@
   "ErrorBoundaryGroup": { "title": "<ErrorBoundaryGroup/>" },
   "Delay": { "title": "<Delay/>" },
   "AsyncBoundary": { "title": "<AsyncBoundary/>" },
-  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" },
-  "Await": { "title": "<Await/>" }
+  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" }
 }
@@ -34,6 +34,7 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "graph": "rimraf ./graph && mkdir graph && turbo run build --graph=graph/index.html",
     "lint": "turbo run lint",
+    "lint:attw": "turbo run lint:attw",
     "lint:pack": "packlint sort -R",
     "lint:pub": "turbo run lint:pub",
     "postinstall": "husky install",
@@ -44,6 +45,7 @@
     "type:check": "turbo run type:check --parallel"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.12.2",
     "@changesets/cli": "^2.26.1",
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",

@@ -0,0 +1,6 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@suspensive/eslint-config/react-ts'],
+  ignorePatterns: ['*.js*', 'dist', 'coverage'],
+}
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Suspensive
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,13 @@
+# 라이브러리 소개
+
+[![npm version](https://img.shields.io/npm/v/@suspensive/react-await?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-await)
+[![npm](https://img.shields.io/npm/dm/@suspensive/react-await?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-await)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@suspensive/react-await?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-await)
+
+## 설치하기
+
+@suspensive/react-await 는 npm에 있습니다. 최신 안정버전을 설치하기 위해 아래 커맨드를 실행하세요
+
+```shell npm2yarn
+npm install @suspensive/react-await
+```
@@ -0,0 +1,13 @@
+# Introduction
+
+[![npm version](https://img.shields.io/npm/v/@suspensive/react-await?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-await)
+[![npm](https://img.shields.io/npm/dm/@suspensive/react-await?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-await)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@suspensive/react-await?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-await)
+
+## Installation
+
+@suspensive/react-await lives in npm. To install the latest stable version, run the following command
+
+```shell npm2yarn
+npm install @suspensive/react-await
+```
@@ -0,0 +1,78 @@
+{
+  "name": "@suspensive/react-await",
+  "version": "0.0.0",
+  "description": "Useful interfaces for React Suspense",
+  "keywords": [
+    "suspensive",
+    "react"
+  ],
+  "homepage": "https://suspensive.org",
+  "bugs": "https://github.com/suspensive/react/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/suspensive/react.git",
+    "directory": "packages/react"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/manudeli"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Jonghyeon Ko",
+    "email": "[email protected]"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.cjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "lint": "eslint \"**/*.ts*\"",
+    "lint:attw": "attw --pack",
+    "lint:pub": "publint --strict",
+    "prepack": "pnpm build",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest --ui --coverage.enabled=true",
+    "type:check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.2.0"
+  },
+  "devDependencies": {
+    "@suspensive/react": "workspace:*",
+    "@suspensive/tsup": "workspace:*",
+    "@suspensive/vitest": "workspace:*",
+    "@types/node": "^18.16.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
+    "@types/use-sync-external-store": "^0.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17 || ^18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
@@ -1,7 +1,7 @@
+import { ErrorBoundary, Suspense } from '@suspensive/react'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
-import { ErrorBoundary, Suspense } from '..'
-import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, delay } from '../utils/toTest'
+import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, delay } from './utils/toTest'
 import { Await, awaitClient, useAwait } from '.'
 
 const key = (id: number) => ['key', id] as const

@@ -1,8 +1,8 @@
 import type { FunctionComponent } from 'react'
 import { createElement, useMemo } from 'react'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
-import type { Tuple } from '../types'
-import { hashKey } from '../utils'
+import type { Tuple } from './types'
+import { hashKey } from './utils'
 
 export type Key = Tuple
 
@@ -26,8 +26,8 @@
  reset: () => void
 }

 /**
 * @experimental This is experimental feature.
 */
 export const useAwait = <TData, TKey extends Key>(options: AwaitOptions<TData, TKey>): Awaited<TData> => {
  const syncData = () => awaitClient.suspend(options)
@@ -52,8 +52,8 @@
  children: FunctionComponent<Awaited<TData>>
 }

 /**
 * @experimental This is experimental feature.
 */
 export const Await = <TData, TKey extends Key>({ children, options }: AwaitProps<TData, TKey>) =>
  createElement(children, useAwait<TData, TKey>(options))

@@ -0,0 +1 @@
+export type { Tuple } from './Tuple'
@@ -0,0 +1,53 @@
+import { hasResetKeysChanged } from '.'
+
+const primitive = 0
+const reference1 = { test: 0 }
+const reference2 = { test: 0 }
+
+describe('hasResetKeysChanged', () => {
+  it('should return true if the two arrays have different lengths.', () => {
+    const array1 = Array.from({ length: 1 }).map((_, index) => primitive + index)
+    const array2 = Array.from({ length: 2 }).map((_, index) => primitive + index)
+
+    expect(hasResetKeysChanged(array1, array2)).toBe(true)
+  })
+
+  it('should return false if the two arrays have same lengths and same primitive element in each index of arrays.', () => {
+    const array1 = Array.from({ length: 1 }).map((_, index) => primitive + index)
+    const array2 = Array.from({ length: 1 }).map((_, index) => primitive + index)
+
+    expect(hasResetKeysChanged(array1, array2)).toBe(false)
+  })
+
+  it('should return true if the two arrays have same lengths but at least one primitive element is different in each index of arrays.', () => {
+    const array1 = [primitive, primitive + 1]
+    const array2 = [primitive, primitive]
+
+    expect(hasResetKeysChanged(array1, array2)).toBe(true)
+  })
+
+  it('should return true if the two arrays have same lengths and have all same primitive elements but order is different', () => {
+    const array1 = [primitive, primitive + 1]
+    const array2 = [primitive + 1, primitive]
+
+    expect(hasResetKeysChanged(array1, array2)).toBe(true)
+  })
+
+  it('should return true when two arrays have each references elements in index of array have different references', () => {
+    const array1 = [reference1, { test: 2 }]
+    const array2 = [reference1, { test: 2 }]
+
+    expect(hasResetKeysChanged(array1, array2)).toBe(true)
+  })
+
+  it('should return false when two arrays have each references elements in index of array have same references', () => {
+    const array1 = [reference1, reference2]
+    const array2 = [reference1, reference2]
+
+    expect(hasResetKeysChanged(array1, array2)).toBe(false)
+  })
+
+  it('should return false when no arrays as parameters. because of default value', () => {
+    expect(hasResetKeysChanged()).toBe(false)
+  })
+})
@@ -0,0 +1,2 @@
+export const hasResetKeysChanged = (a: unknown[] = [], b: unknown[] = []) =>
+  a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
@@ -1,4 +1,4 @@
-import type { Key } from '../experimental/Await'
+import type { Key } from '../Await'
 import type { PlainObject } from './isPlainObject'
 import { isPlainObject } from './isPlainObject'
 

@@ -0,0 +1,2 @@
+export { hasResetKeysChanged } from './hasResetKeysChanged'
+export { hashKey } from './hashKey'
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+const suspendIsNeed = { current: true }
+type SuspendProps = { during: number; toShow?: ReactNode }
+export const Suspend = ({ during, toShow }: SuspendProps) => {
+  if (suspendIsNeed.current) {
+    throw new Promise((resolve) =>
+      setTimeout(() => {
+        suspendIsNeed.current = false
+        resolve('resolved')
+      }, during)
+    )
+  }
+  return <>{toShow}</>
+}
+Suspend.reset = () => {
+  suspendIsNeed.current = true
+}
+
+export const delay = (ms: number) => new Promise((resolve) => setTimeout(() => resolve('done'), ms))
+
+export const TEXT = 'TEXT' as const
+export const ERROR_MESSAGE = 'ERROR_MESSAGE' as const
+export const FALLBACK = 'FALLBACK' as const
+export const MS_100 = 100 as const
@@ -0,0 +1,9 @@
+import matchers from '@testing-library/jest-dom/matchers'
+import { cleanup } from '@testing-library/react'
+import { afterEach, expect } from 'vitest'
+
+expect.extend(matchers)
+
+afterEach(() => {
+  cleanup()
+})
@@ -0,0 +1,7 @@
+{
+  "extends": "@suspensive/tsconfig/react-library.json",
+  "include": ["."],
+  "compilerOptions": {
+    "types": ["node", "@testing-library/jest-dom"]
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const hasResetKeysChanged = (a: unknown[] = [], b: unknown[] = []) =>
		a.length !== b.length \|\| a.some((item, index) => !Object.is(item, b[index]))
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { hasResetKeysChanged } from './hasResetKeysChanged'
		export { hashKey } from './hashKey'