Merge branches 'draft/divine-lake' and 'draft/divine-lake' of https:/…

…/github.com/codesandbox/sandpack into draft/divine-lake
codesandbox · Sep 27, 2022 · e3b4a69 · e3b4a69
2 parents 27f232e + 24184f3
commit e3b4a69
Show file tree

Hide file tree

Showing 29 changed files with 645 additions and 105 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.8.1](https://github.com/codesandbox/sandpack/compare/v1.8.0...v1.8.1) (2022-09-26)
+
+
+### Bug Fixes
+
+* **file-explorer:** trim and avoid shrinks the icon on long file names ([#578](https://github.com/codesandbox/sandpack/issues/578)) ([bc12d03](https://github.com/codesandbox/sandpack/commit/bc12d0347743065a68f4af6ac65719e9c0dbf954))
+* website csb logo ([#574](https://github.com/codesandbox/sandpack/issues/574)) ([4d91860](https://github.com/codesandbox/sandpack/commit/4d9186053270fd4396dfb73a1208984d26afe0da))
+
+
+
+
+
+# [1.8.0](https://github.com/codesandbox/sandpack/compare/v1.7.2...v1.8.0) (2022-09-15)
+
+
+### Bug Fixes
+
+* **docs:** redirect double dash url ([25efc62](https://github.com/codesandbox/sandpack/commit/25efc62d99e5245e07f1bb9b51c90bbc2cfd2c9b))
+
+
+### Features
+
+* **codeeditor:** support additional, user-supplied language modes ([#570](https://github.com/codesandbox/sandpack/issues/570)) ([a746ae3](https://github.com/codesandbox/sandpack/commit/a746ae3ae700bf3b64b8e14e5caee3cb57dd307d))
+
+
+
+
+
+## [1.7.2](https://github.com/codesandbox/sandpack/compare/v1.7.1...v1.7.2) (2022-09-01)
+
+
+### Bug Fixes
+
+* **sandpack preset:** fix columns size ([#566](https://github.com/codesandbox/sandpack/issues/566)) ([cad7273](https://github.com/codesandbox/sandpack/commit/cad72736e86cdff689e963fc0b535b262f99bae3))
+
+
+
+
+
+## [1.7.1](https://github.com/codesandbox/sandpack/compare/v1.7.0...v1.7.1) (2022-08-31)
+
+
+### Bug Fixes
+
+* **console-wrapper:** refactor toggle animation and reset padding on the editor ([#565](https://github.com/codesandbox/sandpack/issues/565)) ([6e730c6](https://github.com/codesandbox/sandpack/commit/6e730c6bb462e225daea1dcea58c56c3fd17bcd3))
+
+
+
+
+
 # [1.7.0](https://github.com/codesandbox/sandpack/compare/v1.6.0...v1.7.0) (2022-08-31)
 
 

diff --git a/lerna.json b/lerna.json
@@ -21,5 +21,5 @@
       "message": "chore: [skip ci] bump packages"
     }
   },
-  "version": "1.7.0"
+  "version": "1.8.1"
 }
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "lint": "eslint '**/*.ts?(x)' --fix",
     "format:check": "prettier --check '**/*.{ts,tsx}'",
     "format": "prettier --write '**/*.{ts,tsx,js,jsx}'",
-    "test": "TEST_ENV=true jest sandpack-react sandpack-client",
+    "test": "TEST_ENV=true jest sandpack-react sandpack-client --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "build": "yarn workspace @codesandbox/sandpack-client build && yarn workspace @codesandbox/sandpack-react build && yarn workspace @codesandbox/sandpack-themes build",

diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md
@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.8.1](https://github.com/codesandbox/sandpack/compare/v1.8.0...v1.8.1) (2022-09-26)
+
+
+### Bug Fixes
+
+* **file-explorer:** trim and avoid shrinks the icon on long file names ([#578](https://github.com/codesandbox/sandpack/issues/578)) ([bc12d03](https://github.com/codesandbox/sandpack/commit/bc12d0347743065a68f4af6ac65719e9c0dbf954))
+
+
+
+
+
+# [1.8.0](https://github.com/codesandbox/sandpack/compare/v1.7.2...v1.8.0) (2022-09-15)
+
+
+### Features
+
+* **codeeditor:** support additional, user-supplied language modes ([#570](https://github.com/codesandbox/sandpack/issues/570)) ([a746ae3](https://github.com/codesandbox/sandpack/commit/a746ae3ae700bf3b64b8e14e5caee3cb57dd307d))
+
+
+
+
+
+## [1.7.2](https://github.com/codesandbox/sandpack/compare/v1.7.1...v1.7.2) (2022-09-01)
+
+
+### Bug Fixes
+
+* **sandpack preset:** fix columns size ([#566](https://github.com/codesandbox/sandpack/issues/566)) ([cad7273](https://github.com/codesandbox/sandpack/commit/cad72736e86cdff689e963fc0b535b262f99bae3))
+
+
+
+
+
+## [1.7.1](https://github.com/codesandbox/sandpack/compare/v1.7.0...v1.7.1) (2022-08-31)
+
+
+### Bug Fixes
+
+* **console-wrapper:** refactor toggle animation and reset padding on the editor ([#565](https://github.com/codesandbox/sandpack/issues/565)) ([6e730c6](https://github.com/codesandbox/sandpack/commit/6e730c6bb462e225daea1dcea58c56c3fd17bcd3))
+
+
+
+
+
 # [1.7.0](https://github.com/codesandbox/sandpack/compare/v1.6.0...v1.7.0) (2022-08-31)
 
 

diff --git a/sandpack-react/package.json b/sandpack-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/sandpack-react",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "",
   "keywords": [],
   "repository": {
@@ -60,6 +60,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
+    "@codemirror/lang-python": "^0.19.5",
+    "@codemirror/legacy-modes": "^0.19.1",
+    "@codemirror/stream-parser": "^0.19.9",
     "@codesandbox/sandpack-themes": "^1.6.0",
     "@storybook/addon-actions": "^6.1.9",
     "@storybook/addon-essentials": "^6.1.9",

diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx
@@ -3,6 +3,7 @@ import * as themes from "@codesandbox/sandpack-themes";
 import { useState } from "react";
 
 import type { CodeEditorProps } from "./components/CodeEditor";
+import { Sandpack } from "./presets";
 import { SANDBOX_TEMPLATES } from "./templates";
 
 import {
@@ -39,6 +40,8 @@ export const Main = (): JSX.Element => {
       showNavigator: true,
       showRefreshButton: true,
       consoleShowHeader: true,
+      showConsoleButton: true,
+      showConsole: true,
     },
     Template: "exhaustedFilesTests" as const,
     Theme: "light",
@@ -139,43 +142,70 @@ export const Main = (): JSX.Element => {
         })}
       </div>
 
-      <SandpackProvider
-        customSetup={{
-          dependencies:
+      <div>
+        <SandpackProvider
+          customSetup={{
+            dependencies:
+              config.Template === "exhaustedFilesTests"
+                ? exhaustedFilesTests.dependencies
+                : {},
+          }}
+          files={
             config.Template === "exhaustedFilesTests"
-              ? exhaustedFilesTests.dependencies
-              : {},
-        }}
-        files={
-          config.Template === "exhaustedFilesTests"
-            ? exhaustedFilesTests.files
-            : {}
-        }
-        template={
-          config.Template === "exhaustedFilesTests" ? null : config.Template
-        }
-        theme={themes[config.Theme] || config.Theme}
-      >
-        <SandpackLayout>
-          <div className="playground-grid">
-            {config.Components.FileExplorer && <SandpackFileExplorer />}
-            {config.Components.Editor && (
-              <SandpackCodeEditor {...codeEditorOptions} />
-            )}
-            {config.Components.Preview && (
-              <SandpackPreview
-                showNavigator={config.Options?.showNavigator}
-                showRefreshButton={config.Options?.showRefreshButton}
-              />
-            )}
-
-            {config.Components.Console && (
-              <SandpackConsole showHeader={config.Options.consoleShowHeader} />
-            )}
-            {config.Components.Tests && <SandpackTests />}
-          </div>
-        </SandpackLayout>
-      </SandpackProvider>
+              ? exhaustedFilesTests.files
+              : {}
+          }
+          template={
+            config.Template === "exhaustedFilesTests" ? null : config.Template
+          }
+          theme={themes[config.Theme] || config.Theme}
+        >
+          <SandpackLayout>
+            <div className="playground-grid">
+              {config.Components.FileExplorer && <SandpackFileExplorer />}
+              {config.Components.Editor && (
+                <SandpackCodeEditor {...codeEditorOptions} />
+              )}
+              {config.Components.Preview && (
+                <SandpackPreview
+                  showNavigator={config.Options?.showNavigator}
+                  showRefreshButton={config.Options?.showRefreshButton}
+                />
+              )}
+
+              {config.Components.Console && (
+                <SandpackConsole
+                  showHeader={config.Options.consoleShowHeader}
+                />
+              )}
+              {config.Components.Tests && <SandpackTests />}
+            </div>
+          </SandpackLayout>
+        </SandpackProvider>
+
+        <br />
+
+        <Sandpack
+          customSetup={{
+            dependencies:
+              config.Template === "exhaustedFilesTests"
+                ? exhaustedFilesTests.dependencies
+                : {},
+          }}
+          files={
+            config.Template === "exhaustedFilesTests"
+              ? exhaustedFilesTests.files
+              : {}
+          }
+          options={{
+            ...config.Options,
+          }}
+          template={
+            config.Template === "exhaustedFilesTests" ? null : config.Template
+          }
+          theme={themes[config.Theme] || config.Theme}
+        />
+      </div>
     </div>
   );
 };

diff --git a/sandpack-react/src/common/Stack.tsx b/sandpack-react/src/common/Stack.tsx
@@ -13,7 +13,7 @@ export const stackClassName = css({
   width: "100%",
   position: "relative",
   backgroundColor: "$colors$surface1",
-  transition: "height $transitions$default",
+  transition: "flex $transitions$default",
   gap: 1, // border between components
 
   [`&:has(.${THEME_PREFIX}-stack)`]: {

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
@@ -1,3 +1,7 @@
+import { python } from "@codemirror/lang-python";
+import { LanguageSupport } from "@codemirror/language";
+import { shell } from "@codemirror/legacy-modes/mode/shell";
+import { StreamLanguage } from "@codemirror/stream-parser";
 import * as React from "react";
 
 import { SandpackProvider } from "../../contexts/sandpackContext";
@@ -95,6 +99,44 @@ export const Markdown: React.FC = () => (
   </SandpackProvider>
 );
 
+export const CustomLanguageShell: React.FC = () => (
+  <SandpackProvider>
+    <CodeEditor
+      additionalLanguages={[
+        {
+          name: "shell",
+          extensions: ["sh"],
+          language: new LanguageSupport(StreamLanguage.define(shell)),
+        },
+      ]}
+      code={mocks.shell}
+      filePath="example.sh"
+      id="shell"
+      initMode="immediate"
+      showLineNumbers={false}
+    />
+  </SandpackProvider>
+);
+
+export const CustomLanguagePython: React.FC = () => (
+  <SandpackProvider>
+    <CodeEditor
+      additionalLanguages={[
+        {
+          name: "python",
+          extensions: ["py"],
+          language: python(),
+        },
+      ]}
+      code={mocks.python}
+      fileType="python"
+      id="python"
+      initMode="immediate"
+      showLineNumbers={false}
+    />
+  </SandpackProvider>
+);
+
 export const ShowLineNumber: React.FC = () => (
   <SandpackProvider>
     <CodeEditor

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -29,6 +29,7 @@ import { useSandpack } from "../../hooks/useSandpack";
 import { useSandpackTheme } from "../../hooks/useSandpackTheme";
 import { THEME_PREFIX } from "../../styles";
 import type {
+  CustomLanguage,
   EditorState as SandpackEditorState,
   SandpackInitMode,
 } from "../../types";
@@ -65,17 +66,7 @@ export type Decorators = Array<{
 interface CodeMirrorProps {
   code: string;
   filePath?: string;
-  fileType?:
-    | "js"
-    | "jsx"
-    | "ts"
-    | "tsx"
-    | "css"
-    | "scss"
-    | "less"
-    | "html"
-    | "vue"
-    | "markdown";
+  fileType?: string;
   onCodeUpdate?: (newCode: string) => void;
   showLineNumbers?: boolean;
   showInlineErrors?: boolean;
@@ -102,6 +93,12 @@ interface CodeMirrorProps {
   id?: string;
   extensions?: Extension[];
   extensionsKeymap?: KeyBinding[];
+  /**
+   * Provides a way to add custom language modes by supplying a language
+   * type, applicable file extensions, and a LanguageSupport instance
+   * for that syntax mode
+   */
+  additionalLanguages?: CustomLanguage[];
 }
 
 export interface CodeMirrorRef {
@@ -129,6 +126,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       id,
       extensions = [],
       extensionsKeymap = [],
+      additionalLanguages = [],
     },
     ref
   ) => {
@@ -167,8 +165,15 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       }
     }, [initMode, isIntersecting]);
 
-    const languageExtension = getLanguageFromFile(filePath, fileType);
-    const langSupport = getCodeMirrorLanguage(languageExtension);
+    const languageExtension = getLanguageFromFile(
+      filePath,
+      fileType,
+      additionalLanguages
+    );
+    const langSupport = getCodeMirrorLanguage(
+      languageExtension,
+      additionalLanguages
+    );
     const highlightTheme = getSyntaxHighlight(theme);
 
     const syntaxHighlightRender = useSyntaxHighlight({