fix(react): add defineSuspense util function #1065

ssi02014 · 2024-07-10T09:53:20Z

Overview

Add the defineSuspense utility function discussed in the issue article above, and write the test code.

The reason we defined SuspenseClientOnly within defineSuspense is because we are getting the "dependency cycle detected" issue.

If you have any additional thoughts on the above issues, please let us know!

PR Checklist

I did below actions if need

I read the Contributing Guide
I added documents and tests.

changeset-bot · 2024-07-10T09:53:23Z

🦋 Changeset detected

Latest commit: 2195a58

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@suspensive/react	Patch
@suspensive/react-query-4	Patch
@suspensive/react-query-5	Patch
@suspensive/react-query	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2024-07-10T09:53:24Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2024 1:29pm
v1.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2024 1:29pm
visualization.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2024 1:29pm

vercel · 2024-07-10T09:53:27Z

@ssi02014 is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

codspeed-hq · 2024-07-10T09:56:33Z

CodSpeed Performance Report

Merging #1065 will create unknown performance changes

_{Comparing ssi02014:feat/defineSuspense (2195a58) with main (df5cedb)}

Summary

⚠️ No benchmarks were detected in both the base of the PR and the PR.

codecov-commenter · 2024-07-10T09:59:12Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.23%. Comparing base (df5cedb) to head (2195a58).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1065      +/-   ##
==========================================
+ Coverage   84.18%   84.23%   +0.05%     
==========================================
  Files          51       52       +1     
  Lines         550      552       +2     
  Branches      117      117              
==========================================
+ Hits          463      465       +2     
  Misses         82       82              
  Partials        5        5

Components	Coverage Δ
@suspensive/react	`97.05% <100.00%> (+0.02%)`	⬆️
@suspensive/react-query	`75.28% <ø> (ø)`
@suspensive/react-query-4	`0.00% <ø> (ø)`
@suspensive/react-query-5	`0.00% <ø> (ø)`
@suspensive/jotai	`0.00% <ø> (ø)`
@suspensive/promise	`100.00% <ø> (ø)`
@suspensive/react-await	`100.00% <ø> (ø)`
@suspensive/react-image	`80.39% <ø> (ø)`

manudeli

Thanks! 🚀🚀🚀

packages/react/src/utils/defineSuspense.tsx

manudeli

@ssi02014 Double check please! I modify your Pull Request

manudeli · 2024-07-10T13:27:02Z

packages/react/src/utils/defineSuspense.tsx

+/* eslint-disable @typescript-eslint/unified-signatures */
+export function defineSuspense(options: { componentPropsClientOnly: true }): typeof SuspenseClientOnly
+export function defineSuspense(options: { defaultPropsClientOnly: true }): typeof SuspenseClientOnly
+export function defineSuspense(options: {
+  componentPropsClientOnly: true
+  defaultPropsClientOnly: undefined
+}): typeof SuspenseClientOnly
+export function defineSuspense(options: {
+  componentPropsClientOnly: undefined
+  defaultPropsClientOnly: true
+}): typeof SuspenseClientOnly
+export function defineSuspense(options: {
+  componentPropsClientOnly: true
+  defaultPropsClientOnly: true
+}): typeof SuspenseClientOnly
+export function defineSuspense(options: {
+  componentPropsClientOnly: true
+  defaultPropsClientOnly: false
+}): typeof SuspenseClientOnly
+export function defineSuspense(options: {
+  componentPropsClientOnly: false
+  defaultPropsClientOnly: true
+}): typeof SuspenseClientOnly
+export function defineSuspense(options: {
+  componentPropsClientOnly: false
+  defaultPropsClientOnly: false
+}): typeof Suspense
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function defineSuspense(options: {}): typeof Suspense
+export function defineSuspense({
+  defaultPropsClientOnly,
+  componentPropsClientOnly,
+}: {
+  defaultPropsClientOnly?: boolean
+  componentPropsClientOnly?: boolean
+}): typeof SuspenseClientOnly | typeof Suspense {
+  return componentPropsClientOnly ?? defaultPropsClientOnly ? SuspenseClientOnly : Suspense
+}


I added function overriding.

manudeli · 2024-07-10T13:27:27Z

packages/react/src/utils/defineSuspense.test-d.ts

+describe('defineSuspense', () => {
+  it('type check', () => {
+    expectTypeOf(defineSuspense({ componentPropsClientOnly: true })).toEqualTypeOf<typeof SuspenseClientOnly>()
+    expectTypeOf(defineSuspense({ defaultPropsClientOnly: true })).toEqualTypeOf<typeof SuspenseClientOnly>()
+    expectTypeOf(defineSuspense({ componentPropsClientOnly: true, defaultPropsClientOnly: undefined })).toEqualTypeOf<
+      typeof SuspenseClientOnly
+    >()
+    expectTypeOf(defineSuspense({ componentPropsClientOnly: undefined, defaultPropsClientOnly: true })).toEqualTypeOf<
+      typeof SuspenseClientOnly
+    >()
+    expectTypeOf(defineSuspense({ defaultPropsClientOnly: true, componentPropsClientOnly: true })).toEqualTypeOf<
+      typeof SuspenseClientOnly
+    >()
+    expectTypeOf(defineSuspense({ defaultPropsClientOnly: true, componentPropsClientOnly: false })).toEqualTypeOf<
+      typeof SuspenseClientOnly
+    >()
+    expectTypeOf(defineSuspense({ defaultPropsClientOnly: false, componentPropsClientOnly: true })).toEqualTypeOf<
+      typeof SuspenseClientOnly
+    >()
+    expectTypeOf(defineSuspense({ defaultPropsClientOnly: false, componentPropsClientOnly: false })).toEqualTypeOf<
+      typeof Suspense
+    >()
+    expectTypeOf(
+      defineSuspense({ defaultPropsClientOnly: undefined, componentPropsClientOnly: undefined })
+    ).toEqualTypeOf<typeof Suspense>()
+  })
+})


I added type test codes

manudeli · 2024-07-10T13:27:44Z

packages/react/src/utils/defineSuspense.spec.ts

+    expect(defineSuspense({ componentPropsClientOnly: true })).toBe(SuspenseClientOnly)
+    expect(defineSuspense({ componentPropsClientOnly: true, defaultPropsClientOnly: undefined })).toBe(
+      SuspenseClientOnly
+    )
+  })
+  it('should return SuspenseClientOnly when defaultPropsClientOnly is true and componentPropsClientOnly is undefined', () => {
+    expect(defineSuspense({ defaultPropsClientOnly: true })).toBe(SuspenseClientOnly)
+    expect(defineSuspense({ componentPropsClientOnly: undefined, defaultPropsClientOnly: true })).toBe(
+      SuspenseClientOnly
+    )
+  })


I added more test code

ssi02014 · 2024-07-10T13:52:48Z

@manudeli Thank you for improving this task👍 I've checked it out.

@ssi02014

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @suspensive/react@2.6.1 ### Patch Changes - [#1065](#1065) [`2216377`](2216377) Thanks [@ssi02014](https://github.com/ssi02014)! - feat(react): fix clientOnly prop of Suspense with defaultProps ## @suspensive/react-query@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 - @suspensive/react-query-4@2.6.1 - @suspensive/react-query-5@2.6.1 ## @suspensive/react-query-4@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 ## @suspensive/react-query-5@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

close: #1058 # Overview Add the `defineSuspense` utility function discussed in the issue article above, and write the test code. The reason we defined `SuspenseClientOnly` within `defineSuspense` is because we are getting the `"dependency cycle detected"` issue. If you have any additional thoughts on the above issues, please let us know! ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>

@ssi02014

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @suspensive/react@2.6.1 ### Patch Changes - [#1065](#1065) [`2216377`](2216377) Thanks [@ssi02014](https://github.com/ssi02014)! - feat(react): fix clientOnly prop of Suspense with defaultProps ## @suspensive/react-query@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 - @suspensive/react-query-4@2.6.1 - @suspensive/react-query-5@2.6.1 ## @suspensive/react-query-4@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 ## @suspensive/react-query-5@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

close: #1058 # Overview Add the `defineSuspense` utility function discussed in the issue article above, and write the test code. The reason we defined `SuspenseClientOnly` within `defineSuspense` is because we are getting the `"dependency cycle detected"` issue. If you have any additional thoughts on the above issues, please let us know! ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests. ---------

@ssi02014

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @suspensive/react@2.6.1 ### Patch Changes - [#1065](#1065) [`2216377`](2216377) Thanks [@ssi02014](https://github.com/ssi02014)! - feat(react): fix clientOnly prop of Suspense with defaultProps ## @suspensive/react-query@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 - @suspensive/react-query-4@2.6.1 - @suspensive/react-query-5@2.6.1 ## @suspensive/react-query-4@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 ## @suspensive/react-query-5@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1

close: #1058 # Overview Add the `defineSuspense` utility function discussed in the issue article above, and write the test code. The reason we defined `SuspenseClientOnly` within `defineSuspense` is because we are getting the `"dependency cycle detected"` issue. If you have any additional thoughts on the above issues, please let us know! ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>

@ssi02014

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @suspensive/react@2.6.1 ### Patch Changes - [#1065](#1065) [`2216377`](2216377) Thanks [@ssi02014](https://github.com/ssi02014)! - feat(react): fix clientOnly prop of Suspense with defaultProps ## @suspensive/react-query@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 - @suspensive/react-query-4@2.6.1 - @suspensive/react-query-5@2.6.1 ## @suspensive/react-query-4@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 ## @suspensive/react-query-5@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1

close: #1058 # Overview Add the `defineSuspense` utility function discussed in the issue article above, and write the test code. The reason we defined `SuspenseClientOnly` within `defineSuspense` is because we are getting the `"dependency cycle detected"` issue. If you have any additional thoughts on the above issues, please let us know! ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>

@ssi02014

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @suspensive/react@2.6.1 ### Patch Changes - [#1065](#1065) [`2216377`](2216377) Thanks [@ssi02014](https://github.com/ssi02014)! - feat(react): fix clientOnly prop of Suspense with defaultProps ## @suspensive/react-query@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 - @suspensive/react-query-4@2.6.1 - @suspensive/react-query-5@2.6.1 ## @suspensive/react-query-4@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1 ## @suspensive/react-query-5@2.6.1 ### Patch Changes - Updated dependencies \[[`2216377`](2216377)]: - @suspensive/react@2.6.1

ssi02014 requested a review from manudeli as a code owner July 10, 2024 09:53

github-actions bot added eslint dependencies @suspensive/react @suspensive/promise labels Jul 10, 2024

feat(react): add defineSuspense util function

4afe9af

ssi02014 force-pushed the feat/defineSuspense branch from 0bb02d6 to 4afe9af Compare July 10, 2024 09:54

github-actions bot removed eslint dependencies @suspensive/promise labels Jul 10, 2024

fix(react): fix defineSuspense test code

b207b31

vercel bot deployed to Preview – visualization.suspensive.org July 10, 2024 09:57 View deployment

vercel bot deployed to Preview – v1.suspensive.org July 10, 2024 09:57 View deployment

vercel bot deployed to Preview – suspensive.org July 10, 2024 10:08 View deployment

manudeli changed the title ~~feat(react): add defineSuspense util function~~ fix(react): add defineSuspense util function Jul 10, 2024

Create cold-wasps-hunt.md

4301546

vercel bot deployed to Preview – visualization.suspensive.org July 10, 2024 10:14 View deployment

vercel bot deployed to Preview – v1.suspensive.org July 10, 2024 10:15 View deployment

manudeli approved these changes Jul 10, 2024

View reviewed changes

vercel bot deployed to Preview – suspensive.org July 10, 2024 10:22 View deployment

manudeli assigned ssi02014 Jul 10, 2024

manudeli reviewed Jul 10, 2024

View reviewed changes

packages/react/src/utils/defineSuspense.tsx Outdated Show resolved Hide resolved

Update packages/react/src/utils/defineSuspense.tsx

fdc49dd

vercel bot deployed to Preview – v1.suspensive.org July 10, 2024 13:01 View deployment

vercel bot deployed to Preview – visualization.suspensive.org July 10, 2024 13:02 View deployment

vercel bot deployed to Preview – suspensive.org July 10, 2024 13:03 View deployment

chore: update

d49384b

vercel bot deployed to Preview – v1.suspensive.org July 10, 2024 13:06 View deployment

vercel bot deployed to Preview – visualization.suspensive.org July 10, 2024 13:07 View deployment

test(react): add test cases

2195a58

vercel bot deployed to Preview – v1.suspensive.org July 10, 2024 13:27 View deployment

manudeli approved these changes Jul 10, 2024

View reviewed changes

vercel bot deployed to Preview – visualization.suspensive.org July 10, 2024 13:29 View deployment

vercel bot deployed to Preview – suspensive.org July 10, 2024 13:29 View deployment

manudeli merged commit 2216377 into toss:main Jul 10, 2024
14 checks passed

ssi02014 deleted the feat/defineSuspense branch July 10, 2024 14:06

github-actions bot mentioned this pull request Jul 10, 2024

chore: version packages #1067

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(react): add defineSuspense util function #1065

fix(react): add defineSuspense util function #1065

Uh oh!

ssi02014 commented Jul 10, 2024 •

edited by manudeli

Loading

Uh oh!

changeset-bot bot commented Jul 10, 2024 •

edited

Loading

Uh oh!

vercel bot commented Jul 10, 2024 •

edited

Loading

Uh oh!

vercel bot commented Jul 10, 2024

Uh oh!

codspeed-hq bot commented Jul 10, 2024 •

edited

Loading

Uh oh!

codecov-commenter commented Jul 10, 2024 •

edited

Loading

Uh oh!

manudeli left a comment •

edited

Loading

Uh oh!

Uh oh!

manudeli left a comment

Uh oh!

manudeli Jul 10, 2024

Uh oh!

manudeli Jul 10, 2024

Uh oh!

manudeli Jul 10, 2024

Uh oh!

ssi02014 commented Jul 10, 2024

Uh oh!

Uh oh!

Uh oh!

fix(react): add defineSuspense util function #1065

fix(react): add defineSuspense util function #1065

Uh oh!

Conversation

ssi02014 commented Jul 10, 2024 • edited by manudeli Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Uh oh!

changeset-bot bot commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Jul 10, 2024

Uh oh!

codspeed-hq bot commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #1065 will create unknown performance changes

Summary

Uh oh!

codecov-commenter commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

manudeli left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

manudeli left a comment

Choose a reason for hiding this comment

Uh oh!

manudeli Jul 10, 2024

Choose a reason for hiding this comment

Uh oh!

manudeli Jul 10, 2024

Choose a reason for hiding this comment

Uh oh!

manudeli Jul 10, 2024

Choose a reason for hiding this comment

Uh oh!

ssi02014 commented Jul 10, 2024

Uh oh!

Uh oh!

Uh oh!

ssi02014 commented Jul 10, 2024 •

edited by manudeli

Loading

changeset-bot bot commented Jul 10, 2024 •

edited

Loading

vercel bot commented Jul 10, 2024 •

edited

Loading

codspeed-hq bot commented Jul 10, 2024 •

edited

Loading

codecov-commenter commented Jul 10, 2024 •

edited

Loading

manudeli left a comment •

edited

Loading