From 6e730c6bb462e225daea1dcea58c56c3fd17bcd3 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Wed, 31 Aug 2022 16:42:21 +0100 Subject: [PATCH 01/15] fix(console-wrapper): refactor toggle animation and reset padding on the editor (#565) --- .codesandbox/tasks.json | 4 ++ sandpack-react/src/common/Stack.tsx | 2 +- .../components/Console/SandpackConsole.tsx | 4 ++ .../src/presets/Sandpack.stories.tsx | 8 +++- sandpack-react/src/presets/Sandpack.tsx | 37 +++---------------- 5 files changed, 21 insertions(+), 34 deletions(-) diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json index b91a9d0dd..d6c044896 100644 --- a/.codesandbox/tasks.json +++ b/.codesandbox/tasks.json @@ -68,6 +68,10 @@ "name": "Website theme", "command": "yarn dev:theme", "runAtStart": false + }, + "yarn install": { + "name": "yarn install", + "command": "yarn install" } } } diff --git a/sandpack-react/src/common/Stack.tsx b/sandpack-react/src/common/Stack.tsx index 8cbc7c098..ca5bb0be8 100644 --- 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/Console/SandpackConsole.tsx b/sandpack-react/src/components/Console/SandpackConsole.tsx index 9e134e85f..1699b6ac2 100644 --- a/sandpack-react/src/components/Console/SandpackConsole.tsx +++ b/sandpack-react/src/components/Console/SandpackConsole.tsx @@ -136,6 +136,10 @@ const consoleItemClassName = css({ /** * Editor reset */ + ".sp-cm": { + padding: 0, + }, + ".cm-editor": { background: "none", }, diff --git a/sandpack-react/src/presets/Sandpack.stories.tsx b/sandpack-react/src/presets/Sandpack.stories.tsx index 654912e04..4ec9f007d 100644 --- a/sandpack-react/src/presets/Sandpack.stories.tsx +++ b/sandpack-react/src/presets/Sandpack.stories.tsx @@ -277,8 +277,12 @@ export const ShowConsoleButton: React.FC = () => ( console.log(function helloWord() {}) `, }} - options={{ showConsoleButton: true, showConsole: true }} - template="test-ts" + options={{ + showConsoleButton: true, + showConsole: true, + // editorHeight: 350, + }} + template="react" /> ); diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx index 567705579..eaac1ca1c 100644 --- a/sandpack-react/src/presets/Sandpack.tsx +++ b/sandpack-react/src/presets/Sandpack.tsx @@ -90,13 +90,10 @@ export const Sandpack: SandpackInternal = (props) => { flexShrink: previewPart, minWidth: 700 * (previewPart / (previewPart + editorPart)), gap: consoleVisibility ? 1 : 0, + height: props.options?.editorHeight, // use the original editor height + flex: 1, }; - const rightColumnItemHeight = getPreviewHeight( - consoleVisibility, - props.options?.editorHeight - ); - /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ const templateFiles = SANDBOX_TEMPLATES[props.template!] ?? {}; const mode = "mode" in templateFiles ? templateFiles.mode : "preview"; @@ -134,19 +131,13 @@ export const Sandpack: SandpackInternal = (props) => { actionsChildren={actionsChildren} showNavigator={props.options?.showNavigator} showRefreshButton={props.options?.showRefreshButton} - style={{ - ...rightColumnStyle, - height: rightColumnItemHeight(consoleVisibility ? 1.5 : 1), - }} + style={rightColumnStyle} /> )} {mode === "tests" && ( )} @@ -154,7 +145,7 @@ export const Sandpack: SandpackInternal = (props) => {
- (ratio = 2): string | number | undefined => { - if (showConsoleButton) { - const height = - typeof editorHeight === "number" ? `${editorHeight}px` : editorHeight; - - return `calc(${height} / ${ratio})`; - } - - return editorHeight; - }; - const buttonCounter = css({ position: "relative", @@ -224,7 +199,7 @@ const buttonCounter = css({ }); const consoleWrapper = css({ - transition: "height $transitions$default", + transition: "flex $transitions$default", width: "100%", overflow: "hidden", }); From fe97392cf1505ea9b098842dfad97ba6a7537782 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Wed, 31 Aug 2022 15:54:06 +0000 Subject: [PATCH 02/15] chore: [skip ci] bump packages --- CHANGELOG.md | 11 +++++++++++ lerna.json | 2 +- sandpack-react/CHANGELOG.md | 11 +++++++++++ sandpack-react/package.json | 2 +- 4 files changed, 24 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a133a7cf2..19d47d124 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [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 index 75b6aff62..04d1901a9 100644 --- a/lerna.json +++ b/lerna.json @@ -21,5 +21,5 @@ "message": "chore: [skip ci] bump packages" } }, - "version": "1.7.0" + "version": "1.7.1" } diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md index ef1f12f67..9188582f5 100644 --- a/sandpack-react/CHANGELOG.md +++ b/sandpack-react/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [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 index 0f2d6a969..7b667091f 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-react", - "version": "1.7.0", + "version": "1.7.1", "description": "", "keywords": [], "repository": { From 1667f7680bab74dd34d2ea87f24be3b552e559a9 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Wed, 31 Aug 2022 15:55:01 +0000 Subject: [PATCH 03/15] chore: [skip ci] update sizebot --- scripts/sizebot/sizebot.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/sizebot/sizebot.json b/scripts/sizebot/sizebot.json index 1f420c431..aeb7009fa 100644 --- a/scripts/sizebot/sizebot.json +++ b/scripts/sizebot/sizebot.json @@ -1 +1 @@ -{"sandpack-react":{"gzip":181046,"assets":[{"name":"0","size":535016},{"name":"main","size":541100},{"name":"@codesandbox/sandpack-react","size":73870},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7240,"assets":[{"name":"main","size":20682},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file +{"sandpack-react":{"gzip":185003,"assets":[{"name":"0","size":535016},{"name":"main","size":556334},{"name":"@codesandbox/sandpack-react","size":87820},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"clean-set","size":229},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7240,"assets":[{"name":"main","size":20682},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file From cad72736e86cdff689e963fc0b535b262f99bae3 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 1 Sep 2022 10:24:32 +0100 Subject: [PATCH 04/15] fix(sandpack preset): fix columns size (#566) --- sandpack-react/src/Playground.stories.tsx | 102 ++++++++++++++-------- sandpack-react/src/presets/Sandpack.tsx | 26 ++++-- 2 files changed, 83 insertions(+), 45 deletions(-) diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx index a8f969d41..308b85e98 100644 --- 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 => { })}
- + - -
- {config.Components.FileExplorer && } - {config.Components.Editor && ( - - )} - {config.Components.Preview && ( - - )} - - {config.Components.Console && ( - - )} - {config.Components.Tests && } -
- - + ? exhaustedFilesTests.files + : {} + } + template={ + config.Template === "exhaustedFilesTests" ? null : config.Template + } + theme={themes[config.Theme] || config.Theme} + > + +
+ {config.Components.FileExplorer && } + {config.Components.Editor && ( + + )} + {config.Components.Preview && ( + + )} + + {config.Components.Console && ( + + )} + {config.Components.Tests && } +
+ + + +
+ + + ); }; diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx index eaac1ca1c..d1819ab08 100644 --- a/sandpack-react/src/presets/Sandpack.tsx +++ b/sandpack-react/src/presets/Sandpack.tsx @@ -1,5 +1,4 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ -import type { CSSProperties } from "@stitches/core"; import * as React from "react"; import { SANDBOX_TEMPLATES, SandpackStack } from ".."; @@ -11,7 +10,7 @@ import { SandpackPreview } from "../components/Preview"; import { SandpackTests } from "../components/Tests"; import { SandpackProvider } from "../contexts/sandpackContext"; import { ConsoleIcon } from "../icons"; -import { css, THEME_PREFIX } from "../styles"; +import { css } from "../styles"; import { buttonClassName, iconStandaloneClassName, @@ -80,18 +79,17 @@ export const Sandpack: SandpackInternal = (props) => { const editorPart = props.options?.editorWidthPercentage || 50; const previewPart = 100 - editorPart; - const RightColumn = - props.options?.showConsole || props.options?.showConsoleButton - ? SandpackStack - : React.Fragment; + const hasRightColumn = + props.options?.showConsole || props.options?.showConsoleButton; + const RightColumn = hasRightColumn ? SandpackStack : React.Fragment; const rightColumnStyle = { flexGrow: previewPart, flexShrink: previewPart, + flexBasis: 0, minWidth: 700 * (previewPart / (previewPart + editorPart)), gap: consoleVisibility ? 1 : 0, height: props.options?.editorHeight, // use the original editor height - flex: 1, }; /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ @@ -105,6 +103,10 @@ export const Sandpack: SandpackInternal = (props) => { /> ) : undefined; + React.useEffect(() => { + setConsoleVisibility(props.options?.showConsole ?? false); + }, [props.options?.showConsole]); + return ( { actionsChildren={actionsChildren} showNavigator={props.options?.showNavigator} showRefreshButton={props.options?.showRefreshButton} - style={rightColumnStyle} + style={{ + ...rightColumnStyle, + flex: hasRightColumn ? 1 : rightColumnStyle.flexGrow, + }} /> )} {mode === "tests" && ( )} From 60bcc7cda876d40053620cbe1ef271e419917221 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Thu, 1 Sep 2022 09:36:06 +0000 Subject: [PATCH 05/15] chore: [skip ci] bump packages --- CHANGELOG.md | 11 +++++++++++ lerna.json | 2 +- sandpack-react/CHANGELOG.md | 11 +++++++++++ sandpack-react/package.json | 2 +- 4 files changed, 24 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19d47d124..ee5d7ea59 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [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) diff --git a/lerna.json b/lerna.json index 04d1901a9..f08c7e9c8 100644 --- a/lerna.json +++ b/lerna.json @@ -21,5 +21,5 @@ "message": "chore: [skip ci] bump packages" } }, - "version": "1.7.1" + "version": "1.7.2" } diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md index 9188582f5..569f03581 100644 --- a/sandpack-react/CHANGELOG.md +++ b/sandpack-react/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [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) diff --git a/sandpack-react/package.json b/sandpack-react/package.json index 7b667091f..9617ae88c 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-react", - "version": "1.7.1", + "version": "1.7.2", "description": "", "keywords": [], "repository": { From 2e4c03a67e27f2089b941434a319b0b6b394c118 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Thu, 1 Sep 2022 09:36:59 +0000 Subject: [PATCH 06/15] chore: [skip ci] update sizebot --- scripts/sizebot/sizebot.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/sizebot/sizebot.json b/scripts/sizebot/sizebot.json index aeb7009fa..67f890907 100644 --- a/scripts/sizebot/sizebot.json +++ b/scripts/sizebot/sizebot.json @@ -1 +1 @@ -{"sandpack-react":{"gzip":185003,"assets":[{"name":"0","size":535016},{"name":"main","size":556334},{"name":"@codesandbox/sandpack-react","size":87820},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"clean-set","size":229},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7240,"assets":[{"name":"main","size":20682},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file +{"sandpack-react":{"gzip":185056,"assets":[{"name":"0","size":535016},{"name":"main","size":556538},{"name":"@codesandbox/sandpack-react","size":88029},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"clean-set","size":229},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7240,"assets":[{"name":"main","size":20682},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file From 25efc62d99e5245e07f1bb9b51c90bbc2cfd2c9b Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Sat, 10 Sep 2022 19:45:30 +0200 Subject: [PATCH 07/15] fix(docs): redirect double dash url --- website/docs/vercel.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/website/docs/vercel.json b/website/docs/vercel.json index 24f3c9dfe..87af125b4 100644 --- a/website/docs/vercel.json +++ b/website/docs/vercel.json @@ -1,4 +1,7 @@ { "github": { "silent": true, "enabled": false }, - "redirects": [{ "source": "/docs", "destination": "/docs/" }] + "redirects": [ + { "source": "/docs", "destination": "/docs/" }, + { "source": "//docs", "destination": "/docs/" } + ] } From a746ae3ae700bf3b64b8e14e5caee3cb57dd307d Mon Sep 17 00:00:00 2001 From: Jody Heavener Date: Thu, 15 Sep 2022 16:03:57 -0300 Subject: [PATCH 08/15] feat(codeeditor): support additional, user-supplied language modes (#570) Co-authored-by: Danilo Woznica --- package.json | 2 +- sandpack-react/package.json | 3 + .../CodeEditor/CodeMirror.stories.tsx | 42 ++++++ .../src/components/CodeEditor/CodeMirror.tsx | 31 ++-- .../useSyntaxHighlight.test.tsx.snap | 139 ++++++++++++++++++ .../src/components/CodeEditor/index.tsx | 10 +- .../components/CodeEditor/languages-mocks.ts | 16 ++ .../CodeEditor/useSyntaxHighlight.test.tsx | 27 +++- .../src/components/CodeEditor/utils.ts | 31 +++- .../src/presets/Sandpack.stories.tsx | 44 ++++++ sandpack-react/src/presets/Sandpack.tsx | 1 + sandpack-react/src/types.ts | 16 ++ snapshots.js | 2 - .../docs/docs/advanced-usage/components.md | 66 +++++++++ yarn.lock | 35 +++++ 15 files changed, 439 insertions(+), 26 deletions(-) delete mode 100644 snapshots.js diff --git a/package.json b/package.json index 03bc60322..7813d221a 100644 --- 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/package.json b/sandpack-react/package.json index 9617ae88c..154286bac 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -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/components/CodeEditor/CodeMirror.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx index 466acb51a..649467563 100644 --- 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 = () => ( ); +export const CustomLanguageShell: React.FC = () => ( + + + +); + +export const CustomLanguagePython: React.FC = () => ( + + + +); + export const ShowLineNumber: React.FC = () => ( 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( id, extensions = [], extensionsKeymap = [], + additionalLanguages = [], }, ref ) => { @@ -167,8 +165,15 @@ export const CodeMirror = React.forwardRef( } }, [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({ diff --git a/sandpack-react/src/components/CodeEditor/__snapshots__/useSyntaxHighlight.test.tsx.snap b/sandpack-react/src/components/CodeEditor/__snapshots__/useSyntaxHighlight.test.tsx.snap index 19b6d3b26..6d626ea7b 100644 --- a/sandpack-react/src/components/CodeEditor/__snapshots__/useSyntaxHighlight.test.tsx.snap +++ b/sandpack-react/src/components/CodeEditor/__snapshots__/useSyntaxHighlight.test.tsx.snap @@ -1456,6 +1456,145 @@ Array [ exports[`useSyntaxHighlight renders a markdown block 1`] = `null`; +exports[`useSyntaxHighlight renders a python block 1`] = ` +Array [ + + import + , + " ", + + os + , + " + +", + + api_token + , + " = ", + + os + , + ".", + + environ + , + + [ + , + + 'API_TOKEN' + , + + ] + , + " + +", + + # Prints the api_token variable + , + " +", + + print + , + + ( + , + + "API token:" + , + + , + , + " ", + + api_token + , + + ) + , +] +`; + +exports[`useSyntaxHighlight renders a shell block 1`] = ` +Array [ + "#!/bin/sh + +", + + EXAMPLE + , + "=", + + "drawn joyed" + , + " + +", + + # Prints the EXAMPLE variable + , + " +", + + function + , + " show-example() { + ", + + echo + , + " ", + + $EXAMPLE + , +] +`; + exports[`useSyntaxHighlight renders a vue block 1`] = ` Array [ { @@ -111,6 +118,7 @@ export const SandpackCodeEditor = React.forwardRef< { Object.entries(mocks).forEach(([fileType, code]) => { it(`renders a ${fileType} block`, () => { - const languageExtension = getLanguageFromFile("", fileType); - const langSupport = getCodeMirrorLanguage(languageExtension); + const languageExtension = getLanguageFromFile( + "", + fileType, + additionalLanguages + ); + const langSupport = getCodeMirrorLanguage( + languageExtension, + additionalLanguages + ); const reactElements = useSyntaxHighlight({ code, diff --git a/sandpack-react/src/components/CodeEditor/utils.ts b/sandpack-react/src/components/CodeEditor/utils.ts index b178756f3..ba23d3927 100644 --- a/sandpack-react/src/components/CodeEditor/utils.ts +++ b/sandpack-react/src/components/CodeEditor/utils.ts @@ -10,7 +10,7 @@ import { EditorView } from "@codemirror/view"; import * as React from "react"; import { THEME_PREFIX } from "../../styles"; -import type { SandpackTheme } from "../../types"; +import type { CustomLanguage, SandpackTheme } from "../../types"; export const getCodeMirrorPosition = ( doc: Text, @@ -160,9 +160,10 @@ type SandpackLanguageSupport = | "markdown"; export const getLanguageFromFile = ( - filePath?: string, - fileType?: string -): SandpackLanguageSupport => { + filePath: string | undefined, + fileType: string | undefined, + additionalLanguages: CustomLanguage[] +): string => { if (!filePath && !fileType) return "markdown"; let extension = fileType; @@ -171,6 +172,15 @@ export const getLanguageFromFile = ( extension = filePath.slice(extensionDotIndex + 1); } + for (const additionalLanguage of additionalLanguages) { + if ( + extension === additionalLanguage.name || + additionalLanguage.extensions.includes(extension || "") + ) { + return additionalLanguage.name; + } + } + switch (extension) { case "js": case "jsx": @@ -188,14 +198,15 @@ export const getLanguageFromFile = ( case "scss": return "css"; case "md": - return "markdown"; + case "markdown": default: return "markdown"; } }; export const getCodeMirrorLanguage = ( - extension: SandpackLanguageSupport + extension: string, + additionalLanguages: CustomLanguage[] ): LanguageSupport => { const options: Record = { javascript: javascript({ jsx: true, typescript: false }), @@ -205,7 +216,13 @@ export const getCodeMirrorLanguage = ( markdown: markdown(), }; - return options[extension]; + for (const additionalLanguage of additionalLanguages) { + if (extension === additionalLanguage.name) { + return additionalLanguage.language; + } + } + + return options[extension as keyof typeof options]; }; // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/sandpack-react/src/presets/Sandpack.stories.tsx b/sandpack-react/src/presets/Sandpack.stories.tsx index 4ec9f007d..6e6c63da9 100644 --- a/sandpack-react/src/presets/Sandpack.stories.tsx +++ b/sandpack-react/src/presets/Sandpack.stories.tsx @@ -1,3 +1,6 @@ +import { LanguageSupport } from "@codemirror/language"; +import { shell } from "@codemirror/legacy-modes/mode/shell"; +import { StreamLanguage } from "@codemirror/stream-parser"; import React from "react"; import { Sandpack } from "../"; @@ -286,3 +289,44 @@ export const ShowConsoleButton: React.FC = () => ( /> ); + +export const CustomLanguages: React.FC = () => ( + +); diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx index d1819ab08..26c788ea8 100644 --- a/sandpack-react/src/presets/Sandpack.tsx +++ b/sandpack-react/src/presets/Sandpack.tsx @@ -41,6 +41,7 @@ export const Sandpack: SandpackInternal = (props) => { readOnly: props.options?.readOnly, showReadOnly: props.options?.showReadOnly, id: props.options?.id, + additionalLanguages: props.options?.codeEditor?.additionalLanguages, }; const providerOptions: SandpackInternalOptions< diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts index e63aa1e03..ec012081a 100644 --- a/sandpack-react/src/types.ts +++ b/sandpack-react/src/types.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import type { LanguageSupport } from "@codemirror/language"; import type { BundlerState, ListenerFunction, @@ -270,6 +271,15 @@ export interface SandpackFile { */ export type SandpackInitMode = "immediate" | "lazy" | "user-visible"; +/** + * @category Setup + */ +export interface CustomLanguage { + name: string; + extensions: string[]; + language: LanguageSupport; +} + /** * @category Theme */ @@ -625,6 +635,12 @@ export interface SandpackCodeOptions { * Property to register CodeMirror extension keymap. */ extensionsKeymap?: CodeEditorProps["extensionsKeymap"]; + /** + * 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?: CodeEditorProps["additionalLanguages"]; } /** diff --git a/snapshots.js b/snapshots.js deleted file mode 100644 index 2c63c0851..000000000 --- a/snapshots.js +++ /dev/null @@ -1,2 +0,0 @@ -{ -} diff --git a/website/docs/docs/advanced-usage/components.md b/website/docs/docs/advanced-usage/components.md index 2ac17b631..b43903115 100644 --- a/website/docs/docs/advanced-usage/components.md +++ b/website/docs/docs/advanced-usage/components.md @@ -256,6 +256,72 @@ import { autocompletion, completionKeymap } from "@codemirror/autocomplete"; /> ``` +### Additional languages + +Sandpack provides built-in support for a variety of common languages: + +- JavaScript, JSX +- TypeScript, TSX +- CSS, SCSS, Less +- HTML +- Vue +- Markdown + +When an appropriate language can't be detected Markdown is used. + +If you want to support additional languages you can extend the editor by supplying a [CodeMirror language](https://github.com/orgs/codemirror/repositories?q=language&type=source) and associating it with one or more file extensions. + +```jsx +import { python } from "@codemirror/lang-python"; + + + + + + +``` + +When using a [stream language mode](https://www.npmjs.com/package/@codemirror/legacy-modes) you'll need to convert it into a `LanguageSupport` instance. + +```jsx +import { LanguageSupport } from "@codemirror/language"; +import { StreamLanguage } from "@codemirror/stream-parser"; +import { shell } from "@codemirror/legacy-modes/mode/shell"; + + + + +``` + ### Advanced usage If you want to interact directly with CodeMirror, use the component ref to access the `getCodemirror` function, which will return the CodeMirror instance. Check out how to use it: diff --git a/yarn.lock b/yarn.lock index ecebd34f7..77d39f5be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1458,6 +1458,15 @@ "@lezer/common" "^0.15.0" "@lezer/markdown" "^0.15.0" +"@codemirror/lang-python@^0.19.5": + version "0.19.5" + resolved "https://registry.yarnpkg.com/@codemirror/lang-python/-/lang-python-0.19.5.tgz#52ad893c45d9a20fdd9841ebfe1d6de52e1dead1" + integrity sha512-MQf7t0k6+i9KCzlFCI8EY+jjwyXLy5AwjmXsMyMCMbOw/97j70jFZYrs7Mm7RJakNE2rypWhnLGlyBTSYMqR5g== + dependencies: + "@codemirror/highlight" "^0.19.7" + "@codemirror/language" "^0.19.0" + "@lezer/python" "^0.15.0" + "@codemirror/language@^0.19.0", "@codemirror/language@^0.19.7": version "0.19.10" resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.10.tgz#c3d1330fa5de778c6b6b5177af5572a3d9d596b5" @@ -1469,6 +1478,13 @@ "@lezer/common" "^0.15.5" "@lezer/lr" "^0.15.0" +"@codemirror/legacy-modes@^0.19.1": + version "0.19.1" + resolved "https://registry.yarnpkg.com/@codemirror/legacy-modes/-/legacy-modes-0.19.1.tgz#7dc3b5df1842060648f75764ab6919fcfce3ea1a" + integrity sha512-vYPLsD/ON+3SXhlGj9Qb3fpFNNU3Ya/AtDiv/g3OyqVzhh5vs5rAnOvk8xopGWRwppdhlNPD9VyXjiOmZUQtmQ== + dependencies: + "@codemirror/stream-parser" "^0.19.0" + "@codemirror/lint@^0.19.0": version "0.19.6" resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-0.19.6.tgz#0379688da3e16739db4a6304c73db857ca85d7ec" @@ -1514,6 +1530,18 @@ dependencies: "@codemirror/text" "^0.19.0" +"@codemirror/stream-parser@^0.19.0", "@codemirror/stream-parser@^0.19.9": + version "0.19.9" + resolved "https://registry.yarnpkg.com/@codemirror/stream-parser/-/stream-parser-0.19.9.tgz#34955ea91a8047cf72abebd5ce28f0d332aeca48" + integrity sha512-WTmkEFSRCetpk8xIOvV2yyXdZs3DgYckM0IP7eFi4ewlxWnJO/H4BeJZLs4wQaydWsAqTQoDyIwNH1BCzK5LUQ== + dependencies: + "@codemirror/highlight" "^0.19.0" + "@codemirror/language" "^0.19.0" + "@codemirror/state" "^0.19.0" + "@codemirror/text" "^0.19.0" + "@lezer/common" "^0.15.0" + "@lezer/lr" "^0.15.0" + "@codemirror/text@^0.19.0", "@codemirror/text@^0.19.2", "@codemirror/text@^0.19.6": version "0.19.6" resolved "https://registry.yarnpkg.com/@codemirror/text/-/text-0.19.6.tgz#9adcbd8137f69b75518eacd30ddb16fd67bbac45" @@ -4033,6 +4061,13 @@ dependencies: "@lezer/common" "^0.15.0" +"@lezer/python@^0.15.0": + version "0.15.1" + resolved "https://registry.yarnpkg.com/@lezer/python/-/python-0.15.1.tgz#dce18dade29fd93b01c1f7fc5dee4135e947f07b" + integrity sha512-Xdb2nh+FoxR8ssEADGsroDtsnP+EDhiPpW9zhER3h+6cpGtZ2e9Oq/Rwn9nFQRiKCfMT+AQaqC3ZgAbhbnumyQ== + dependencies: + "@lezer/lr" "^0.15.0" + "@mdx-js/loader@^1.6.22": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4" From 3fbca18d1edeb270b95f8916f63ff098762bfde6 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Thu, 15 Sep 2022 19:17:14 +0000 Subject: [PATCH 09/15] chore: [skip ci] bump packages --- CHANGELOG.md | 16 ++++++++++++++++ lerna.json | 2 +- sandpack-react/CHANGELOG.md | 11 +++++++++++ sandpack-react/package.json | 2 +- 4 files changed, 29 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ee5d7ea59..01960d83e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [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) diff --git a/lerna.json b/lerna.json index f08c7e9c8..d75cdbad0 100644 --- a/lerna.json +++ b/lerna.json @@ -21,5 +21,5 @@ "message": "chore: [skip ci] bump packages" } }, - "version": "1.7.2" + "version": "1.8.0" } diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md index 569f03581..6bf2ca343 100644 --- a/sandpack-react/CHANGELOG.md +++ b/sandpack-react/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [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) diff --git a/sandpack-react/package.json b/sandpack-react/package.json index 154286bac..3db5089a7 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-react", - "version": "1.7.2", + "version": "1.8.0", "description": "", "keywords": [], "repository": { From 4d9186053270fd4396dfb73a1208984d26afe0da Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 15 Sep 2022 21:17:35 +0200 Subject: [PATCH 10/15] fix: website csb logo (#574) --- website/landing/components/Features/icons.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/landing/components/Features/icons.tsx b/website/landing/components/Features/icons.tsx index b753e9478..d826b6782 100644 --- a/website/landing/components/Features/icons.tsx +++ b/website/landing/components/Features/icons.tsx @@ -28,9 +28,9 @@ export const ICONS = { export: ( Date: Thu, 15 Sep 2022 19:30:51 +0000 Subject: [PATCH 11/15] chore: [skip ci] update sizebot --- scripts/sizebot/sizebot.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/sizebot/sizebot.json b/scripts/sizebot/sizebot.json index 67f890907..2106e2072 100644 --- a/scripts/sizebot/sizebot.json +++ b/scripts/sizebot/sizebot.json @@ -1 +1 @@ -{"sandpack-react":{"gzip":185056,"assets":[{"name":"0","size":535016},{"name":"main","size":556538},{"name":"@codesandbox/sandpack-react","size":88029},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"clean-set","size":229},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7240,"assets":[{"name":"main","size":20682},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file +{"sandpack-react":{"gzip":185174,"assets":[{"name":"0","size":535016},{"name":"main","size":556864},{"name":"@codesandbox/sandpack-react","size":88356},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"clean-set","size":229},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7240,"assets":[{"name":"main","size":20682},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file From bc12d0347743065a68f4af6ac65719e9c0dbf954 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Mon, 26 Sep 2022 22:54:26 +0300 Subject: [PATCH 12/15] fix(file-explorer): trim and avoid shrinks the icon on long file names (#578) --- sandpack-react/src/components/FileExplorer/File.tsx | 9 ++++++++- .../src/components/FileExplorer/FileExplorer.stories.tsx | 1 + sandpack-react/src/presets/Sandpack.test.tsx | 2 +- sandpack-react/src/styles/shared.ts | 1 + 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/sandpack-react/src/components/FileExplorer/File.tsx b/sandpack-react/src/components/FileExplorer/File.tsx index f8ab04247..29565dabc 100644 --- a/sandpack-react/src/components/FileExplorer/File.tsx +++ b/sandpack-react/src/components/FileExplorer/File.tsx @@ -12,6 +12,12 @@ const explorerClassName = css({ padding: 0, marginBottom: "$space$2", + span: { + textOverflow: "ellipsis", + whiteSpace: "nowrap", + overflow: "hidden", + }, + svg: { marginRight: "$space$1", }, @@ -61,10 +67,11 @@ export const File: React.FC = ({ data-active={active} onClick={onClickButton} style={{ paddingLeft: 18 * depth + "px" }} + title={fileName} type="button" > {getIcon()} - {fileName} + {fileName} ); }; diff --git a/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx b/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx index 8d581b6cd..07e421588 100644 --- a/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx +++ b/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx @@ -40,6 +40,7 @@ export const Component: React.FC = () => ( "/index.tsx": "", "/src/app.tsx": "", "/src/components/button.tsx": "", + "/src/components/really-loooooooong-naaameeee.tsx": "", }} theme="dark" > diff --git a/sandpack-react/src/presets/Sandpack.test.tsx b/sandpack-react/src/presets/Sandpack.test.tsx index e075dac15..7ee03e575 100644 --- a/sandpack-react/src/presets/Sandpack.test.tsx +++ b/sandpack-react/src/presets/Sandpack.test.tsx @@ -33,7 +33,7 @@ describe("getSandpackCssText", () => { ); - expect(getSandpackCssText().length).toBe(4315); + expect(getSandpackCssText().length).toBe(4343); expect(getSandpackCssText()).not.toContain(componentClassName); }); diff --git a/sandpack-react/src/styles/shared.ts b/sandpack-react/src/styles/shared.ts index c58822c4a..6a99b42bd 100644 --- a/sandpack-react/src/styles/shared.ts +++ b/sandpack-react/src/styles/shared.ts @@ -24,6 +24,7 @@ export const buttonClassName = css({ '&[data-active="true"]': { color: "$colors$accent" }, svg: { + minWidth: "$space$4", width: "$space$4", height: "$space$4", }, From ffdca5d81793f4b4baf68bf5180e2d0b11a03144 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Mon, 26 Sep 2022 20:15:06 +0000 Subject: [PATCH 13/15] chore: [skip ci] bump packages --- CHANGELOG.md | 12 ++++++++++++ lerna.json | 2 +- sandpack-react/CHANGELOG.md | 11 +++++++++++ sandpack-react/package.json | 2 +- 4 files changed, 25 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 01960d83e..50d96d51a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,18 @@ 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) diff --git a/lerna.json b/lerna.json index d75cdbad0..e5cf948a7 100644 --- a/lerna.json +++ b/lerna.json @@ -21,5 +21,5 @@ "message": "chore: [skip ci] bump packages" } }, - "version": "1.8.0" + "version": "1.8.1" } diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md index 6bf2ca343..0d85c83e4 100644 --- a/sandpack-react/CHANGELOG.md +++ b/sandpack-react/CHANGELOG.md @@ -3,6 +3,17 @@ 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) diff --git a/sandpack-react/package.json b/sandpack-react/package.json index 3db5089a7..182c2da52 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-react", - "version": "1.8.0", + "version": "1.8.1", "description": "", "keywords": [], "repository": { From 4dfbda36860dbcff6a736667771851e550d58c35 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Mon, 26 Sep 2022 20:16:02 +0000 Subject: [PATCH 14/15] chore: [skip ci] update sizebot --- scripts/sizebot/sizebot.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/sizebot/sizebot.json b/scripts/sizebot/sizebot.json index 2106e2072..bb0858577 100644 --- a/scripts/sizebot/sizebot.json +++ b/scripts/sizebot/sizebot.json @@ -1 +1 @@ -{"sandpack-react":{"gzip":185174,"assets":[{"name":"0","size":535016},{"name":"main","size":556864},{"name":"@codesandbox/sandpack-react","size":88356},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"clean-set","size":229},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7240,"assets":[{"name":"main","size":20682},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file +{"sandpack-react":{"gzip":185206,"assets":[{"name":"0","size":535016},{"name":"main","size":556998},{"name":"@codesandbox/sandpack-react","size":88469},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"clean-set","size":229},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7240,"assets":[{"name":"main","size":20682},{"name":"@codesandbox/sandpack-client","size":8468},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file From 5abfdda9aa11c09a6c9d4d66a880d90cafc26a0b Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 27 Sep 2022 09:29:46 +0300 Subject: [PATCH 15/15] docs(community): typo (#580) --- website/docs/docs/community.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/docs/community.md b/website/docs/docs/community.md index 2486cf5bc..e73618863 100644 --- a/website/docs/docs/community.md +++ b/website/docs/docs/community.md @@ -109,7 +109,7 @@ Our goal is to keep our docs comprehensive and updated. If you would like to hel #### Themes -We're open to supporting new Sandpack themes because our key goal is empowering developers to include a custom live coding experiences over the web. That's why we provide plenty of options under `@codesandbox/sandpack-themes,` and we want even more options. So, how contribute to new thems? +We're open to supporting new Sandpack themes because our key goal is empowering developers to include custom live coding experiences over the web, regardless of your website layout or level of design expertise. That's why we provide plenty of options under `@codesandbox/sandpack-themes`, and we want to offer even more options. So, how can you contribute to new themes? 1. Create a new file in [codesandbox/sandpack/sandpack-themes/src](https://github.com/codesandbox/sandpack/tree/main/sandpack-themes/src) folder with following file `[theme name].ts` 2. The content of this file must be an export for an object that contains the theme: