Don't allow switching target language if only JS is available

Author: eps1lon

beta/src/components/MDX/Sandpack/CustomPreset.tsx

@@ -22,11 +22,13 @@ export const CustomPreset = memo(function CustomPreset({
   showDevTools,
   onDevToolsLoad,
   devToolsLoaded,
+  hasTSVersion,
   providedFiles,
 }: {
   showDevTools: boolean;
   devToolsLoaded: boolean;
   onDevToolsLoad: () => void;
+  hasTSVersion: boolean;
   providedFiles: Array<string>;
 }) {
   const {lintErrors, lintExtensions} = useSandpackLint();
@@ -44,6 +46,7 @@ export const CustomPreset = memo(function CustomPreset({
       showDevTools={showDevTools}
       onDevToolsLoad={onDevToolsLoad}
       devToolsLoaded={devToolsLoaded}
+      hasTSVersion={hasTSVersion}
       providedFiles={providedFiles}
       lintErrors={lintErrors}
       lintExtensions={lintExtensions}
@@ -56,6 +59,7 @@ const SandboxShell = memo(function SandboxShell({
   showDevTools,
   onDevToolsLoad,
   devToolsLoaded,
+  hasTSVersion,
   providedFiles,
   lintErrors,
   lintExtensions,
@@ -64,6 +68,7 @@ const SandboxShell = memo(function SandboxShell({
   showDevTools: boolean;
   devToolsLoaded: boolean;
   onDevToolsLoad: () => void;
+  hasTSVersion: boolean;
   providedFiles: Array<string>;
   lintErrors: Array<any>;
   lintExtensions: Array<any>;
@@ -76,7 +81,10 @@ const SandboxShell = memo(function SandboxShell({
       <div
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
-        <NavigationBar providedFiles={providedFiles} />
+        <NavigationBar
+          hasTSVersion={hasTSVersion}
+          providedFiles={providedFiles}
+        />
         <SandpackLayout
           className={cn(
             showDevTools && devToolsLoaded && 'sp-layout-devtools',

beta/src/components/MDX/Sandpack/NavigationBar.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {
+import React, {
   useRef,
   useInsertionEffect,
   useCallback,
@@ -20,7 +20,10 @@ import {
 import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
 import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';
-import {SnippetTargetLanguageContext} from './SnippetLanguage';
+import {
+  SnippetTargetLanguage,
+  SnippetTargetLanguageContext,
+} from './SnippetLanguage';
 import {IconChevron} from '../../Icon/IconChevron';
 import {Listbox} from '@headlessui/react';
 import classNames from 'classnames';
@@ -42,44 +45,70 @@ const getFileName = (filePath: string): string => {
   return filePath.slice(lastIndexOfSlash + 1);
 };
 
-function SnippetTargetLanguageButton(props: any) {
-  const {children, snippetTargetLanguage} = props;
-  const {
-    setSnippetTargetLanguage,
-    snippetTargetLanguage: currentSnippetTargetLanguage,
-  } = useContext(SnippetTargetLanguageContext);
-
-  const isCurrent = currentSnippetTargetLanguage === snippetTargetLanguage;
+function SnippetTargetLanguageButton({
+  children,
+  active,
+  disabled,
+  snippetTargetLanguage,
+}: {
+  children: React.ReactNode;
+  active: boolean;
+  disabled?: boolean | undefined;
+  snippetTargetLanguage: SnippetTargetLanguage;
+}) {
+  const {setSnippetTargetLanguage} = useContext(SnippetTargetLanguageContext);
 
   return (
     <button
-      aria-pressed={isCurrent ? true : undefined}
+      aria-pressed={active}
+      aria-disabled={disabled}
       className={classNames(
         'text-sm text-primary dark:text-primary-dark inline-flex mx-1 border-black',
-        isCurrent && 'border-b-4'
+        active && 'border-b-4',
+        disabled && 'cursor-not-allowed'
       )}
-      onClick={() => setSnippetTargetLanguage(snippetTargetLanguage)}
+      onClick={() => {
+        if (!disabled) {
+          setSnippetTargetLanguage(snippetTargetLanguage);
+        }
+      }}
+      title={disabled ? 'Language not available at the moment.' : undefined}
       type="button">
       {children}
     </button>
   );
 }
 
-function SnippetTargetLanguageToggle() {
+function SnippetTargetLanguageToggle({hasTSVersion}: {hasTSVersion: boolean}) {
+  const {snippetTargetLanguage} = useContext(SnippetTargetLanguageContext);
+
   return (
     <div role="group" aria-label="Snippet target language">
-      <SnippetTargetLanguageButton key="js" snippetTargetLanguage="js">
+      <SnippetTargetLanguageButton
+        key="js"
+        active={!hasTSVersion || snippetTargetLanguage === 'js'}
+        snippetTargetLanguage="js">
         JS
       </SnippetTargetLanguageButton>
 
-      <SnippetTargetLanguageButton key="ts" snippetTargetLanguage="ts">
+      <SnippetTargetLanguageButton
+        key="ts"
+        active={hasTSVersion && snippetTargetLanguage === 'ts'}
+        disabled={!hasTSVersion}
+        snippetTargetLanguage="ts">
         TS
       </SnippetTargetLanguageButton>
     </div>
   );
 }
 
-export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
+export function NavigationBar({
+  hasTSVersion,
+  providedFiles,
+}: {
+  hasTSVersion: boolean;
+  providedFiles: Array<string>;
+}) {
   const {sandpack} = useSandpack();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const tabsRef = useRef<HTMLDivElement | null>(null);
@@ -219,7 +248,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
       <div
         className="px-3 flex items-center justify-end text-right"
         translate="yes">
-        <SnippetTargetLanguageToggle />
+        <SnippetTargetLanguageToggle hasTSVersion={hasTSVersion} />
         <DownloadButton providedFiles={providedFiles} />
         <ResetButton onReset={handleReset} />
         <OpenInCodeSandboxButton />

beta/src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -80,7 +80,10 @@ function SandpackRoot(props: SandpackProps) {
   const {snippetTargetLanguage} = React.useContext(
     SnippetTargetLanguageContext
   );
-  const files = createFileMap(codeSnippets, snippetTargetLanguage);
+  const {files, hasTSVersion} = createFileMap(
+    codeSnippets,
+    snippetTargetLanguage
+  );
 
   files['/styles.css'] = {
     code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
@@ -105,6 +108,7 @@ function SandpackRoot(props: SandpackProps) {
           showDevTools={showDevTools}
           onDevToolsLoad={() => setDevToolsLoaded(true)}
           devToolsLoaded={devToolsLoaded}
+          hasTSVersion={hasTSVersion}
           providedFiles={Object.keys(files)}
         />
       </SandpackProvider>

beta/src/components/MDX/Sandpack/createFileMap.ts

@@ -13,7 +13,7 @@ export const createFileMap = (
   const isTSFile = (filePath: string) => /\.(ts|tsx)$/.test(filePath);
   const isJSFile = (filePath: string) => /\.(js|jsx)$/.test(filePath);
 
-  const fileMap = codeSnippets.reduce<Record<string, SandpackFile>>(
+  const files = codeSnippets.reduce<Record<string, SandpackFile>>(
     (result, codeSnippet) => {
       if ((codeSnippet.type as any).mdxName !== 'pre') {
         return result;
@@ -66,17 +66,17 @@ export const createFileMap = (
     {}
   );
 
-  for (const filePath in fileMap) {
+  for (const filePath in files) {
     // Only remove JS files if we have a TS version available.
     // If no TS version is available we continue to display JS files.
     // Assuming that if one file is available as TS, every file is.
     // Assuming a JS version is available all the time.
     if (snippetTargetLanguage === 'ts' && isJSFile(filePath) && hasTSVersion) {
-      delete fileMap[filePath];
+      delete files[filePath];
     } else if (snippetTargetLanguage === 'js' && isTSFile(filePath)) {
-      delete fileMap[filePath];
+      delete files[filePath];
     }
   }
 
-  return fileMap;
+  return {files, hasTSVersion};
 };

beta/src/components/MDX/Sandpack/index.tsx

@@ -62,7 +62,7 @@ export default memo(function SandpackWrapper(props: any): any {
   const {snippetTargetLanguage} = useContext(SnippetTargetLanguageContext);
 
   const codeSnippets = Children.toArray(props.children) as React.ReactElement[];
-  const files = createFileMap(codeSnippets, snippetTargetLanguage);
+  const {files} = createFileMap(codeSnippets, snippetTargetLanguage);
 
   // 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.