Skip to content

Add Sandpack support to embed DevTools into Beta docs - #4159

Closed
bvaughn wants to merge 1 commit into
reactjs:mainfrom
bvaughn:sandpack-react-devtools
Closed

bvaughn wants to merge 1 commit into
reactjs:mainfrom
bvaughn:sandpack-react-devtools

Conversation

@bvaughn

@bvaughn bvaughn commented Dec 9, 2021 •

Copy link
Copy Markdown
Contributor

Builds on top of the work done by @danilowoz in codesandbox/sandpack#236

  • Update Code Sandbox Sandpack to 0.10.1
    • The SandpackCodeEditor currently throws an error ("Unrecognized extension value in extension set ([object Object])...")
  • Update Sandpack plug-in to support conditionally rendering SandpackReactDevTools
  • Work with @danilowoz to style embedded DevTools

@github-actions github-actions Bot added the beta label Dec 9, 2021
@bvaughn bvaughn changed the title Add Sandpack support for embedded DevTools Add Sandpack support to embed DevTools into Beta docs Dec 9, 2021
@bvaughn

bvaughn commented Dec 9, 2021 •

Copy link
Copy Markdown
Contributor Author

Looking at the docs and this template I was able to figure out how to get the latest release prtially working in create-react-app:

import {
  SandpackCodeEditor,
  SandpackLayout,
  SandpackPreview,
  SandpackProvider,
  SandpackReactDevTools,
} from "@codesandbox/sandpack-react";

import "@codesandbox/sandpack-react/dist/index.css";

const INDEX_HTML = `
  <html>
    <body>
      <script src="/App.js"></script>
    </body>
  <html>
`;

const APP_JS = `
  export default function App() {
    return (
      <div>Hello world</div>
    );
  }
`;

const CONFIG = {
  entry: "/public/index.html",
  main: "/App.js",
  files: {
    "/public/index.html": INDEX_HTML,
    "/App.js": APP_JS,
  }
};

export default function App() {
  return (
    <SandpackProvider template="react" customSetup={CONFIG}>
      <SandpackLayout>
        <SandpackCodeEditor />
        <SandpackPreview />
        <SandpackReactDevTools />
      </SandpackLayout>
    </SandpackProvider>
  );
}

Note that although the Sandpack renders without visible errors, DevTools doesn't seem to successfully connect to the demo app:
Screen Shot 2021-12-09 at 3 57 01 PM

cc @danilowoz in case this is unexpected

@harish-sethuraman

Copy link
Copy Markdown
Collaborator

I'll close this since we have already merged the devtools PR to main :)

This branch had an error being deployed

1 failed and 1 active deployments
Preview – reactjs-org — 94180db6 Deployed Dec 9, 2021 by vercel[bot]
Preview – beta-reactjs-org — 94180db6 Deployed Dec 9, 2021 by vercel[bot]
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.

3 participants