Maintain the state of Sandpack providers and layouts

[pratikgcet]

Please see my code below. Whenever I click the button the code editor is refreshed and the code that I have written is wiped off. I have tried all the possible hooks but I want to know how to render the same code editor. I'm not sure why this is happening as I am not changing the state of Sandpack editor or provider. The buttons is just an example, basically what I want to achieve is a segment so a user can toggle between the preview and the console. I have also tried using useActiveCode but I lose the code the moment button is clicked and the whole sandpack is re-rendered except the preview.

import {
  RunIcon,
  SandpackCodeEditor,
  SandpackConsole,
  SandpackFileExplorer,
  SandpackLayout,
  SandpackPreview,
  SandpackProvider,
  SandpackTests,
  useSandpack,
  useSandpackNavigation,
} from "@codesandbox/sandpack-react";
import { Spec } from "@codesandbox/sandpack-react/dist/types/components/Tests/Specs";
import { nightOwl } from "@codesandbox/sandpack-themes";
import { useState } from "react";

export const App = () => {
  const files = {};
  const [val, setVal] = useState("test");

  return (
    <div>
      <SandpackProvider
        files={files}
        theme={nightOwl}
        template="vanilla"
        options={{ autorun: true, recompileMode: "immediate" }}
        style={{ height: "100vh", backgroundColor: "#011627" }}
      >
        <SandpackLayout
          style={{ display: "grid", gridTemplateColumns: "repeat(1,1fr)" }}
        >
          <div>
            <SandpackCodeEditor
              style={{ height: "50vh" }}
              showTabs={false}
              showRunButton
            ></SandpackCodeEditor>
          </div>
          <div>
            <button onClick={() => setVal("test")}>1</button>
            <button onClick={() => setVal("console")}>2</button>
          </div>
          <div style={{ display: "flex", flexDirection: "row" }}>
            <SandpackPreview style={{ height: "50vh" }} />
            <SandpackConsole
              style={{ height: "50vh" }}
              resetOnPreviewRestart={true}
              showSyntaxError={false}
              showHeader={true}
            />
          </div>
        </SandpackLayout>
      </SandpackProvider>
    </div>
  );
};

[danilowoz]

Sorry, I couldn't reproduce what you descrived. Could you please create a sandbox using this template where I can reproduce it?

Thanks

[pratikgcet]

Thanks. Here you go. You can write "console.log(2)" in the editor and then click the button "2" and click the button "1" back again, the edits that you have done will be gone.
Heres the sandbox
https://codesandbox.io/s/jolly-fast-b8bvkw?file=/src/App.tsx

What I am really looking for is something like this with the state maintained(photo below)

[danilowoz]

As you have a top-level state, I believe it's causing a re-render on the whole Sandpack context marking it restarts to the initial state. Basically, you just need to have another component and isolate the state:
Here's a fix: https://codesandbox.io/s/bold-chatelet-4xjyce?file=/src/App.tsx

[pratikgcet]

Thanks @danilowoz . Yes makes perfect sense. I cant open the sandbox though.

[danilowoz]

oh sorry! I made it public, so you can open it now