feat: format code using prettier

package.json

@@ -82,6 +82,7 @@
     "parse-domain": "~2.3.0",
     "polished": "~3.4.0",
     "postcss-focus": "~4.0.0",
+    "prettier": "~1.18.2",
     "react": "16.8.6",
     "react-codecopy": "~4.0.1",
     "react-dom": "16.8.6",

src/components/elements/CodeEditor/CodeEditor.js

@@ -1,11 +1,11 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { getLines, serializeComponent } from 'helpers'
+import { prettier, getLines, serializeComponent } from 'helpers'
 import styled, { css } from 'styled-components'
+import { get, identity, range } from 'lodash'
 import { Box } from 'components/elements'
 import React, { useState } from 'react'
 import CodeCopy from 'react-codecopy'
 import { colors, fonts } from 'theme'
-import { range } from 'lodash'
 
 const generateHighlighLines = linesRange => {
   if (!linesRange) return
@@ -259,7 +259,6 @@ Terminal.defaultProps = {
 
 function CodeEditor (props) {
   const { ActionComponent, showLineNumbers, interactive, children, my } = props
-  const text = serializeComponent(children.trim())
   const className = props.className
     ? props.className + (props.metastring || '')
     : ''
@@ -272,6 +271,8 @@ function CodeEditor (props) {
     return 'javascript'
   })()
 
+  const pretty = get(prettier, language, identity)
+  const text = pretty(children)
   const theme = { ...baseTheme, ...langTheme[language] }
   const css = highlightLines && highlighLinesStyle(highlightLines)
 

src/components/pages/embed/template.js

@@ -3,7 +3,6 @@ import React, { Fragment } from 'react'
 import humanizeUrl from 'humanize-url'
 import { Plus } from 'react-feather'
 import { colors } from 'theme'
-
 import { get } from 'lodash'
 
 import {
@@ -23,6 +22,8 @@ import {
 
 import { Microlink } from 'components/patterns'
 
+import prettier, { serializeObject, serializeFmt } from 'helpers/prettier'
+
 const DEFAULT_LOGO = {
   url: 'https://cdn.microlink.io/logo/trim.png',
   width: 500,
@@ -32,26 +33,6 @@ const DEFAULT_LOGO = {
   size_pretty: '1.45 kB'
 }
 
-const serializeFmt = (props, { quotes = true } = {}) => {
-  return Object.keys(props).reduce((acc, rawKey) => {
-    const rawValue = props[rawKey]
-    const key = rawValue === true ? rawKey : `${rawKey}=`
-    const value =
-      rawValue === true ? '' : `${quotes ? `'${rawValue}'` : rawValue}`
-    return `${acc}${key}${value} `
-  }, '')
-}
-
-const serializeObject = props => {
-  return Object.keys(props).reduce((acc, rawKey) => {
-    const rawValue = props[rawKey]
-    const key = rawValue === true ? rawKey : `${rawKey}: `
-    const value = rawValue === true ? '' : `'${rawValue}'`
-    const coma = acc === '' ? '' : ', '
-    return `${acc}${coma}${key}${value}`
-  }, '')
-}
-
 const generateMqlCode = props => `
 const mql = require('@microlink/mql')
 const { status, response, data } = await mql(
@@ -64,27 +45,27 @@ console.log('data', data)
 `
 
 const generateLanguages = props => {
-  const langReact = () => `
+  const langReact = () =>
+    prettier.js(`
 import React from 'react'
 import Microlink from '@microlink/react'
 
 export default () => (
-  <Microlink
-    ${serializeFmt(props)}
-  />
+  <Microlink ${serializeFmt(props)} />
 )
-`
+`)
 
   langReact.language = 'jsx'
 
-  const langVanilla = () => `
+  const langVanilla = () =>
+    prettier.html(`
 <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@microlink/[email protected]/dist/microlink.min.js"></script>
 <script>
   document.addEventListener('DOMContentLoaded', function (event) {
     microlink('.link-previews', { ${serializeObject(props)} })
   })
 </script>
-`
+`)
 
   langVanilla.language = 'html'
 

src/helpers/index.js

@@ -5,12 +5,14 @@ import unmarshall from './unmarshall'
 import getLines from './get-lines'
 import marshall from './marshall'
 import title from './title'
+import prettier from './prettier'
 
 export {
   formatDate,
   formatNumber,
   getLines,
   marshall,
+  prettier,
   serializeComponent,
   title,
   unmarshall

src/helpers/prettier.js

@@ -0,0 +1,73 @@
+import prettierStandalone from 'prettier/standalone'
+import prettierParserHtml from 'prettier/parser-html'
+import prettierParserGraphql from 'prettier/parser-graphql'
+import prettierParserMarkdown from 'prettier/parser-markdown'
+import parserBabylon from 'prettier/parser-babylon'
+
+/**
+ * https://prettier.io/docs/en/options.html
+ */
+const PRETTIER_CONFIG = {
+  semi: false,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  printWidth: 80,
+  tabWidth: 2
+}
+
+const JS_OPTS = {
+  parser: 'babel',
+  plugins: [parserBabylon]
+}
+
+const JSON_OPTS = {
+  parser: 'json',
+  plugins: [parserBabylon]
+}
+
+const HTML_OPTS = {
+  parser: 'html',
+  plugins: [prettierParserHtml]
+}
+
+const GRAPHQL_OPTS = {
+  parser: 'graphql',
+  plugins: [prettierParserGraphql]
+}
+
+const MARKDOWN_OPTS = {
+  parser: 'markdown',
+  plugins: [prettierParserMarkdown]
+}
+
+export const serializeFmt = (props, { quotes = true } = {}) => {
+  return Object.keys(props).reduce((acc, rawKey) => {
+    const rawValue = props[rawKey]
+    const key = rawValue === true ? rawKey : `${rawKey}=`
+    const value =
+      rawValue === true ? '' : `${quotes ? `'${rawValue}'` : rawValue}`
+    return `${acc}${key}${value} `
+  }, '')
+}
+
+export const serializeObject = props => {
+  return Object.keys(props).reduce((acc, rawKey) => {
+    const rawValue = props[rawKey]
+    const key = rawValue === true ? rawKey : `${rawKey}: `
+    const value = rawValue === true ? '' : `'${rawValue}'`
+    const coma = acc === '' ? '' : ', '
+    return `${acc}${coma}${key}${value}`
+  }, '')
+}
+
+const prettier = (code, opts) =>
+  prettierStandalone.format(code, { ...PRETTIER_CONFIG, ...opts })
+prettier.jsx = prettier.javascript = prettier.js = (code, opts) =>
+  prettier(code, { ...JS_OPTS, ...opts })
+prettier.html = (code, opts) => prettier(code, { ...HTML_OPTS, ...opts })
+prettier.graphql = (code, opts) => prettier(code, { ...GRAPHQL_OPTS, ...opts })
+prettier.md = prettier.markdown = (code, opts) =>
+  prettier(code, { ...MARKDOWN_OPTS, ...opts })
+prettier.json = (code, opts) => prettier(code, { ...JSON_OPTS, ...opts })
+
+export default prettier