From 5362c2cda25f64ce92ecc18198319c4a18df4e2e Mon Sep 17 00:00:00 2001 From: Endi Date: Thu, 6 Jun 2019 15:49:11 +0700 Subject: [PATCH] refactor(v2): move livecodeblock as plugin (#1566) * refactor(v2): move livecodeblock as plugin * tweak from rebase * nits * nits * dep --- .../package.json | 2 +- .../docusaurus-preset-classic/src/index.js | 7 ++- .../docusaurus-theme-classic/package.json | 4 -- .../src/theme/CodeBlock/index.js | 20 +------ .../docusaurus-theme-live-codeblock/README.md | 45 ++++++++++++++++ .../package.json | 25 +++++++++ .../src/index.js | 18 +++++++ .../src/theme/CodeBlock/index.js | 54 +++++++++++++++++++ .../src/theme/CodeBlock/styles.module.css | 8 +++ .../src/theme/Playground/index.js | 0 .../src/theme/Playground/styles.module.css | 0 packages/docusaurus/package.json | 6 +-- .../templates/classic/docs/live-coding.md | 14 ----- .../templates/classic/sidebars.json | 1 - website/docs/writing-docs.mdx | 24 +++++++-- website/docusaurus.config.js | 1 + yarn.lock | 51 +++++++++--------- 17 files changed, 208 insertions(+), 72 deletions(-) create mode 100644 packages/docusaurus-theme-live-codeblock/README.md create mode 100644 packages/docusaurus-theme-live-codeblock/package.json create mode 100644 packages/docusaurus-theme-live-codeblock/src/index.js create mode 100644 packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js create mode 100644 packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css rename packages/{docusaurus-theme-classic => docusaurus-theme-live-codeblock}/src/theme/Playground/index.js (100%) rename packages/{docusaurus-theme-classic => docusaurus-theme-live-codeblock}/src/theme/Playground/styles.module.css (100%) delete mode 100644 packages/docusaurus/templates/classic/docs/live-coding.md diff --git a/packages/docusaurus-plugin-content-docs/package.json b/packages/docusaurus-plugin-content-docs/package.json index b8212e0cbb..14dba922c4 100644 --- a/packages/docusaurus-plugin-content-docs/package.json +++ b/packages/docusaurus-plugin-content-docs/package.json @@ -20,7 +20,7 @@ "classnames": "^2.2.6", "react": "^16.8.4", "react-dom": "^16.8.4", - "react-router-config": "^5.0.0" + "react-router-config": "^5.0.1" }, "engines": { "node": ">=8" diff --git a/packages/docusaurus-preset-classic/src/index.js b/packages/docusaurus-preset-classic/src/index.js index c57a13b4a7..9c82f77e5b 100644 --- a/packages/docusaurus-preset-classic/src/index.js +++ b/packages/docusaurus-preset-classic/src/index.js @@ -6,10 +6,15 @@ */ module.exports = function preset(context, opts = {}) { + const {siteConfig = {}} = context; + const {themeConfig} = siteConfig; + const {algolia} = themeConfig; + return { themes: [ ['@docusaurus/theme-classic', opts.theme], - '@docusaurus/theme-search-algolia', + // Don't add this if algolia config is not defined + algolia && '@docusaurus/theme-search-algolia', ], plugins: [ ['@docusaurus/plugin-content-docs', opts.docs], diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 5a81f0bf7c..07dba721be 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -11,12 +11,8 @@ "@mdx-js/mdx": "^1.0.20", "@mdx-js/react": "^1.0.20", "classnames": "^2.2.6", - "docsearch.js": "^2.5.2", "infima": "0.2.0-alpha.1", "prism-react-renderer": "^0.1.6", - "react-live": "^2.1.2", - "react-loadable": "^5.5.0", - "react-loadable-visibility": "^2.5.1", "react-toggle": "^4.0.2" }, "peerDependencies": { diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js index 0ee5e3e80e..97faaeb94b 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js @@ -7,29 +7,11 @@ import React from 'react'; import classnames from 'classnames'; -import LoadableVisibility from 'react-loadable-visibility/react-loadable'; import Highlight, {defaultProps} from 'prism-react-renderer'; import nightOwlTheme from 'prism-react-renderer/themes/nightOwl'; -import Loading from '@theme/Loading'; import styles from './styles.module.css'; -/* Live playground is not small in size, lazy load it is better */ -const Playground = LoadableVisibility({ - loader: () => import('@theme/Playground'), - loading: Loading, -}); - -export default ({children, className: languageClassName, live, ...props}) => { - if (live) { - return ( - - ); - } +export default ({children, className: languageClassName}) => { const language = languageClassName && languageClassName.replace(/language-/, ''); return ( diff --git a/packages/docusaurus-theme-live-codeblock/README.md b/packages/docusaurus-theme-live-codeblock/README.md new file mode 100644 index 0000000000..48a3d1d67f --- /dev/null +++ b/packages/docusaurus-theme-live-codeblock/README.md @@ -0,0 +1,45 @@ +## Docusaurus Live Codeblock + +You can create live code editors with a code block `live` meta string. + +Install +```bash +npm i @docusaurus/theme-live-codeblock # or yarn add @docusaurus/theme-live-codeblock +``` + +Modify your `docusaurus.config.js` + +```diff +module.exports = { + ... ++ themes: ['@docusaurus/theme-live-codeblock'], + presets: ['@docusaurus/preset-classic'] + ... +} +``` + + +Example: + + ```jsx live + function Clock(props) { + const [date, setDate] = useState(new Date()); + useEffect(() => { + var timerID = setInterval(() => tick(), 1000); + + return function cleanup() { + clearInterval(timerID); + }; + }); + + function tick() { + setDate(new Date()); + } + + return ( +
+

It is {date.toLocaleTimeString()}.

+
+ ); + } + ``` \ No newline at end of file diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json new file mode 100644 index 0000000000..4e2b25268c --- /dev/null +++ b/packages/docusaurus-theme-live-codeblock/package.json @@ -0,0 +1,25 @@ +{ + "name": "@docusaurus/theme-live-codeblock", + "version": "2.0.0-alpha.18", + "description": "Docusaurus Live CodeBlock", + "main": "src/index.js", + "publishConfig": { + "access": "public" + }, + "license": "MIT", + "dependencies": { + "classnames": "^2.2.6", + "prism-react-renderer": "^0.1.6", + "react-live": "^2.1.2", + "react-loadable": "^5.5.0", + "react-loadable-visibility": "^2.5.1" + }, + "peerDependencies": { + "@docusaurus/core": "^2.0.0", + "react": "^16.8.4", + "react-dom": "^16.8.4" + }, + "engines": { + "node": ">=8" + } +} diff --git a/packages/docusaurus-theme-live-codeblock/src/index.js b/packages/docusaurus-theme-live-codeblock/src/index.js new file mode 100644 index 0000000000..6b6790b3ec --- /dev/null +++ b/packages/docusaurus-theme-live-codeblock/src/index.js @@ -0,0 +1,18 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const path = require('path'); + +module.exports = function() { + return { + name: 'docusaurus-theme-live-codeblock', + + getThemePath() { + return path.resolve(__dirname, './theme'); + }, + }; +}; diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js new file mode 100644 index 0000000000..0ee5e3e80e --- /dev/null +++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js @@ -0,0 +1,54 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import classnames from 'classnames'; +import LoadableVisibility from 'react-loadable-visibility/react-loadable'; +import Highlight, {defaultProps} from 'prism-react-renderer'; +import nightOwlTheme from 'prism-react-renderer/themes/nightOwl'; +import Loading from '@theme/Loading'; +import styles from './styles.module.css'; + +/* Live playground is not small in size, lazy load it is better */ +const Playground = LoadableVisibility({ + loader: () => import('@theme/Playground'), + loading: Loading, +}); + +export default ({children, className: languageClassName, live, ...props}) => { + if (live) { + return ( + + ); + } + const language = + languageClassName && languageClassName.replace(/language-/, ''); + return ( + + {({className, style, tokens, getLineProps, getTokenProps}) => ( + 
+          {tokens.map((line, i) => (
+            

+              {line.map((token, key) => (
+                
+              ))}
+            

+          ))}
+
+ )} + + ); +}; diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css new file mode 100644 index 0000000000..b6d81cf1f7 --- /dev/null +++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css @@ -0,0 +1,8 @@ +.codeBlock { + border-radius: 0; + font-size: inherit; + margin-bottom: 0; + overflow: hidden; + overflow-wrap: break-word; + white-space: pre-wrap; +} diff --git a/packages/docusaurus-theme-classic/src/theme/Playground/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js similarity index 100% rename from packages/docusaurus-theme-classic/src/theme/Playground/index.js rename to packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js diff --git a/packages/docusaurus-theme-classic/src/theme/Playground/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css similarity index 100% rename from packages/docusaurus-theme-classic/src/theme/Playground/styles.module.css rename to packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json index 71b6b775d5..a8bb3ad2da 100644 --- a/packages/docusaurus/package.json +++ b/packages/docusaurus/package.json @@ -61,9 +61,9 @@ "react-helmet": "^6.0.0-beta", "react-loadable": "^5.5.0", "react-loadable-ssr-addon": "^0.1.8", - "react-router": "^5.0.0", - "react-router-config": "^5.0.0", - "react-router-dom": "^5.0.0", + "react-router": "^5.0.1", + "react-router-config": "^5.0.1", + "react-router-dom": "^5.0.1", "semver": "^6.0.0", "shelljs": "^0.8.3", "static-site-generator-webpack-plugin": "^3.4.2", diff --git a/packages/docusaurus/templates/classic/docs/live-coding.md b/packages/docusaurus/templates/classic/docs/live-coding.md deleted file mode 100644 index cc1cbfd219..0000000000 --- a/packages/docusaurus/templates/classic/docs/live-coding.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: live-coding -title: Live Coding with React Live ---- - -```js live -var hello = 'We got live coding now'; -``` - -Have you ever used [React Live](https://react-live.kitten.sh)? Try it. Imagine your users play with your code _live_. Really don't know a better way to get your users' hands dirty than sharing a coding block with them. - -Docusaurus now supports live coding components in-house, powered by React Live. To see how they can be used for an enriched learning experience, check out our users who are already using it: - - diff --git a/packages/docusaurus/templates/classic/sidebars.json b/packages/docusaurus/templates/classic/sidebars.json index 2dacafb4d5..6dec5c265a 100644 --- a/packages/docusaurus/templates/classic/sidebars.json +++ b/packages/docusaurus/templates/classic/sidebars.json @@ -1,7 +1,6 @@ { "docs": { "Docusaurus": ["doc1", "doc2", "doc3"], - "Docusaurus Cool": ["live-coding"], "Utilities": ["style-guide"] }, "docs-other": { diff --git a/website/docs/writing-docs.mdx b/website/docs/writing-docs.mdx index 9c34322528..9e2fc2080d 100644 --- a/website/docs/writing-docs.mdx +++ b/website/docs/writing-docs.mdx @@ -9,7 +9,7 @@ Docusaurus 2 uses modern tooling to help you compose your interactive documentat In this section, we'd like to introduce you to the tools we've picked that we believe will help you build powerful documentation. Let us walk you through with an example. -**Note:** All the following content assumes you are using `docusaurus-plugin-content-docs` or `docusaurus-preset-classic` (which contains `docusaurus-plugin-content-docs`). +**Note:** All the following content assumes you are using `docusaurus-preset-classic`. ## Using Markdown @@ -190,9 +190,25 @@ console.log('Every repo must come with a mascot.'); **Work in Progress** Currently the Prism theme we use is [Night Owl](https://github.com/FormidableLabs/prism-react-renderer/blob/master/themes/nightOwl.js). We will support customized theme in a future version. -## Live Editor +## React Live Editor -You can create live code editors by creating a code block with `live` attached to the language meta string. +You can also create a react live editor by installing a plugin. + +```bash +npm i @docusaurus/theme-live-codeblock +``` + +Add it to your `docusaurus.config.js`. + +```diff +module.exports = { + ... ++ themes: ['@docusaurus/theme-live-codeblock'], + ... +} +``` + +Then create a code block with `live` attached to the language meta string. ```jsx live function Clock(props) { @@ -242,4 +258,4 @@ function Clock(props) { } ``` -**Work in Progress** The React Live component is rather big. We want to make it an opt-in by moving it to a plugin. +**Note** The React Live component is rather big in bundle size. It is an opt-in. diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 5370405ca3..dabb950239 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -94,6 +94,7 @@ module.exports = { copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, }, }, + themes: ['@docusaurus/theme-live-codeblock'], presets: [ [ '@docusaurus/preset-classic', diff --git a/yarn.lock b/yarn.lock index a4238fbc9a..1942f84c3f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -763,7 +763,7 @@ pirates "^4.0.0" source-map-support "^0.5.9" -"@babel/runtime@^7.1.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0": version "7.4.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ== @@ -4349,14 +4349,6 @@ create-react-context@0.2.2: fbjs "^0.8.0" gud "^1.0.0" -create-react-context@^0.2.2: - version "0.2.3" - resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3" - integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag== - dependencies: - fbjs "^0.8.0" - gud "^1.0.0" - cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" @@ -4964,7 +4956,7 @@ dns-txt@^2.0.2: dependencies: buffer-indexof "^1.0.0" -docsearch.js@^2.5.2, docsearch.js@^2.6.3: +docsearch.js@^2.6.3: version "2.6.3" resolved "https://registry.yarnpkg.com/docsearch.js/-/docsearch.js-2.6.3.tgz#57cb4600d3b6553c677e7cbbe6a734593e38625d" integrity sha512-GN+MBozuyz664ycpZY0ecdQE0ND/LSgJKhTLA0/v3arIS3S1Rpf2OJz6A35ReMsm91V5apcmzr5/kM84cvUg+A== @@ -9453,6 +9445,15 @@ min-document@^2.19.0: dependencies: dom-walk "^0.1.0" +mini-create-react-context@^0.3.0: + version "0.3.2" + resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189" + integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw== + dependencies: + "@babel/runtime" "^7.4.0" + gud "^1.0.0" + tiny-warning "^1.0.2" + mini-css-extract-plugin@^0.4.1: version "0.4.5" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.5.tgz#c99e9e78d54f3fa775633aee5933aeaa4e80719a" @@ -11558,36 +11559,36 @@ react-loadable@^5.5.0: dependencies: prop-types "^15.5.0" -react-router-config@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.0.0.tgz#3d7e298dc64479bf9e1cc77080b8778e9a8d966c" - integrity sha512-si94cIg3HRXgwZB4vJGW6xkxOTMwCe1BXyBjkLstqZ+1rpqqAvo280BeQ8ZjIyYgiM/TDOa5Yu+HC4swUwri1w== +react-router-config@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.0.1.tgz#e6663010f42aa5e39c2f21412d8f958f6866e48a" + integrity sha512-dgM4+aW08eMWJYnmYWRvaArOrvwdl440W2m3y6IcGUSizXD5BTg/OcJ//z8kTiHnLG+uOwXRiCnKjWQ7IkvNnA== dependencies: "@babel/runtime" "^7.1.2" -react-router-dom@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073" - integrity sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ== +react-router-dom@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be" + integrity sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA== dependencies: "@babel/runtime" "^7.1.2" history "^4.9.0" loose-envify "^1.3.1" prop-types "^15.6.2" - react-router "5.0.0" + react-router "5.0.1" tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-router@5.0.0, react-router@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.0.tgz#349863f769ffc2fa10ee7331a4296e86bc12879d" - integrity sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA== +react-router@5.0.1, react-router@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f" + integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg== dependencies: "@babel/runtime" "^7.1.2" - create-react-context "^0.2.2" history "^4.9.0" hoist-non-react-statics "^3.1.0" loose-envify "^1.3.1" + mini-create-react-context "^0.3.0" path-to-regexp "^1.7.0" prop-types "^15.6.2" react-is "^16.6.0" @@ -13465,7 +13466,7 @@ tiny-lr@^1.1.1: object-assign "^4.1.0" qs "^6.4.0" -tiny-warning@^1.0.0: +tiny-warning@^1.0.0, tiny-warning@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28" integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==