From 2561bfb94ba77af1ed3933f6cfe3c7ba67d57a35 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 15 Aug 2024 12:50:17 +0100 Subject: [PATCH 1/5] feat: Add support for `initiallySelectedFile` param --- website/src/client/components/App.tsx | 10 +++++++++- website/src/client/components/EditorViewProps.tsx | 1 + website/src/client/types.tsx | 1 + website/src/client/utils/embeddedSession.tsx | 3 +++ 4 files changed, 14 insertions(+), 1 deletion(-) diff --git a/website/src/client/components/App.tsx b/website/src/client/components/App.tsx index 05ceeb0c..62de7d3f 100644 --- a/website/src/client/components/App.tsx +++ b/website/src/client/components/App.tsx @@ -239,7 +239,14 @@ class Main extends React.Component { }, }; - const selectedFile = files['App.js'] + const hasInitiallySelectedFile = + props.query.initiallySelectedFile && + (files[props.query.initiallySelectedFile] || + props.query.initiallySelectedFile === 'package.json'); + + const selectedFile = hasInitiallySelectedFile + ? props.query.initiallySelectedFile + : files['App.js'] ? 'App.js' : files['App.tsx'] ? 'App.tsx' @@ -926,6 +933,7 @@ class Main extends React.Component { upgradedFromSDKVersion={ this.state.wasUpgraded ? this.state.initialSdkVersion : undefined } + initiallySelectedFile={this.props.query.initiallySelectedFile} /> ) : isEmbedded ? ( diff --git a/website/src/client/components/EditorViewProps.tsx b/website/src/client/components/EditorViewProps.tsx index 855b8bcf..79e83c77 100644 --- a/website/src/client/components/EditorViewProps.tsx +++ b/website/src/client/components/EditorViewProps.tsx @@ -76,4 +76,5 @@ export type EditorViewProps = { devices: AppetizeDevices; verbose: boolean; snackagerURL: string; + initiallySelectedFile?: string; }; diff --git a/website/src/client/types.tsx b/website/src/client/types.tsx index 13bb674c..d0692f89 100644 --- a/website/src/client/types.tsx +++ b/website/src/client/types.tsx @@ -96,6 +96,7 @@ export type QueryInitParams = { waitForData?: 'boolean'; saveToAccount?: 'true' | 'false'; testTransport?: 'snackpub' | 'trafficMirroring'; + initiallySelectedFile?: string; }; export type QueryStateParams = { diff --git a/website/src/client/utils/embeddedSession.tsx b/website/src/client/utils/embeddedSession.tsx index 40ac53ec..e7da90f5 100644 --- a/website/src/client/utils/embeddedSession.tsx +++ b/website/src/client/utils/embeddedSession.tsx @@ -8,6 +8,7 @@ type SnackEmbeddedSession = { dependencies: SnackDependencies; sdkVersion: SDKVersion; platform: Platform; + initiallySelectedFile?: string; }; declare global { @@ -22,6 +23,7 @@ export function openEmbeddedSessionFullScreen(session: SnackEmbeddedSession) { name: session.name, description: session.description, platform: session.platform, + initiallySelectedFile: session.initiallySelectedFile, hideQueryParams: 'true', preview: undefined, // Use default preview setting theme: undefined, // Use default theme setting @@ -41,6 +43,7 @@ export function openEmbeddedSessionFullScreen(session: SnackEmbeddedSession) { dependencies: session.dependencies, sdkVersion: session.sdkVersion, platform: session.platform, + initiallySelectedFile: session.initiallySelectedFile, }; } else { throw new Error('No window'); From ca7cf57074a5efe2652e75671e6f9aaec56410ff Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 15 Aug 2024 12:50:59 +0100 Subject: [PATCH 2/5] docs: Document `initiallySelectedFile` --- docs/embedding-snacks.md | 1 + docs/url-query-parameters.md | 1 + website/README.md | 2 ++ 3 files changed, 4 insertions(+) diff --git a/docs/embedding-snacks.md b/docs/embedding-snacks.md index c2b01fcd..6090443a 100644 --- a/docs/embedding-snacks.md +++ b/docs/embedding-snacks.md @@ -44,6 +44,7 @@ The `embed.js` script scans the DOM and populates any elements containing a `dat | `data-snack-preview`| Shows or hides the preview pane. Defaults to `true` using `embed.js` Snacks. Valid values: `true`, `false`. | | `data-snack-sdkversion` | The Expo SDK version to use (eg. `38.0.0`). Defaults to the latest released Expo SDK version. | | `data-snack-supportedplatforms` | The platforms available for previewing the Snack. Defaults to `mydevice,ios,android,web` when not specified. | +| `data-snack-initially-selected-file` | The filename of the file to show in the embedded snack. | | `data-snack-theme` | The theme to use, `light` or `dark`. When omitted uses the theme that was configured by the user (defaults to `light`). | | `data-snack-device-frame` | If the outline of the device should be rendered or not. Valid values: `true` or `false`. | | `data-snack-device-android` | The emulator used when running the Android device. Valid values: any of the [Appetize `device` Playback options](https://docs.appetize.io/core-features/playback-options). Note, this also has effect on the used Android version. | diff --git a/docs/url-query-parameters.md b/docs/url-query-parameters.md index 53f8d0df..0b4eee2e 100644 --- a/docs/url-query-parameters.md +++ b/docs/url-query-parameters.md @@ -30,6 +30,7 @@ The main Snack website is hosted at [https://snack.expo.dev](https://snack.expo. | `sdkVersion` | `&sdkVersion=38.0.0` | The Expo SDK version to use. Defaults to the latest released Expo SDK version. | | `sourceUrl` | `&sourceUrl=http://mysite.com/file.js` | Using `sourceUrl` you can host your own code for a Snack anywhere you like. Just provide a url for a publicly accessible resource to the sourceUrl attribute. When specified, causes the `code` and `files` attributes to be ignored. | | `supportedPlatforms` | `&supportedPlatforms=ios,web` | The platforms available for previewing the Snack. Defaults to `mydevice,ios,android,web` when not specified. | +| `initiallySelectedFile` | `&initiallySelectedFile=package.json` | The name of the file to have initially selected. Defaults to `App.js` or `App.tsx` or `app.js` or the first file when not specified. | | `theme` | `&theme=dark` | The theme to use, `light` or `dark`. When omitted uses the theme that was configured by the user (defaults to `light`). | | `verbose` | `&verbose=true` | Enables verbose logging in the console (defaults to `false`). This can be useful to diagnose problems with Snacks or packages. | diff --git a/website/README.md b/website/README.md index 4a385cb6..d126950c 100644 --- a/website/README.md +++ b/website/README.md @@ -137,6 +137,7 @@ Here is a summary of all the parameter options that you can use: | **sdkVersion** | _[default SDK](../packages/snack-content/src/defaults.ts#L3)_ | The Expo SDK version that your Snack should use. | [SDKVersion](../packages/snack-content/src/sdks/types.ts#L4) | | **sourceUrl** | | One of two ways to send a file, via publicly-accessible URL of a JS file. | `string` | | **supportedPlatforms** | All platforms | Specify which platforms your Snack supports | `android \| ios \| mydevice \| web` | +| **initiallySelectedFile** | | The name of the file to have initially selected. | `string` | | **theme** | `light` | The visual theme of your Snack. | `light \| dark` | ### Examples of Snack URLs @@ -151,6 +152,7 @@ All of these examples should be prefixed with `https://snack.expo.dev/`. | **preview** | _[`?preview=false`](https://snack.expo.dev/?preview=false)_ | | **sdkVerion** | _[`?sdkVersion=45.0.0`](https://snack.expo.dev/?sdkVersion=45.0.0)_ | | **supportedPlatforms** | _[`?supportedPlatforms=android,ios`](https://snack.expo.dev/?supportedPlatforms=android,ios)_ | +| **initiallySelectedFile** | _[`?initiallySelectedFile=package.json`](https://snack.expo.dev/?initiallySelectedFile=package.json)_ | | **theme** | _[`?theme=dark`](https://snack.expo.dev/?theme=dark)_ | | **dependencies** | _[`?dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view`](https://snack.expo.dev/?dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view)_ | | **files** | _[`?files=%7B%22type%22%3A%20%22CODE%22%2C%20%22contents%22%3A%20%22alert%28%27hello%27%29%3B%22%20%7D`](https://snack.expo.dev/?files=%7B%22type%22%3A%20%22CODE%22%2C%20%22contents%22%3A%20%22alert%28%27hello%27%29%3B%22%20%7D)_ | From e0db66fcef89ef4407e9c322d33b844b751f554e Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 15 Aug 2024 12:51:21 +0100 Subject: [PATCH 3/5] docs: Correct docs for `data-snack-supported-platforms` --- docs/embedding-snacks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/embedding-snacks.md b/docs/embedding-snacks.md index 6090443a..aefb6c09 100644 --- a/docs/embedding-snacks.md +++ b/docs/embedding-snacks.md @@ -43,7 +43,7 @@ The `embed.js` script scans the DOM and populates any elements containing a `dat | `data-snack-platform`| The default platform to preview the Snack on. Defaults to `web` which will run as soon as your users see the Snack. Valid values: `ios`, `android`, `web`, `mydevice`. | | `data-snack-preview`| Shows or hides the preview pane. Defaults to `true` using `embed.js` Snacks. Valid values: `true`, `false`. | | `data-snack-sdkversion` | The Expo SDK version to use (eg. `38.0.0`). Defaults to the latest released Expo SDK version. | -| `data-snack-supportedplatforms` | The platforms available for previewing the Snack. Defaults to `mydevice,ios,android,web` when not specified. | +| `data-snack-supported-platforms` | The platforms available for previewing the Snack. Defaults to `mydevice,ios,android,web` when not specified. | | `data-snack-initially-selected-file` | The filename of the file to show in the embedded snack. | | `data-snack-theme` | The theme to use, `light` or `dark`. When omitted uses the theme that was configured by the user (defaults to `light`). | | `data-snack-device-frame` | If the outline of the device should be rendered or not. Valid values: `true` or `false`. | From 022a375c6cecf8c666119c4a814b745713ecfc1c Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 15 Aug 2024 13:47:00 +0100 Subject: [PATCH 4/5] lint --- website/src/client/components/App.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/website/src/client/components/App.tsx b/website/src/client/components/App.tsx index 62de7d3f..9252bbfb 100644 --- a/website/src/client/components/App.tsx +++ b/website/src/client/components/App.tsx @@ -239,10 +239,11 @@ class Main extends React.Component { }, }; - const hasInitiallySelectedFile = + const hasInitiallySelectedFile = Boolean( props.query.initiallySelectedFile && - (files[props.query.initiallySelectedFile] || - props.query.initiallySelectedFile === 'package.json'); + (files[props.query.initiallySelectedFile] || + props.query.initiallySelectedFile === 'package.json') + ); const selectedFile = hasInitiallySelectedFile ? props.query.initiallySelectedFile From d718d7e9939d1ea75fdc1361cba82403b87d41aa Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 15 Aug 2024 15:37:11 +0100 Subject: [PATCH 5/5] lint --- website/src/client/components/App.tsx | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/website/src/client/components/App.tsx b/website/src/client/components/App.tsx index 9252bbfb..82bd21d5 100644 --- a/website/src/client/components/App.tsx +++ b/website/src/client/components/App.tsx @@ -245,17 +245,18 @@ class Main extends React.Component { props.query.initiallySelectedFile === 'package.json') ); - const selectedFile = hasInitiallySelectedFile - ? props.query.initiallySelectedFile - : files['App.js'] - ? 'App.js' - : files['App.tsx'] - ? 'App.tsx' - : files['app.js'] - ? 'app.js' - : Object.keys(files).length - ? Object.keys(files)[0] - : ''; + const selectedFile = + hasInitiallySelectedFile && props.query.initiallySelectedFile + ? props.query.initiallySelectedFile + : files['App.js'] + ? 'App.js' + : files['App.tsx'] + ? 'App.tsx' + : files['app.js'] + ? 'app.js' + : Object.keys(files).length + ? Object.keys(files)[0] + : ''; this.state = { session: this._snack.getState(),