feat(docz-core): add playground code parse section

examples/basic/src/components/Alert.mdx

@@ -1,4 +1,4 @@
-import { doc } from 'docz'
+import { doc, Playground } from 'docz'
 import { Alert } from './Alert'
 
 export const meta = doc('Alert')
@@ -8,11 +8,15 @@ export const meta = doc('Alert')
 
 ## Basic usage
 
-<Alert>Some message</Alert>
+<Playground>
+  <Alert>Other message</Alert>
+</Playground>
 
 ## Using different kinds
 
-<Alert>Some message</Alert>
-<Alert kind="positive">Some message</Alert>
-<Alert kind="negative">Some message</Alert>
-<Alert kind="warning">Some message</Alert>
+<Playground>
+  <Alert>Some message</Alert>
+  <Alert kind="positive">Some message</Alert>
+  <Alert kind="negative">Some message</Alert>
+  <Alert kind="warning">Some message</Alert>
+</Playground>

examples/basic/src/components/Button.mdx

@@ -1,4 +1,4 @@
-import { doc } from 'docz'
+import { doc, Playground } from 'docz'
 import { Button } from './Button'
 
 export const meta = doc('Button')
@@ -8,4 +8,6 @@ export const meta = doc('Button')
 
 ## Basic usage
 
-<Button>Click me</Button>
+<Playground>
+  <Button>Click me</Button>
+</Playground>

packages/docz-core/librc.js

@@ -1,4 +1,5 @@
 const copy = require('rollup-plugin-cpy')
+const pkg = require('./package.json')
 
 module.exports = {
   plugins: [

packages/docz-core/package.json

@@ -38,13 +38,15 @@
     "fast-glob": "^2.2.0",
     "file-loader": "^1.1.11",
     "friendly-errors-webpack-plugin": "^1.7.0",
+    "hast-util-to-string": "^1.0.1",
     "html-webpack-plugin": "^3.2.0",
     "json-stringify-pretty-compact": "^1.1.0",
     "koa-connect": "^2.0.1",
     "koa-mount": "^3.0.0",
     "koa-static": "^4.0.2",
     "load-cfg": "^0.0.1",
     "lodash.get": "^4.4.2",
+    "node-prismjs": "^0.1.1",
     "prettier": "^1.12.0",
     "react-hot-loader": "4.1.2",
     "remark-parse": "^5.0.0",
@@ -56,6 +58,7 @@
     "unified": "^6.2.0",
     "unist-util-find": "^1.0.1",
     "unist-util-is": "^2.1.2",
+    "unist-util-visit": "^1.3.1",
     "url-loader": "^1.0.1",
     "webpack": "^4.7.0",
     "webpack-chain": "^4.6.0",

packages/docz-core/src/Entry.ts

@@ -19,6 +19,7 @@ const parseMdx = (file: string) => {
 
   return mdx(tree)
 }
+
 const hasDoczImported = (node: any) =>
   is('import', node) && /docz/.test(node.value)
 

packages/docz-core/src/commands/dev.ts

@@ -3,9 +3,11 @@ import chokidar from 'chokidar'
 import del from 'del'
 
 import * as paths from '../config/paths'
+import { Config } from './args'
+
 import { Entries } from '../Entries'
 import { webpack } from '../bundlers'
-import { Config } from './args'
+import { playgroundHast } from '../hast/playground-plugin'
 
 process.env.BABEL_ENV = process.env.BABEL_ENV || 'development'
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
@@ -49,7 +51,7 @@ const INITIAL_CONFIG = {
   paths,
   plugins: [],
   mdPlugins: [],
-  hastPlugins: [],
+  hastPlugins: [playgroundHast],
 }
 
 export const dev = async (args: Config) => {

packages/docz-core/src/hast/playground-plugin.ts

@@ -0,0 +1,26 @@
+import visit from 'unist-util-visit'
+import prism from 'node-prismjs'
+import nodeToString from 'hast-util-to-string'
+
+const hasOpenTag = (node: any) => /^\<Playground/.test(node.value)
+
+export const playgroundHast = () => (tree: any, file: any) => {
+  visit(tree, 'jsx', visitor)
+
+  function visitor(node: any, idx: any, parent: any): void {
+    if (!hasOpenTag(node)) return
+
+    const code = nodeToString(node)
+    const html = prism.highlight(code, prism.languages.jsx)
+
+    const codeComponent = `(
+      <pre className="react-prism language-jsx">
+        <code dangerouslySetInnerHTML={{ __html: \`${html}\` }} />
+      </pre>
+    )`
+
+    node.value = node.value
+      .replace(/^\<Playground/, `<Playground __code={${codeComponent}}`)
+      .replace(/^\<Playground/, '<Playground components={components}')
+  }
+}

packages/docz-core/src/types.d.ts

@@ -3,8 +3,11 @@ declare module '@mdx-js/mdx'
 declare module 'chokidar'
 declare module '@sindresorhus/slugify'
 declare module 'unified'
-declare module 'unist-util-find'
 declare module 'unist-util-is'
+declare module 'unist-util-visit'
+declare module 'unist-util-find'
+declare module 'hast-util-to-string'
+declare module 'node-prismjs'
 declare module 'remark-parse'
 declare module 'to-vfile'
 declare module 'art-template'

packages/docz-core/src/utils/format.ts

@@ -1,8 +1,15 @@
 import * as prettier from 'prettier'
 
-export const format = (code: string): string =>
-  prettier.format(code, {
-    semi: false,
-    singleQuote: true,
-    trailingComma: 'all',
-  })
+export const format = (code: string): string => {
+  try {
+    return prettier.format(code, {
+      semi: false,
+      singleQuote: true,
+      trailingComma: 'all',
+    })
+  } catch (err) {
+    console.log(err)
+    process.exit(1)
+    return ''
+  }
+}

packages/docz/src/Doc.ts

@@ -7,7 +7,7 @@ export const isFn = (value: any): boolean => typeof value === 'function'
 export const safeUrl = (value: string) => encodeURI(value.replace(/\s/g, ''))
 
 export type MDXComponent = ComponentType<{
-  components?: Record<string, ComponentType>
+  components?: Record<string, ComponentType<any>>
 }>
 
 export interface DocConstructorArgs {

packages/docz/src/Docs.tsx → packages/docz/src/components/Docs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
-import { Doc, DocObj } from './Doc'
-import { DocMap } from './theme'
+import { Doc, DocObj } from '../Doc'
+import { DocMap } from '../theme'
 
 export const isFn = (value: any): boolean => typeof value === 'function'
 export const docsContext = React.createContext({} as DocMap)

packages/docz/src/components/Playground.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { Fragment, ComponentType, SFC } from 'react'
+
+import { isFn } from '../Doc'
+
+export type RenderComponent = ComponentType<{
+  component: JSX.Element
+  code: string
+}>
+
+export interface PlaygroundProps {
+  __code: string
+  children: any
+  components: {
+    [key: string]: ComponentType<any>
+  }
+}
+
+const DefaultRender: RenderComponent = ({ component, code }) => (
+  <Fragment>
+    {component}
+    {code}
+  </Fragment>
+)
+
+export const Playground: SFC<PlaygroundProps> = ({
+  components: { Render = DefaultRender },
+  children,
+  __code,
+}) => (
+  <Render component={isFn(children) ? children() : children} code={__code} />
+)

packages/docz/src/index.ts

@@ -1,4 +1,5 @@
 export { Doc, DocObj, Entry } from './Doc'
 export { doc } from './Doc'
-export { Docs } from './Docs'
 export { theme } from './theme'
+export { Docs } from './components/Docs'
+export { Playground, RenderComponent } from './components/Playground'

packages/docz/src/theme.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Component, ComponentType as CT } from 'react'
 import Promise from 'bluebird'
 
-import { docsContext } from './Docs'
+import { docsContext } from './components/Docs'
 import { Doc, DocObj, Entry } from './Doc'
 
 export interface MSXImport {

packages/docz/src/types.d.ts

@@ -1,2 +1,2 @@
 declare module '@sindresorhus/slugify'
-declare module 'pascalcase''
+declare module 'pascalcase'

yarn.lock

@@ -2371,6 +2371,14 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+clipboard@^1.5.5:
+  version "1.7.1"
+  resolved "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b"
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 clipboardy@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz#0526361bf78724c1f20be248d428e365433c07ef"
@@ -3066,6 +3074,10 @@ delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -4076,6 +4088,12 @@ globby@^7.1.1:
     pify "^3.0.0"
     slash "^1.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  dependencies:
+    delegate "^3.1.2"
+
 got@^5.0.0:
   version "5.7.1"
   resolved "https://registry.npmjs.org/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
@@ -4215,6 +4233,10 @@ hasha@^3.0.0:
   dependencies:
     is-stream "^1.0.1"
 
+hast-util-to-string@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.1.tgz#b28055cdca012d3c8fd048757c8483d0de0d002c"
+
 [email protected], hawk@~3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
@@ -5800,6 +5822,12 @@ node-pre-gyp@^0.9.0:
     semver "^5.3.0"
     tar "^4"
 
+node-prismjs@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/node-prismjs/-/node-prismjs-0.1.1.tgz#e9dac3304981501e328acdbc74361830b3da1eb3"
+  dependencies:
+    prismjs "~1.6.0"
+
 node-status-codes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
@@ -6324,6 +6352,12 @@ pretty-time@^1.0.0:
     is-number "^5.0.0"
     nanoseconds "^1.0.0"
 
+prismjs@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365"
+  optionalDependencies:
+    clipboard "^1.5.5"
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.npmjs.org/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -7120,6 +7154,10 @@ schema-utils@^0.4.3, schema-utils@^0.4.4, schema-utils@^0.4.5:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
@@ -7731,6 +7769,10 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-emitter@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -8122,6 +8164,12 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
   dependencies:
     unist-util-is "^2.1.1"
 
+unist-util-visit@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.3.1.tgz#c019ac9337a62486be58531bc27e7499ae7d55c7"
+  dependencies:
+    unist-util-is "^2.1.1"
+
 universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"