diff --git a/docs/text-style-props.md b/docs/text-style-props.md index 2d91b191616..6730b8af36e 100644 --- a/docs/text-style-props.md +++ b/docs/text-style-props.md @@ -5,9 +5,10 @@ title: Text Style Props ### Example -```SnackPlayer name=TextStyleProps&supportedPlatforms=android,ios +```SnackPlayer name=TextStyleProps&dependencies=expo-constants,@react-native-community/slider import React, { useState } from "react"; -import { FlatList, Platform, ScrollView, Slider, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native"; +import { FlatList, Platform, ScrollView, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native"; +import Slider from '@react-native-community/slider'; import Constants from "expo-constants"; const fontStyles = ["normal", "italic"]; diff --git a/plugins/remark-snackplayer/README.md b/plugins/remark-snackplayer/README.md index 3d282e09647..9b1836f0ff3 100644 --- a/plugins/remark-snackplayer/README.md +++ b/plugins/remark-snackplayer/README.md @@ -31,14 +31,16 @@ The above code snippet would look like this: ### Parameters -| Name | Description | Default | -| ------------------ | ---------------------------------------- | ------------------- | -| name | SnackPlayer name | `"Example"` | -| description | Description of the example | `"Example usage"` | -| platform | Example platform | `"web"` | -| supportedPlatforms | Supported platforms | `"ios,android,web"` | -| theme | SnackPlayer theme, `"light"` or `"dark"` | `"light"` | -| preview | Preview visible, `"true"` or `"false"` | `"true"` | +| Name | Description | Default | +| ------------------ | --------------------------------------------------------- | ------------------- | +| name | SnackPlayer name | `"Example"` | +| description | Description of the example | `"Example usage"` | +| dependencies | Additional dependencies, eg. `"expo-constant"` | `""` | +| platform | Example platform | `"web"` | +| supportedPlatforms | Supported platforms | `"ios,android,web"` | +| theme | SnackPlayer theme, `"light"` or `"dark"` | `"light"` | +| preview | Preview visible, `"true"` or `"false"` | `"true"` | +| loading | iFrame loading attribute, `"auto"`, `"lazy"` or `"eager"` | `"lazy"` | ## Styling diff --git a/plugins/remark-snackplayer/package.json b/plugins/remark-snackplayer/package.json index a60778f07c0..1f774bfa99b 100644 --- a/plugins/remark-snackplayer/package.json +++ b/plugins/remark-snackplayer/package.json @@ -1,6 +1,6 @@ { "name": "@react-native-website/remark-snackplayer", - "version": "0.0.6", + "version": "0.0.7", "private": true, "description": "Remark Expo Snack Plugin", "main": "src/index.js", @@ -15,7 +15,7 @@ "src" ], "scripts": { - "prettier": "prettier --write \"{src/**/*.js,tests/**/*.js}\"", + "prettier": "prettier --write \"{src/**/*.js,tests/**/*.js,*.md}\"", "test": "yarn tape tests/index.js" }, "dependencies": { diff --git a/plugins/remark-snackplayer/src/index.js b/plugins/remark-snackplayer/src/index.js index 86ae9374e7d..f758496870c 100644 --- a/plugins/remark-snackplayer/src/index.js +++ b/plugins/remark-snackplayer/src/index.js @@ -26,6 +26,7 @@ const processNode = (node, parent) => { : 'Example usage'; const sampleCode = node.value; const encodedSampleCode = encodeURIComponent(sampleCode); + const dependencies = params.dependencies || ''; const platform = params.platform || 'web'; const supportedPlatforms = params.supportedPlatforms || 'ios,android,web'; const theme = params.theme || 'light'; @@ -33,6 +34,7 @@ const processNode = (node, parent) => { const loading = params.loading || 'lazy'; // Generate Node for SnackPlayer + // See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md const snackPlayerDiv = u('html', { value: dedent`
{ data-snack-name="${name}" data-snack-description="${description}" data-snack-code="${encodedSampleCode}" + data-snack-dependencies="${dependencies}" data-snack-platform="${platform}" data-snack-supported-platforms="${supportedPlatforms}" data-snack-theme="${theme}" diff --git a/plugins/remark-snackplayer/tests/markdown/test2.md b/plugins/remark-snackplayer/tests/markdown/test2.md index 1f202a00c8b..6b5914086ff 100644 --- a/plugins/remark-snackplayer/tests/markdown/test2.md +++ b/plugins/remark-snackplayer/tests/markdown/test2.md @@ -15,16 +15,21 @@ const YourApp = () => { export default YourApp; ``` -```SnackPlayer name=SecondPlayer&theme=dark&preview=false&supportedPlatforms=ios&loading=eager +```SnackPlayer name=SecondPlayer&theme=dark&preview=false&supportedPlatforms=ios&loading=eager&dependencies=@react-native-community/slider import React from 'react'; -import { Text, View } from 'react-native'; +import { View } from 'react-native'; +import Slider from '@react-native-community/slider'; const YourApp = () => { return ( - - Try editing me! 🎉 - + ); } diff --git a/plugins/remark-snackplayer/tests/output/output1.html b/plugins/remark-snackplayer/tests/output/output1.html index 55a24a8bfc7..3ad544343c1 100644 --- a/plugins/remark-snackplayer/tests/output/output1.html +++ b/plugins/remark-snackplayer/tests/output/output1.html @@ -3,6 +3,7 @@ data-snack-name="Hello World" data-snack-description="Example usage" data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B" + data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" diff --git a/plugins/remark-snackplayer/tests/output/output2.html b/plugins/remark-snackplayer/tests/output/output2.html index 90e703526c8..d5c7b39c380 100644 --- a/plugins/remark-snackplayer/tests/output/output2.html +++ b/plugins/remark-snackplayer/tests/output/output2.html @@ -3,6 +3,7 @@ data-snack-name="FirstPlayer" data-snack-description="Example usage" data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B" + data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" @@ -14,7 +15,8 @@ class="snack-player" data-snack-name="SecondPlayer" data-snack-description="Example usage" - data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B" + data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20View%20%7D%20from%20'react-native'%3B%0Aimport%20Slider%20from%20'%40react-native-community%2Fslider'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CSlider%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bwidth%3A%20200%2C%20height%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20%20%20minimumValue%3D%7B0%7D%0A%20%20%20%20%20%20%20%20%20%20maximumValue%3D%7B1%7D%0A%20%20%20%20%20%20%20%20%20%20minimumTrackTintColor%3D%22%23FFFFFF%22%0A%20%20%20%20%20%20%20%20%20%20maximumTrackTintColor%3D%22%23000000%22%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B" + data-snack-dependencies="@react-native-community/slider" data-snack-platform="web" data-snack-supported-platforms="ios" data-snack-theme="dark"