fix(deps): update dependency @codesandbox/sandpack-react to v1 (#870)

* fix(deps): update dependency @codesandbox/sandpack-react to v1 * fix(components-Editor): migrate to `@codesandbox/sandpack-react` v1 Co-authored-by: Renovate Bot <[email protected]> Co-authored-by: sabertazimi <[email protected]>
sabertazimi · May 27, 2022 · 731cd8a · 731cd8a · vercel · May 27, 2022
1 parent 3afd5bf
commit 731cd8a
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 19 deletions.
diff --git a/components/Editor/Editor.test.tsx b/components/Editor/Editor.test.tsx
@@ -24,7 +24,9 @@ describe('Editor', () => {
     );
     expect(screen.getByRole('group')).toBeInTheDocument();
     expect(screen.getByRole('group')).toContainElement(
-      screen.getByText('const foo = bar();')
+      screen.getByText('const')
     );
+    expect(screen.getByRole('group')).toContainElement(screen.getByText('foo'));
+    expect(screen.getByRole('group')).toContainElement(screen.getByText('bar'));
   });
 });
diff --git a/components/Editor/Editor.tsx b/components/Editor/Editor.tsx
@@ -1,8 +1,8 @@
 import type { SandpackPredefinedTemplate } from '@codesandbox/sandpack-react';
-import { monokaiProTheme, Sandpack } from '@codesandbox/sandpack-react';
-import '@codesandbox/sandpack-react/dist/index.css';
+import { Sandpack } from '@codesandbox/sandpack-react';
+import { monokaiPro } from '@codesandbox/sandpack-themes';
 import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
+import { Children } from 'react';
 import { normalizeFilepath } from './utils';
 
 interface Props {
@@ -21,7 +21,7 @@ interface PreProps {
 }
 
 const Editor = ({ template = 'react-ts', children }: Props): JSX.Element => {
-  const codeSnippets = React.Children.toArray(children);
+  const codeSnippets = Children.toArray(children);
   const files = codeSnippets.reduce(
     (result: Record<string, { code: string }>, codeSnippet) => {
       const preElement = codeSnippet as ReactElement<PreProps>;
@@ -44,18 +44,18 @@ const Editor = ({ template = 'react-ts', children }: Props): JSX.Element => {
   return (
     <div className="dark:shadow-primary dark:shadow-xl">
       <Sandpack
-        template={template}
-        theme={monokaiProTheme}
         customSetup={{
-          files,
           dependencies: {},
         }}
+        files={files}
         options={{
           showLineNumbers: true,
           showInlineErrors: false,
           showTabs: true,
           externalResources: [],
         }}
+        template={template}
+        theme={monokaiPro}
       />
     </div>
   );

diff --git a/components/MetaHeader/MetaHeader.tsx b/components/MetaHeader/MetaHeader.tsx
@@ -1,3 +1,4 @@
+import { getSandpackCssText } from '@codesandbox/sandpack-react';
 import ErrorBoundary from '@components/ErrorBoundary';
 import { siteConfig } from '@config';
 import landingImage from '@images/landing.jpg';
@@ -22,6 +23,12 @@ const MetaHeader = ({
       <Head key={title}>
         <title>{title}</title>
         <meta charSet="UTF-8" />
+        <style
+          id="sandpack"
+          dangerouslySetInnerHTML={{
+            __html: getSandpackCssText(),
+          }}
+        />
       </Head>
       <NextSeo
         title={title}

diff --git a/package.json b/package.json
@@ -51,7 +51,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@codesandbox/sandpack-react": "^0.19.10",
+    "@codesandbox/sandpack-react": "^1.0.4",
+    "@codesandbox/sandpack-themes": "^1.0.0",
     "@octokit/rest": "^18.12.0",
     "antd": "^4.20.6",
     "classnames": "^2.3.1",

diff --git a/yarn.lock b/yarn.lock
@@ -1578,19 +1578,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codesandbox/sandpack-client@npm:^0.19.9":
-  version: 0.19.9
-  resolution: "@codesandbox/sandpack-client@npm:0.19.9"
+"@codesandbox/sandpack-client@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@codesandbox/sandpack-client@npm:1.0.4"
   dependencies:
     codesandbox-import-utils: ^1.2.3
     lodash.isequal: ^4.5.0
-  checksum: be304c633859c263e752d5dc489c90da1e865dd4a4b8c924378450f4305e5d69f74d73ebd71c4fe884ca6bae122453bbc6c5058143bcdab797c5b573f6de09b1
+  checksum: 7836e1b99f64105be7be81846be944a98725f7c45146d088b1696cb1ba8eec035f03ae3b47490c8d3f53b10edc2dd557c80c3038fadf8fd0f5f09ef5cf6253e2
   languageName: node
   linkType: hard
 
-"@codesandbox/sandpack-react@npm:^0.19.10":
-  version: 0.19.10
-  resolution: "@codesandbox/sandpack-react@npm:0.19.10"
+"@codesandbox/sandpack-react@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@codesandbox/sandpack-react@npm:1.0.4"
   dependencies:
     "@code-hike/classer": ^0.0.0-aa6efee
     "@codemirror/closebrackets": ^0.19.0
@@ -1606,8 +1606,9 @@ __metadata:
     "@codemirror/matchbrackets": ^0.19.3
     "@codemirror/state": ^0.19.6
     "@codemirror/view": ^0.19.32
-    "@codesandbox/sandpack-client": ^0.19.9
+    "@codesandbox/sandpack-client": ^1.0.4
     "@react-hook/intersection-observer": ^3.1.1
+    "@stitches/core": ^1.2.6
     codesandbox-import-util-types: ^2.2.3
     lodash.isequal: ^4.5.0
     lz-string: ^1.4.4
@@ -1616,7 +1617,14 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17
     react-dom: ^16.8.0 || ^17
-  checksum: d0875aae7f08ec278bb39ca317e8e38b03fbf70433a167fdc097e65f0da9aabb057e5dc45d764586dded73f25c27b4f5aac6181de60ee5e6976964e6dbd3de26
+  checksum: 860e2ab438130733b7c507ec6b08311e2a4a58a59e7134ea66b660b00b92ff5bb5c790c86c8a7c54a0db15acf4b20caf4527de0ab05eba157d1fb6289197600f
+  languageName: node
+  linkType: hard
+
+"@codesandbox/sandpack-themes@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@codesandbox/sandpack-themes@npm:1.0.0"
+  checksum: ca90676f6663aef5f52e5c02efbd5d6f5846c4a6be943dce922ea8187a8c9f87edb8c91def165a5bab73d5d866b879650a3696d5ea246f737b80e6a56d7807ef
   languageName: node
   linkType: hard
 
@@ -2646,7 +2654,8 @@ __metadata:
   resolution: "@sabertazimi/blog@workspace:."
   dependencies:
     "@ant-design/icons": ^4.7.0
-    "@codesandbox/sandpack-react": ^0.19.10
+    "@codesandbox/sandpack-react": ^1.0.4
+    "@codesandbox/sandpack-themes": ^1.0.0
     "@dg-scripts/stylelint-config": ^5.10.0
     "@octokit/rest": ^18.12.0
     "@octokit/types": ^6.34.0
@@ -2758,6 +2767,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@stitches/core@npm:^1.2.6":
+  version: 1.2.8
+  resolution: "@stitches/core@npm:1.2.8"
+  checksum: 3a76a697b1d71ffb212e8b166f923c8f66ef99de93689dd417571f90fbba5692abb9a92220acd102baf5298896f0fdfeaa721da2d61adee1247531a26f67a15f
+  languageName: node
+  linkType: hard
+
 "@surma/rollup-plugin-off-main-thread@npm:^2.2.3":
   version: 2.2.3
   resolution: "@surma/rollup-plugin-off-main-thread@npm:2.2.3"