From 77f22ea5c8e22e8fbea698b84ad6433694fe6396 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 8 Nov 2017 21:07:03 +0000 Subject: [PATCH 1/6] WIP upgrade to new gatsby-remark-code-repls --- gatsby-config.js | 15 ++-- gatsby-node.js | 18 ----- .../gatsby-remark-babel-repl-link/index.js | 68 ------------------- .../package.json | 4 -- .../gatsby-remark-codepen-examples/index.js | 64 ----------------- .../package.json | 4 -- src/templates/codepen-example.js | 14 +--- 7 files changed, 9 insertions(+), 178 deletions(-) delete mode 100644 plugins/gatsby-remark-babel-repl-link/index.js delete mode 100644 plugins/gatsby-remark-babel-repl-link/package.json delete mode 100644 plugins/gatsby-remark-codepen-examples/index.js delete mode 100644 plugins/gatsby-remark-codepen-examples/package.json diff --git a/gatsby-config.js b/gatsby-config.js index 35a5bf445..78d7fc5ac 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -6,6 +6,8 @@ 'use strict'; +const {join} = require('path'); + module.exports = { siteMetadata: { title: 'React: A JavaScript library for building user interfaces', @@ -57,15 +59,12 @@ module.exports = { }, 'gatsby-remark-autolink-headers', { - resolve: 'gatsby-remark-codepen-examples', + resolve: 'gatsby-remark-code-repls', options: { - directory: 'examples', - }, - }, - { - resolve: 'gatsby-remark-babel-repl-link', - options: { - directory: 'examples', + defaultText: 'Try it on CodePen', + directory: `${__dirname}/examples/`, + redirectTemplate: `${__dirname}/src/templates/codepen-example.js`, + target: '_blank', }, }, 'gatsby-remark-use-jsx', diff --git a/gatsby-node.js b/gatsby-node.js index ca812c780..41c5becb9 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -167,24 +167,6 @@ exports.createPages = async ({graphql, boundActionCreators}) => { redirectInBrowser: true, toPath: newestBlogNode.fields.slug, }); - - // Create Codepen redirects. - // These use the Codepen prefill API to JIT-create Pens. - // https://blog.codepen.io/documentation/api/prefill/ - const files = await recursiveReaddir('./examples'); - files.forEach(file => { - const slug = file.substring(0, file.length - 3); // Trim extension - const code = readFileSync(file, 'utf8'); - - createPage({ - path: slug, - component: resolve('./src/templates/codepen-example.js'), - context: { - code, - slug, - }, - }); - }); }; // Parse date information out of blog post filename. diff --git a/plugins/gatsby-remark-babel-repl-link/index.js b/plugins/gatsby-remark-babel-repl-link/index.js deleted file mode 100644 index e3f13e20c..000000000 --- a/plugins/gatsby-remark-babel-repl-link/index.js +++ /dev/null @@ -1,68 +0,0 @@ -const {existsSync, readFileSync} = require('fs'); -const LZString = require('lz-string'); -const {join} = require('path'); -const map = require('unist-util-map'); - -const PROTOCOL = 'babel-repl://'; - -// Matches compression used in Babel REPL -// https://github.com/babel/website/blob/master/js/repl/UriUtils.js -const compress = string => - LZString.compressToBase64(string) - .replace(/\+/g, '-') // Convert '+' to '-' - .replace(/\//g, '_') // Convert '/' to '_' - .replace(/=+$/, ''); // Remove ending '=' - -module.exports = ({markdownAST}, {directory}) => { - map(markdownAST, (node, index, parent) => { - if (!directory.endsWith('/')) { - directory += '/'; - } - - if (node.type === 'link' && node.url.startsWith(PROTOCOL)) { - let filePath = node.url.replace(PROTOCOL, directory); - if (!filePath.endsWith('.js')) { - filePath += '.js'; - } - filePath = join(__dirname, '../..', filePath); - - // Verify that the specified example file exists. - if (!existsSync(filePath)) { - console.error( - `Invalid Babel REPL link specified; no such file "${filePath}"`, - ); - process.exit(1); - } - - const code = compress(readFileSync(filePath, 'utf8')); - const href = `https://babeljs.io/repl/#?presets=react&code_lz=${code}`; - const text = node.children[0].value; - - const anchorOpenNode = { - type: 'html', - value: ``, - }; - - const textNode = { - type: 'text', - value: text, - }; - - const anchorCloseNode = { - type: 'html', - value: '', - }; - - parent.children.splice( - index, - 1, - anchorOpenNode, - textNode, - anchorCloseNode, - ); - } - - // No change - return node; - }); -}; diff --git a/plugins/gatsby-remark-babel-repl-link/package.json b/plugins/gatsby-remark-babel-repl-link/package.json deleted file mode 100644 index a0318cc57..000000000 --- a/plugins/gatsby-remark-babel-repl-link/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "gatsby-remark-babel-repl-link", - "version": "0.0.1" -} \ No newline at end of file diff --git a/plugins/gatsby-remark-codepen-examples/index.js b/plugins/gatsby-remark-codepen-examples/index.js deleted file mode 100644 index 7e4ff3327..000000000 --- a/plugins/gatsby-remark-codepen-examples/index.js +++ /dev/null @@ -1,64 +0,0 @@ -const {existsSync} = require('fs'); -const {join} = require('path'); -const map = require('unist-util-map'); - -const CODEPEN_PROTOCOL = 'codepen://'; -const DEFAULT_LINK_TEXT = 'Try it on CodePen'; - -module.exports = ({markdownAST}, {directory}) => { - map(markdownAST, (node, index, parent) => { - if (!directory.startsWith('/')) { - directory = `/${directory}`; - } - - if (!directory.endsWith('/')) { - directory = `${directory}/`; - } - - // eg convert - // from: [](codepen:introducing-jsx) - // to: Try it on CodePen - // from: [Try the Hello World example on CodePen](codepen:hello-world) - // to: Try the Hello World example on CodePen - if (node.type === 'link' && node.url.startsWith(CODEPEN_PROTOCOL)) { - const href = node.url.replace(CODEPEN_PROTOCOL, directory); - const text = - node.children.length === 0 ? DEFAULT_LINK_TEXT : node.children[0].value; - - // Verify that the specified example file exists. - const filePath = join(__dirname, `../../${href}.js`); - if (!existsSync(filePath)) { - console.error( - `Invalid Codepen link specified; no such file "${filePath}"`, - ); - process.exit(1); - } - - const anchorOpenNode = { - type: 'html', - value: ``, - }; - - const textNode = { - type: 'text', - value: text, - }; - - const anchorCloseNode = { - type: 'html', - value: '', - }; - - parent.children.splice( - index, - 1, - anchorOpenNode, - textNode, - anchorCloseNode, - ); - } - - // No change - return node; - }); -}; diff --git a/plugins/gatsby-remark-codepen-examples/package.json b/plugins/gatsby-remark-codepen-examples/package.json deleted file mode 100644 index f6017a58d..000000000 --- a/plugins/gatsby-remark-codepen-examples/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "gatsby-remark-codepen-examples", - "version": "0.0.1" -} \ No newline at end of file diff --git a/src/templates/codepen-example.js b/src/templates/codepen-example.js index 615b8f7ef..da278db58 100644 --- a/src/templates/codepen-example.js +++ b/src/templates/codepen-example.js @@ -34,17 +34,7 @@ class CodepenExample extends Component { } render() { - // Codepen configuration. - // https://blog.codepen.io/documentation/api/prefill/ - const payload = JSON.stringify({ - editors: '0010', - html: '
', - js: this.props.pathContext.code, - js_external: EXTERNALS.join(';'), - js_pre_processor: 'babel', - layout: 'left', - title: 'reactjs.org example', - }); + const { action, payload } = this.props.pathContext return ( @@ -54,7 +44,7 @@ class CodepenExample extends Component { ref={form => { this.codepenForm = form; }} - action="https://codepen.io/pen/define" + action={action} method="POST"> From ef380d772cbd5bd07510a7900578709e8762a8d4 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 8 Nov 2017 21:23:13 +0000 Subject: [PATCH 2/6] babel-repl:// protocol changed to babel:// --- content/docs/hello-world.md | 2 +- content/docs/jsx-in-depth.md | 2 +- content/docs/react-without-jsx.md | 2 +- content/home/examples/a-simple-component.md | 2 +- content/tutorial/tutorial.md | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 465eb9819..be30b5b9b 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -31,4 +31,4 @@ The next few sections will gradually introduce you to using React. We will exami React is a JavaScript library, and so it assumes you have a basic understanding of the JavaScript language. If you don't feel very confident, we recommend [refreshing your JavaScript knowledge](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) so you can follow along more easily. -We also use some of the ES6 syntax in the examples. We try to use it sparingly because it's still relatively new, but we encourage you to get familiar with [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel-repl://es5-syntax-example) to check what ES6 code compiles to. +We also use some of the ES6 syntax in the examples. We try to use it sparingly because it's still relatively new, but we encourage you to get familiar with [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to. diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md index 3ba88e390..68ba9e95c 100644 --- a/content/docs/jsx-in-depth.md +++ b/content/docs/jsx-in-depth.md @@ -47,7 +47,7 @@ React.createElement( ) ``` -If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel-repl://jsx-simple-example). +If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example). ## Specifying The React Element Type diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 2c1f0d149..85cdba45f 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -38,7 +38,7 @@ ReactDOM.render( ); ``` -If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel-repl://jsx-simple-example). +If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example). The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components. diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md index 1157ef2bd..ea2a1535a 100644 --- a/content/home/examples/a-simple-component.md +++ b/content/home/examples/a-simple-component.md @@ -5,4 +5,4 @@ order: 0 React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`. -**JSX is optional and not required to use React.** Try the [Babel REPL](babel-repl://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step. +**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step. diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 5dcd5b0eb..697ca1cce 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -28,7 +28,7 @@ Once you get a little familiar with the game, feel free to close that tab, as we We'll assume some familiarity with HTML and JavaScript, but you should be able to follow along even if you haven't used them before. -If you need a refresher on JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel-repl://es5-syntax-example) to check what ES6 code compiles to. +If you need a refresher on JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to. ### How to Follow Along @@ -129,7 +129,7 @@ return React.createElement('div', {className: 'shopping-list'}, ); ``` -[See full expanded version.](babel-repl://tutorial-expanded-version) +[See full expanded version.](babel://tutorial-expanded-version) If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it directly in this tutorial. Instead, we will keep using JSX. From 1ab70d014d3031b122ee13f6f052511ca29aa7bf Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 9 Nov 2017 08:49:13 +0000 Subject: [PATCH 3/6] Updated gatsby-config to reflect minor plug-in changes --- gatsby-config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/gatsby-config.js b/gatsby-config.js index 78d7fc5ac..14b45809f 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -63,6 +63,10 @@ module.exports = { options: { defaultText: 'Try it on CodePen', directory: `${__dirname}/examples/`, + externals: [ + `//unpkg.com/react/umd/react.development.js`, + `//unpkg.com/react-dom/umd/react-dom.development.js`, + ], redirectTemplate: `${__dirname}/src/templates/codepen-example.js`, target: '_blank', }, From 57b5d4d5dc2a243ded9ec268e0d3f2e112b219d0 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 9 Nov 2017 18:30:08 +0000 Subject: [PATCH 4/6] Installed new gatsby-remark-code-repls --- package.json | 1 + yarn.lock | 30 ++++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/package.json b/package.json index e888cb43f..29fd6a628 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "gatsby-plugin-sharp": "^1.6.2", "gatsby-plugin-twitter": "^1.0.10", "gatsby-remark-autolink-headers": "^1.4.4", + "gatsby-remark-code-repls": "^1.0.1", "gatsby-remark-copy-linked-files": "^1.5.2", "gatsby-remark-images": "^1.5.11", "gatsby-remark-prismjs": "^1.2.1", diff --git a/yarn.lock b/yarn.lock index e13f17a1c..dfc4b9937 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4052,6 +4052,15 @@ gatsby-remark-autolink-headers@^1.4.4: mdast-util-to-string "^1.0.2" unist-util-visit "^1.1.1" +gatsby-remark-code-repls@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/gatsby-remark-code-repls/-/gatsby-remark-code-repls-1.0.1.tgz#0d23518b55670b0ff0cee855d3cd535e4457097c" + dependencies: + babel-runtime "^6.26.0" + lz-string "^1.4.4" + recursive-readdir-synchronous "^0.0.3" + unist-util-map "^1.0.3" + gatsby-remark-copy-linked-files@^1.5.2: version "1.5.18" resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.18.tgz#ff7932922fd1b1696695bb174f8ecc743097d9a0" @@ -6174,6 +6183,10 @@ lpad-align@^1.0.1: longest "^1.0.0" meow "^3.3.0" +lru-cache@2: + version "2.7.3" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952" + lru-cache@^4.0.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" @@ -6485,6 +6498,13 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a" +minimatch@0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-0.3.0.tgz#275d8edaac4f1bb3326472089e7949c8394699dd" + dependencies: + lru-cache "2" + sigmund "~1.0.0" + "minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" @@ -8257,6 +8277,12 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" +recursive-readdir-synchronous@^0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/recursive-readdir-synchronous/-/recursive-readdir-synchronous-0.0.3.tgz#d5e5a096ad56cf9666241c22a30b4f338bb7ed88" + dependencies: + minimatch "0.3.0" + recursive-readdir@2.2.1, recursive-readdir@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99" @@ -9096,6 +9122,10 @@ sift@^3.2.6: version "3.3.12" resolved "https://registry.yarnpkg.com/sift/-/sift-3.3.12.tgz#4f5cdf16af3db32afa04ab25297b0e20ad98294a" +sigmund@~1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590" + signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" From e8f048bb3b8ea14b5c291cbbeb73edc571262d71 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 9 Nov 2017 18:32:06 +0000 Subject: [PATCH 5/6] Prettier --- src/templates/codepen-example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/codepen-example.js b/src/templates/codepen-example.js index da278db58..32a04aa47 100644 --- a/src/templates/codepen-example.js +++ b/src/templates/codepen-example.js @@ -34,7 +34,7 @@ class CodepenExample extends Component { } render() { - const { action, payload } = this.props.pathContext + const {action, payload} = this.props.pathContext; return ( From 04ad4fd392f762108239f1de819f0f573a70e476 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 9 Nov 2017 22:34:19 +0000 Subject: [PATCH 6/6] Upgraded to gatsby-remark-code-repls@1.0.2 --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 29fd6a628..341d5f25c 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "gatsby-plugin-sharp": "^1.6.2", "gatsby-plugin-twitter": "^1.0.10", "gatsby-remark-autolink-headers": "^1.4.4", - "gatsby-remark-code-repls": "^1.0.1", + "gatsby-remark-code-repls": "^1.0.2", "gatsby-remark-copy-linked-files": "^1.5.2", "gatsby-remark-images": "^1.5.11", "gatsby-remark-prismjs": "^1.2.1", diff --git a/yarn.lock b/yarn.lock index dfc4b9937..63ad023ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4052,9 +4052,9 @@ gatsby-remark-autolink-headers@^1.4.4: mdast-util-to-string "^1.0.2" unist-util-visit "^1.1.1" -gatsby-remark-code-repls@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/gatsby-remark-code-repls/-/gatsby-remark-code-repls-1.0.1.tgz#0d23518b55670b0ff0cee855d3cd535e4457097c" +gatsby-remark-code-repls@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/gatsby-remark-code-repls/-/gatsby-remark-code-repls-1.0.2.tgz#2a6df584d4c60388aa4c1140d9693c40b3d8d561" dependencies: babel-runtime "^6.26.0" lz-string "^1.4.4"