From e0329192987c179ff77019b69c87bdd34c454845 Mon Sep 17 00:00:00 2001 From: Tamas Szuromi Date: Wed, 24 Nov 2021 13:08:47 +0000 Subject: [PATCH 1/3] improve custom content docs --- website/docs/docs/getting-started/custom-content.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/website/docs/docs/getting-started/custom-content.md b/website/docs/docs/getting-started/custom-content.md index 1c23c1a4f..8aa84e431 100644 --- a/website/docs/docs/getting-started/custom-content.md +++ b/website/docs/docs/getting-started/custom-content.md @@ -10,7 +10,7 @@ Presets were designed to ease the adoption of `sandpack`, while offering extensi ## Template -Your `Sandpack` instance can start with a predefined `template`. A template is is a +Your `Sandpack` instance can start with a predefined `template`. A template is a collection of `files` and `dependencies`, a basic starter for a sandbox, if you want. The `vue` template in this instance, has the starter files generated by the `vue-cli`. @@ -186,7 +186,7 @@ When `openPaths` or `activePath` are set, the `hidden` and `active` flags on the ## Custom Setup -If you want to configure **dependencies** or you need a different sandbox structure, you can use the `customSetup` prop. This prop acts like an alternative to the `template` prop, but gives you full flexibility to configure all the details of a running sandbox. +With the `customSetup` prop you have the flexibility to adjust or extend the details of `template` prop. Also the `customSetup` prop can be used to configure **dependencies**. ```jsx const code = `import ReactMarkdown from 'react-markdown' @@ -210,10 +210,7 @@ export default function App() { TODO: Inject example -If both `template` and -`customSetup` are provided, the two are merged, with the `customSetup` values -having higher priority. If you don't want to start from a template, you can -specify your entire sandbox structure with the `customSetup`. +If both `template` and `customSetup` are provided then the `customSetup` values overwrite the ones from the `template`. With `customSetup` you can build your entire sandbox without using a `template`. ### Dependencies From 3ecd01e287d8430de9e93a9cae9033b9a6bec0b5 Mon Sep 17 00:00:00 2001 From: Tamas Szuromi Date: Wed, 24 Nov 2021 13:28:18 +0000 Subject: [PATCH 2/3] changes to customSetup docs --- website/docs/docs/getting-started/custom-content.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/docs/getting-started/custom-content.md b/website/docs/docs/getting-started/custom-content.md index 8aa84e431..2138a0f8d 100644 --- a/website/docs/docs/getting-started/custom-content.md +++ b/website/docs/docs/getting-started/custom-content.md @@ -210,7 +210,7 @@ export default function App() { TODO: Inject example -If both `template` and `customSetup` are provided then the `customSetup` values overwrite the ones from the `template`. With `customSetup` you can build your entire sandbox without using a `template`. +If both `template` and `customSetup` are provided then the `customSetup` values are merged and might override the ones from the `template`. With `customSetup` you can build your entire sandbox without using a `template`. ### Dependencies From 520d77a43a6ffca76bf819726cb98438b54960ba Mon Sep 17 00:00:00 2001 From: Tamas Szuromi Date: Wed, 24 Nov 2021 14:27:21 +0000 Subject: [PATCH 3/3] several minor doc tweaks --- website/docs/docs/advanced-usage/client.md | 4 ++-- website/docs/docs/advanced-usage/components.md | 4 ++-- website/docs/docs/advanced-usage/hooks.md | 5 ++--- website/docs/docs/getting-started/custom-ui.md | 4 ++-- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/website/docs/docs/advanced-usage/client.md b/website/docs/docs/advanced-usage/client.md index 810d76a2e..651e700aa 100644 --- a/website/docs/docs/advanced-usage/client.md +++ b/website/docs/docs/advanced-usage/client.md @@ -66,7 +66,7 @@ client.updatePreview({ }); ``` -If you specify a `package.json` in the list of files we will use that as source +If a `package.json` has been specified in the list of files that will be used as a source of truth. Otherwise, we infer `dependencies` and `entry` from it: ```js @@ -170,7 +170,7 @@ The client instance has several helper functions you can call. #### `updatePreview` -Send new content like files and dependencies, to the preview. It will +Send new content like files and dependencies to the preview. It will automatically hot update the preview with the new files and options. Accepts a single argument `sandboxInfo` of type `SandboxInfo`. diff --git a/website/docs/docs/advanced-usage/components.md b/website/docs/docs/advanced-usage/components.md index df8bb36a9..9f32c7846 100644 --- a/website/docs/docs/advanced-usage/components.md +++ b/website/docs/docs/advanced-usage/components.md @@ -46,7 +46,7 @@ const CustomSandpack = () => ( -And now we have pretty much the same component as the preset, minus the prop +Further now we have pretty much the same component as the preset, minus the prop passing, which you can decide based on your specific needs. You can easily swap the two components inside the `SandpackLayout` to get a different instance of `Sandpack`. @@ -155,7 +155,7 @@ If you played with the `Sandpack` preset, you should be familiar already with th ## Code Viewer -For situations when you strictly want to show some code and run it in the browser, you can use the `SandpackCodeViewer` component. It looks similar to the code editor, but it renders a readonly version of `codemirror`, so users will not be able to edit the code. +For situations when you strictly want to show some code and run it in the browser, you can use the `SandpackCodeViewer` component. It looks similar to the code editor, but it renders a read-only version of `codemirror`, so users will not be able to edit the code. ```jsx diff --git a/website/docs/docs/advanced-usage/hooks.md b/website/docs/docs/advanced-usage/hooks.md index 1b65c7385..fc52fa789 100644 --- a/website/docs/docs/advanced-usage/hooks.md +++ b/website/docs/docs/advanced-usage/hooks.md @@ -61,9 +61,8 @@ We can test this with the `CustomSandpack` we implemented at the previous step. If you run this, you will notice that the `SimpleCodeViewer` is in sync with the state of the `SandpackCodeEditor`. -`useSandpack` also exports `dispatch` and `listen`, two functions with which you -can directly communicate with the bundler. However, at this point, you'd have to -understand all the different types of messages and payloads that are passed from +`useSandpack` also exports `dispatch` and `listen`, you can levarage these functions for communicating directly with the bundler. However, at this point, you'd have +understood all the different types of messages and payloads that are passed from the sandpack manager to the iframe and back. ```jsx diff --git a/website/docs/docs/getting-started/custom-ui.md b/website/docs/docs/getting-started/custom-ui.md index d6c50ef63..425f7aa11 100644 --- a/website/docs/docs/getting-started/custom-ui.md +++ b/website/docs/docs/getting-started/custom-ui.md @@ -66,7 +66,7 @@ theme={{ }} /> -Or you can import an existing theme object and use object composition to override specific fields. +Furthermore you can import an existing theme object and use object composition to override specific fields. ```jsx import { Sandpack, codesandboxDarkTheme } from "@codesandbox/sandpack-react"; @@ -190,7 +190,7 @@ setting, it will show a `Run` button that initializes the bundling process. This ### Recompile Mode -The `recompileMode` option also allow you configure what happens when the user starts typing in the code editor. The `immediate` mode will fire the change to the bundler as soon as it is received, while the `delayed` mode will debounce the bundler operation until the user starts typing. Optionally, you can set the delay for the debounce, which by default is `500ms`. +The `recompileMode` option also allows you configure what happens when the user starts typing in the code editor. The `immediate` mode will fire the change to the bundler as soon as it is received, while the `delayed` mode will debounce the bundler operation until the user starts typing. Optionally, you can set the delay for the debounce, which by default is `500ms`. By default, the mode is set to `delayed` to ensures the bundler doesn't run on each keystroke. You can customize this experience by modifying the `recompileDelay` value or by setting the