[beta] Sandpack - new bundler #4458
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Size Changes📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖
|
| Page | Size (compressed) |
|---|---|
global |
95.3 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!
One Hundred Eighty-seven Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
116.99 KB (🟡 +1 B) |
212.29 KB |
/404 |
116.1 KB (🟡 +1 B) |
211.4 KB |
/apis |
116.88 KB (🟡 +1 B) |
212.18 KB |
/apis/createcontext |
118.63 KB (🟡 +1 B) |
213.93 KB |
/apis/reactdom |
116.81 KB (🟡 +1 B) |
212.11 KB |
/apis/render |
118.86 KB (🟡 +1 B) |
214.16 KB |
/apis/usecontext |
124.59 KB (🟡 +1 B) |
219.89 KB |
/apis/usereducer |
124.21 KB (🟡 +1 B) |
219.52 KB |
/apis/useref |
121.94 KB (🟡 +1 B) |
217.24 KB |
/apis/usestate |
127.85 KB (🟡 +1 B) |
223.15 KB |
/blog/2013/06/02/jsfiddle-integration |
127.38 KB (🟡 +1 B) |
222.68 KB |
/blog/2013/06/05/why-react |
129.1 KB (🟡 +1 B) |
224.4 KB |
/blog/2013/06/12/community-roundup |
128.81 KB (🟡 +1 B) |
224.11 KB |
/blog/2013/06/19/community-roundup-2 |
129.47 KB (🟡 +1 B) |
224.77 KB |
/blog/2013/06/21/react-v0-3-3 |
127.52 KB (🟡 +1 B) |
222.83 KB |
/blog/2013/06/27/community-roundup-3 |
129.84 KB (🟡 +1 B) |
225.14 KB |
/blog/2013/07/02/react-v0-4-autobind-by-default |
128.14 KB (🟡 +1 B) |
223.44 KB |
/blog/2013/07/03/community-roundup-4 |
129.21 KB (🟡 +1 B) |
224.51 KB |
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values |
128.01 KB (🟡 +1 B) |
223.31 KB |
/blog/2013/07/17/react-v0-4-0 |
128.72 KB (🟡 +1 B) |
224.02 KB |
/blog/2013/07/23/community-roundup-5 |
129.6 KB (🟡 +1 B) |
224.91 KB |
/blog/2013/07/26/react-v0-4-1 |
127.49 KB (🟡 +1 B) |
222.79 KB |
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails |
128.09 KB (🟡 +1 B) |
223.39 KB |
/blog/2013/08/05/community-roundup-6 |
128.9 KB (🟡 +1 B) |
224.2 KB |
/blog/2013/08/19/use-react-and-jsx-in-python-applications |
128.1 KB (🟡 +1 B) |
223.4 KB |
/blog/2013/08/26/community-roundup-7 |
129.07 KB (🟡 +1 B) |
224.37 KB |
/blog/2013/09/24/community-roundup-8 |
130.5 KB (🟡 +1 B) |
225.8 KB |
/blog/2013/10/03/community-roundup-9 |
129.43 KB (🟡 +1 B) |
224.74 KB |
/blog/2013/10/16/react-v0.5.0 |
129.12 KB (🟡 +1 B) |
224.42 KB |
/blog/2013/10/29/react-v0-5-1 |
127.48 KB (🟡 +1 B) |
222.78 KB |
/blog/2013/11/06/community-roundup-10 |
131.1 KB (🟡 +1 B) |
226.4 KB |
/blog/2013/11/18/community-roundup-11 |
130.18 KB (🟡 +1 B) |
225.48 KB |
/blog/2013/12/18/react-v0.5.2-v0.4.2 |
127.95 KB (🟡 +1 B) |
223.25 KB |
/blog/2013/12/19/react-v0.8.0 |
128.37 KB (🟡 +1 B) |
223.67 KB |
/blog/2013/12/23/community-roundup-12 |
129.83 KB (🟡 +1 B) |
225.13 KB |
/blog/2013/12/30/community-roundup-13 |
129.61 KB (🟡 +1 B) |
224.91 KB |
/blog/2014/01/02/react-chrome-developer-tools |
127.87 KB (🟡 +1 B) |
223.17 KB |
/blog/2014/01/06/community-roundup-14 |
129.2 KB (🟡 +1 B) |
224.5 KB |
/blog/2014/02/05/community-roundup-15 |
130.42 KB (🟡 +1 B) |
225.72 KB |
/blog/2014/02/15/community-roundup-16 |
130.13 KB (🟡 +1 B) |
225.43 KB |
/blog/2014/02/16/react-v0.9-rc1 |
130.54 KB (🟡 +1 B) |
225.84 KB |
/blog/2014/02/20/react-v0.9 |
130.98 KB (🟡 +1 B) |
226.29 KB |
/blog/2014/02/24/community-roundup-17 |
129.85 KB (🟡 +1 B) |
225.15 KB |
/blog/2014/03/14/community-roundup-18 |
130.82 KB (🟡 +1 B) |
226.12 KB |
/blog/2014/03/19/react-v0.10-rc1 |
129.12 KB (🟡 +1 B) |
224.42 KB |
/blog/2014/03/21/react-v0.10 |
129.15 KB (🟡 +1 B) |
224.45 KB |
/blog/2014/03/28/the-road-to-1.0 |
129.26 KB (🟡 +1 B) |
224.56 KB |
/blog/2014/04/04/reactnet |
127.9 KB (🟡 +1 B) |
223.2 KB |
/blog/2014/05/06/flux |
128.02 KB (🟡 +1 B) |
223.33 KB |
/blog/2014/05/29/one-year-of-open-source-react |
128.25 KB (🟡 +1 B) |
223.55 KB |
/blog/2014/06/27/community-roundup-19 |
129.79 KB (🟡 +1 B) |
225.09 KB |
/blog/2014/07/13/react-v0.11-rc1 |
130.18 KB (🟡 +1 B) |
225.48 KB |
/blog/2014/07/17/react-v0.11 |
131.44 KB (🟡 +1 B) |
226.74 KB |
/blog/2014/07/25/react-v0.11.1 |
128.39 KB (🟡 +1 B) |
223.69 KB |
/blog/2014/07/28/community-roundup-20 |
129.94 KB (🟡 +1 B) |
225.24 KB |
/blog/2014/07/30/flux-actions-and-the-dispatcher |
129.57 KB (🟡 +1 B) |
224.87 KB |
/blog/2014/08/03/community-roundup-21 |
129.61 KB (🟡 +1 B) |
224.91 KB |
/blog/2014/09/03/introducing-the-jsx-specification |
127.61 KB (🟡 +1 B) |
222.91 KB |
/blog/2014/09/12/community-round-up-22 |
130.09 KB (🟡 +1 B) |
225.39 KB |
/blog/2014/09/16/react-v0.11.2 |
128.38 KB (🟡 +1 B) |
223.68 KB |
/blog/2014/09/24/testing-flux-applications |
131.56 KB (🟡 +1 B) |
226.86 KB |
/blog/2014/10/14/introducing-react-elements |
130.52 KB (🟡 +1 B) |
225.82 KB |
/blog/2014/10/16/react-v0.12-rc1 |
130.48 KB (🟡 +1 B) |
225.78 KB |
/blog/2014/10/17/community-roundup-23 |
131.05 KB (🟡 +1 B) |
226.36 KB |
/blog/2014/10/27/react-js-conf |
127.66 KB (🟡 +1 B) |
222.96 KB |
/blog/2014/10/28/react-v0.12 |
130.42 KB (🟡 +1 B) |
225.73 KB |
/blog/2014/11/24/react-js-conf-updates |
128.04 KB (🟡 +1 B) |
223.34 KB |
/blog/2014/11/25/community-roundup-24 |
131.28 KB (🟡 +1 B) |
226.58 KB |
/blog/2014/12/18/react-v0.12.2 |
128.07 KB (🟡 +1 B) |
223.37 KB |
/blog/2014/12/19/react-js-conf-diversity-scholarship |
128.46 KB (🟡 +1 B) |
223.77 KB |
/blog/2015/01/27/react-v0.13.0-beta-1 |
129.43 KB (🟡 +1 B) |
224.73 KB |
/blog/2015/02/18/react-conf-roundup-2015 |
131.42 KB (🟡 +1 B) |
226.72 KB |
/blog/2015/02/20/introducing-relay-and-graphql |
130.57 KB (🟡 +1 B) |
225.87 KB |
/blog/2015/02/24/react-v0.13-rc1 |
129.47 KB (🟡 +1 B) |
224.77 KB |
/blog/2015/02/24/streamlining-react-elements |
132.02 KB (🟡 +1 B) |
227.32 KB |
/blog/2015/03/03/react-v0.13-rc2 |
128.81 KB (🟡 +1 B) |
224.11 KB |
/blog/2015/03/04/community-roundup-25 |
129.76 KB (🟡 +1 B) |
225.07 KB |
/blog/2015/03/10/react-v0.13 |
130.08 KB (🟡 +1 B) |
225.39 KB |
/blog/2015/03/16/react-v0.13.1 |
127.9 KB (🟡 +1 B) |
223.21 KB |
/blog/2015/03/19/building-the-facebook-news-feed-with-relay |
130.66 KB (🟡 +1 B) |
225.96 KB |
/blog/2015/03/26/introducing-react-native |
127.8 KB (🟡 +1 B) |
223.1 KB |
/blog/2015/03/30/community-roundup-26 |
129.73 KB (🟡 +1 B) |
225.03 KB |
/blog/2015/04/17/react-native-v0.4 |
128.65 KB (🟡 +1 B) |
223.95 KB |
/blog/2015/04/18/react-v0.13.2 |
127.98 KB (🟡 +1 B) |
223.28 KB |
/blog/2015/05/01/graphql-introduction |
132.47 KB (🟡 +1 B) |
227.77 KB |
/blog/2015/05/08/react-v0.13.3 |
127.87 KB (🟡 +1 B) |
223.17 KB |
/blog/2015/05/22/react-native-release-process |
128.02 KB (🟡 +1 B) |
223.32 KB |
/blog/2015/06/12/deprecating-jstransform-and-react-tools |
128.47 KB (🟡 +1 B) |
223.77 KB |
/blog/2015/07/03/react-v0.14-beta-1 |
129.99 KB (🟡 +1 B) |
225.29 KB |
/blog/2015/08/03/new-react-devtools-beta |
128.59 KB (🟡 +1 B) |
223.89 KB |
/blog/2015/08/11/relay-technical-preview |
128.65 KB (🟡 +1 B) |
223.95 KB |
/blog/2015/08/13/reacteurope-roundup |
130.24 KB (🟡 +1 B) |
225.54 KB |
/blog/2015/09/02/new-react-developer-tools |
128 KB (🟡 +1 B) |
223.3 KB |
/blog/2015/09/10/react-v0.14-rc1 |
133.69 KB (🟡 +1 B) |
228.99 KB |
/blog/2015/09/14/community-roundup-27 |
130.16 KB (🟡 +1 B) |
225.46 KB |
/blog/2015/10/01/react-render-and-top-level-api |
129.14 KB (🟡 +1 B) |
224.44 KB |
/blog/2015/10/07/react-v0.14 |
134.17 KB (🟡 +1 B) |
229.48 KB |
/blog/2015/10/19/reactiflux-is-moving-to-discord |
129.88 KB (🟡 +1 B) |
225.18 KB |
/blog/2015/10/28/react-v0.14.1 |
127.9 KB (🟡 +1 B) |
223.2 KB |
/blog/2015/11/02/react-v0.14.2 |
127.92 KB (🟡 +1 B) |
223.23 KB |
/blog/2015/11/18/react-v0.14.3 |
128.05 KB (🟡 +1 B) |
223.35 KB |
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship |
128.92 KB (🟡 +1 B) |
224.22 KB |
/blog/2015/12/16/ismounted-antipattern |
128.52 KB (🟡 +1 B) |
223.82 KB |
/blog/2015/12/18/react-components-elements-and-instances |
132.44 KB (🟡 +1 B) |
227.75 KB |
/blog/2015/12/29/react-v0.14.4 |
127.72 KB (🟡 +1 B) |
223.02 KB |
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A |
128.73 KB (🟡 +1 B) |
224.04 KB |
/blog/2016/01/12/discontinuing-ie8-support |
127.54 KB (🟡 +1 B) |
222.84 KB |
/blog/2016/02/19/new-versioning-scheme |
128.92 KB (🟡 +1 B) |
224.22 KB |
/blog/2016/03/07/react-v15-rc1 |
131.68 KB (🟡 +1 B) |
226.98 KB |
/blog/2016/03/16/react-v15-rc2 |
128.54 KB (🟡 +1 B) |
223.84 KB |
/blog/2016/03/29/react-v0.14.8 |
127.67 KB (🟡 +1 B) |
222.97 KB |
/blog/2016/04/07/react-v15 |
135.86 KB (🟡 +1 B) |
231.16 KB |
/blog/2016/04/08/react-v15.0.1 |
128.43 KB (🟡 +1 B) |
223.73 KB |
/blog/2016/07/11/introducing-reacts-error-code-system |
128.14 KB (🟡 +1 B) |
223.44 KB |
/blog/2016/07/13/mixins-considered-harmful |
136.29 KB (🟡 +1 B) |
231.59 KB |
/blog/2016/07/22/create-apps-with-no-configuration |
131.62 KB (🟡 +1 B) |
226.92 KB |
/blog/2016/08/05/relay-state-of-the-state |
131.66 KB (🟡 +1 B) |
226.96 KB |
/blog/2016/09/28/our-first-50000-stars |
133.11 KB (🟡 +1 B) |
228.41 KB |
/blog/2016/11/16/react-v15.4.0 |
131.06 KB (🟡 +1 B) |
226.36 KB |
/blog/2017/04/07/react-v15.5.0 |
131.63 KB (🟡 +1 B) |
226.93 KB |
/blog/2017/05/18/whats-new-in-create-react-app |
131.02 KB (🟡 +1 B) |
226.32 KB |
/blog/2017/06/13/react-v15.6.0 |
129.64 KB (🟡 +1 B) |
224.95 KB |
/blog/2017/07/26/error-handling-in-react-16 |
129.99 KB (🟡 +1 B) |
225.29 KB |
/blog/2017/09/08/dom-attributes-in-react-16 |
130.42 KB (🟡 +1 B) |
225.72 KB |
/blog/2017/09/25/react-v15.6.2 |
128.76 KB (🟡 +1 B) |
224.06 KB |
/blog/2017/09/26/react-v16.0 |
133.89 KB (🟡 +1 B) |
229.19 KB |
/blog/2017/11/28/react-v16.2.0-fragment-support |
131.82 KB (🟡 +1 B) |
227.12 KB |
/blog/2017/12/07/introducing-the-react-rfc-process |
128.34 KB (🟡 +1 B) |
223.64 KB |
/blog/2017/12/15/improving-the-repository-infrastructure |
144.13 KB (🟡 +1 B) |
239.43 KB |
/blog/2018/03/01/sneak-peek-beyond-react-16 |
128.3 KB (🟡 +1 B) |
223.6 KB |
/blog/2018/03/27/update-on-async-rendering |
133.54 KB (🟡 +1 B) |
228.84 KB |
/blog/2018/03/29/react-v-16-3 |
130.36 KB (🟡 +1 B) |
225.66 KB |
/blog/2018/05/23/react-v-16-4 |
130.5 KB (🟡 +1 B) |
225.8 KB |
/blog/2018/06/07/you-probably-dont-need-derived-state |
134.16 KB (🟡 +1 B) |
229.46 KB |
/blog/2018/08/01/react-v-16-4-2 |
129.15 KB (🟡 +1 B) |
224.45 KB |
/blog/2018/09/10/introducing-the-react-profiler |
130.76 KB (🟡 +1 B) |
226.06 KB |
/blog/2018/10/01/create-react-app-v2 |
131.24 KB (🟡 +1 B) |
226.54 KB |
/blog/2018/10/23/react-v-16-6 |
130.44 KB (🟡 +1 B) |
225.74 KB |
/blog/2018/11/13/react-conf-recap |
128.15 KB (🟡 +1 B) |
223.45 KB |
/blog/2018/11/27/react-16-roadmap |
134.34 KB (🟡 +1 B) |
229.64 KB |
/blog/2018/12/19/react-v-16-7 |
129.27 KB (🟡 +1 B) |
224.57 KB |
/blog/2019/02/06/react-v16.8.0 |
131.54 KB (🟡 +1 B) |
226.84 KB |
/blog/2019/02/23/is-react-translated-yet |
131.1 KB (🟡 +1 B) |
226.4 KB |
/blog/2019/08/08/react-v16.9.0 |
134.04 KB (🟡 +1 B) |
229.34 KB |
/blog/2019/08/15/new-react-devtools |
128.64 KB (🟡 +1 B) |
223.94 KB |
/blog/2019/10/22/react-release-channels |
130.45 KB (🟡 +1 B) |
225.75 KB |
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense |
135.16 KB (🟡 +1 B) |
230.46 KB |
/blog/2020/02/26/react-v16.13.0 |
131.38 KB (🟡 +1 B) |
226.68 KB |
/blog/2020/08/10/react-v17-rc |
137.66 KB (🟡 +1 B) |
232.96 KB |
/community |
116.68 KB (🟡 +1 B) |
211.98 KB |
/community/acknowledgements |
117.87 KB (🟡 +1 B) |
213.17 KB |
/community/meet-the-team |
118.56 KB (🟡 +1 B) |
213.86 KB |
/learn |
121.64 KB (🟡 +1 B) |
216.94 KB |
/learn/add-react-to-a-website |
121.76 KB (🟡 +1 B) |
217.06 KB |
/learn/adding-interactivity |
123.33 KB (🟡 +1 B) |
218.63 KB |
/learn/choosing-the-state-structure |
129.05 KB (🟡 +1 B) |
224.35 KB |
/learn/conditional-rendering |
121.28 KB (🟡 +1 B) |
216.58 KB |
/learn/describing-the-ui |
120.5 KB (🟡 +1 B) |
215.8 KB |
/learn/editor-setup |
117.96 KB (🟡 +1 B) |
213.26 KB |
/learn/escape-hatches |
116.01 KB (🟡 +1 B) |
211.31 KB |
/learn/extracting-state-logic-into-a-reducer |
126.69 KB (🟡 +1 B) |
221.99 KB |
/learn/importing-and-exporting-components |
119.68 KB (🟡 +1 B) |
214.98 KB |
/learn/installation |
117.28 KB (🟡 +1 B) |
212.58 KB |
/learn/javascript-in-jsx-with-curly-braces |
119.75 KB (🟡 +1 B) |
215.05 KB |
/learn/keeping-components-pure |
123.88 KB (🟡 +1 B) |
219.18 KB |
/learn/managing-state |
122.61 KB (🟡 +1 B) |
217.91 KB |
/learn/manipulating-the-dom-with-refs |
124.85 KB (🟡 +1 B) |
220.15 KB |
/learn/passing-data-deeply-with-context |
124.41 KB (🟡 +1 B) |
219.71 KB |
/learn/passing-props-to-a-component |
123.46 KB (🟡 +1 B) |
218.76 KB |
/learn/preserving-and-resetting-state |
127.42 KB (🟡 +1 B) |
222.72 KB |
/learn/queueing-a-series-of-state-updates |
121.25 KB (🟡 +1 B) |
216.55 KB |
/learn/react-developer-tools |
117.24 KB (🟡 +1 B) |
212.54 KB |
/learn/reacting-to-input-with-state |
125.86 KB (🟡 +1 B) |
221.17 KB |
/learn/referencing-values-with-refs |
122.77 KB (🟡 +1 B) |
218.07 KB |
/learn/render-and-commit |
119.75 KB (🟡 +1 B) |
215.05 KB |
/learn/rendering-lists |
123.84 KB (🟡 +1 B) |
219.14 KB |
/learn/responding-to-events |
122.78 KB (🟡 +1 B) |
218.08 KB |
/learn/scaling-up-with-reducer-and-context |
120.82 KB (🟡 +1 B) |
216.13 KB |
/learn/sharing-state-between-components |
121.9 KB (🟡 +1 B) |
217.2 KB |
/learn/start-a-new-react-project |
118.3 KB (🟡 +1 B) |
213.6 KB |
/learn/state-a-components-memory |
126.98 KB (🟡 +1 B) |
222.28 KB |
/learn/state-as-a-snapshot |
120.56 KB (🟡 +1 B) |
215.86 KB |
/learn/thinking-in-react |
122.62 KB (🟡 +1 B) |
217.92 KB |
/learn/updating-arrays-in-state |
124.85 KB (🟡 +1 B) |
220.15 KB |
/learn/updating-objects-in-state |
124.58 KB (🟡 +1 B) |
219.88 KB |
/learn/writing-markup-with-jsx |
119.99 KB (🟡 +1 B) |
215.29 KB |
/learn/your-first-component |
120.59 KB (🟡 +1 B) |
215.89 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.
|
I've been focused on other stuff for a bit. What is the current status on this? |
|
Hey @gaearon, I was about to ping you about this issue. Although the new bundler is still in beta, we're confident that for React templates the bundler is stable and ready to be used. Of course, we might end up with some edge cases, but given the benefits (bundle size, speed, reliability) it's worth giving it a try. |
|
Can we remove the timer etc so that this is ready to merge? Thanks! |
|
This breaks runtime error reporting. broken.mov |
|
Latest changes:
|
|
Something about reporting errors regressed because it shows internal frames now. Before:
After:
|
|
Opened a PR to disable the error stacks for node_modules codesandbox/sandpack-bundler#21 which should fix the issue you mentioned |
|
Let's try it! Thank you so much!! |
harish-sethuraman
added a commit
that referenced
this pull request
May 22, 2022
This reverts commit 3ab1245.
gaearon
added a commit
that referenced
this pull request
Jun 10, 2022
* added code for sandpack console * add log * added console for older bundle * Revert "[beta] Sandpack - new bundler (#4458)" This reverts commit 3ab1245. * adds proper console and removes new bundle * modify styles * remove unwanted code * nit * fix types (#4677) * update console * little nits * remove unwanted code changes * update bundler URL * use `message.firstLoad` for clearing console * use `refresh` event to clear logs as well (used when going away and coming back to sandpack) * remove padding for code blocks inside console * small UI revamps * change p to div since the sandpack comes inside the p, add try catch and a try catch for the catch again * tweaks * Fixes * Reset unrelated changes * tweaks * fix * fixes * oops * Fix * fix Co-authored-by: Danilo Woznica <danilowoz@gmail.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Sandpack bundler v2 - demo
The Sandpack bundler v2 aims to eventually replace the current sandpack with a more streamlined and faster version. Plus, it allows us to implement even more improvements in the future, thanks to a fresh codebase that allowed us to remove many of the bottlenecks from the previous bundler.
The new bundler:
Same benefits from the previous bundler
Security
The bundler evaluates and transpiles all files in an iframe under a different subdomain. This is important because it prevents attackers from tampering with cookies of the host domain when evaluating code.
Scoped styles/javascript execution
There’s no risk of any executed code affecting the main page, which avoids unexpected styles or unhandled errors.
Performance
We heavily make use of Web Workers for transpilations, and only for those sandboxes that are in the viewport and the user is interacting with, meaning that we only use resources as needed.
Bundle Size
Another reason to host the bundler externally is because of code splitting: we split all our transpilers away and load them on-demand.
React DevTools
Sandpack bundler supports running
react-devtools-inlinein isolated mode, as an external dependency, which means you can run more than one instance per page and lazily load it.Others
Benchmarking
[1] idle - peek
[2] Exclude local resource & external, except sandpack & disabled cache;
[3] Incognito window (fresh cache) & Fast 3G
[4] Cache enabled & Fast 3G
[5] Incognito window (fresh cache) & no throttling
Known issues / what’s next
Implement;react-devtools-inlineprotocolServer Components (still on discovery phase);How to test it & how to use it
How to test
This PR is completely disposable, and it's only for testing purposes. So, in order to test it follow the steps:
/sandpackpage or this example page https://reactjs-org-do4znpw6x-danilowoz.vercel.app/sandpack;How to use
<SandpackProvider ... + bundlerURL="https://cf56a978.sandpack-bundler.pages.dev" >Hope it addresses most of the problems we've discussed before. We're looking forward to hearing any feedback about this new version and please let us know about any problem you notice.
Kudos to @DeMoorJasper for all the hard work on this!