Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(suspensive.org): add _document.tsx to include Sandpack CSS #1145

Merged
merged 3 commits into from
Jul 26, 2024

Conversation

kangju2000
Copy link
Collaborator

Overview

[AS-IS]

Page appears broken when accessed because Sandpack's styles are not being injected.

2024-07-26.4.56.43.mov
스크린샷 2024-07-26 오후 4 39 41

[TO-BE]

Resolve this by injecting Sandpack CSS into _document.tsx. Sandpack Document

2024-07-26.4.56.03.mov
스크린샷 2024-07-26 오후 4 39 55

PR Checklist

  • I did below actions if need
  1. I read the Contributing Guide
  2. I added documents and tests.

@kangju2000 kangju2000 requested a review from manudeli as a code owner July 26, 2024 07:59
Copy link

vercel bot commented Jul 26, 2024

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 26, 2024 8:34am
v1.suspensive.org ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 26, 2024 8:34am
visualization.suspensive.org ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 26, 2024 8:34am

Copy link

changeset-bot bot commented Jul 26, 2024

⚠️ No Changeset found

Latest commit: b01ca18

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

Copy link

github-actions bot commented Jul 26, 2024

Size Change: 0 B

Total Size: 86.6 kB

ℹ️ View Unchanged
Filename Size
packages/cache/dist/Cache.cjs 995 B
packages/cache/dist/Cache.js 159 B
packages/cache/dist/cacheOptions.cjs 539 B
packages/cache/dist/cacheOptions.js 136 B
packages/cache/dist/CacheStore.cjs 1.78 kB
packages/cache/dist/CacheStore.js 134 B
packages/cache/dist/CacheStoreProvider.cjs 660 B
packages/cache/dist/CacheStoreProvider.js 151 B
packages/cache/dist/chunk-C6JFWLDA.js 260 B
packages/cache/dist/chunk-FFFIOY4B.js 258 B
packages/cache/dist/chunk-J4LYH5KM.js 164 B
packages/cache/dist/chunk-JVEIDWQ2.js 249 B
packages/cache/dist/chunk-QETBZSG5.js 521 B
packages/cache/dist/chunk-RN456Z2W.js 145 B
packages/cache/dist/chunk-UTDQZXTL.js 1.28 kB
packages/cache/dist/chunk-ZQY34GOT.js 294 B
packages/cache/dist/index.cjs 2.29 kB
packages/cache/dist/index.js 240 B
packages/cache/dist/types.cjs 416 B
packages/cache/dist/types.js 66 B
packages/cache/dist/useCache.cjs 742 B
packages/cache/dist/useCache.js 152 B
packages/cache/dist/useCacheStore.cjs 659 B
packages/cache/dist/useCacheStore.js 147 B
packages/jotai/dist/Atom.cjs 656 B
packages/jotai/dist/Atom.js 115 B
packages/jotai/dist/AtomValue.cjs 647 B
packages/jotai/dist/AtomValue.js 120 B
packages/jotai/dist/chunk-AJTKETMA.js 240 B
packages/jotai/dist/chunk-ELUBAXMH.js 256 B
packages/jotai/dist/chunk-VOZRGQVT.js 242 B
packages/jotai/dist/index.cjs 751 B
packages/jotai/dist/index.js 158 B
packages/jotai/dist/SetAtom.cjs 645 B
packages/jotai/dist/SetAtom.js 118 B
packages/react-image/dist/chunk-VVVCPJZH.js 1.11 kB
packages/react-image/dist/chunk-WGTP75MY.js 405 B
packages/react-image/dist/index.cjs 1.54 kB
packages/react-image/dist/index.js 140 B
packages/react-image/dist/Load.cjs 1.32 kB
packages/react-image/dist/Load.js 126 B
packages/react-image/dist/SuspenseImage.cjs 1.53 kB
packages/react-image/dist/SuspenseImage.js 137 B
packages/react-query-4/dist/chunk-2H47PXAH.js 145 B
packages/react-query-4/dist/chunk-4AU4A5TK.js 312 B
packages/react-query-4/dist/chunk-7LC5EH5R.js 308 B
packages/react-query-4/dist/chunk-HJAGY6R3.js 254 B
packages/react-query-4/dist/chunk-JMZC2U4M.js 306 B
packages/react-query-4/dist/chunk-NKKRZH3C.js 269 B
packages/react-query-4/dist/chunk-P5MROV72.js 470 B
packages/react-query-4/dist/chunk-QETBZSG5.js 521 B
packages/react-query-4/dist/chunk-S7L2LUVS.js 277 B
packages/react-query-4/dist/chunk-V5RSZNGB.js 152 B
packages/react-query-4/dist/chunk-W3SOIIM5.js 273 B
packages/react-query-4/dist/index.cjs 1.61 kB
packages/react-query-4/dist/index.js 313 B
packages/react-query-4/dist/infiniteQueryOptions.cjs 548 B
packages/react-query-4/dist/infiniteQueryOptions.js 144 B
packages/react-query-4/dist/Mutation.cjs 821 B
packages/react-query-4/dist/Mutation.js 132 B
packages/react-query-4/dist/QueryErrorBoundary.cjs 1.12 kB
packages/react-query-4/dist/QueryErrorBoundary.js 142 B
packages/react-query-4/dist/queryOptions.cjs 540 B
packages/react-query-4/dist/queryOptions.js 136 B
packages/react-query-4/dist/SuspenseInfiniteQuery.cjs 1.05 kB
packages/react-query-4/dist/SuspenseInfiniteQuery.js 154 B
packages/react-query-4/dist/SuspenseQueries.cjs 923 B
packages/react-query-4/dist/SuspenseQueries.js 149 B
packages/react-query-4/dist/SuspenseQuery.cjs 1.04 kB
packages/react-query-4/dist/SuspenseQuery.js 147 B
packages/react-query-4/dist/useSuspenseInfiniteQuery.cjs 833 B
packages/react-query-4/dist/useSuspenseInfiniteQuery.js 147 B
packages/react-query-4/dist/useSuspenseQueries.cjs 833 B
packages/react-query-4/dist/useSuspenseQueries.js 142 B
packages/react-query-4/dist/useSuspenseQuery.cjs 824 B
packages/react-query-4/dist/useSuspenseQuery.js 140 B
packages/react-query-5/dist/chunk-4MX6YXXC.js 471 B
packages/react-query-5/dist/chunk-FKG24WFN.js 170 B
packages/react-query-5/dist/chunk-G4UWQXSU.js 310 B
packages/react-query-5/dist/chunk-GXSI7FXZ.js 306 B
packages/react-query-5/dist/chunk-KI4RNNHO.js 173 B
packages/react-query-5/dist/chunk-LHMCCR64.js 262 B
packages/react-query-5/dist/chunk-LQDNL5GK.js 172 B
packages/react-query-5/dist/chunk-QETBZSG5.js 521 B
packages/react-query-5/dist/chunk-RX5QN4OH.js 167 B
packages/react-query-5/dist/chunk-XFQQRL67.js 319 B
packages/react-query-5/dist/chunk-XRWCGESR.js 168 B
packages/react-query-5/dist/index.cjs 1.56 kB
packages/react-query-5/dist/index.js 309 B
packages/react-query-5/dist/infiniteQueryOptions.cjs 573 B
packages/react-query-5/dist/infiniteQueryOptions.js 144 B
packages/react-query-5/dist/Mutation.cjs 821 B
packages/react-query-5/dist/Mutation.js 132 B
packages/react-query-5/dist/QueryErrorBoundary.cjs 1.12 kB
packages/react-query-5/dist/QueryErrorBoundary.js 142 B
packages/react-query-5/dist/queryOptions.cjs 563 B
packages/react-query-5/dist/queryOptions.js 136 B
packages/react-query-5/dist/SuspenseInfiniteQuery.cjs 833 B
packages/react-query-5/dist/SuspenseInfiniteQuery.js 145 B
packages/react-query-5/dist/SuspenseQueries.cjs 671 B
packages/react-query-5/dist/SuspenseQueries.js 139 B
packages/react-query-5/dist/SuspenseQuery.cjs 825 B
packages/react-query-5/dist/SuspenseQuery.js 137 B
packages/react-query-5/dist/useSuspenseInfiniteQuery.cjs 577 B
packages/react-query-5/dist/useSuspenseInfiniteQuery.js 148 B
packages/react-query-5/dist/useSuspenseQueries.cjs 571 B
packages/react-query-5/dist/useSuspenseQueries.js 142 B
packages/react-query-5/dist/useSuspenseQuery.cjs 569 B
packages/react-query-5/dist/useSuspenseQuery.js 140 B
packages/react-query/dist/index.cjs 551 B
packages/react-query/dist/index.js 121 B
packages/react-query/dist/v4.cjs 550 B
packages/react-query/dist/v4.js 116 B
packages/react-query/dist/v5.cjs 550 B
packages/react-query/dist/v5.js 116 B
packages/react/dist/chunk-544C5T22.js 413 B
packages/react/dist/chunk-5Y7R7QOJ.js 447 B
packages/react/dist/chunk-COH2ES5G.js 578 B
packages/react/dist/chunk-GMRCRKFL.js 1.58 kB
packages/react/dist/chunk-HVDFXOFP.js 414 B
packages/react/dist/chunk-INLOGI26.js 282 B
packages/react/dist/chunk-M7EOGQFD.js 601 B
packages/react/dist/chunk-TTRGFZ2C.js 136 B
packages/react/dist/chunk-WZNIIXGL.js 506 B
packages/react/dist/chunk-X3ZTIQUC.js 820 B
packages/react/dist/chunk-X6UCPL4B.js 347 B
packages/react/dist/chunk-YCWLSLUV.js 667 B
packages/react/dist/Delay.cjs 1.11 kB
packages/react/dist/Delay.js 149 B
packages/react/dist/DevMode.cjs 530 B
packages/react/dist/DevMode.js 131 B
packages/react/dist/ErrorBoundary.cjs 2.67 kB
packages/react/dist/ErrorBoundary.js 198 B
packages/react/dist/ErrorBoundaryGroup.cjs 1.36 kB
packages/react/dist/ErrorBoundaryGroup.js 179 B
packages/react/dist/index.cjs 3.99 kB
packages/react/dist/index.js 326 B
packages/react/dist/Suspense.cjs 1.3 kB
packages/react/dist/Suspense.js 162 B
packages/react/dist/Suspensive.cjs 1.14 kB
packages/react/dist/Suspensive.js 165 B
packages/react/dist/wrap.cjs 3.6 kB
packages/react/dist/wrap.js 201 B
packages/utils/dist/chunk-5XT623M4.js 263 B
packages/utils/dist/chunk-FWXVSCJA.js 125 B
packages/utils/dist/chunk-OSQ3QLKJ.js 276 B
packages/utils/dist/chunk-PKN4LMAV.js 137 B
packages/utils/dist/chunk-TUVDYELP.js 191 B
packages/utils/dist/ConstructorType.cjs 424 B
packages/utils/dist/ConstructorType.js 76 B
packages/utils/dist/increase.cjs 533 B
packages/utils/dist/increase.js 119 B
packages/utils/dist/index.cjs 1.58 kB
packages/utils/dist/index.js 926 B
packages/utils/dist/noop.cjs 522 B
packages/utils/dist/noop.js 115 B
packages/utils/dist/Nullable.cjs 419 B
packages/utils/dist/Nullable.js 69 B
packages/utils/dist/OmitKeyof.cjs 420 B
packages/utils/dist/OmitKeyof.js 70 B
packages/utils/dist/RequiredKeyof.cjs 425 B
packages/utils/dist/RequiredKeyof.js 74 B
packages/utils/dist/useIsomorphicLayoutEffect.cjs 588 B
packages/utils/dist/useIsomorphicLayoutEffect.js 136 B
packages/utils/dist/usePreservedCallback.cjs 697 B
packages/utils/dist/usePreservedCallback.js 144 B
packages/utils/dist/useTimeout.cjs 769 B
packages/utils/dist/useTimeout.js 144 B

compressed-size-action

Copy link

codspeed-hq bot commented Jul 26, 2024

CodSpeed Performance Report

Merging #1145 will create unknown performance changes

Comparing docs/fix-unstyled-in-ssr (b01ca18) with main (5008ad3)

Summary

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

@codecov-commenter
Copy link

codecov-commenter commented Jul 26, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.25%. Comparing base (5008ad3) to head (b01ca18).

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #1145   +/-   ##
=======================================
  Coverage   75.25%   75.25%           
=======================================
  Files          62       62           
  Lines         594      594           
  Branches      116      117    +1     
=======================================
  Hits          447      447           
  Misses        137      137           
  Partials       10       10           
Components Coverage Δ
@suspensive/utils 47.16% <ø> (ø)
@suspensive/react 95.74% <ø> (ø)
@suspensive/react-query 67.66% <ø> (ø)
@suspensive/react-query-4 0.00% <ø> (ø)
@suspensive/react-query-5 0.00% <ø> (ø)
@suspensive/jotai 0.00% <ø> (ø)
@suspensive/cache 98.23% <ø> (ø)
@suspensive/react-image 80.39% <ø> (ø)

Copy link
Member

@manudeli manudeli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So cool 🚀🚀🚀🚀🚀 You are king

Copy link

github-actions bot commented Jul 26, 2024

Bundle sizes [visualization]

Compared against 5008ad3

No significant changes found

@manudeli manudeli merged commit 9ecaa7b into main Jul 26, 2024
18 checks passed
@manudeli manudeli deleted the docs/fix-unstyled-in-ssr branch July 26, 2024 08:40
manudeli added a commit that referenced this pull request Aug 3, 2024
# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

### [AS-IS]
Page appears broken when accessed because Sandpack's styles are not
being injected.


https://github.com/user-attachments/assets/42053df5-1608-4c2d-ab0d-e2a06fa974d4

<img width="838" alt="스크린샷 2024-07-26 오후 4 39 41"
src="https://github.com/user-attachments/assets/866c7486-aea6-4803-b6f1-214187997f8a">



### [TO-BE]
Resolve this by injecting Sandpack CSS into _document.tsx. [Sandpack
Document](https://sandpack.codesandbox.io/docs/guides/ssr#nextjs)


https://github.com/user-attachments/assets/45166635-77dd-46d6-acc5-49da580a57f6


<img width="838" alt="스크린샷 2024-07-26 오후 4 39 55"
src="https://github.com/user-attachments/assets/d123b5da-7252-45e0-a41e-c906f70cfff1">


## 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>
manudeli pushed a commit that referenced this pull request Aug 3, 2024
# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

### [AS-IS]
Page appears broken when accessed because Sandpack's styles are not
being injected.


https://github.com/user-attachments/assets/42053df5-1608-4c2d-ab0d-e2a06fa974d4

<img width="838" alt="스크린샷 2024-07-26 오후 4 39 41"
src="https://github.com/user-attachments/assets/866c7486-aea6-4803-b6f1-214187997f8a">



### [TO-BE]
Resolve this by injecting Sandpack CSS into _document.tsx. [Sandpack
Document](https://sandpack.codesandbox.io/docs/guides/ssr#nextjs)


https://github.com/user-attachments/assets/45166635-77dd-46d6-acc5-49da580a57f6


<img width="838" alt="스크린샷 2024-07-26 오후 4 39 55"
src="https://github.com/user-attachments/assets/d123b5da-7252-45e0-a41e-c906f70cfff1">


## 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.
manudeli added a commit that referenced this pull request Aug 3, 2024
# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

### [AS-IS]
Page appears broken when accessed because Sandpack's styles are not
being injected.


https://github.com/user-attachments/assets/42053df5-1608-4c2d-ab0d-e2a06fa974d4

<img width="838" alt="스크린샷 2024-07-26 오후 4 39 41"
src="https://github.com/user-attachments/assets/866c7486-aea6-4803-b6f1-214187997f8a">



### [TO-BE]
Resolve this by injecting Sandpack CSS into _document.tsx. [Sandpack
Document](https://sandpack.codesandbox.io/docs/guides/ssr#nextjs)


https://github.com/user-attachments/assets/45166635-77dd-46d6-acc5-49da580a57f6


<img width="838" alt="스크린샷 2024-07-26 오후 4 39 55"
src="https://github.com/user-attachments/assets/d123b5da-7252-45e0-a41e-c906f70cfff1">


## 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>
manudeli added a commit that referenced this pull request Aug 3, 2024
# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

### [AS-IS]
Page appears broken when accessed because Sandpack's styles are not
being injected.


https://github.com/user-attachments/assets/42053df5-1608-4c2d-ab0d-e2a06fa974d4

<img width="838" alt="스크린샷 2024-07-26 오후 4 39 41"
src="https://github.com/user-attachments/assets/866c7486-aea6-4803-b6f1-214187997f8a">



### [TO-BE]
Resolve this by injecting Sandpack CSS into _document.tsx. [Sandpack
Document](https://sandpack.codesandbox.io/docs/guides/ssr#nextjs)


https://github.com/user-attachments/assets/45166635-77dd-46d6-acc5-49da580a57f6


<img width="838" alt="스크린샷 2024-07-26 오후 4 39 55"
src="https://github.com/user-attachments/assets/d123b5da-7252-45e0-a41e-c906f70cfff1">


## 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants