Sandpack 2.0: upgrade playgrounds #5917
Conversation
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
93.68 KB (🟡 +58 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Three Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/404 |
75.76 KB (🟡 +2 B) |
169.44 KB |
/500 |
75.75 KB (🟡 +2 B) |
169.44 KB |
/[[...markdownPath]] |
77.18 KB (🟡 +2 B) |
170.86 KB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
93.67 KB (🟡 +38 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Three Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/404 |
75.76 KB (🟡 +2 B) |
169.42 KB |
/500 |
75.75 KB (🟡 +2 B) |
169.42 KB |
/[[...markdownPath]] |
77.18 KB (🟡 +2 B) |
170.84 KB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
93.67 KB (🟡 +38 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Three Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/404 |
75.76 KB (🟡 +2 B) |
169.42 KB |
/500 |
75.75 KB (🟡 +2 B) |
169.42 KB |
/[[...markdownPath]] |
77.18 KB (🟡 +2 B) |
170.84 KB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
|
@harish-sethuraman, can I count on you to review this PR? Things to pay attention to:
|
|
I started to test and then this happened when I typed long text and also the horizontal scroll is also gone |
danilowoz
force-pushed
the
draft/awesome-kilby
branch
from
3854215 to
8446551
Compare
danilowoz
force-pushed
the
draft/awesome-kilby
branch
from
8446551 to
bb0e431
Compare
|
Hey @harish-sethuraman, thanks for reviewing. CodeMirror changed how they handle the scroll, so it needed to do a few tweaks. Can you check it again? |
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
103.95 KB (🟡 +2 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Three Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/404 |
76.94 KB (🟡 +5 B) |
180.89 KB |
/500 |
76.93 KB (🟡 +5 B) |
180.88 KB |
/[[...markdownPath]] |
78.41 KB (🟡 +5 B) |
182.36 KB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
|
Thanks @danilowoz for this change! Could you update to the latest version and resolve the merge conflicts? |
|
@kmiddleton14, updated! I walked through some pages testing all the sandboxes, and everything looks good |
|
Thanks @danilowoz for this! My testing is also looking good! Tried out mobile. There are some issues forking the CodeSandbox when using an in-app browser but that seems consistent with current react.dev Another thing I noticed.. which I can't reproduce anymore.. is that the "Show More/Less" ends up in the wrong place. I've been trying to get it to reproduce with window resizing and expanding but it might've just been a fluke 🤷♀️ Otherwise this looks good to me! |
This upgrads Sandpack to version 2.0, which brings many fixes and introduces Nodebox. Nodebox will enable us to run RSC in the future. As a part of this upgrade, I have also removed some elements, including unnecessary things, such as: