Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion website/plugins/remark-snackplayer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,5 +47,4 @@ Parameters:
## To Do

- Support Passing Configuration Parameters
- Fix and Document Mobile Fallback
- Write Comprehensive tests
3 changes: 1 addition & 2 deletions website/plugins/remark-snackplayer/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "remark-snackplayer",
"version": "0.0.2",
"version": "0.0.3",
"description": "Remark SnackPlayer Plugin",
"main": "src/index.js",
"author": "Darsh <darshkpatel@gmail.com>",
Expand All @@ -19,7 +19,6 @@
},
"dependencies": {
"dedent": "^0.7.0",
"prismjs": "^1.21.0",
"unist-builder": "^2.0.3",
"unist-util-visit-parents": "^3.1.0"
},
Expand Down
82 changes: 10 additions & 72 deletions website/plugins/remark-snackplayer/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
const visit = require('unist-util-visit-parents');
const u = require('unist-builder');
const dedent = require('dedent');
const Prism = require('prismjs');
require('prismjs/components/prism-jsx');

function parseParams(paramString) {
var params = {};
Expand All @@ -23,16 +21,6 @@ function parseParams(paramString) {
return params;
}

function htmlForCodeBlock(code) {
return `
<pre class="language-jsx">
<code class="language-jsx">
${Prism.highlight(code, Prism.languages.jsx, 'jsx')}
</code>
</pre>
`;
}

function SnackPlayer() {
return tree =>
new Promise(async (resolve, reject) => {
Expand Down Expand Up @@ -64,20 +52,15 @@ function SnackPlayer() {
const snackPlayerDiv = u('html', {
value: dedent`
<div class="snack-player">
<div class="mobile-friendly-snack" style="display: none">
${htmlForCodeBlock(dedent(sampleCode))}
</div>
<div class="desktop-friendly-snack">
<div
data-snack-name="${name}"
data-snack-description="${description}"
data-snack-code="${encodedSampleCode}"
data-snack-platform="${platform}"
data-snack-supported-platforms="${supportedPlatforms}"
data-snack-preview="true"
style="overflow:hidden;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"
>
</div>
<div
data-snack-name="${name}"
data-snack-description="${description}"
data-snack-code="${encodedSampleCode}"
data-snack-platform="${platform}"
data-snack-supported-platforms="${supportedPlatforms}"
data-snack-preview="true"
style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"
>
</div>
</div>
`,
Expand All @@ -100,52 +83,7 @@ function SnackPlayer() {
// To embed.js script
const snackPlayerEmbed = u('html', {
value: dedent`
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prism-solarized-dark@1.0.1/prism-solarizeddark.css">
<script type="text/javascript">
// From:
(function() {
'use strict';
if (typeof document === 'undefined') {
// Not on browser
return;
}
document.addEventListener('DOMContentLoaded', init);

function init() {
var mobile = isMobile();

window.ExpoSnack && window.ExpoSnack.initialize();

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();
}
}
}

// Primitive mobile detection
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
);
}

})();
</script>
<script async src="https://snack.expo.io/embed.js"></script>
Copy link

@Simek Simek Oct 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have removed this script today, it is unnecessary in the case of RN website (I have tested the deployed site), because it has been added globally in config:

Also this script might be redundant overall, at the end of implementation, because the snackPlayerInitializer is performing similar operations to the original Snack embedded script.

`,
});

Expand Down
88 changes: 9 additions & 79 deletions website/plugins/remark-snackplayer/tests/output/output1.html
Original file line number Diff line number Diff line change
@@ -1,83 +1,13 @@
<div class="snack-player">
<div class="mobile-friendly-snack" style="display: none">
<pre class="language-jsx">
<code class="language-jsx">
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">YourApp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> justifyContent<span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span> alignItems<span class="token operator">:</span> <span class="token string">"center"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
Try editing me! 🎉
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> YourApp<span class="token punctuation">;</span>
</code>
</pre>
</div>
<div class="desktop-friendly-snack">
<div
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-platform="web"
data-snack-supported-platforms="ios,android,web"
data-snack-preview="true"
style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"
></div>
</div>
<div
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-platform="web"
data-snack-supported-platforms="ios,android,web"
data-snack-preview="true"
style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"
></div>
</div>

<script async src="https://snack.expo.io/embed.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/prism-solarized-dark@1.0.1/prism-solarizeddark.css"
/>
<script type="text/javascript">
// From:
(function() {
"use strict";
if (typeof document === "undefined") {
// Not on browser
return;
}
document.addEventListener("DOMContentLoaded", init);

function init() {
var mobile = isMobile();

window.ExpoSnack && window.ExpoSnack.initialize();

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();
}
}
}

// Primitive mobile detection
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
);
}
})();
</script>
Loading