feat: add support to disable codesandbox

packages/docz-core/src/bundlers/webpack/loaders.ts

@@ -100,8 +100,8 @@ export const mdx = (config: Config, args: Args) => {
     .loader(require.resolve('@mdx-js/loader'))
     .options({
       ...mdxConfig.config,
-      mdPlugins: mdPlugins.concat(mdxConfig.remarkPlugins),
-      hastPlugins: hastPlugins.concat(mdxConfig.rehypePlugins),
+      mdPlugins: mdPlugins.concat(mdxConfig.remarkPlugins()),
+      hastPlugins: hastPlugins.concat(mdxConfig.rehypePlugins(args)),
     })
 }
 

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

@@ -66,6 +66,7 @@ export interface Argv {
   hotPort: number
   hotHost: string
   native: boolean
+  codeSandbox: boolean
   /* template args */
   title: string
   description: string
@@ -193,4 +194,8 @@ export const args = (env: Env) => (yargs: any) => {
     type: 'boolean',
     default: getEnv('docz.native', false),
   })
+  yargs.positional('codeSandbox', {
+    type: 'boolean',
+    default: getEnv('docz.codeSandbox', true),
+  })
 }

packages/docz-core/src/config/mdx.ts

@@ -4,11 +4,15 @@ import remarkDocz from 'remark-docz'
 import rehypeDocz from 'rehype-docz'
 
 import * as paths from './paths'
+import { Config } from '../commands/args'
 
 export const config = {
   type: 'yaml',
   marker: '-',
 }
 
-export const remarkPlugins = [matter, remarkDocz]
-export const rehypePlugins = [rehypeDocz(paths.root), slug]
+export const remarkPlugins = () => [matter, remarkDocz]
+export const rehypePlugins = (config: Config) => [
+  rehypeDocz(paths.root, config.codeSandbox),
+  slug,
+]

packages/docz-core/src/states/config.ts

@@ -17,6 +17,7 @@ interface Payload {
   version: string | null
   repository: string | null
   native: boolean
+  codeSandbox: boolean
 }
 
 const getInitialConfig = (config: Config): Payload => {
@@ -32,6 +33,7 @@ const getInitialConfig = (config: Config): Payload => {
     version: get(pkg, 'version'),
     repository: repoUrl,
     native: config.native,
+    codeSandbox: config.codeSandbox,
   }
 }
 

packages/docz-theme-default/src/components/ui/Render/index.tsx

@@ -228,9 +228,10 @@ export class Render extends Component<RenderComponentProps, RenderState> {
         <Action onClick={this.handleRefresh} title="Refresh playground">
           <Refresh width={15} />
         </Action>
-        {codesandbox !== 'undefined' && (
-          <ThemeConfig>
-            {config => (
+        <ThemeConfig>
+          {config =>
+            config.codeSandbox &&
+            codesandbox !== 'undefined' && (
               <ActionLink
                 href={this.codesandboxUrl(config.native)}
                 target="_blank"
@@ -238,9 +239,9 @@ export class Render extends Component<RenderComponentProps, RenderState> {
               >
                 <CodeSandboxLogo style={{ height: '100%' }} width={15} />
               </ActionLink>
-            )}
-          </ThemeConfig>
-        )}
+            )
+          }
+        </ThemeConfig>
         <Clipboard content={showing === 'jsx' ? this.state.code : this.html} />
         <Action
           onClick={this.handleToggle}

packages/rehype-docz/src/index.ts

@@ -13,7 +13,8 @@ const addPropsOnPlayground = async (
   idx: number,
   scopes: string[],
   imports: string[],
-  cwd: string
+  cwd: string,
+  useCodeSandbox: boolean
 ) => {
   const name = jsx.componentName(node.value)
   const tagOpen = new RegExp(`^\\<${name}`)
@@ -23,24 +24,36 @@ const addPropsOnPlayground = async (
     const code = formatted.slice(1, Infinity)
     const scope = `{props,${scopes.join(',')}}`
     const child = jsx.sanitizeCode(jsx.removeTags(code))
-    const codesandBoxInfo = await getSandboxImportInfo(child, imports, cwd)
 
     node.value = node.value.replace(
       tagOpen,
-      `<${name} __position={${idx}} __codesandbox={\`${codesandBoxInfo}\`} __code={\`${child}\`} __scope={${scope}}`
+      `<${name} __position={${idx}} __code={\`${child}\`} __scope={${scope}}`
     )
+
+    if (useCodeSandbox) {
+      const codesandBoxInfo = await getSandboxImportInfo(child, imports, cwd)
+
+      node.value = node.value.replace(
+        tagOpen,
+        `<${name} __codesandbox={\`${codesandBoxInfo}\`}`
+      )
+    }
   }
 }
 
 const addComponentsProps = (
   scopes: string[],
   imports: string[],
-  cwd: string
+  cwd: string,
+  useCodeSandbox: boolean
 ) => async (node: any, idx: number) => {
-  await addPropsOnPlayground(node, idx, scopes, imports, cwd)
+  await addPropsOnPlayground(node, idx, scopes, imports, cwd, useCodeSandbox)
 }
 
-export default (root: string) => () => (tree: any, fileInfo: any) => {
+export default (root: string, useCodeSandbox: boolean) => () => (
+  tree: any,
+  fileInfo: any
+) => {
   const importNodes = tree.children.filter((node: any) => is('import', node))
   const imports: string[] = flatten(importNodes.map(imps.getFullImports))
   const scopes: string[] = flatten(importNodes.map(imps.getImportsVariables))
@@ -48,7 +61,7 @@ export default (root: string) => () => (tree: any, fileInfo: any) => {
 
   const nodes = tree.children
     .filter((node: any) => is('jsx', node))
-    .map(addComponentsProps(scopes, imports, fileCwd))
+    .map(addComponentsProps(scopes, imports, fileCwd, useCodeSandbox))
 
   return Promise.all(nodes).then(() => tree)
 }