Move away from rnplay to snack, with embedded examples!

Summary:
React Native Playground has been sunset, so I've replaced the examples that previously used it with examples using [Snack](http://snack.expo.io/).

The examples are directly embedded and can be edited live to see updates. The code itself is also in the docs, so we can easily update the docs in one place and we don't have to actually go to a saved app on Snack and update it there.

Run it locally, go to the `Animations` section and the `Direct Manipulation` section.

![screen shot 2017-04-03 at 6 29 51 pm](https://cloud.githubusercontent.com/assets/90494/24638271/ff3ad044-189b-11e7-845d-24b2fb612d95.png)

Open it on your phone, notice that it falls back to just showing plain code.

<img src="https://cloud.githubusercontent.com/assets/90494/24638547/203ec8fc-189e-11e7-99c8-dfabff949f8d.PNG" width="250">

- Get rid of the Expo new user experience dialog that you see when you open a Snack -- is this a dealbreaker
Closes https://github.com/facebook/react-native/pull/13285

Differential Revision: D4828011

Pulled By: hramos

fbshipit-source-id: 684ad24a14deb72abb8587ffbb726d316f126d75

website/core/Marked.js

@@ -15,6 +15,7 @@ var Header = require('Header');
 var Prism = require('Prism');
 var React = require('React');
 var WebPlayer = require('WebPlayer');
+var SnackPlayer = require('SnackPlayer');
 
 /**
  * Block-Level Grammar
@@ -842,6 +843,12 @@ Parser.prototype.tok = function() {
         );
       }
 
+      if (lang && lang.indexOf('SnackPlayer') === 0) {
+        return (
+          <SnackPlayer params={lang.split('?')[1]}>{text}</SnackPlayer>
+        );
+      }
+
       return <Prism>{text}</Prism>;
     }
     case 'table': {

website/core/Site.js

@@ -20,9 +20,11 @@ var Site = React.createClass({
     const version = Metadata.config.RN_VERSION;
     const algoliaVersion = version === 'next' ? 'master' : version;
     var basePath = '/react-native/' + (path ? path + '/' : '');
-    var currentYear = (new Date()).getFullYear();
+    var currentYear = new Date().getFullYear();
 
-    var title = this.props.title ? this.props.title : 'React Native | A framework for building native apps using React';
+    var title = this.props.title
+      ? this.props.title
+      : 'React Native | A framework for building native apps using React';
 
     var metaTags = [
       { charSet: 'utf-8' },
@@ -35,8 +37,8 @@ var Site = React.createClass({
         content: 'width=device-width',
       },
       // Facebook
-      { property: 'fb:app_id', content: '1677033832619985', },
-      { property: 'fb:admins', content: '121800083', },
+      { property: 'fb:app_id', content: '1677033832619985' },
+      { property: 'fb:admins', content: '121800083' },
       // Open Graph
       {
         property: 'og:site_name',
@@ -48,15 +50,20 @@ var Site = React.createClass({
       },
       {
         property: 'og:url',
-        content: 'https://facebook.github.io/react-native/' + (this.props.path ? this.props.path : 'index.html'),
+        content: 'https://facebook.github.io/react-native/' +
+          (this.props.path ? this.props.path : 'index.html'),
       },
       {
         property: 'og:image',
-        content: this.props.image ? this.props.image : 'https://facebook.github.io/react-native/img/opengraph.png',
+        content: this.props.image
+          ? this.props.image
+          : 'https://facebook.github.io/react-native/img/opengraph.png',
       },
       {
         property: 'og:description',
-        content: this.props.description ? this.props.description : 'A framework for building native apps using React',
+        content: this.props.description
+          ? this.props.description
+          : 'A framework for building native apps using React',
       },
       // Twitter Cards
       {
@@ -69,18 +76,23 @@ var Site = React.createClass({
       },
     ];
 
-    var typeTags = [{
-      property: 'og:type',
-      content: 'website',
-    }];
-    if (this.props.author) {
-      typeTags = [{
+    var typeTags = [
+      {
         property: 'og:type',
-        content: 'article',
-      }, {
-        property: 'article:author',
-        content: this.props.author,
-      }];
+        content: 'website',
+      },
+    ];
+    if (this.props.author) {
+      typeTags = [
+        {
+          property: 'og:type',
+          content: 'article',
+        },
+        {
+          property: 'article:author',
+          content: this.props.author,
+        },
+      ];
     }
     metaTags.push(...typeTags);
 
@@ -95,27 +107,46 @@ var Site = React.createClass({
       <html>
         <head>
           <title>{title}</title>
-          {
-            metaTags.map((tag, index) =>
-              <meta key={index} {...tag} />)
-          }
+          {metaTags.map((tag, index) => <meta key={index} {...tag} />)}
 
           <base href={basePath} />
 
-          <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
+          <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"
+          />
 
           <link rel="shortcut icon" href="img/favicon.png?2" />
           <link rel="stylesheet" href="css/react-native.css" />
 
-          <link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml" />
-          <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css" />
+          <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="React Native Blog"
+            href="https://facebook.github.io/react-native/blog/feed.xml"
+          />
+          <link
+            href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
+            rel="stylesheet"
+            type="text/css"
+          />
 
           <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js" />
-          <script type="text/javascript">{'try{Typekit.load();}catch(e){}'}</script>
+          <script type="text/javascript">
+            {'try{Typekit.load();}catch(e){}'}
+          </script>
         </head>
         <body>
-          <script dangerouslySetInnerHTML={{__html: "window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));"}} />
-          <script dangerouslySetInnerHTML={{__html: "window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));"}} />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: "window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));",
+            }}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: "window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));",
+            }}
+          />
           <div className="container">
             <div className="nav-main">
               <div className="wrap">
@@ -135,57 +166,128 @@ var Site = React.createClass({
             <footer className="nav-footer">
               <section className="sitemap">
                 <a href="/react-native" className="nav-home">
-                  <img src="img/header_logo.png" alt="React Native" width="66" height="58" />
+                  <img
+                    src="img/header_logo.png"
+                    alt="React Native"
+                    width="66"
+                    height="58"
+                  />
                 </a>
                 <div>
                   <h5><a href="docs/">Docs</a></h5>
                   <a href="docs/getting-started.html">Getting Started</a>
                   <a href="docs/tutorial.html">Tutorial</a>
-                  <a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a>
+                  <a href="docs/integration-with-existing-apps.html">
+                    Integration With Existing Apps
+                  </a>
                   <a href="docs/more-resources.html">More Resources</a>
                 </div>
                 <div>
                   <h5><a href="/react-native/support.html">Community</a></h5>
                   <a href="/react-native/showcase.html">Showcase</a>
-                  <a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a>
-                  <a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a>
-                  <a href="https://twitter.com/reactnative" target="_blank">Twitter</a>
+                  <a
+                    href="http://www.meetup.com/topics/react-native/"
+                    target="_blank">
+                    Upcoming Events
+                  </a>
+                  <a
+                    href="https://www.facebook.com/groups/react.native.community"
+                    target="_blank">
+                    Facebook Group
+                  </a>
+                  <a href="https://twitter.com/reactnative" target="_blank">
+                    Twitter
+                  </a>
                 </div>
                 <div>
                   <h5><a href="/react-native/support.html">Help</a></h5>
-                  <a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a>
-                  <a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a>
-                  <a href="/react-native/versions.html" target="_blank">Latest Releases</a>
-                  <a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a>
+                  <a
+                    href="http://stackoverflow.com/questions/tagged/react-native"
+                    target="_blank">
+                    Stack Overflow
+                  </a>
+                  <a href="https://discord.gg/0ZcbPKXt5bZjGY5n">
+                    Reactiflux Chat
+                  </a>
+                  <a href="/react-native/versions.html" target="_blank">
+                    Latest Releases
+                  </a>
+                  <a
+                    href="https://react-native.canny.io/feature-requests"
+                    target="_blank">
+                    Feature Requests
+                  </a>
                 </div>
                 <div>
                   <h5>More</h5>
                   <a href="/react-native/blog">Blog</a>
-                  <a href="https://github.com/facebook/react-native" target="_blank">GitHub</a>
-                  <a href="http://facebook.github.io/react/" target="_blank">React</a>
+                  <a
+                    href="https://github.com/facebook/react-native"
+                    target="_blank">
+                    GitHub
+                  </a>
+                  <a href="http://facebook.github.io/react/" target="_blank">
+                    React
+                  </a>
                 </div>
               </section>
               <section className="newsletter">
                 <div id="mc_embed_signup">
-                  <form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" className="validate" target="_blank" noValidate>
+                  <form
+                    action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;id=47cd41008f"
+                    method="post"
+                    id="mc-embedded-subscribe-form"
+                    name="mc-embedded-subscribe-form"
+                    className="validate"
+                    target="_blank"
+                    noValidate>
                     <div id="mc_embed_signup_scroll">
                       <label htmlFor="mce-EMAIL">
                         <h5>Get the React Native Newsletter</h5>
                       </label>
-                      <input type="email" value="" name="EMAIL" className="email" id="mce-EMAIL" placeholder="email address" required />
-                      <div style={{position: 'absolute', left: '-5000px'}} aria-hidden="true">
-                        <input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabIndex="-1" value="" />
+                      <input
+                        type="email"
+                        value=""
+                        name="EMAIL"
+                        className="email"
+                        id="mce-EMAIL"
+                        placeholder="email address"
+                        required
+                      />
+                      <div
+                        style={{ position: 'absolute', left: '-5000px' }}
+                        aria-hidden="true">
+                        <input
+                          type="text"
+                          name="b_db0dd948e2b729ee62625b1a8_47cd41008f"
+                          tabIndex="-1"
+                          value=""
+                        />
                       </div>
                       <div className="clear">
-                        <input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" className="button" />
+                        <input
+                          type="submit"
+                          value="Sign up"
+                          name="subscribe"
+                          id="mc-embedded-subscribe"
+                          className="button"
+                        />
                       </div>
                     </div>
                   </form>
                 </div>
               </section>
 
-              <a href="https://code.facebook.com/projects/" target="_blank" className="fbOpenSource">
-                <img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
+              <a
+                href="https://code.facebook.com/projects/"
+                target="_blank"
+                className="fbOpenSource">
+                <img
+                  src="img/oss_logo.png"
+                  alt="Facebook Open Source"
+                  width="170"
+                  height="45"
+                />
               </a>
               <section className="copyright">
                 Copyright © {currentYear} Facebook Inc.
@@ -194,8 +296,13 @@ var Site = React.createClass({
           </div>
 
           <div id="fb-root" />
-          <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js" />
-          <script dangerouslySetInnerHTML={{__html: `
+          <script
+            type="text/javascript"
+            src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -213,15 +320,25 @@ var Site = React.createClass({
               inputSelector: '#algolia-doc-search',
               algoliaOptions: { facetFilters: [ "tags:${algoliaVersion}" ], hitsPerPage: 5 }
             });
-          `}} />
+          `,
+            }}
+          />
           <script src="js/scripts.js" />
           {/* Mailchimp Inline form-submission script for the React Native newsletter sign up form */}
-          <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js" />
-          <script type="text/javascript" dangerouslySetInnerHTML={{__html: "(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);"}} />
+          <script
+            type="text/javascript"
+            src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"
+          />
+          <script
+            type="text/javascript"
+            dangerouslySetInnerHTML={{
+              __html: "(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);",
+            }}
+          />
+          <script type="text/javascript" src="https://snack.expo.io/embed.js" />
         </body>
       </html>
     );
-  }
+  },
 });
-
 module.exports = Site;

website/core/SnackPlayer.js

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule SnackPlayer
+ */
+'use strict';
+
+var Prism = require('Prism');
+var React = require('React');
+
+const LatestSDKVersion = '15.0.0';
+var ReactNativeToExpoSDKVersionMap = {
+  '0.42': '15.0.0',
+  '0.41': '14.0.0',
+};
+
+/**
+ * Use the SnackPlayer by including a ```SnackPlayer``` block in markdown.
+ *
+ * Optionally, include url parameters directly after the block's language.
+ * Valid options are name, description, and platform.
+ *
+ * E.g.
+ * ```SnackPlayer?platform=android&name=Hello%20world!
+ * import React from 'react';
+ * import { Text } from 'react-native';
+ *
+ * export default class App extends React.Component {
+ *   render() {
+ *     return <Text>Hello World!</Text>;
+ *   }
+ * }
+ * ```
+ */
+var SnackPlayer = React.createClass({
+  contextTypes: {
+    version: React.PropTypes.number.isRequired,
+  },
+
+  componentDidMount() {
+    window.ExpoSnack && window.ExpoSnack.initialize();
+  },
+
+  render() {
+    var code = encodeURIComponent(this.props.children);
+    var params = this.parseParams(this.props.params);
+    var platform = params.platform ? params.platform : 'ios';
+    var name = params.name ? decodeURIComponent(params.name) : 'Example';
+    var description = params.description
+      ? decodeURIComponent(params.description)
+      : 'Example usage';
+
+    var optionalProps = {};
+    var { version } = this.context;
+    if (version === 'next') {
+      optionalProps['data-snack-sdk-version'] = LatestSDKVersion;
+    } else {
+      optionalProps['data-snack-sdk-version'] = ReactNativeToExpoSDKVersionMap[
+        version
+      ] || LatestSDKVersion;
+    }
+
+    return (
+      <div className="snack-player">
+        <div className="mobile-friendly-snack" style={{ display: 'none' }}>
+          <Prism>
+            {this.props.children}
+          </Prism>
+        </div>
+
+        <div
+          className="desktop-friendly-snack"
+          style={{ marginTop: 15, marginBottom: 15 }}>
+          <div
+            data-snack-name={name}
+            data-snack-description={description}
+            data-snack-code={code}
+            data-snack-platform={platform}
+            data-snack-preview="true"
+            {...optionalProps}
+            style={{
+              overflow: 'hidden',
+              background: '#fafafa',
+              border: '1px solid rgba(0,0,0,.16)',
+              borderRadius: '4px',
+              height: '514px',
+              width: '880px',
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+
+  parseParams: function(paramString) {
+    var params = {};
+
+    if (paramString) {
+      var pairs = paramString.split('&');
+      for (var i = 0; i < pairs.length; i++) {
+        var pair = pairs[i].split('=');
+        params[pair[0]] = pair[1];
+      }
+    }
+
+    return params;
+  },
+});
+
+module.exports = SnackPlayer;

website/src/react-native/js/scripts.js

@@ -23,7 +23,9 @@
     var mobile = isMobile();
 
     if (mobile) {
-      document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTarget);
+      document
+        .querySelector('.nav-site-wrapper a[data-target]')
+        .addEventListener('click', toggleTarget);
     }
 
     var webPlayerList = document.querySelectorAll('.web-player');
@@ -33,13 +35,36 @@
       webPlayerList[i].classList.add(mobile ? 'mobile' : 'desktop');
 
       if (!mobile) {
-
         // Determine location to look up required assets
-        var assetRoot = encodeURIComponent(document.location.origin + '/react-native');
+        var assetRoot = encodeURIComponent(
+          document.location.origin + '/react-native'
+        );
 
         // Set iframe src. Do this dynamically so the iframe never loads on mobile.
         var iframe = webPlayerList[i].querySelector('iframe');
-        iframe.src = iframe.getAttribute('data-src') + '&assetRoot=' + assetRoot;
+        iframe.src = iframe.getAttribute('data-src') +
+          '&assetRoot=' +
+          assetRoot;
+      }
+    }
+
+    var snackPlayerList = document.querySelectorAll('.snack-player');
+
+    // Either show interactive or static code block, depending on desktop or mobile
+    for (var i = 0; i < snackPlayerList.length; ++i) {
+      var snackPlayer = snackPlayerList[i];
+      var snackDesktopPlayer = snackPlayer.querySelectorAll(
+        '.desktop-friendly-snack'
+      )[0];
+      var plainCodeExample = snackPlayer.querySelectorAll(
+        '.mobile-friendly-snack'
+      )[0];
+
+      if (mobile) {
+        snackDesktopPlayer.remove();
+        plainCodeExample.style.display = 'block';
+      } else {
+        plainCodeExample.remove();
       }
     }
 
@@ -86,7 +111,9 @@
 
   var toggledTarget;
   function toggleTarget(event) {
-    var target = document.body.querySelector(event.target.getAttribute('data-target'));
+    var target = document.body.querySelector(
+      event.target.getAttribute('data-target')
+    );
 
     if (target) {
       event.preventDefault();
@@ -104,7 +131,8 @@
 
   // Primitive mobile detection
   function isMobile() {
-    return ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) );
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
   }
-
-}());
+})();