Add support for editting multiple files in Playground component. (#67)

* Add support for editting multiple files in Playground component. Follow up work is needed to refactor the examples to use multiple files. * Fix.
pixijs · Jan 19, 2024 · 9f4e8ae · 9f4e8ae
1 parent c2d5e79
commit 9f4e8ae
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 deletions.
diff --git a/src/components/PixiPlayground/MonacoEditor.tsx b/src/components/PixiPlayground/MonacoEditor.tsx
@@ -2,17 +2,15 @@ import { useCallback, useEffect, useRef } from 'react';
 import type { editor } from 'monaco-editor';
 import { useColorMode } from '@docusaurus/theme-common';
 import Editor from '@monaco-editor/react';
-
-const ROOT_DIR = 'inmemory://model/';
+import { FileTabs, SandpackStack, useActiveCode, useSandpack } from '@codesandbox/sandpack-react';
 
 export type CodeChangeCallbackType = (code: string | undefined) => void;
 
 type MonacoEditorProps = {
-    code: string;
-    onChange: CodeChangeCallbackType;
+    onChange?: CodeChangeCallbackType;
 };
 
-export default function MonacoEditor({ code, onChange }: MonacoEditorProps)
+export default function MonacoEditor({ onChange }: MonacoEditorProps)
 {
     const editorRef = useRef(null);
 
@@ -52,16 +50,25 @@ export default function MonacoEditor({ code, onChange }: MonacoEditorProps)
     };
 
     const { colorMode } = useColorMode();
+    const { code, updateCode } = useActiveCode();
+    const { sandpack } = useSandpack();
 
     return (
-        <Editor
-            defaultLanguage="javascript"
-            value={code}
-            defaultPath={`${ROOT_DIR}/src/index.ts`}
-            onChange={onChange}
-            options={options}
-            onMount={handleEditorDidMount}
-            theme={colorMode === 'dark' ? 'vs-dark' : 'light'}
-        />
+        <SandpackStack style={{ height: '100%', margin: 0 }}>
+            <FileTabs />
+            <Editor
+                key={sandpack.activeFile}
+                defaultLanguage="javascript"
+                defaultValue={code}
+                options={options}
+                onMount={handleEditorDidMount}
+                onChange={(value) =>
+                {
+                    updateCode(value || '');
+                    onChange?.(value);
+                }}
+                theme={colorMode === 'dark' ? 'vs-dark' : 'light'}
+            />
+        </SandpackStack>
     );
 }
diff --git a/src/components/PixiPlayground/index.tsx b/src/components/PixiPlayground/index.tsx
@@ -1,7 +1,7 @@
 import { useColorMode } from '@docusaurus/theme-common';
 import { useCallback, useState } from 'react';
 import classNames from 'classnames';
-import { SandpackLayout, SandpackPreview, SandpackProvider, useActiveCode, useSandpack } from '@codesandbox/sandpack-react';
+import { SandpackLayout, SandpackPreview, SandpackProvider, useSandpack } from '@codesandbox/sandpack-react';
 import { useContainerClassNameModifier } from '@site/src/hooks/useContainerClassNameModifier';
 import { latestVersion } from './usePixiVersions';
 import MonacoEditor from './MonacoEditor';
@@ -19,22 +19,10 @@ type PlaygroundProps = {
 
 function Playground({ mode, onCodeChanged }: PlaygroundProps)
 {
-    const { code, updateCode } = useActiveCode();
     const { sandpack } = useSandpack();
     const [showOutput, setShowOutput] = useState(false);
     const { activeFile, bundlerState } = sandpack;
 
-    const handleCodeChange: CodeChangeCallbackType = useCallback(
-        (nextCode) =>
-        {
-            const nextCodeString = nextCode ?? '';
-
-            updateCode(nextCodeString);
-            onCodeChanged?.(nextCodeString);
-        },
-        [onCodeChanged, updateCode],
-    );
-
     const handleToggle = useCallback(() =>
     {
         setShowOutput((lastShowOutput) => !lastShowOutput);
@@ -44,7 +32,7 @@ function Playground({ mode, onCodeChanged }: PlaygroundProps)
     return (
         <SandpackLayout className={classNames(styles[mode], showOutput && styles.showOutput)}>
             <div className={styles.editorWrapper}>
-                <MonacoEditor key={activeFile} code={code} onChange={handleCodeChange} />
+                <MonacoEditor key={activeFile} onChange={onCodeChanged} />
             </div>
 
             <div className={styles.previewWrapper}>
@@ -59,6 +47,7 @@ function Playground({ mode, onCodeChanged }: PlaygroundProps)
 
 type PixiPlaygroundProps = {
     code: string;
+    extraFiles?: Record<string, string>;
     isPixiWebWorkerVersion?: boolean;
     isPixiDevVersion?: boolean;
     pixiVersion?: string;
@@ -68,7 +57,7 @@ type PixiPlaygroundProps = {
 
 export default function PixiPlayground({
     code,
-    onCodeChanged,
+    extraFiles,
     isPixiWebWorkerVersion = false,
     isPixiDevVersion = false,
     pixiVersion = latestVersion,
@@ -79,6 +68,7 @@ export default function PixiPlayground({
 
     const { key, files, customSetup } = useSandpackConfiguration({
         code,
+        extraFiles,
         isPixiDevVersion,
         isPixiWebWorkerVersion,
         pixiVersion,
@@ -99,9 +89,11 @@ export default function PixiPlayground({
                     'sp-wrapper': mode === 'tutorial' ? styles.tpWrapper : styles.spWrapper,
                     'sp-layout': styles.spLayout,
                 },
+                // Only show .js file tabs
+                visibleFiles: Object.keys(files).filter((fileName) => fileName.endsWith('.js')) as any[],
             }}
         >
-            <Playground mode={mode} onCodeChanged={onCodeChanged} />
+            <Playground mode={mode} />
         </SandpackProvider>
     );
 }
diff --git a/src/components/PixiPlayground/useSandpackConfiguration.ts b/src/components/PixiPlayground/useSandpackConfiguration.ts
@@ -19,7 +19,7 @@ const indexHTML = `
 // babel configuration I could find (.browserslistrc isn't working and preset-env targets
 // are out of date, but it seems OK), while also allowing the best "open in sandbox"
 // functionality with all required dependencies
-export const useFiles = (code: string) =>
+export const useFiles = (code: string, extraFiles?: Record<string, string>) =>
     useMemo(
         () => ({
             '.babelrc': {
@@ -55,8 +55,9 @@ export const useFiles = (code: string) =>
                     2,
                 ),
             },
+            ...extraFiles,
         }),
-        [code],
+        [code, extraFiles],
     );
 
 type UseDependenciesParams = {
@@ -89,16 +90,18 @@ const useDependencies = ({ isPixiWebWorkerVersion, isPixiDevVersion, pixiVersion
 
 type UseSandpackConfigurationParams = UseDependenciesParams & {
     code: string;
+    extraFiles?: Record<string, string>;
 };
 
 export const useSandpackConfiguration = ({
     code,
+    extraFiles,
     isPixiWebWorkerVersion,
     isPixiDevVersion,
     pixiVersion,
 }: UseSandpackConfigurationParams) =>
 {
-    const files = useFiles(code);
+    const files = useFiles(code, extraFiles);
 
     const { dependenciesKey, dependencies } = useDependencies({ isPixiWebWorkerVersion, isPixiDevVersion, pixiVersion });