reactjs
[beta] upgrade sandpack and refactor sandpack.css
A new Sandpack version has been shipped, which contains a ton of improvements to how we manage the styles and make the API more consistent. So this PR upgraded Sandpack and took the change to refactor some parts that weren’t easy to maintain, especially the sandpack.css file.
Why now? React Docs is currently using a different channel (@codesandbox/sandpack-react@experimental), which was introduced due to some hard dependencies from react-devtools-inline. However, over time it started to be very out date from the main Sandpack branch, which contains the new features mentioned above, and doing this migration will make it easier to introduce future feature requests and bug fixes.
What are the risks? As you can see, most of the changes are API breaking changes and the CSS file refactor. I’m pretty confident that the new Sandpack version will not introduce any problem because it’s already running for a few months without any problem. Despite the many tests I did, the style changes might introduce some regression due to the number of changes in this file. But, in order to avoid any visual regression, I did the following testing routine:
- Ran a visual regression test on all pages and sandboxes [^1];
- Followed a strict checklist based on the problems we have faced on previous PRs [^2];
- Reduced the scope to avoid touching on unnecessary parts, which can be addressed after this PR;
- Tested on desktop and mobile interacting with the playground, switching between dark and light theme, triggering eslint integration, and running console logs;
TODO / known issues
react-devtools-inlineis still depending on some unpublished React API (confirmed with Brian https://github.com/codesandbox/sandpack/pull/537), so after merging this PR, I need to create an updatedexperimentalchannel on Sandpack in order to support it again. Hopefully, it’s fine to merge this PR without React Devtools because currently, there’s no playground with this component.
[^1]: Visual regression tests: left side (main branch), center (current branch), and the right one is the visual difference between them. You can note that there in the NavigationBar component, there is a typo (foooo) that works with the purpose of making sure the visual testing is working. Plus, there are some pages that have some unexplained visual differences (rendering issue?), which can be discarded as many others pages don't contain the same problem.
[^2]: Regression checklist
- [ ] Decorations are still rendering (/apis/usestate);
- [ ] It’s possible to run multiple DevTools on the same page;
- [ ] Edit content on markdown file;
- [ ] Reset button: it should reset the content and refresh the preview;
- [ ] The line-height of the CodeEditor component is correctly 24px;
- [ ] Navigate in the codebase (command + arrow keys);
- [ ] Scroll tests: jump to the very end of the page, go back to a Sandpack;
- [ ] On loading state: no layout shift between placeholder and editor;
- [ ] Mobile version: no layout shift on the scroll;
- [ ] Show inline error;
- [ ] No extra console logs;
- [ ] Make sure all snippets code are really read-only (focus & tab, command + X);
Size Changes
📦 Next.js Bundle Analysis
This analysis was generated by the next.js bundle analysis action 🤖
🎉 Global Bundle Size Decreased
| Page | Size (compressed) |
|---|---|
global |
82.64 KB (🟢 -2.04 KB) |
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!
Two Hundred Thirty-one Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
48.55 KB (🟡 +2 B) |
131.19 KB |
/404 |
47.65 KB (🟡 +2 B) |
130.29 KB |
/apis/react |
49.85 KB (🟡 +2 B) |
132.49 KB |
/apis/react-dom |
48.87 KB (🟡 +2 B) |
131.52 KB |
/apis/react-dom/client/createRoot |
53.28 KB (🟡 +2 B) |
135.93 KB |
/apis/react-dom/client/hydrateRoot |
51.49 KB (🟡 +2 B) |
134.14 KB |
/apis/react-dom/createPortal |
47.85 KB (🟡 +2 B) |
130.5 KB |
/apis/react-dom/findDOMNode |
48.11 KB (🟡 +2 B) |
130.76 KB |
/apis/react-dom/flushSync |
47.86 KB (🟡 +2 B) |
130.5 KB |
/apis/react-dom/hydrate |
50.74 KB (🟡 +2 B) |
133.39 KB |
/apis/react-dom/render |
50.61 KB (🟡 +2 B) |
133.25 KB |
/apis/react-dom/server/renderToNodeStream |
47.84 KB (🟡 +2 B) |
130.48 KB |
/apis/react-dom/server/renderToPipeableStream |
47.84 KB (🟡 +2 B) |
130.48 KB |
/apis/react-dom/server/renderToReadableStream |
47.97 KB (🟡 +2 B) |
130.62 KB |
/apis/react-dom/server/renderToStaticMarkup |
48.04 KB (🟡 +2 B) |
130.69 KB |
/apis/react-dom/server/renderToStaticNodeStream |
47.98 KB (🟡 +2 B) |
130.63 KB |
/apis/react-dom/server/renderToString |
47.95 KB (🟡 +2 B) |
130.59 KB |
/apis/react-dom/unmountComponentAtNode |
47.94 KB (🟡 +2 B) |
130.59 KB |
/apis/react/Children |
47.83 KB (🟡 +2 B) |
130.48 KB |
/apis/react/Component |
47.95 KB (🟡 +2 B) |
130.59 KB |
/apis/react/Fragment |
49.01 KB (🟡 +2 B) |
131.65 KB |
/apis/react/PureComponent |
48.02 KB (🟡 +2 B) |
130.67 KB |
/apis/react/StrictMode |
47.73 KB (🟡 +2 B) |
130.37 KB |
/apis/react/Suspense |
47.8 KB (🟡 +2 B) |
130.45 KB |
/apis/react/cloneElement |
47.8 KB (🟡 +2 B) |
130.45 KB |
/apis/react/createContext |
50.19 KB (🟡 +2 B) |
132.83 KB |
/apis/react/createElement |
47.8 KB (🟡 +2 B) |
130.45 KB |
/apis/react/createFactory |
47.8 KB (🟡 +2 B) |
130.44 KB |
/apis/react/createRef |
47.79 KB (🟡 +2 B) |
130.43 KB |
/apis/react/forwardRef |
47.93 KB (🟡 +2 B) |
130.57 KB |
/apis/react/isValidElement |
47.83 KB (🟡 +2 B) |
130.48 KB |
/apis/react/lazy |
47.92 KB (🟡 +2 B) |
130.57 KB |
/apis/react/memo |
47.82 KB (🟡 +2 B) |
130.47 KB |
/apis/react/startTransition |
47.8 KB (🟡 +2 B) |
130.44 KB |
/apis/react/useCallback |
47.82 KB (🟡 +2 B) |
130.46 KB |
/apis/react/useContext |
56.14 KB (🟡 +2 B) |
138.79 KB |
/apis/react/useDebugValue |
47.86 KB (🟡 +2 B) |
130.5 KB |
/apis/react/useDeferredValue |
47.95 KB (🟡 +2 B) |
130.59 KB |
/apis/react/useEffect |
47.8 KB (🟡 +2 B) |
130.45 KB |
/apis/react/useId |
47.94 KB (🟡 +2 B) |
130.58 KB |
/apis/react/useImperativeHandle |
47.81 KB (🟡 +2 B) |
130.46 KB |
/apis/react/useInsertionEffect |
48.07 KB (🟡 +2 B) |
130.71 KB |
/apis/react/useLayoutEffect |
47.81 KB (🟡 +2 B) |
130.46 KB |
/apis/react/useMemo |
47.82 KB (🟡 +2 B) |
130.46 KB |
/apis/react/useReducer |
55.78 KB (🟡 +2 B) |
138.42 KB |
/apis/react/useRef |
53.47 KB (🟡 +2 B) |
136.12 KB |
/apis/react/useState |
59.42 KB (🟡 +2 B) |
142.06 KB |
/apis/react/useSyncExternalStore |
47.95 KB (🟡 +2 B) |
130.6 KB |
/apis/react/useTransition |
47.81 KB (🟡 +2 B) |
130.46 KB |
/blog/2013/06/02/jsfiddle-integration |
58.46 KB (🟡 +2 B) |
141.1 KB |
/blog/2013/06/05/why-react |
60.19 KB (🟡 +2 B) |
142.83 KB |
/blog/2013/06/12/community-roundup |
59.89 KB (🟡 +2 B) |
142.54 KB |
/blog/2013/06/19/community-roundup-2 |
60.55 KB (🟡 +2 B) |
143.2 KB |
/blog/2013/06/21/react-v0-3-3 |
58.61 KB (🟡 +2 B) |
141.25 KB |
/blog/2013/06/27/community-roundup-3 |
60.92 KB (🟡 +2 B) |
143.57 KB |
/blog/2013/07/02/react-v0-4-autobind-by-default |
59.22 KB (🟡 +2 B) |
141.87 KB |
/blog/2013/07/03/community-roundup-4 |
60.29 KB (🟡 +2 B) |
142.94 KB |
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values |
59.1 KB (🟡 +2 B) |
141.74 KB |
/blog/2013/07/17/react-v0-4-0 |
59.81 KB (🟡 +2 B) |
142.45 KB |
/blog/2013/07/23/community-roundup-5 |
60.68 KB (🟡 +2 B) |
143.33 KB |
/blog/2013/07/26/react-v0-4-1 |
58.57 KB (🟡 +2 B) |
141.22 KB |
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails |
59.17 KB (🟡 +2 B) |
141.82 KB |
/blog/2013/08/05/community-roundup-6 |
59.98 KB (🟡 +2 B) |
142.63 KB |
/blog/2013/08/19/use-react-and-jsx-in-python-applications |
59.19 KB (🟡 +2 B) |
141.83 KB |
/blog/2013/08/26/community-roundup-7 |
60.15 KB (🟡 +2 B) |
142.79 KB |
/blog/2013/09/24/community-roundup-8 |
61.58 KB (🟡 +2 B) |
144.23 KB |
/blog/2013/10/03/community-roundup-9 |
60.52 KB (🟡 +2 B) |
143.16 KB |
/blog/2013/10/16/react-v0.5.0 |
60.2 KB (🟡 +2 B) |
142.85 KB |
/blog/2013/10/29/react-v0-5-1 |
58.56 KB (🟡 +2 B) |
141.21 KB |
/blog/2013/11/06/community-roundup-10 |
62.18 KB (🟡 +2 B) |
144.82 KB |
/blog/2013/11/18/community-roundup-11 |
61.26 KB (🟡 +2 B) |
143.9 KB |
/blog/2013/12/18/react-v0.5.2-v0.4.2 |
59.04 KB (🟡 +2 B) |
141.68 KB |
/blog/2013/12/19/react-v0.8.0 |
59.45 KB (🟡 +2 B) |
142.1 KB |
/blog/2013/12/23/community-roundup-12 |
60.91 KB (🟡 +2 B) |
143.56 KB |
/blog/2013/12/30/community-roundup-13 |
60.69 KB (🟡 +2 B) |
143.34 KB |
/blog/2014/01/02/react-chrome-developer-tools |
58.95 KB (🟡 +2 B) |
141.6 KB |
/blog/2014/01/06/community-roundup-14 |
60.29 KB (🟡 +2 B) |
142.93 KB |
/blog/2014/02/05/community-roundup-15 |
61.51 KB (🟡 +2 B) |
144.15 KB |
/blog/2014/02/15/community-roundup-16 |
61.21 KB (🟡 +2 B) |
143.86 KB |
/blog/2014/02/16/react-v0.9-rc1 |
61.63 KB (🟡 +2 B) |
144.27 KB |
/blog/2014/02/20/react-v0.9 |
62.07 KB (🟡 +2 B) |
144.71 KB |
/blog/2014/02/24/community-roundup-17 |
60.93 KB (🟡 +2 B) |
143.58 KB |
/blog/2014/03/14/community-roundup-18 |
61.9 KB (🟡 +2 B) |
144.54 KB |
/blog/2014/03/19/react-v0.10-rc1 |
60.21 KB (🟡 +2 B) |
142.85 KB |
/blog/2014/03/21/react-v0.10 |
60.23 KB (🟡 +2 B) |
142.88 KB |
/blog/2014/03/28/the-road-to-1.0 |
60.34 KB (🟡 +2 B) |
142.99 KB |
/blog/2014/04/04/reactnet |
58.99 KB (🟡 +2 B) |
141.63 KB |
/blog/2014/05/06/flux |
59.11 KB (🟡 +2 B) |
141.75 KB |
/blog/2014/05/29/one-year-of-open-source-react |
59.33 KB (🟡 +2 B) |
141.98 KB |
/blog/2014/06/27/community-roundup-19 |
60.88 KB (🟡 +2 B) |
143.52 KB |
/blog/2014/07/13/react-v0.11-rc1 |
61.26 KB (🟡 +2 B) |
143.91 KB |
/blog/2014/07/17/react-v0.11 |
62.52 KB (🟡 +2 B) |
145.16 KB |
/blog/2014/07/25/react-v0.11.1 |
59.46 KB (🟡 +2 B) |
142.11 KB |
/blog/2014/07/28/community-roundup-20 |
61.02 KB (🟡 +2 B) |
143.66 KB |
/blog/2014/07/30/flux-actions-and-the-dispatcher |
60.65 KB (🟡 +2 B) |
143.3 KB |
/blog/2014/08/03/community-roundup-21 |
60.69 KB (🟡 +2 B) |
143.33 KB |
/blog/2014/09/03/introducing-the-jsx-specification |
58.69 KB (🟡 +2 B) |
141.34 KB |
/blog/2014/09/12/community-round-up-22 |
61.17 KB (🟡 +2 B) |
143.81 KB |
/blog/2014/09/16/react-v0.11.2 |
59.46 KB (🟡 +2 B) |
142.11 KB |
/blog/2014/09/24/testing-flux-applications |
62.64 KB (🟡 +2 B) |
145.29 KB |
/blog/2014/10/14/introducing-react-elements |
61.6 KB (🟡 +2 B) |
144.24 KB |
/blog/2014/10/16/react-v0.12-rc1 |
61.56 KB (🟡 +2 B) |
144.21 KB |
/blog/2014/10/17/community-roundup-23 |
62.13 KB (🟡 +2 B) |
144.78 KB |
/blog/2014/10/27/react-js-conf |
58.74 KB (🟡 +2 B) |
141.38 KB |
/blog/2014/10/28/react-v0.12 |
61.51 KB (🟡 +2 B) |
144.15 KB |
/blog/2014/11/24/react-js-conf-updates |
59.12 KB (🟡 +2 B) |
141.77 KB |
/blog/2014/11/25/community-roundup-24 |
62.36 KB (🟡 +2 B) |
145.01 KB |
/blog/2014/12/18/react-v0.12.2 |
59.15 KB (🟡 +2 B) |
141.8 KB |
/blog/2014/12/19/react-js-conf-diversity-scholarship |
59.55 KB (🟡 +2 B) |
142.19 KB |
/blog/2015/01/27/react-v0.13.0-beta-1 |
60.52 KB (🟡 +2 B) |
143.16 KB |
/blog/2015/02/18/react-conf-roundup-2015 |
62.5 KB (🟡 +2 B) |
145.14 KB |
/blog/2015/02/20/introducing-relay-and-graphql |
61.65 KB (🟡 +2 B) |
144.3 KB |
/blog/2015/02/24/react-v0.13-rc1 |
60.55 KB (🟡 +2 B) |
143.2 KB |
/blog/2015/02/24/streamlining-react-elements |
63.1 KB (🟡 +2 B) |
145.75 KB |
/blog/2015/03/03/react-v0.13-rc2 |
59.89 KB (🟡 +2 B) |
142.53 KB |
/blog/2015/03/04/community-roundup-25 |
60.85 KB (🟡 +2 B) |
143.49 KB |
/blog/2015/03/10/react-v0.13 |
61.17 KB (🟡 +2 B) |
143.81 KB |
/blog/2015/03/16/react-v0.13.1 |
58.99 KB (🟡 +2 B) |
141.63 KB |
/blog/2015/03/19/building-the-facebook-news-feed-with-relay |
61.75 KB (🟡 +2 B) |
144.39 KB |
/blog/2015/03/26/introducing-react-native |
58.88 KB (🟡 +2 B) |
141.53 KB |
/blog/2015/03/30/community-roundup-26 |
60.81 KB (🟡 +2 B) |
143.46 KB |
/blog/2015/04/17/react-native-v0.4 |
59.73 KB (🟡 +2 B) |
142.37 KB |
/blog/2015/04/18/react-v0.13.2 |
59.07 KB (🟡 +2 B) |
141.71 KB |
/blog/2015/05/01/graphql-introduction |
63.56 KB (🟡 +2 B) |
146.2 KB |
/blog/2015/05/08/react-v0.13.3 |
58.95 KB (🟡 +2 B) |
141.6 KB |
/blog/2015/05/22/react-native-release-process |
59.11 KB (🟡 +2 B) |
141.75 KB |
/blog/2015/06/12/deprecating-jstransform-and-react-tools |
59.56 KB (🟡 +2 B) |
142.2 KB |
/blog/2015/07/03/react-v0.14-beta-1 |
61.07 KB (🟡 +2 B) |
143.71 KB |
/blog/2015/08/03/new-react-devtools-beta |
59.67 KB (🟡 +2 B) |
142.31 KB |
/blog/2015/08/11/relay-technical-preview |
59.73 KB (🟡 +2 B) |
142.38 KB |
/blog/2015/08/13/reacteurope-roundup |
61.32 KB (🟡 +2 B) |
143.96 KB |
/blog/2015/09/02/new-react-developer-tools |
59.08 KB (🟡 +2 B) |
141.73 KB |
/blog/2015/09/10/react-v0.14-rc1 |
64.77 KB (🟡 +2 B) |
147.42 KB |
/blog/2015/09/14/community-roundup-27 |
61.24 KB (🟡 +2 B) |
143.89 KB |
/blog/2015/10/01/react-render-and-top-level-api |
60.22 KB (🟡 +2 B) |
142.86 KB |
/blog/2015/10/07/react-v0.14 |
65.25 KB (🟡 +2 B) |
147.9 KB |
/blog/2015/10/19/reactiflux-is-moving-to-discord |
60.97 KB (🟡 +2 B) |
143.61 KB |
/blog/2015/10/28/react-v0.14.1 |
58.98 KB (🟡 +2 B) |
141.62 KB |
/blog/2015/11/02/react-v0.14.2 |
59.01 KB (🟡 +2 B) |
141.65 KB |
/blog/2015/11/18/react-v0.14.3 |
59.13 KB (🟡 +2 B) |
141.77 KB |
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship |
60 KB (🟡 +2 B) |
142.65 KB |
/blog/2015/12/16/ismounted-antipattern |
59.6 KB (🟡 +2 B) |
142.25 KB |
/blog/2015/12/18/react-components-elements-and-instances |
63.52 KB (🟡 +2 B) |
146.17 KB |
/blog/2015/12/29/react-v0.14.4 |
58.8 KB (🟡 +2 B) |
141.44 KB |
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A |
59.82 KB (🟡 +2 B) |
142.46 KB |
/blog/2016/01/12/discontinuing-ie8-support |
58.63 KB (🟡 +2 B) |
141.27 KB |
/blog/2016/02/19/new-versioning-scheme |
60.01 KB (🟡 +2 B) |
142.65 KB |
/blog/2016/03/07/react-v15-rc1 |
62.76 KB (🟡 +2 B) |
145.4 KB |
/blog/2016/03/16/react-v15-rc2 |
59.62 KB (🟡 +2 B) |
142.27 KB |
/blog/2016/03/29/react-v0.14.8 |
58.76 KB (🟡 +2 B) |
141.4 KB |
/blog/2016/04/07/react-v15 |
66.95 KB (🟡 +2 B) |
149.59 KB |
/blog/2016/04/08/react-v15.0.1 |
59.51 KB (🟡 +2 B) |
142.16 KB |
/blog/2016/07/11/introducing-reacts-error-code-system |
59.22 KB (🟡 +2 B) |
141.87 KB |
/blog/2016/07/13/mixins-considered-harmful |
67.38 KB (🟡 +2 B) |
150.02 KB |
/blog/2016/07/22/create-apps-with-no-configuration |
62.7 KB (🟡 +2 B) |
145.35 KB |
/blog/2016/08/05/relay-state-of-the-state |
62.74 KB (🟡 +2 B) |
145.39 KB |
/blog/2016/09/28/our-first-50000-stars |
64.19 KB (🟡 +2 B) |
146.84 KB |
/blog/2016/11/16/react-v15.4.0 |
62.14 KB (🟡 +2 B) |
144.79 KB |
/blog/2017/04/07/react-v15.5.0 |
62.71 KB (🟡 +2 B) |
145.35 KB |
/blog/2017/05/18/whats-new-in-create-react-app |
62.11 KB (🟡 +2 B) |
144.75 KB |
/blog/2017/06/13/react-v15.6.0 |
60.73 KB (🟡 +2 B) |
143.37 KB |
/blog/2017/07/26/error-handling-in-react-16 |
61.08 KB (🟡 +2 B) |
143.72 KB |
/blog/2017/09/08/dom-attributes-in-react-16 |
61.51 KB (🟡 +2 B) |
144.15 KB |
/blog/2017/09/25/react-v15.6.2 |
59.84 KB (🟡 +2 B) |
142.48 KB |
/blog/2017/09/26/react-v16.0 |
64.97 KB (🟡 +2 B) |
147.62 KB |
/blog/2017/11/28/react-v16.2.0-fragment-support |
62.9 KB (🟡 +2 B) |
145.55 KB |
/blog/2017/12/07/introducing-the-react-rfc-process |
59.43 KB (🟡 +2 B) |
142.07 KB |
/blog/2017/12/15/improving-the-repository-infrastructure |
75.21 KB (🟡 +2 B) |
157.86 KB |
/blog/2018/03/01/sneak-peek-beyond-react-16 |
59.38 KB (🟡 +2 B) |
142.03 KB |
/blog/2018/03/27/update-on-async-rendering |
64.63 KB (🟡 +2 B) |
147.27 KB |
/blog/2018/03/29/react-v-16-3 |
61.44 KB (🟡 +2 B) |
144.09 KB |
/blog/2018/05/23/react-v-16-4 |
61.58 KB (🟡 +2 B) |
144.23 KB |
/blog/2018/06/07/you-probably-dont-need-derived-state |
65.24 KB (🟡 +2 B) |
147.89 KB |
/blog/2018/08/01/react-v-16-4-2 |
60.23 KB (🟡 +2 B) |
142.88 KB |
/blog/2018/09/10/introducing-the-react-profiler |
61.84 KB (🟡 +2 B) |
144.49 KB |
/blog/2018/10/01/create-react-app-v2 |
62.32 KB (🟡 +2 B) |
144.96 KB |
/blog/2018/10/23/react-v-16-6 |
61.52 KB (🟡 +2 B) |
144.16 KB |
/blog/2018/11/13/react-conf-recap |
59.23 KB (🟡 +2 B) |
141.88 KB |
/blog/2018/11/27/react-16-roadmap |
65.42 KB (🟡 +2 B) |
148.07 KB |
/blog/2018/12/19/react-v-16-7 |
60.35 KB (🟡 +2 B) |
143 KB |
/blog/2019/02/06/react-v16.8.0 |
62.62 KB (🟡 +2 B) |
145.27 KB |
/blog/2019/02/23/is-react-translated-yet |
62.18 KB (🟡 +2 B) |
144.83 KB |
/blog/2019/08/08/react-v16.9.0 |
65.12 KB (🟡 +2 B) |
147.76 KB |
/blog/2019/08/15/new-react-devtools |
59.72 KB (🟡 +2 B) |
142.37 KB |
/blog/2019/10/22/react-release-channels |
61.54 KB (🟡 +2 B) |
144.19 KB |
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense |
66.24 KB (🟡 +2 B) |
148.88 KB |
/blog/2020/02/26/react-v16.13.0 |
62.46 KB (🟡 +2 B) |
145.11 KB |
/blog/2020/08/10/react-v17-rc |
68.75 KB (🟡 +2 B) |
151.39 KB |
/community |
48.24 KB (🟡 +2 B) |
130.89 KB |
/community/acknowledgements |
49.45 KB (🟡 +2 B) |
132.09 KB |
/community/meet-the-team |
50.13 KB (🟡 +2 B) |
132.77 KB |
/learn |
53.2 KB (🟢 -6 B) |
135.84 KB |
/learn/add-react-to-a-website |
53.32 KB (🟡 +2 B) |
135.96 KB |
/learn/adding-interactivity |
54.89 KB (🟡 +2 B) |
137.54 KB |
/learn/choosing-the-state-structure |
60.61 KB (🟡 +2 B) |
143.25 KB |
/learn/conditional-rendering |
52.84 KB (🟡 +2 B) |
135.48 KB |
/learn/describing-the-ui |
52.06 KB (🟡 +2 B) |
134.7 KB |
/learn/editor-setup |
49.52 KB (🟡 +2 B) |
132.17 KB |
/learn/escape-hatches |
47.57 KB (🟡 +2 B) |
130.21 KB |
/learn/extracting-state-logic-into-a-reducer |
58.25 KB (🟡 +2 B) |
140.89 KB |
/learn/importing-and-exporting-components |
51.24 KB (🟡 +2 B) |
133.88 KB |
/learn/installation |
48.85 KB (🟡 +2 B) |
131.49 KB |
/learn/javascript-in-jsx-with-curly-braces |
51.31 KB (🟡 +2 B) |
133.96 KB |
/learn/keeping-components-pure |
55.44 KB (🟡 +2 B) |
138.09 KB |
/learn/lifecycle-of-reactive-effects |
62.62 KB (🟡 +2 B) |
145.26 KB |
/learn/managing-state |
54.16 KB (🟡 +2 B) |
136.81 KB |
/learn/manipulating-the-dom-with-refs |
56.41 KB (🟡 +2 B) |
139.06 KB |
/learn/passing-data-deeply-with-context |
55.96 KB (🟡 +2 B) |
138.6 KB |
/learn/passing-props-to-a-component |
55.01 KB (🟡 +2 B) |
137.66 KB |
/learn/preserving-and-resetting-state |
58.98 KB (🟡 +2 B) |
141.63 KB |
/learn/queueing-a-series-of-state-updates |
52.81 KB (🟡 +2 B) |
135.45 KB |
/learn/react-developer-tools |
48.8 KB (🟡 +2 B) |
131.45 KB |
/learn/reacting-to-input-with-state |
57.42 KB (🟡 +2 B) |
140.07 KB |
/learn/referencing-values-with-refs |
54.33 KB (🟡 +2 B) |
136.97 KB |
/learn/removing-effect-dependencies |
60.18 KB (🟡 +2 B) |
142.83 KB |
/learn/render-and-commit |
51.38 KB (🟡 +2 B) |
134.02 KB |
/learn/rendering-lists |
55.4 KB (🟡 +2 B) |
138.04 KB |
/learn/responding-to-events |
54.33 KB (🟡 +2 B) |
136.98 KB |
/learn/scaling-up-with-reducer-and-context |
52.38 KB (🟡 +2 B) |
135.03 KB |
/learn/separating-events-from-effects |
60.25 KB (🟡 +2 B) |
142.89 KB |
/learn/sharing-state-between-components |
53.46 KB (🟡 +2 B) |
136.1 KB |
/learn/start-a-new-react-project |
49.88 KB (🟡 +2 B) |
132.52 KB |
/learn/state-a-components-memory |
58.54 KB (🟡 +2 B) |
141.18 KB |
/learn/state-as-a-snapshot |
52.11 KB (🟡 +2 B) |
134.76 KB |
/learn/synchronizing-with-effects |
65.23 KB (🟡 +2 B) |
147.87 KB |
/learn/thinking-in-react |
54.18 KB (🟡 +2 B) |
136.82 KB |
/learn/updating-arrays-in-state |
56.41 KB (🟡 +2 B) |
139.05 KB |
/learn/updating-objects-in-state |
56.14 KB (🟡 +2 B) |
138.78 KB |
/learn/writing-markup-with-jsx |
51.56 KB (🟡 +2 B) |
134.2 KB |
/learn/you-might-not-need-an-effect |
64.61 KB (🟡 +2 B) |
147.25 KB |
/learn/your-first-component |
52.15 KB (🟡 +2 B) |
134.79 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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
@harish-sethuraman, I'd appreciate it if you could help out by reviewing this. I know it's a big PR, but you can navigate through commits, then make it'll easier to understand all changes.
Plus, after merging this PR, I believe we can reduce the first-load bundle size even more.
-
Im getting this in the console when I open the
/learnpage which doesn't happen in the main branch? -
next-dev.js?3515:25 Warning: Unknown event handler propertyonLoadModule. It will be ignored.- getting this warning when devtools is enabled which might get fixed after https://github.com/codesandbox/sandpack/pull/537 lands?
- Small NIT: A new border radius has been introduced here :)
https://user-images.githubusercontent.com/32865581/181432455-b0fa768b-caa6-4fda-820a-f4b758a82971.mov
There is a difference in background color when we shift to mobile view
There a also seems to be a little bit different in sandbox sizes for laptop devices probably there is a change in font
| Before ( main branch) | After (current one) |
|---|---|
 |
 |
Seems like when a line is highlighted for error we introduced a border radius there as well. Not sure if that was intentional or not :)
These are the changes I noticed between main and this branch
@harish-sethuraman
- ✅ console error: there was a wrong decorator configuration on a code block;
- ✅
onLoadModule: comment out until we address it in a follow-up PR; - ✅ border radius on code-editor: good catch!
- ✅ background color shift: I standardized it, from now on it uses always the same background;
- ✨ error highlight border-radius: good catch again. It was introduced on Sandpack, and I intentionally kept it because I believe it's a nice touch
✅ Sticky long sandboxes; ✅ Just found another issue where the syntax highlight wasn't working on json code snippets;
If you turn on "highlight updates", there's something weird happening with preview re-renders. I think it constantly re-renders every example in a loop.
Hey, @gaearon I couldn't reproduce it. Is it happening in a specific sandbox or all of them?
https://user-images.githubusercontent.com/4838076/184315623-91e058ae-6bda-48bd-b3af-88dcc53d0c34.mov
I think this added a development regression. When I edit regular code blocks, Fast Refresh seems to no longer (or at least not consistently) pick up my edits.
Reverted in https://github.com/reactjs/reactjs.org/pull/4959#issue-1359696043