fix(filetab): not show files that don't exist

sandpack-react/src/presets/Playground.stories.tsx

@@ -0,0 +1,22 @@
+import { Sandpack } from "./Sandpack";
+
+export default {
+  title: "Playground",
+  component: Sandpack,
+};
+
+const code = `export default function App() {
+  return '12312312';
+};
+`;
+
+export const Main = (): JSX.Element => {
+  return (
+    <Sandpack
+      customSetup={{ entry: "/index.tsx", main: "/App.tsx" }}
+      files={{ "/App.tsx": code }}
+      options={{ showTabs: true, openPaths: ["/index.tsx"] }}
+      template="react-ts"
+    />
+  );
+};

sandpack-react/src/utils/sandpackUtils.test.ts

@@ -5,7 +5,7 @@ import {
   createSetupFromUserInput,
 } from "./sandpackUtils";
 
-describe("getSandpackStateFromProps", () => {
+describe(getSandpackStateFromProps, () => {
   test("always return an activeFile", () => {
     const template = getSandpackStateFromProps({ template: "react" });
     expect(template.activePath).toBe("/App.js");
@@ -110,9 +110,18 @@ describe("getSandpackStateFromProps", () => {
 
     expect(output.activePath).toEqual("/App.js");
   });
+
+  test("should not show invalid files into `openPaths`", () => {
+    const output = getSandpackStateFromProps({
+      template: "react",
+      openPaths: ["/App.js", "not-exist.js"],
+    });
+
+    expect(output.openPaths).toEqual(["/App.js"]);
+  });
 });
 
-describe("createSetupFromUserInput", () => {
+describe(createSetupFromUserInput, () => {
   test("convert `files` to a key/value format", () => {
     const output = createSetupFromUserInput({ files: { "App.js": "" } });
     expect(output).toStrictEqual({ files: { "App.js": { code: "" } } });

sandpack-react/src/utils/sandpackUtils.ts

@@ -89,8 +89,9 @@ export const getSandpackStateFromProps = (
   );
 
   const environment = projectSetup.environment;
+  const existOpenPath = openPaths.filter((file) => files[file]);
 
-  return { openPaths, activePath, files, environment };
+  return { openPaths: existOpenPath, activePath, files, environment };
 };
 
 // The template is predefined (eg: react, vue, vanilla)