Skip to content

Revert "[beta] upgrade sandpack and refactor sandpack.css" #4959

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

Merged
merged 1 commit into from
Sep 2, 2022

Conversation

gaearon
Copy link
Member

@gaearon gaearon commented Sep 2, 2022

Reverts #4843

due to:

  • dev-only regression (code block edits don't always show up)
  • unexpected entire page hscroll on some mobile pages on real iOS (not sure it's caused by this but likely)
  • focus ring on code editor shifts the code view

@github-actions
Copy link

github-actions bot commented Sep 2, 2022

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 84.69 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-two 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.58 KB (-2 B) 133.26 KB
/404 47.68 KB (-2 B) 132.36 KB
/apis/react 49.88 KB (-2 B) 134.56 KB
/apis/react-dom 48.9 KB (-2 B) 133.59 KB
/apis/react-dom/client/createRoot 53.31 KB (-2 B) 138 KB
/apis/react-dom/client/hydrateRoot 51.52 KB (-2 B) 136.21 KB
/apis/react-dom/createPortal 47.88 KB (-2 B) 132.57 KB
/apis/react-dom/findDOMNode 48.14 KB (-2 B) 132.83 KB
/apis/react-dom/flushSync 47.88 KB (-2 B) 132.57 KB
/apis/react-dom/hydrate 50.77 KB (-2 B) 135.46 KB
/apis/react-dom/render 50.64 KB (-2 B) 135.32 KB
/apis/react-dom/server/renderToNodeStream 47.86 KB (-2 B) 132.55 KB
/apis/react-dom/server/renderToPipeableStream 47.86 KB (-2 B) 132.55 KB
/apis/react-dom/server/renderToReadableStream 48 KB (-2 B) 132.69 KB
/apis/react-dom/server/renderToStaticMarkup 48.07 KB (-2 B) 132.76 KB
/apis/react-dom/server/renderToStaticNodeStream 48.01 KB (-2 B) 132.7 KB
/apis/react-dom/server/renderToString 47.98 KB (-2 B) 132.66 KB
/apis/react-dom/unmountComponentAtNode 47.97 KB (-2 B) 132.66 KB
/apis/react/Children 47.86 KB (-2 B) 132.55 KB
/apis/react/Component 47.98 KB (-2 B) 132.66 KB
/apis/react/Fragment 49.04 KB (-2 B) 133.72 KB
/apis/react/PureComponent 48.05 KB (-2 B) 132.74 KB
/apis/react/StrictMode 47.75 KB (-2 B) 132.44 KB
/apis/react/Suspense 47.83 KB (-2 B) 132.52 KB
/apis/react/cloneElement 47.83 KB (-2 B) 132.52 KB
/apis/react/createContext 50.22 KB (-2 B) 134.9 KB
/apis/react/createElement 47.83 KB (-2 B) 132.52 KB
/apis/react/createFactory 47.82 KB (-2 B) 132.51 KB
/apis/react/createRef 47.82 KB (-2 B) 132.5 KB
/apis/react/forwardRef 47.96 KB (-2 B) 132.64 KB
/apis/react/isValidElement 47.86 KB (-2 B) 132.55 KB
/apis/react/lazy 47.95 KB (-2 B) 132.64 KB
/apis/react/memo 47.85 KB (-2 B) 132.54 KB
/apis/react/startTransition 47.82 KB (-2 B) 132.51 KB
/apis/react/useCallback 47.84 KB (-2 B) 132.53 KB
/apis/react/useContext 56.17 KB (-2 B) 140.86 KB
/apis/react/useDebugValue 47.88 KB (-2 B) 132.57 KB
/apis/react/useDeferredValue 47.98 KB (-2 B) 132.66 KB
/apis/react/useEffect 47.83 KB (-2 B) 132.52 KB
/apis/react/useId 47.96 KB (-2 B) 132.65 KB
/apis/react/useImperativeHandle 47.84 KB (-2 B) 132.53 KB
/apis/react/useInsertionEffect 48.09 KB (-2 B) 132.78 KB
/apis/react/useLayoutEffect 47.84 KB (-2 B) 132.53 KB
/apis/react/useMemo 47.84 KB (-2 B) 132.53 KB
/apis/react/useReducer 55.81 KB (-2 B) 140.5 KB
/apis/react/useRef 53.5 KB (-2 B) 138.19 KB
/apis/react/useState 59.45 KB (-2 B) 144.13 KB
/apis/react/useSyncExternalStore 47.98 KB (-2 B) 132.67 KB
/apis/react/useTransition 47.84 KB (-2 B) 132.53 KB
/blog/2013/06/02/jsfiddle-integration 58.49 KB (-2 B) 143.17 KB
/blog/2013/06/05/why-react 60.21 KB (-2 B) 144.9 KB
/blog/2013/06/12/community-roundup 59.92 KB (-2 B) 144.61 KB
/blog/2013/06/19/community-roundup-2 60.58 KB (-2 B) 145.27 KB
/blog/2013/06/21/react-v0-3-3 58.63 KB (-2 B) 143.32 KB
/blog/2013/06/27/community-roundup-3 60.95 KB (-2 B) 145.64 KB
/blog/2013/07/02/react-v0-4-autobind-by-default 59.25 KB (-2 B) 143.94 KB
/blog/2013/07/03/community-roundup-4 60.32 KB (-2 B) 145.01 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values 59.12 KB (-2 B) 143.81 KB
/blog/2013/07/17/react-v0-4-0 59.83 KB (-2 B) 144.52 KB
/blog/2013/07/23/community-roundup-5 60.71 KB (-2 B) 145.4 KB
/blog/2013/07/26/react-v0-4-1 58.6 KB (-2 B) 143.29 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails 59.2 KB (-2 B) 143.89 KB
/blog/2013/08/05/community-roundup-6 60.01 KB (-2 B) 144.7 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications 59.21 KB (-2 B) 143.9 KB
/blog/2013/08/26/community-roundup-7 60.18 KB (-2 B) 144.86 KB
/blog/2013/09/24/community-roundup-8 61.61 KB (-2 B) 146.3 KB
/blog/2013/10/03/community-roundup-9 60.54 KB (-2 B) 145.23 KB
/blog/2013/10/16/react-v0.5.0 60.23 KB (-2 B) 144.92 KB
/blog/2013/10/29/react-v0-5-1 58.59 KB (-2 B) 143.28 KB
/blog/2013/11/06/community-roundup-10 62.2 KB (-2 B) 146.89 KB
/blog/2013/11/18/community-roundup-11 61.29 KB (-2 B) 145.97 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2 59.06 KB (-2 B) 143.75 KB
/blog/2013/12/19/react-v0.8.0 59.48 KB (-2 B) 144.17 KB
/blog/2013/12/23/community-roundup-12 60.94 KB (-2 B) 145.63 KB
/blog/2013/12/30/community-roundup-13 60.72 KB (-2 B) 145.41 KB
/blog/2014/01/02/react-chrome-developer-tools 58.98 KB (-2 B) 143.67 KB
/blog/2014/01/06/community-roundup-14 60.32 KB (-2 B) 145 KB
/blog/2014/02/05/community-roundup-15 61.54 KB (-2 B) 146.22 KB
/blog/2014/02/15/community-roundup-16 61.24 KB (-2 B) 145.93 KB
/blog/2014/02/16/react-v0.9-rc1 61.65 KB (-2 B) 146.34 KB
/blog/2014/02/20/react-v0.9 62.1 KB (-2 B) 146.78 KB
/blog/2014/02/24/community-roundup-17 60.96 KB (-2 B) 145.65 KB
/blog/2014/03/14/community-roundup-18 61.93 KB (-2 B) 146.61 KB
/blog/2014/03/19/react-v0.10-rc1 60.23 KB (-2 B) 144.92 KB
/blog/2014/03/21/react-v0.10 60.26 KB (-2 B) 144.95 KB
/blog/2014/03/28/the-road-to-1.0 60.37 KB (-2 B) 145.06 KB
/blog/2014/04/04/reactnet 59.01 KB (-2 B) 143.7 KB
/blog/2014/05/06/flux 59.14 KB (-2 B) 143.82 KB
/blog/2014/05/29/one-year-of-open-source-react 59.36 KB (-2 B) 144.05 KB
/blog/2014/06/27/community-roundup-19 60.91 KB (-2 B) 145.59 KB
/blog/2014/07/13/react-v0.11-rc1 61.29 KB (-2 B) 145.98 KB
/blog/2014/07/17/react-v0.11 62.54 KB (-2 B) 147.23 KB
/blog/2014/07/25/react-v0.11.1 59.49 KB (-2 B) 144.18 KB
/blog/2014/07/28/community-roundup-20 61.05 KB (-2 B) 145.73 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher 60.68 KB (-2 B) 145.37 KB
/blog/2014/08/03/community-roundup-21 60.71 KB (-2 B) 145.4 KB
/blog/2014/09/03/introducing-the-jsx-specification 58.72 KB (-2 B) 143.41 KB
/blog/2014/09/12/community-round-up-22 61.19 KB (-2 B) 145.88 KB
/blog/2014/09/16/react-v0.11.2 59.49 KB (-2 B) 144.18 KB
/blog/2014/09/24/testing-flux-applications 62.67 KB (-2 B) 147.36 KB
/blog/2014/10/14/introducing-react-elements 61.63 KB (-2 B) 146.31 KB
/blog/2014/10/16/react-v0.12-rc1 61.59 KB (-2 B) 146.28 KB
/blog/2014/10/17/community-roundup-23 62.16 KB (-2 B) 146.85 KB
/blog/2014/10/27/react-js-conf 58.76 KB (-2 B) 143.45 KB
/blog/2014/10/28/react-v0.12 61.53 KB (-2 B) 146.22 KB
/blog/2014/11/24/react-js-conf-updates 59.15 KB (-2 B) 143.84 KB
/blog/2014/11/25/community-roundup-24 62.39 KB (-2 B) 147.08 KB
/blog/2014/12/18/react-v0.12.2 59.18 KB (-2 B) 143.87 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship 59.58 KB (-2 B) 144.26 KB
/blog/2015/01/27/react-v0.13.0-beta-1 60.54 KB (-2 B) 145.23 KB
/blog/2015/02/18/react-conf-roundup-2015 62.53 KB (-2 B) 147.21 KB
/blog/2015/02/20/introducing-relay-and-graphql 61.68 KB (-2 B) 146.37 KB
/blog/2015/02/24/react-v0.13-rc1 60.58 KB (-2 B) 145.27 KB
/blog/2015/02/24/streamlining-react-elements 63.13 KB (-2 B) 147.82 KB
/blog/2015/03/03/react-v0.13-rc2 59.92 KB (-2 B) 144.6 KB
/blog/2015/03/04/community-roundup-25 60.88 KB (-2 B) 145.56 KB
/blog/2015/03/10/react-v0.13 61.19 KB (-2 B) 145.88 KB
/blog/2015/03/16/react-v0.13.1 59.01 KB (-2 B) 143.7 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay 61.77 KB (-2 B) 146.46 KB
/blog/2015/03/26/introducing-react-native 58.91 KB (-2 B) 143.6 KB
/blog/2015/03/30/community-roundup-26 60.84 KB (-2 B) 145.53 KB
/blog/2015/04/17/react-native-v0.4 59.76 KB (-2 B) 144.44 KB
/blog/2015/04/18/react-v0.13.2 59.09 KB (-2 B) 143.78 KB
/blog/2015/05/01/graphql-introduction 63.58 KB (-2 B) 148.27 KB
/blog/2015/05/08/react-v0.13.3 58.98 KB (-2 B) 143.67 KB
/blog/2015/05/22/react-native-release-process 59.13 KB (-2 B) 143.82 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools 59.58 KB (-2 B) 144.27 KB
/blog/2015/07/03/react-v0.14-beta-1 61.09 KB (-2 B) 145.78 KB
/blog/2015/08/03/new-react-devtools-beta 59.7 KB (-2 B) 144.38 KB
/blog/2015/08/11/relay-technical-preview 59.76 KB (-2 B) 144.45 KB
/blog/2015/08/13/reacteurope-roundup 61.35 KB (-2 B) 146.04 KB
/blog/2015/09/02/new-react-developer-tools 59.11 KB (-2 B) 143.8 KB
/blog/2015/09/10/react-v0.14-rc1 64.8 KB (-2 B) 149.49 KB
/blog/2015/09/14/community-roundup-27 61.27 KB (-2 B) 145.96 KB
/blog/2015/10/01/react-render-and-top-level-api 60.24 KB (-2 B) 144.93 KB
/blog/2015/10/07/react-v0.14 65.28 KB (-2 B) 149.97 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord 61 KB (-2 B) 145.68 KB
/blog/2015/10/28/react-v0.14.1 59.01 KB (-2 B) 143.69 KB
/blog/2015/11/02/react-v0.14.2 59.04 KB (-2 B) 143.72 KB
/blog/2015/11/18/react-v0.14.3 59.16 KB (-2 B) 143.84 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship 60.03 KB (-2 B) 144.72 KB
/blog/2015/12/16/ismounted-antipattern 59.63 KB (-2 B) 144.32 KB
/blog/2015/12/18/react-components-elements-and-instances 63.55 KB (-2 B) 148.24 KB
/blog/2015/12/29/react-v0.14.4 58.83 KB (-2 B) 143.51 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A 59.84 KB (-2 B) 144.53 KB
/blog/2016/01/12/discontinuing-ie8-support 58.65 KB (-2 B) 143.34 KB
/blog/2016/02/19/new-versioning-scheme 60.03 KB (-2 B) 144.72 KB
/blog/2016/03/07/react-v15-rc1 62.79 KB (-2 B) 147.47 KB
/blog/2016/03/16/react-v15-rc2 59.65 KB (-2 B) 144.34 KB
/blog/2016/03/29/react-v0.14.8 58.78 KB (-2 B) 143.47 KB
/blog/2016/04/07/react-v15 66.97 KB (-2 B) 151.66 KB
/blog/2016/04/08/react-v15.0.1 59.54 KB (-2 B) 144.23 KB
/blog/2016/07/11/introducing-reacts-error-code-system 59.25 KB (-2 B) 143.94 KB
/blog/2016/07/13/mixins-considered-harmful 67.4 KB (-2 B) 152.09 KB
/blog/2016/07/22/create-apps-with-no-configuration 62.73 KB (-2 B) 147.42 KB
/blog/2016/08/05/relay-state-of-the-state 62.77 KB (-2 B) 147.46 KB
/blog/2016/09/28/our-first-50000-stars 64.22 KB (-2 B) 148.91 KB
/blog/2016/11/16/react-v15.4.0 62.17 KB (-2 B) 146.86 KB
/blog/2017/04/07/react-v15.5.0 62.74 KB (-2 B) 147.42 KB
/blog/2017/05/18/whats-new-in-create-react-app 62.13 KB (-2 B) 146.82 KB
/blog/2017/06/13/react-v15.6.0 60.75 KB (-2 B) 145.44 KB
/blog/2017/07/26/error-handling-in-react-16 61.11 KB (-2 B) 145.79 KB
/blog/2017/09/08/dom-attributes-in-react-16 61.53 KB (-2 B) 146.22 KB
/blog/2017/09/25/react-v15.6.2 59.87 KB (-2 B) 144.55 KB
/blog/2017/09/26/react-v16.0 65 KB (-2 B) 149.69 KB
/blog/2017/11/28/react-v16.2.0-fragment-support 62.93 KB (-2 B) 147.62 KB
/blog/2017/12/07/introducing-the-react-rfc-process 59.45 KB (-2 B) 144.14 KB
/blog/2017/12/15/improving-the-repository-infrastructure 75.24 KB (-2 B) 159.93 KB
/blog/2018/03/01/sneak-peek-beyond-react-16 59.41 KB (-2 B) 144.1 KB
/blog/2018/03/27/update-on-async-rendering 64.65 KB (-2 B) 149.34 KB
/blog/2018/03/29/react-v-16-3 61.47 KB (-2 B) 146.16 KB
/blog/2018/05/23/react-v-16-4 61.61 KB (-2 B) 146.3 KB
/blog/2018/06/07/you-probably-dont-need-derived-state 65.27 KB (-2 B) 149.96 KB
/blog/2018/08/01/react-v-16-4-2 60.26 KB (-2 B) 144.95 KB
/blog/2018/09/10/introducing-the-react-profiler 61.87 KB (-2 B) 146.56 KB
/blog/2018/10/01/create-react-app-v2 62.35 KB (-2 B) 147.04 KB
/blog/2018/10/23/react-v-16-6 61.54 KB (-2 B) 146.23 KB
/blog/2018/11/13/react-conf-recap 59.26 KB (-2 B) 143.95 KB
/blog/2018/11/27/react-16-roadmap 65.45 KB (-2 B) 150.14 KB
/blog/2018/12/19/react-v-16-7 60.38 KB (-2 B) 145.07 KB
/blog/2019/02/06/react-v16.8.0 62.65 KB (-2 B) 147.34 KB
/blog/2019/02/23/is-react-translated-yet 62.21 KB (-2 B) 146.9 KB
/blog/2019/08/08/react-v16.9.0 65.14 KB (-2 B) 149.83 KB
/blog/2019/08/15/new-react-devtools 59.75 KB (-2 B) 144.44 KB
/blog/2019/10/22/react-release-channels 61.57 KB (-2 B) 146.26 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense 66.27 KB (-2 B) 150.95 KB
/blog/2020/02/26/react-v16.13.0 62.49 KB (-2 B) 147.18 KB
/blog/2020/08/10/react-v17-rc 68.77 KB (-2 B) 153.46 KB
/community 48.27 KB (-2 B) 132.96 KB
/community/acknowledgements 49.47 KB (-2 B) 134.16 KB
/community/meet-the-team 50.15 KB (-2 B) 134.84 KB
/learn 53.23 KB (🟡 +6 B) 137.92 KB
/learn/add-react-to-a-website 53.34 KB (-2 B) 138.03 KB
/learn/adding-interactivity 54.92 KB (-2 B) 139.61 KB
/learn/choosing-the-state-structure 60.63 KB (-2 B) 145.32 KB
/learn/conditional-rendering 52.87 KB (-2 B) 137.55 KB
/learn/describing-the-ui 52.08 KB (-2 B) 136.77 KB
/learn/editor-setup 49.55 KB (-2 B) 134.24 KB
/learn/escape-hatches 47.6 KB (-2 B) 132.29 KB
/learn/extracting-state-logic-into-a-reducer 58.27 KB (-2 B) 142.96 KB
/learn/importing-and-exporting-components 51.26 KB (-2 B) 135.95 KB
/learn/installation 48.87 KB (-2 B) 133.56 KB
/learn/javascript-in-jsx-with-curly-braces 51.34 KB (-2 B) 136.03 KB
/learn/keeping-components-pure 55.47 KB (-2 B) 140.16 KB
/learn/lifecycle-of-reactive-effects 62.65 KB (-2 B) 147.33 KB
/learn/managing-state 54.19 KB (-2 B) 138.88 KB
/learn/manipulating-the-dom-with-refs 56.44 KB (-2 B) 141.13 KB
/learn/passing-data-deeply-with-context 55.99 KB (-2 B) 140.67 KB
/learn/passing-props-to-a-component 55.04 KB (-2 B) 139.73 KB
/learn/preserving-and-resetting-state 59.01 KB (-2 B) 143.7 KB
/learn/queueing-a-series-of-state-updates 52.84 KB (-2 B) 137.52 KB
/learn/react-developer-tools 48.83 KB (-2 B) 133.52 KB
/learn/reacting-to-input-with-state 57.45 KB (-2 B) 142.14 KB
/learn/referencing-values-with-refs 54.36 KB (-2 B) 139.04 KB
/learn/removing-effect-dependencies 63.77 KB (-2 B) 148.46 KB
/learn/render-and-commit 51.41 KB (-2 B) 136.09 KB
/learn/rendering-lists 55.43 KB (-2 B) 140.11 KB
/learn/responding-to-events 54.36 KB (-2 B) 139.05 KB
/learn/reusing-logic-with-custom-hooks 58.47 KB (-2 B) 143.16 KB
/learn/scaling-up-with-reducer-and-context 52.41 KB (-2 B) 137.1 KB
/learn/separating-events-from-effects 60.28 KB (-2 B) 144.96 KB
/learn/sharing-state-between-components 53.49 KB (-2 B) 138.17 KB
/learn/start-a-new-react-project 49.9 KB (-2 B) 134.59 KB
/learn/state-a-components-memory 58.57 KB (-2 B) 143.25 KB
/learn/state-as-a-snapshot 52.14 KB (-2 B) 136.83 KB
/learn/synchronizing-with-effects 65.25 KB (-2 B) 149.94 KB
/learn/thinking-in-react 54.2 KB (-2 B) 138.89 KB
/learn/updating-arrays-in-state 56.44 KB (-2 B) 141.12 KB
/learn/updating-objects-in-state 56.17 KB (-2 B) 140.85 KB
/learn/writing-markup-with-jsx 51.58 KB (-2 B) 136.27 KB
/learn/you-might-not-need-an-effect 64.63 KB (-2 B) 149.32 KB
/learn/your-first-component 52.17 KB (-2 B) 136.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.

gaearon added a commit that referenced this pull request Sep 10, 2022
gaearon added a commit that referenced this pull request Sep 10, 2022
* Revert "Revert "[beta] upgrade sandpack and refactor sandpack.css (#4843)" (#4959)"

This reverts commit da6a06e.

* Fix tabbing

* Fixes

* More bump

* Bump bundler

* Fix overflows
@rickhanlonii rickhanlonii deleted the revert-4843-sandpack/migrate-v1 branch April 29, 2024 02:55
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.

2 participants