Merge remote-tracking branch 'origin/main' into docs/add-codeline-hig…

…hlight

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,5 +8,5 @@
 
 - [ ] I did below actions if need
 
-1. I read the [Contributing Guide](https://github.com/toss/slash/blob/main/.github/CONTRIBUTING.md)
+1. I read the [Contributing Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
 2. I added documents and tests.

.github/labeler.yml

@@ -2,6 +2,8 @@
   - "packages/react/**/*"
 "@suspensive/react-query":
   - "packages/react-query/**/*"
+"@suspensive/react-await":
+  - "packages/react-await/**/*"
 "documentation":
   - "docs/**/*"
 "visualization":

.github/workflows/ci.yml

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

README.md

@@ -36,7 +36,6 @@ All declarative components to use suspense on both CSR, SSR.
 - AsyncBoundary, withAsyncBoundary (containing CSROnly)
 - Delay, withDelay
 - SuspensiveProvider, Suspensive
-- Await, useAwait, awaitClient (Experimental)
 
 ### Installation
 

docs/src/pages/docs/_meta.en.json

@@ -3,6 +3,7 @@
   "intro": "Getting Started",
   "react": "@suspensive/react",
   "react-query": "@suspensive/react-query",
+  "react-await": "@suspensive/react-await",
   "---": {
     "type": "separator"
   },

docs/src/pages/docs/_meta.ko.json

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

docs/src/pages/docs/react/Await.en.mdx → docs/src/pages/docs/react-await/Await.en.mdx

@@ -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
 

docs/src/pages/docs/react/Await.ko.mdx → docs/src/pages/docs/react-await/Await.ko.mdx

@@ -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
 

docs/src/pages/docs/react-await/_meta.en.json

@@ -0,0 +1,4 @@
+{
+  "installation": { "title": "Installation" },
+  "Await": { "title": "<Await/>" }
+}

docs/src/pages/docs/react-await/_meta.ko.json

@@ -0,0 +1,4 @@
+{
+  "installation": { "title": "설치하기" },
+  "Await": { "title": "<Await/>" }
+}

docs/src/pages/docs/react-await/installation.en.mdx

@@ -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
+```

docs/src/pages/docs/react-await/installation.ko.mdx

@@ -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
+```

docs/src/pages/docs/react/_meta.en.json

@@ -5,6 +5,5 @@
   "ErrorBoundaryGroup": { "title": "<ErrorBoundaryGroup/>" },
   "Delay": { "title": "<Delay/>" },
   "AsyncBoundary": { "title": "<AsyncBoundary/>" },
-  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" },
-  "Await": { "title": "<Await/>" }
+  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" }
 }

docs/src/pages/docs/react/_meta.ko.json

@@ -5,6 +5,5 @@
   "ErrorBoundaryGroup": { "title": "<ErrorBoundaryGroup/>" },
   "Delay": { "title": "<Delay/>" },
   "AsyncBoundary": { "title": "<AsyncBoundary/>" },
-  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" },
-  "Await": { "title": "<Await/>" }
+  "SuspensiveProvider": { "title": "<SuspensiveProvider/>" }
 }

package.json

@@ -35,6 +35,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",
@@ -45,6 +46,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",

packages/react-await/.eslintrc.cjs

@@ -0,0 +1,6 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@suspensive/eslint-config/react-ts'],
+  ignorePatterns: ['*.js*', 'dist', 'coverage'],
+}

packages/react-await/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @suspensive/react-await
+
+## 0.0.1
+
+### Patch Changes
+
+- 7e01577: fix(react): remove `<Await/>`

packages/react-await/LICENSE

@@ -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.

packages/react-await/README.ko.md

@@ -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
+```

packages/react-await/README.md

@@ -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
+```

packages/react-await/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@suspensive/react-await",
+  "version": "0.0.1",
+  "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"
+  }
+}

packages/react/src/experimental/Await.spec.tsx → packages/react-await/src/Await.spec.tsx

@@ -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

packages/react/src/experimental/Await.tsx → packages/react-await/src/Await.tsx

@@ -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
 

packages/react-await/src/types/index.ts

@@ -0,0 +1 @@
+export type { Tuple } from './Tuple'

packages/react-await/src/utils/hasResetKeysChanged.spec.ts

@@ -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)
+  })
+})

packages/react-await/src/utils/hasResetKeysChanged.ts

@@ -0,0 +1,2 @@
+export const hasResetKeysChanged = (a: unknown[] = [], b: unknown[] = []) =>
+  a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))

packages/react/src/utils/hashKey.ts → packages/react-await/src/utils/hashKey.ts

@@ -1,4 +1,4 @@
-import type { Key } from '../experimental/Await'
+import type { Key } from '../Await'
 import type { PlainObject } from './isPlainObject'
 import { isPlainObject } from './isPlainObject'
 

packages/react-await/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { hasResetKeysChanged } from './hasResetKeysChanged'
+export { hashKey } from './hashKey'

packages/react-await/src/utils/toTest.tsx

@@ -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