From 03ba759512c15024163b801a7b25d5fa37048538 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 31 Dec 2022 16:36:46 +0100
Subject: [PATCH 1/2] Improve type-safety when using `createFileMap`

---
 beta/src/components/MDX/Sandpack/SandpackRoot.tsx |  2 +-
 beta/src/components/MDX/Sandpack/createFileMap.ts |  6 +++---
 beta/src/components/MDX/Sandpack/index.tsx        | 12 ++++++------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 4b3f41527d9..e21a0067abc 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -74,7 +74,7 @@ function SandpackRoot(props: SandpackProps) {
 
   files['/styles.css'] = {
     code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
-    hidden: !files['/styles.css']?.visible,
+    hidden: !files['/styles.css']?.hidden,
   };
 
   return (
diff --git a/beta/src/components/MDX/Sandpack/createFileMap.ts b/beta/src/components/MDX/Sandpack/createFileMap.ts
index 89d53cfd2f3..ea6c17252de 100644
--- a/beta/src/components/MDX/Sandpack/createFileMap.ts
+++ b/beta/src/components/MDX/Sandpack/createFileMap.ts
@@ -4,9 +4,9 @@
 
 import type {SandpackFile} from '@codesandbox/sandpack-react';
 
-export const createFileMap = (codeSnippets: any) => {
-  return codeSnippets.reduce(
-    (result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
+export const createFileMap = (codeSnippets: React.ReactElement[]) => {
+  return codeSnippets.reduce<Record<string, SandpackFile>>(
+    (result, codeSnippet) => {
       if ((codeSnippet.type as any).mdxName !== 'pre') {
         return result;
       }
diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx
index 3591e058144..eb90099d1bd 100644
--- a/beta/src/components/MDX/Sandpack/index.tsx
+++ b/beta/src/components/MDX/Sandpack/index.tsx
@@ -46,20 +46,20 @@ const SandpackGlimmer = ({code}: {code: string}) => (
 );
 
 export default memo(function SandpackWrapper(props: any): any {
-  const codeSnippet = createFileMap(Children.toArray(props.children));
+  const codeSnippets = Children.toArray(props.children) as React.ReactElement[];
+  const files = createFileMap(codeSnippets);
 
   // To set the active file in the fallback we have to find the active file first.
   // If there are no active files we fallback to App.js as default.
-  let activeCodeSnippet = Object.keys(codeSnippet).filter(
+  let activeCodeSnippet = Object.keys(files).filter(
     (fileName) =>
-      codeSnippet[fileName]?.active === true &&
-      codeSnippet[fileName]?.hidden === false
+      files[fileName]?.active === true && files[fileName]?.hidden === false
   );
   let activeCode;
   if (!activeCodeSnippet.length) {
-    activeCode = codeSnippet['/App.js'].code;
+    activeCode = files['/App.js'].code;
   } else {
-    activeCode = codeSnippet[activeCodeSnippet[0]].code;
+    activeCode = files[activeCodeSnippet[0]].code;
   }
 
   return (

From f0d6705277f7084d70bffd5fd69ca8db9c79d21d Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat, 31 Dec 2022 16:44:28 +0100
Subject: [PATCH 2/2] Update beta/src/components/MDX/Sandpack/SandpackRoot.tsx

---
 beta/src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index e21a0067abc..ea75a50a99b 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -74,7 +74,7 @@ function SandpackRoot(props: SandpackProps) {
 
   files['/styles.css'] = {
     code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
-    hidden: !files['/styles.css']?.hidden,
+    hidden: files['/styles.css']?.hidden,
   };
 
   return (