fix(docz-utils): resolve codesandbox code

Author: pedronauck

packages/docz-utils/package.json

@@ -47,6 +47,7 @@
     "signale": "^1.3.0",
     "strip-indent": "^2.0.0",
     "to-vfile": "^5.0.2",
+    "unescape-js": "^1.1.1",
     "unified": "^7.0.1",
     "unist-util-find": "^1.0.1",
     "unist-util-is": "^2.1.2",

packages/docz-utils/src/codesandbox.ts

@@ -1,8 +1,27 @@
 import * as path from 'path'
 import { assembleFiles } from 'codesandboxer-fs'
+import unescapeJS from 'unescape-js'
 
 import { formatter } from './format'
 
+const classComponent = (code: string) => {
+  const match = code.match(/(class)(\s)(\w+)/m)
+  const component = match && match[3]
+
+  return `
+    {() => {
+      ${code}
+      return <${component} />
+    }}
+  `
+}
+
+const checkCodeToRender = (code: string) => {
+  if (code.startsWith('()')) return `{${code}}`
+  if (code.startsWith('class')) return classComponent(code)
+  return `<React.Fragment>${code}</React.Fragment>`
+}
+
 const wrapCode = (code: string): string =>
   `import React from 'react';
 
@@ -21,7 +40,7 @@ const wrapCode = (code: string): string =>
 
   export default () => (
     <App>
-      ${code.split('\n').join('\n    ')}
+      ${checkCodeToRender(unescapeJS(code))}
     </App>
   )`
 

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

@@ -15,4 +15,5 @@ declare module 'strip-indent'
 declare module 'unist-util-visit'
 declare module 'unist-util-is'
 declare module 'unist-util-find'
+declare module 'unescape-js'
 declare module 'codesandboxer-fs'

yarn.lock

@@ -12347,6 +12347,11 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+string.fromcodepoint@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/string.fromcodepoint/-/string.fromcodepoint-0.2.1.tgz#8d978333c0bc92538f50f383e4888f3e5619d653"
+  integrity sha1-jZeDM8C8klOPUPOD5IiPPlYZ1lM=
+
 string.prototype.padend@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.0.0.tgz#f3aaef7c1719f170c5eab1c32bf780d96e21f2f0"
@@ -13026,6 +13031,13 @@ umask@^1.1.0:
   resolved "https://registry.npmjs.org/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
   integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=
 
+unescape-js@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/unescape-js/-/unescape-js-1.1.1.tgz#a4345e654b857c29fa66469e311ccaf2e93063bd"
+  integrity sha512-2/6CdybfFt9fzYJhCD6SHfBnqCGNfjhMwPK9Pf+sJRloa/WmyAmxdBVOslOIYkvSIRKX+9xGePF5t1tugtZ63g==
+  dependencies:
+    string.fromcodepoint "^0.2.1"
+
 unescape@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/unescape/-/unescape-0.2.0.tgz#b78b9b60c86f1629df181bf53eee3bc8d6367ddf"