Display lint errors from mjml

closes #142

app/actions/preview.js

@@ -43,8 +43,8 @@ export function setPreview (fileName, content = '') {
         minify: settings.getIn(['mjml', 'minify']),
       }
 
-      const html = await mjml2html(content, fileName, mjmlPath, renderOpts)
-      dispatch(setPrev({ type: 'html', content: html }))
+      const { html, errors } = await mjml2html(content, fileName, mjmlPath, renderOpts)
+      dispatch(setPrev({ type: 'html', content: html, errors }))
       // update the preview in project
       if (bName === 'index.mjml') {
         dispatch(updateProjectPreview(fName, html))

app/actions/projects.js

@@ -82,7 +82,7 @@ async function loadProject (p, mjmlPath) {
     try {
       const indexFilePath = path.join(p, 'index.mjml')
       const mjmlContent = await fsReadFile(indexFilePath, { encoding: 'utf8' })
-      const htmlContent = await mjml2html(mjmlContent, indexFilePath, mjmlPath)
+      const { html: htmlContent } = await mjml2html(mjmlContent, indexFilePath, mjmlPath)
       res.html = htmlContent
     } catch (e) {} // eslint-disable-line
   }

app/components/FileEditor/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import debounce from 'lodash/debounce'
+import get from 'lodash/get'
 import CodeMirror from 'codemirror'
 
 import 'codemirror/addon/selection/active-line'
@@ -18,6 +19,7 @@ import 'codemirror/addon/search/matchesonscrollbar'
 import 'codemirror/mode/xml/xml'
 import 'codemirror/addon/hint/show-hint'
 import 'codemirror/addon/hint/xml-hint'
+import 'codemirror/addon/lint/lint'
 import 'helpers/codemirror-util-autoformat'
 import { autocompleteTags, completeAfter, completeIfAfterLt, completeIfInTag } from 'helpers/codemirror-autocomplete-mjml'
 
@@ -28,7 +30,7 @@ import { setPreview } from 'actions/preview'
 import './styles.scss'
 
 @connect(state => {
-  const { settings } = state
+  const { settings, preview } = state
   return {
     mjmlEngine: settings.getIn(['mjml', 'engine'], 'auto'),
     minify: settings.getIn(['mjml', 'minify'], false),
@@ -37,6 +39,7 @@ import './styles.scss'
     foldLevel: settings.getIn(['editor', 'foldLevel']),
     highlightTag: settings.getIn(['editor', 'highlightTag']),
     lightTheme: settings.getIn(['editor', 'lightTheme'], false),
+    errors: get(preview, 'errors', []),
   }
 }, {
   setPreview,
@@ -156,7 +159,7 @@ class FileEditor extends Component {
       theme: lightTheme ? 'neo' : 'one-dark',
       autoCloseTags: true,
       foldGutter: true,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+      gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
       styleActiveLine: {
         nonEmpty: true,
       },
@@ -176,10 +179,21 @@ class FileEditor extends Component {
       hintOptions: {
         schemaInfo: autocompleteTags,
       },
+      lint: this.handleValidate,
     })
     this._codeMirror.on('change', this.handleChange)
   }
 
+  handleValidate = () => {
+    const { errors } = this.props
+    return errors.map(err => ({
+      message: err.message,
+      severity: 'error',
+      from: CodeMirror.Pos(err.line - 1, 1),
+      to: CodeMirror.Pos(err.line - 1, 1),
+    }))
+  }
+
   handleChange = debounce(async () => {
     const {
       setPreview,

app/components/FileEditor/styles.scss

@@ -1,6 +1,7 @@
 @import "~codemirror/lib/codemirror.css";
 @import "~codemirror/theme/neo.css";
 @import "~codemirror/addon/hint/show-hint.css";
+@import "~codemirror/addon/lint/lint.css";
 @import "../../styles/one-dark.scss";
 @import "../../styles/vars.scss";
 
@@ -40,3 +41,16 @@ li.CodeMirror-hint-active {
 .FileEditor--loader {
   background: $bg;
 }
+
+.CodeMirror-lint-tooltip {
+  background: $bg-light;
+  border: none;
+  box-shadow: rgba(black, 0.2) 0 3px 18px;
+  color: white;
+  padding: 10px;
+}
+
+.CodeMirror-lint-message-error {
+  background-image: none;
+  padding-left: 0;
+}

app/helpers/mjml.js

@@ -23,9 +23,9 @@ export default function (mjmlContent, filePath, mjmlPath = null, options = {}) {
             ]
 
             const res = await execFile(mjmlPath, args, stdinStream)
-            if (res.err) { return resolve('') }
+            if (res.err) { return resolve({ html: '', errors: [] }) }
 
-            resolve(res.stdout)
+            resolve({ html: res.stdout, errors: [] })
 
           } else {
 
@@ -35,9 +35,9 @@ export default function (mjmlContent, filePath, mjmlPath = null, options = {}) {
             ]
 
             const res = await exec(`${mjmlPath} ${args.join(' ')} "${filePath}"`)
-            if (res.err) { return resolve('') }
+            if (res.err) { return resolve({ html: '', errors: [] }) }
 
-            resolve(res.stdout)
+            resolve({ html: res.stdout, errors: [] })
           }
 
         } else {
@@ -50,10 +50,10 @@ export default function (mjmlContent, filePath, mjmlPath = null, options = {}) {
             minify: !!options.minify,
           }
           const res = mjml2html(mjmlContent, mjmlOptions)
-          resolve(res.html || '')
+          resolve({ html: res.html || '', errors: res.errors || [] })
         }
       } catch (e) {
-        resolve('')
+        resolve({ html: '', errors: [] })
       }
     })
   })

app/package.json

@@ -11,7 +11,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "mjml-core": "3.3.2",
+    "mjml-core": "3.3.3",
     "node-mailjet": "^3.0.6"
   }
 }

app/yarn.lock

@@ -936,9 +936,9 @@ minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
-mjml-core@3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/mjml-core/-/mjml-core-3.3.2.tgz#6ac524667ed262b825ac65264a02b2d2e96b5dff"
+mjml-core@3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/mjml-core/-/mjml-core-3.3.3.tgz#a6e57f5e5b2caebcbceccd94164db4a00380e38c"
   dependencies:
     cheerio "^0.22.0"
     classnames "^2.2.5"
@@ -951,14 +951,14 @@ mjml-core@3.3.2:
     js-beautify "^1.6.8"
     juice "^4.0.2"
     lodash "^4.17.4"
-    mjml-validator "~3.3.0"
+    mjml-validator "~3.3.3"
     react "^15.4.2"
     react-dom "^15.4.2"
     warning "^3.0.0"
 
-mjml-validator@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/mjml-validator/-/mjml-validator-3.3.0.tgz#1f9acaf0eb313625757ca86ce2f6c03805407cfd"
+mjml-validator@~3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/mjml-validator/-/mjml-validator-3.3.3.tgz#c364fb1dfaa7bc23be08ec4bc36d2250c12e690a"
   dependencies:
     lodash "^4.17.4"
     warning "^3.0.0"

package.json

@@ -94,7 +94,7 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-webpack-loaders": "^0.9.0",
     "babel-polyfill": "^6.23.0",
-    "babel-preset-env": "^1.5.1",
+    "babel-preset-env": "^1.5.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-hmre": "^1.1.1",
@@ -103,10 +103,10 @@
     "babel-register": "^6.24.1",
     "babili-webpack-plugin": "^0.1.1",
     "cross-env": "^5.0.0",
-    "css-loader": "^0.28.3",
+    "css-loader": "^0.28.4",
     "devtron": "^1.4.0",
     "electron": "^1.6.10",
-    "electron-builder": "^18.0.1",
+    "electron-builder": "^18.6.2",
     "electron-devtools-installer": "^2.2.0",
     "eslint": "^3.19.0",
     "eslint-config-zavatta": "^4.4.1",
@@ -115,7 +115,7 @@
     "eslint-plugin-react": "^7.0.1",
     "express": "^4.15.3",
     "extract-text-webpack-plugin": "^2.1.0",
-    "file-loader": "^0.11.1",
+    "file-loader": "^0.11.2",
     "html-webpack-plugin": "^2.28.0",
     "jsdom": "^11.0.0",
     "json-loader": "^0.5.4",
@@ -125,7 +125,7 @@
     "redux-logger": "^3.0.6",
     "sass-loader": "^6.0.5",
     "spectron": "^3.7.1",
-    "style-loader": "^0.18.1",
+    "style-loader": "^0.18.2",
     "url-loader": "^0.5.8",
     "webpack": "^2.6.1",
     "webpack-dev-middleware": "^1.10.2",
@@ -142,7 +142,7 @@
     "es6-promisify": "^5.0.0",
     "immutable": "^3.8.1",
     "js-beautify": "^1.6.14",
-    "mjml": "3.3.2",
+    "mjml": "3.3.3",
     "node-mailjet": "^3.1.0",
     "react": "^15.5.4",
     "react-collapse": "^4.0.2",