refactor(v2): move livecodeblock as plugin (#1566)

* refactor(v2): move livecodeblock as plugin

* tweak from rebase

* nits

* nits

* dep

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"

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],

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": {

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 */
+export default ({children, className: languageClassName}) => {
-const Playground = LoadableVisibility({
-  loader: () => import('@theme/Playground'),
-  loading: Loading,
-});
-
-export default ({children, className: languageClassName, live, ...props}) => {
-  if (live) {
-    return (
-      <Playground
-        scope={{...React}}
-        code={children.trim()}
-        theme={nightOwlTheme}
-        {...props}
-      />
-    );
-  }
   const language =
     languageClassName && languageClassName.replace(/language-/, '');
   return (

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 (
+        <div>
+          <h2>It is {date.toLocaleTimeString()}.</h2>
+        </div>
+      );
+    }
+    ```

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"
+  }
+}

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');
+    },
+  };
+};

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 (
+      <Playground
+        scope={{...React}}
+        code={children.trim()}
+        theme={nightOwlTheme}
+        {...props}
+      />
+    );
+  }
+  const language =
+    languageClassName && languageClassName.replace(/language-/, '');
+  return (
+    <Highlight
+      {...defaultProps}
+      theme={nightOwlTheme}
+      code={children.trim()}
+      language={language}>
+      {({className, style, tokens, getLineProps, getTokenProps}) => (
+        <pre className={classnames(className, styles.codeBlock)} style={style}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({line, key: i})}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({token, key})} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+};

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;
+}

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": "^5.0.1",
-    "react-router-config": "^5.0.0",
+    "react-router-config": "^5.0.1",
-    "react-router-dom": "^5.0.0",
+    "react-router-dom": "^5.0.1",
     "semver": "^6.0.0",
     "shelljs": "^0.8.3",
     "static-site-generator-webpack-plugin": "^3.4.2",

packages/docusaurus/templates/classic/docs/live-coding.md

@@ -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:
-
-<!-- TODO: add links to sites who uses this feature creatively -->

packages/docusaurus/templates/classic/sidebars.json

@@ -1,7 +1,6 @@
 {
   "docs": {
     "Docusaurus": ["doc1", "doc2", "doc3"],
-    "Docusaurus Cool": ["live-coding"],
     "Utilities": ["style-guide"]
   },
   "docs-other": {

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.

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',

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:
+react-router-config@^5.0.1:
-  version "5.0.0"
+  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.0.0.tgz#3d7e298dc64479bf9e1cc77080b8778e9a8d966c"
+  resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.0.1.tgz#e6663010f42aa5e39c2f21412d8f958f6866e48a"
-  integrity sha512-si94cIg3HRXgwZB4vJGW6xkxOTMwCe1BXyBjkLstqZ+1rpqqAvo280BeQ8ZjIyYgiM/TDOa5Yu+HC4swUwri1w==
+  integrity sha512-dgM4+aW08eMWJYnmYWRvaArOrvwdl440W2m3y6IcGUSizXD5BTg/OcJ//z8kTiHnLG+uOwXRiCnKjWQ7IkvNnA==
   dependencies:
     "@babel/runtime" "^7.1.2"
 
-react-router-dom@^5.0.0:
+react-router-dom@^5.0.1:
-  version "5.0.0"
+  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
-  integrity sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==
+  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:
+react-router@5.0.1, react-router@^5.0.1:
-  version "5.0.0"
+  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.0.tgz#349863f769ffc2fa10ee7331a4296e86bc12879d"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f"
-  integrity sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==
+  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==