Support dependencies on Snack player (facebook#2474)

* Support dependencies on Snack player * Support Text style examples on web * bump plugin version, prettier on Readme Co-authored-by: Bartosz Kaszubowski <[email protected]>
2haein · Feb 5, 2021 · 4c333a0 · 4c333a0
1 parent d0c237e
commit 4c333a0
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -26,20 +26,23 @@ 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';
       const preview = params.preview || 'true';
       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`
           <div
             class="snack-player"
             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
@@ -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 (
     <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <Text>
-        Try editing me! 🎉
-        </Text>
+        <Slider
+          style={{width: 200, height: 40}}
+          minimumValue={0}
+          maximumValue={1}
+          minimumTrackTintColor="#FFFFFF"
+          maximumTrackTintColor="#000000"
+        />
     </View>
     );
 }

diff --git 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
@@ -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"