"Detect" and propose migration for mjml 3 to mjml 4

related to #224

package.json

@@ -35,6 +35,7 @@
     "immutable": "^3.8.2",
     "js-beautify": "^1.7.5",
     "mjml": "^4.0.3",
+    "mjml-migrate": "^4.0.1",
     "ncp": "^2.0.0",
     "node-mailjet": "^3.2.1",
     "react": "^16.2.0",
@@ -79,7 +80,7 @@
     "prettier": "^1.11.1",
     "redux-logger": "^3.0.6",
     "sass-loader": "^6.0.7",
-    "webpack": "3"
+    "webpack": "3.11.0"
   },
   "resolutions": {
     "webpack-sources": "1.0.1"

src/components/Button/index.js

@@ -16,6 +16,7 @@ class Button extends Component {
       link,
       primary,
       ghost,
+      warn,
       transparent,
       unclickable,
       className,
@@ -28,6 +29,7 @@ class Button extends Component {
     const cn = cx('Button', className, {
       primary,
       ghost,
+      warn,
       unclickable,
       transparent,
       small,

src/components/Button/style.scss

@@ -38,6 +38,14 @@
     z-index: 1;
   }
 
+  &.warn {
+    background: rgba(white, 0.03);
+    &:hover {
+      cursor: pointer;
+      background: rgba(white, 0.05);
+    }
+  }
+
   &.ghost,
   &.transparent {
     color: $lighterGrey;

src/components/FileEditor/index.js

@@ -25,6 +25,8 @@ import 'helpers/codemirror-util-autoformat'
 import 'helpers/codemirror-util-xml-hint'
 import 'helpers/codemirror-util-show-hint'
 
+import isOldSyntax from 'helpers/detectOldMJMLSyntax'
+
 import {
   completeAfter,
   completeIfAfterLt,
@@ -33,12 +35,20 @@ import {
 
 import { completeAfterSnippet } from 'helpers/codemirror-autocomplete-snippets'
 
+import { migrateToMJML4 } from 'helpers/mjml'
 import foldByLevel from 'helpers/foldByLevel'
 import { fsReadFile, fsWriteFile } from 'helpers/fs'
 import { setPreview } from 'actions/preview'
 
 import './styles.scss'
 
+function beautify(content) {
+  return beautifyJS.html(content, {
+    indent_size: 2, // eslint-disable-line camelcase
+    wrap_attributes_indent_size: 2, // eslint-disable-line camelcase
+  })
+}
+
 @connect(
   state => {
     const { settings, preview } = state
@@ -73,6 +83,7 @@ class FileEditor extends Component {
     window.requestIdleCallback(() => {
       this.initEditor()
       this.loadContent()
+      window.requestIdleCallback(this.detecteOldSyntax)
     })
   }
 
@@ -121,6 +132,13 @@ class FileEditor extends Component {
     }
   }
 
+  detecteOldSyntax = () => {
+    const content = this.getContent()
+    if (isOldSyntax(content)) {
+      this.props.onDetectOldSyntax()
+    }
+  }
+
   async loadContent() {
     const { fileName, autoFold, foldLevel } = this.props
 
@@ -219,17 +237,33 @@ class FileEditor extends Component {
     }
   }, 200)
 
-  beautify = () => {
-    const value = this._codeMirror.getValue()
+  getContent = () => {
+    return this._codeMirror.getValue()
+  }
+
+  setContent = content => {
     const scrollInfo = this._codeMirror.getScrollInfo()
-    const beautified = beautifyJS.html(value, {
-      indent_size: 2, // eslint-disable-line camelcase
-      wrap_attributes_indent_size: 2, // eslint-disable-line camelcase
-    })
-    this._codeMirror.setValue(beautified)
+    this._codeMirror.setValue(content)
     this._codeMirror.scrollTo(0, scrollInfo.top)
   }
 
+  beautify = () => {
+    const value = this.getContent()
+    const beautified = beautify(value)
+    this.setContent(beautified)
+  }
+
+  migrateToMJML4 = () => {
+    try {
+      const content = this.getContent()
+      const migratedContent = migrateToMJML4(content)
+      const beautified = beautify(migratedContent)
+      this.setContent(beautified)
+    } catch (err) {
+      console.error(err) // eslint-disable-line no-console
+    }
+  }
+
   debounceWrite = debounce((fileName, mjml) => {
     fsWriteFile(fileName, mjml)
   }, 500)

src/components/FileExplorer/style.scss

@@ -3,6 +3,7 @@
 .FileExplorer {
   overflow: auto;
   padding: 2px;
+  padding: 40px;
 }
 
 .FileTree-item-label {

src/components/FilesList/OldSyntaxDetected.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import IconWarning from 'react-icons/md/warning'
+
+import Button from 'components/Button'
+
+export default function OldSyntaxDetected({ onMigrate }) {
+  return (
+    <div className="OldSyntaxDetected d-f ai-c flow-h-10">
+      <IconWarning />
+      <span>{'MJML 3 syntax detected'}</span>
+      <Button warn onClick={onMigrate} className="ml-auto">
+        {'Migrate'}
+      </Button>
+    </div>
+  )
+}

src/components/FilesList/index.js

@@ -16,6 +16,7 @@ import { updateSettings } from 'actions/settings'
 
 import FileEditor from 'components/FileEditor'
 import FilePreview from './FilePreview'
+import OldSyntaxDetected from './OldSyntaxDetected'
 
 import './styles.scss'
 
@@ -52,6 +53,7 @@ class FilesList extends Component {
     isDragging: false,
     renamedFile: null,
     newName: '',
+    isOldSyntaxDetected: false,
   }
 
   componentWillMount() {
@@ -83,6 +85,8 @@ class FilesList extends Component {
     ipcRenderer.removeListener('browser-window-focus', this.refresh)
   }
 
+  handleDetectOldSyntax = () => this.setState({ isOldSyntaxDetected: true })
+
   handleSubmit = e => {
     e.preventDefault()
     const { path, onAddFile, onActiveFileChange } = this.props
@@ -177,6 +181,8 @@ class FilesList extends Component {
     }
   }
 
+  handleMigrate = () => this._editor.migrateToMJML4()
+
   setCurrentSize = size => {
     this.props.updateSettings(settings => {
       return settings.setIn(['previewSize', 'current'], size)
@@ -245,7 +251,7 @@ class FilesList extends Component {
   }
 
   render() {
-    const { files, isDragging, renamedFile, newName } = this.state
+    const { files, isDragging, renamedFile, newName, isOldSyntaxDetected } = this.state
 
     const { onRef, onEditorRef, activeFile, path, rootPath, openModal, previewSize } = this.props
 
@@ -351,6 +357,7 @@ class FilesList extends Component {
               onDragFinished={this.handlePreviewPanelStopDrag}
             >
               <div className="d-f fd-c sticky anim-enter-fade">
+                {isOldSyntaxDetected && <OldSyntaxDetected onMigrate={this.handleMigrate} />}
                 {activeFile &&
                   activeFile.name.endsWith('.mjml') && (
                     <FileEditor
@@ -360,6 +367,7 @@ class FilesList extends Component {
                       }}
                       fileName={fullActiveFile}
                       disablePointer={isDragging}
+                      onDetectOldSyntax={this.handleDetectOldSyntax}
                     />
                   )}
               </div>

src/components/FilesList/styles.scss

@@ -156,3 +156,10 @@
     }
   }
 }
+
+.OldSyntaxDetected {
+  background: rgba($yellow, 0.15);
+  border: 1px solid rgba(white, 0.1);
+  color: $yellow;
+  padding: 20px;
+}

src/helpers/detectOldMJMLSyntax.js

@@ -0,0 +1,3 @@
+export default function detectOldSyntax(content) {
+  return content.indexOf('mj-container') > -1
+}

src/helpers/mjml.js

@@ -1,4 +1,5 @@
 import mjml2html from 'mjml'
+import migrate from 'mjml-migrate'
 import path from 'path'
 import stream from 'stream'
 
@@ -58,3 +59,7 @@ export function wrapIntoMJMLTags(content) {
   </mj-body>
 </mjml>`
 }
+
+export function migrateToMJML4(content) {
+  return migrate(content)
+}

yarn.lock

@@ -1743,7 +1743,7 @@ cheerio@^0.22.0:
     lodash.reject "^4.4.0"
     lodash.some "^4.4.0"
 
-chokidar@^1.6.1, chokidar@^1.7.0:
+chokidar@^1.6.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
@@ -1758,7 +1758,7 @@ chokidar@^1.6.1, chokidar@^1.7.0:
   optionalDependencies:
     fsevents "^1.0.0"
 
-chokidar@^2.0.0:
+chokidar@^2.0.0, chokidar@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.2.tgz#4dc65139eeb2714977735b6a35d06e97b494dfd7"
   dependencies:
@@ -3000,11 +3000,12 @@ es-to-primitive@^1.1.1:
     is-symbol "^1.0.1"
 
 es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
-  version "0.10.39"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.39.tgz#fca21b67559277ca4ac1a1ed7048b107b6f76d87"
+  version "0.10.41"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.41.tgz#bab3e982d750f0112f0cb9e6abed72c59eb33eb2"
   dependencies:
     es6-iterator "~2.0.3"
     es6-symbol "~3.1.1"
+    next-tick "1"
 
 es6-iterator@^2.0.1, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
   version "2.0.3"
@@ -5742,6 +5743,10 @@ netmask@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
 
+next-tick@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+
 no-case@^2.2.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
@@ -8498,12 +8503,12 @@ warning@^3.0.0:
     loose-envify "^1.0.0"
 
 watchpack@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.5.0.tgz#231e783af830a22f8966f65c4c4bacc814072eed"
   dependencies:
-    async "^2.1.2"
-    chokidar "^1.7.0"
+    chokidar "^2.0.2"
     graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
 
 wbuf@^1.1.0, wbuf@^1.7.2:
   version "1.7.2"
@@ -8579,7 +8584,7 @@ [email protected], webpack-sources@^1.0.1, webpack-sources@^1.1.0:
     source-list-map "^2.0.0"
     source-map "~0.5.3"
 
-webpack@3:
+webpack@3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.11.0.tgz#77da451b1d7b4b117adaf41a1a93b5742f24d894"
   dependencies: