From ca371fd6b66509aa063161dcf8b140a357d03d55 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Mon, 13 Jun 2022 14:28:38 +0000 Subject: [PATCH 1/3] 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 e32699087..8728eb0ac 100644 --- a/scripts/sizebot/sizebot.json +++ b/scripts/sizebot/sizebot.json @@ -1 +1 @@ -{"sandpack-react":{"gzip":164684,"assets":[{"name":"0","size":535016},{"name":"main","size":491424},{"name":"@codesandbox/sandpack-react","size":84583},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":11195},{"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/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1952},{"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/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":7223,"assets":[{"name":"main","size":20671},{"name":"@codesandbox/sandpack-client","size":11195},{"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":164682,"assets":[{"name":"0","size":535016},{"name":"main","size":491426},{"name":"@codesandbox/sandpack-react","size":85109},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":11195},{"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/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1952},{"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/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":7224,"assets":[{"name":"main","size":20671},{"name":"@codesandbox/sandpack-client","size":11195},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file From 1064bd0761148abe3fcdd58fcd6ca5a6c17fe72f Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 14 Jun 2022 09:19:32 +0100 Subject: [PATCH 2/3] fix(sandpack options): recreate sandpack context on `options` change and persist visible file in file-explorer (#498) --- .../FileExplorer/FileExplorer.stories.tsx | 111 ++++++++++++++++++ .../src/components/FileExplorer/index.tsx | 2 +- .../src/contexts/sandpackContext.tsx | 12 +- sandpack-react/src/types.ts | 11 ++ 4 files changed, 134 insertions(+), 2 deletions(-) diff --git a/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx b/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx index 867fc7302..8d581b6cd 100644 --- a/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx +++ b/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ import * as React from "react"; import { SandpackLayout } from "../../common/Layout"; @@ -91,3 +92,113 @@ export const DirectoryIconStory: React.FC = () => ( ); + +export const AutoHiddenFiles = (): JSX.Element => { + const [files, setFiles] = React.useState({ + "/index.js": { + code: "// index.js", + active: true, + }, + "/index2.js": { + code: "// index2.js", + }, + "/src/index.js": { + code: "// this file is generated by vanilla template, but it is not needed", + hidden: true, + }, + "/hidden.js": { + code: "// hidden.js", + hidden: true, + }, + }); + const [visibleFiles, setVisibleFiles] = React.useState([ + "/src/index.js", + "/hidden.js", + ]); + + const changeVisibleFiles = (): void => { + if (!visibleFiles.includes("/index2.js")) { + setVisibleFiles((prevVisibleFiles) => [ + ...prevVisibleFiles, + "/index2.js", + ]); + } + }; + + const changeFiles = (): void => { + if (!files["/test.js"]) { + setFiles((prevFiles) => ({ + ...prevFiles, + ...{ "/test.js": { code: "// test" } }, + })); + } else { + setFiles((prevFiles) => ({ + ...prevFiles, + ...{ + "/index.js": { + active: true, + code: `// ${String(Math.random() * 1000000)}`, + }, + }, + })); + } + }; + + return ( + <> + + + + + + + + + +
+
+
+ + + + + + + + + + ); +}; diff --git a/sandpack-react/src/components/FileExplorer/index.tsx b/sandpack-react/src/components/FileExplorer/index.tsx index 5e2a94d4e..3b3668783 100644 --- a/sandpack-react/src/components/FileExplorer/index.tsx +++ b/sandpack-react/src/components/FileExplorer/index.tsx @@ -41,7 +41,7 @@ export const SandpackFileExplorer = ({ files={sandpack.files} prefixedPath="/" selectFile={sandpack.openFile} - visibleFiles={sandpack.visibleFiles} + visibleFiles={sandpack.visibleFilesFromProps} /> ); diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx index ab7ff6f15..b17eebdcd 100644 --- a/sandpack-react/src/contexts/sandpackContext.tsx +++ b/sandpack-react/src/contexts/sandpackContext.tsx @@ -74,6 +74,7 @@ class SandpackProviderClass extends React.PureComponent< files, environment, visibleFiles, + visibleFilesFromProps: visibleFiles, activeFile, startRoute: this.props.options?.startRoute, bundlerState: undefined, @@ -276,11 +277,18 @@ class SandpackProviderClass extends React.PureComponent< */ if ( prevProps.template !== this.props.template || + prevProps.options !== this.props.options || !isEqual(prevProps.customSetup, this.props.customSetup) || !isEqual(prevProps.files, this.props.files) ) { /* eslint-disable react/no-did-update-set-state */ - this.setState({ activeFile, visibleFiles, files, environment }); + this.setState({ + activeFile, + visibleFiles, + visibleFilesFromProps: visibleFiles, + files, + environment, + }); if (this.state.sandpackStatus !== "running") { return; @@ -603,6 +611,7 @@ class SandpackProviderClass extends React.PureComponent< files, activeFile, visibleFiles, + visibleFilesFromProps, startRoute, bundlerState, editorState, @@ -616,6 +625,7 @@ class SandpackProviderClass extends React.PureComponent< files, environment, visibleFiles, + visibleFilesFromProps, activeFile, startRoute, error, diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts index e21a0bfb4..f82d7c0d6 100644 --- a/sandpack-react/src/types.ts +++ b/sandpack-react/src/types.ts @@ -497,6 +497,14 @@ export interface SandpackState { */ visibleFiles: string[]; + /** + * List the file path listed in the file tab, + * Can only be changed through the properties of SandpackProvider (files/options) + * + * @internal + */ + visibleFilesFromProps: string[]; + /** * Path to the file will be open in the code editor * when the component mounts @@ -618,6 +626,9 @@ export interface SandpackProviderState { files: SandpackBundlerFiles; environment?: SandboxEnvironment; visibleFiles: Array | string>; + visibleFilesFromProps: Array< + TemplateFiles | string + >; activeFile: TemplateFiles | string; startRoute?: string; initMode: SandpackInitMode; From ec7c9aee1d3f92d2a318d64e6977051cf01f30ef Mon Sep 17 00:00:00 2001 From: danilowoz Date: Tue, 14 Jun 2022 08:33:55 +0000 Subject: [PATCH 3/3] 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 93842a02b..d7a189701 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.1.5](https://github.com/codesandbox/sandpack/compare/v1.1.4...v1.1.5) (2022-06-14) + + +### Bug Fixes + +* **sandpack options:** recreate sandpack context on `options` change and persist visible file in file-explorer ([#498](https://github.com/codesandbox/sandpack/issues/498)) ([1064bd0](https://github.com/codesandbox/sandpack/commit/1064bd0761148abe3fcdd58fcd6ca5a6c17fe72f)) + + + + + ## [1.1.4](https://github.com/codesandbox/sandpack/compare/v1.1.3...v1.1.4) (2022-06-13) **Note:** Version bump only for package sandpack diff --git a/lerna.json b/lerna.json index c5af7f4f5..954f39b9f 100644 --- a/lerna.json +++ b/lerna.json @@ -21,5 +21,5 @@ "message": "chore: [skip ci] bump packages" } }, - "version": "1.1.4" + "version": "1.1.5" } diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md index 18152d8ef..7214969de 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.1.5](https://github.com/codesandbox/sandpack/compare/v1.1.4...v1.1.5) (2022-06-14) + + +### Bug Fixes + +* **sandpack options:** recreate sandpack context on `options` change and persist visible file in file-explorer ([#498](https://github.com/codesandbox/sandpack/issues/498)) ([1064bd0](https://github.com/codesandbox/sandpack/commit/1064bd0761148abe3fcdd58fcd6ca5a6c17fe72f)) + + + + + ## [1.1.4](https://github.com/codesandbox/sandpack/compare/v1.1.3...v1.1.4) (2022-06-13) **Note:** Version bump only for package @codesandbox/sandpack-react diff --git a/sandpack-react/package.json b/sandpack-react/package.json index 30ff58b3a..b41825495 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-react", - "version": "1.1.4", + "version": "1.1.5", "description": "", "keywords": [], "repository": {