Editor: Add hover tooltips, intelligent completions, auto formatting, diagnostics

beta/package.json

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "v0.19.8-experimental.4",
+    "@codesandbox/sandpack-react": "v0.19.8-experimental.6",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
@@ -48,10 +48,12 @@
     "@types/mdx-js__react": "^1.5.2",
     "@types/node": "^14.6.4",
     "@types/parse-numeric-range": "^0.0.1",
+    "@types/prettier": "^2.6.3",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
+    "@typescript/vfs": "^1.3.5",
     "asyncro": "^3.0.0",
     "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
@@ -87,7 +89,7 @@
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
     "tailwindcss": "^3.0.22",
-    "typescript": "^4.0.2",
+    "typescript": "^4.6.4",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"
   },

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

@@ -3,45 +3,54 @@
  */
 import React from 'react';
 // @ts-ignore
-import {flushSync} from 'react-dom';
 import {
-  useSandpack,
-  useActiveCode,
   SandpackCodeEditor,
-  SandpackThemeProvider,
   SandpackReactDevTools,
+  SandpackThemeProvider,
+  useActiveCode,
+  useSandpack,
 } from '@codesandbox/sandpack-react';
-import scrollIntoView from 'scroll-into-view-if-needed';
 import cn from 'classnames';
+import {flushSync} from 'react-dom';
+import scrollIntoView from 'scroll-into-view-if-needed';
 
 import {IconChevron} from 'components/Icon/IconChevron';
 import {NavigationBar} from './NavigationBar';
 import {Preview} from './Preview';
+import {useTypescriptExtension} from './sandpack-tsserver/useTypescriptExtension';
 import {CustomTheme} from './Themes';
 import {useSandpackLint} from './useSandpackLint';
-
-// Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613.
-const emptyArray: Array<any> = [];
+import {useTypescriptCompiler} from './sandpack-tsserver/useTypescriptCompiler';
 
 export function CustomPreset({
   isSingleFile,
   showDevTools,
+  showJsForTsxFiles,
   onDevToolsLoad,
   devToolsLoaded,
 }: {
   isSingleFile: boolean;
   showDevTools: boolean;
+  showJsForTsxFiles: boolean;
   devToolsLoaded: boolean;
   onDevToolsLoad: () => void;
 }) {
   const {lintErrors, lintExtensions} = useSandpackLint();
+  const {extension: typescriptExtensions, envId: typescriptEnvId} =
+    useTypescriptExtension(showJsForTsxFiles ? 'visible' : 'interaction');
+  const {reset: resetTsToJs} = useTypescriptCompiler(
+    showJsForTsxFiles,
+    typescriptEnvId
+  );
+
   const lineCountRef = React.useRef<{[key: string]: number}>({});
   const containerRef = React.useRef<HTMLDivElement>(null);
   const {sandpack} = useSandpack();
-  const {code} = useActiveCode();
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   const {activePath} = sandpack;
+  const code = sandpack.files[activePath]?.code || '';
+
   if (!lineCountRef.current[activePath]) {
     lineCountRef.current[activePath] = code.split('\n').length;
   }
@@ -53,7 +62,7 @@ export function CustomPreset({
       <div
         className="shadow-lg dark:shadow-lg-dark rounded-lg"
         ref={containerRef}>
-        <NavigationBar showDownload={isSingleFile} />
+        <NavigationBar showDownload={isSingleFile} onReset={resetTsToJs} />
         <SandpackThemeProvider theme={CustomTheme}>
           <div
             ref={sandpack.lazyAnchorRef}
@@ -67,8 +76,7 @@ export function CustomPreset({
               showInlineErrors
               showTabs={false}
               showRunButton={false}
-              extensions={lintExtensions}
-              extensionsKeymap={emptyArray}
+              extensions={[lintExtensions, typescriptExtensions]}
             />
             <Preview
               className="order-last xl:order-2"

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

@@ -13,7 +13,13 @@ import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';
 import {FilesDropdown} from './FilesDropdown';
 
-export function NavigationBar({showDownload}: {showDownload: boolean}) {
+export function NavigationBar({
+  showDownload,
+  onReset,
+}: {
+  showDownload: boolean;
+  onReset: () => void;
+}) {
   const {sandpack} = useSandpack();
   const [dropdownActive, setDropdownActive] = React.useState(false);
   const {openPaths, clients} = sandpack;
@@ -42,6 +48,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) {
   }, [openPaths.length, resizeHandler]);
 
   const handleReset = () => {
+    onReset();
     sandpack.resetAllFiles();
     refresh();
   };

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

@@ -63,30 +63,57 @@ ul {
 }
 `.trim();
 
+const TSCONFIG = {
+  include: ['./**/*'],
+  compilerOptions: {
+    target: 'es2021',
+    module: 'es2020',
+    lib: ['es2021', 'es2020', 'dom', 'dom.iterable'],
+    esModuleInterop: true,
+    allowJs: true,
+    checkJs: true,
+    resolveJsonModule: true,
+    // jsx: 'react-jsx',
+    jsx: 'preserve',
+  },
+};
+const TSCONFIG_AS_JSON = JSON.stringify(TSCONFIG, null, '  ');
+
 function SandpackRoot(props: SandpackProps) {
   let {children, setup, autorun = true, showDevTools = false} = props;
   const [devToolsLoaded, setDevToolsLoaded] = React.useState(false);
   let codeSnippets = React.Children.toArray(children) as React.ReactElement[];
   let isSingleFile = true;
 
   const files = createFileMap(codeSnippets);
+  const template = files['/App.tsx'] ? 'react-ts' : 'react';
 
   files['/styles.css'] = {
     code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
     hidden: true,
   };
 
+  // Always add a tsconfig that supports JS, so we can use TS superpowers like
+  // imports & tab completion in JS examples.
+  if (!files['/tsconfig.json']) {
+    files['/tsconfig.json'] = {
+      code: TSCONFIG_AS_JSON,
+      hidden: true,
+    };
+  }
+
   return (
     <div className="sandpack-container my-8" translate="no">
       <SandpackProvider
-        template="react"
+        template={template}
         customSetup={{...setup, files: files}}
         autorun={autorun}
         initMode="user-visible"
         initModeObserverOptions={{rootMargin: '1400px 0px'}}
         bundlerURL="https://3f1bb162.sandpack-bundler.pages.dev"
         logLevel={SandpackLogLevel.None}>
         <CustomPreset
+          showJsForTsxFiles={template === 'react-ts'}
           isSingleFile={isSingleFile}
           showDevTools={showDevTools}
           onDevToolsLoad={() => setDevToolsLoaded(true)}

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

@@ -29,6 +29,8 @@ export const createFileMap = (codeSnippets: any) => {
           filePath = '/App.js';
         } else if (props.className === 'language-css') {
           filePath = '/styles.css';
+        } else if (props.className === 'language-tsx') {
+          filePath = '/App.tsx';
         } else {
           throw new Error(
             `Code block is missing a filename: ${props.children}`

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

@@ -49,15 +49,16 @@ export default React.memo(function SandpackWrapper(props: any): any {
   const codeSnippet = createFileMap(React.Children.toArray(props.children));
 
   // 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.
+  // If there are no active files we fallback to App.{js,tsx} as default.
   let activeCodeSnippet = Object.keys(codeSnippet).filter(
     (fileName) =>
       codeSnippet[fileName]?.active === true &&
       codeSnippet[fileName]?.hidden === false
   );
   let activeCode;
   if (!activeCodeSnippet.length) {
-    activeCode = codeSnippet['/App.js'].code;
+    const defaultActiveFile = codeSnippet['/App.js'] || codeSnippet['/App.tsx'];
+    activeCode = defaultActiveFile.code;
   } else {
     activeCode = codeSnippet[activeCodeSnippet[0]].code;
   }