Skip to content

Commit

Permalink
Merge pull request #203 from mjmlio/mjml-core
Browse files Browse the repository at this point in the history
MJML 2.0 in master
  • Loading branch information
Lohek committed Apr 27, 2016
2 parents 2ab19d1 + c2d1f03 commit ca544a4
Show file tree
Hide file tree
Showing 135 changed files with 3,445 additions and 2,686 deletions.
2 changes: 1 addition & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["lodash", "transform-decorators-legacy", "babel-plugin-transform-inline-environment-variables"]
"plugins": ["transform-decorators-legacy"]
}
5 changes: 3 additions & 2 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules/**
test/assets/**
lib
node_modules
packages/mjml/test.js
91 changes: 67 additions & 24 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,34 +1,77 @@
{
"extends": "airbnb",
"parser": "babel-eslint",
"plugins": ["react"],
"extends": "eslint:recommended",

"rules": {
"arrow-spacing": 2,
"curly": 2,
"eol-last": 2,
"indent": [2, 2, { "SwitchCase": 1 }],
"no-lonely-if": 2,
"no-spaced-func": 2,
"no-unused-vars": 2,
"no-var": 2,
"prefer-const": 2,
"space-before-blocks": 2,
"no-console": 0,
"react/jsx-no-duplicate-props": 2,
"react/jsx-no-undef": 2,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/no-danger": 0,
"react/no-unknown-property": 2,
"react/self-closing-comp": 2,
"react/sort-comp": 2
"no-unused-expressions": 0,
"no-unused-vars": [2, { "varsIgnorePattern": "^debug$" }],
"strict": 0,
"new-cap": 0,
"camelcase": 0,
"react/jsx-uses-react": 1,
"semi": 0,

"react/sort-comp": [0, {
"order": [
"lifecycle",
"everything-else",
"render"
]
}],

"array-bracket-spacing": 0,
"arrow-body-style": 0,
"comma-dangle": [2, "never"],
"consistent-return": 0,
"default-case": 0,
"dot-notation": 0,
"eqeqeq": 0,
"func-names": 0,
"global-require": 0,
"indent": [2, 2, {"SwitchCase": 1}],
"key-spacing": 0,
"max-len": 0,
"no-case-declarations": 0,
"no-confusing-arrow": 0,
"no-console": 2,
"no-multi-spaces": 0,
"no-nested-ternary": 0,
"no-param-reassign": 0,
"no-return-assign": 0,
"no-shadow": 0,
"no-throw-literal": 0,
"no-underscore-dangle": 0,
"no-use-before-define": 0,
"object-curly-spacing": 0,
"object-shorthand": 0,
"one-var": 0,
"padded-blocks": 0,
"quote-props": 0,
"quotes": 0,
"radix": 0,
"space-before-function-paren": 0,
"space-in-parens": 0,
"vars-on-top": 0,

"import/no-unresolved": 0,

"react/jsx-boolean-value": 0,
"react/jsx-closing-bracket-location": 0,
"react/jsx-curly-spacing": 0,
"react/jsx-indent-props": 0,
"react/jsx-no-bind": 0,
"react/no-did-mount-set-state": 0,
"react/no-did-update-set-state": 0,
"react/no-multi-comp": 0,
"react/prefer-stateless-function": 0,
"react/prop-types": 0
},

"env": {
"node": true,
"browser": true,
"mocha": true,
"es6": true
"node": true,
"es6": true,
"mocha": true
}

}
7 changes: 5 additions & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
sudo: false
language: node_js
node_js:
- "5.0"
- "4.2"
- 4
- 5
script:
- npm run lint
- cd packages/mjml-core
- npm install
- npm test
7 changes: 7 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@

## Guidelines

- Clone the full mjml repository
- Apply your feature under the required folder
- Add documentation in the appropriate readme file
- Create your pull request
70 changes: 27 additions & 43 deletions README.MD
Original file line number Diff line number Diff line change
Expand Up @@ -69,20 +69,26 @@ npm install -g mjml
</a>
</p>

<a href="https://github.com/mjmlio/mjml/releases" target="_blank">
<strong align="left">From source: </strong>
</a>
- Clone the repository.
- Use `install.sh` to install all dependencies and link all packages of the MJML Mono-Repo

# Show me the code!

### Command line

> Compile the file and output the result in `a.html`
```bash
$> mjml -r input.mjml
$> mjml input.mjml
```

> Redirect the result to a file
```bash
$> mjml -r input.mjml -o output.html
$> mjml input.mjml -o output.html
```

> Watch a file and compile every time the file changes
Expand All @@ -99,54 +105,28 @@ import { mjml2html } from 'mjml'
/*
Compile an mjml string
*/
const htmlOutput = mjml2html(`<mj-body>
<mj-section>
<mj-column>
<mj-text>
Hello World!
</mj-text>
</mj-column>
</mj-section>
</mj-body>`)
const htmlOutput = mjml2html(`
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text>
Hello World!
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
`)

/*
Print the responsive HTML generated
*/
console.log(htmlOutput)
```

### In your browser

```html
<html>
<head>
<script src="dist/mjml.js"></script>
<script>
/*
Compile an mjml string
*/
var htmlOutput = mjml.mjml2html('<mj-body>' +
'<mj-section>' +
'<mj-column>' +
'<mj-text>' +
'Hello World!' +
'</mj-text>' +
'</mj-column>' +
'</mj-section>' +
'</mj-body>')
/*
Print the responsive HTML generated
*/
console.log(htmlOutput)
</script>
</head>
<body>

</body>
</html>
```

### Create your component

> Issue the following in your terminal
Expand Down Expand Up @@ -200,6 +180,10 @@ Get your hands dirty by trying the MJML online editor! Write awesome code on the
</tr>
</table>

# Read more about what's comming next in MJML

Go [here](https://github.com/mjmlio/mjml/labels/RFC) and submit your feature request or comment the existing ones

# Contribute

- [ ] Fork the repository
Expand Down
140 changes: 140 additions & 0 deletions UPGRADE.MD
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
# Upgrading from 1.X to 2.X

## MJML tag

Before `mj-body` was the root tag of an MJML document. Now you should wrap it in a `mjml` tag

### Mj-Body

Note that `mj-body` becomes `mj-container` prior to 2.0 every attributes such as `width` on `mj-body` is now on `mj-container`

### MJML 1.X (before)

```xml
<mj-body width="550">
<mj-section>
<mj-column>
<mj-text>Hello World !</mj-text>
</mj-column>
</mj-section>
</mj-body>
```

### MJML 2.X (now)

```xml
<mjml>
<mj-body>
<mj-container width="550">
<mj-section>
<mj-column>
<mj-text>Hello World !</mj-text>
</mj-column>
</mj-section>
</mj-container>
</content>
</mjml>
```

## Register a new Component

### Before

`registerElement` use to take three arguments :

- a tag name
- a component
- an option hash with `{endingTag: true/false}` to set an endingTag

### Now

`registerElement` becomes `registerMJElement` and now take only one argument : the component.

It reads the statics from the component to define how it behave.

## Create a componenent

### Before

```javascript
import _ from 'lodash'
import MJMLColumnElement from './decorators/MJMLColumnElement'
import React, { Component } from 'react'
import { widthParser } from '../helpers/mjAttribute'

/**
* Displays a customizable divider
*/
@MJMLColumnElement({
tagName: 'mj-divider',
attributes: {
'border-color': '#000000',
'border-style': 'solid',
'border-width': '4px',
'padding': '10px 25px',
'width': '100%'
}
})
class Divider extends Component {
...
}

export default Divider
```

### Now

`MJMLColumnElement` doesn't exist anymore, use `MJMLElement` decorators instead.

You can now add a `postRender` hook that take the HTML generated from MJML document with [Cheerio](https://github.com/cheeriojs/cheerio) API

`tagName`, `baseStyle`, `columnElement`, `endingTag`, `defaultMJMLDefinition` are now statics, use them as such:

```javascript
import { MJMLElement, helpers } from 'mjml-core'
import merge from 'lodash/merge'
import React, { Component } from 'react'

const tagName = 'mj-divider'
const defaultMJMLDefinition = {
attributes: {
'border-color': '#000000',
'border-style': 'solid',
'border-width': '4px',
'padding': '10px 25px',
'width': '100%'
}
}
const columnElement = true
const baseStyles = {
p: {
fontSize: '1px',
margin: '0 auto'
}
}
const postRender = $ => {
$('.mj-divider-outlook').each(function () {
const insertNode = `<table align="center" border="0" cellpadding="0" cellspacing="0" style="${$(this).attr('style')}" width="${$(this).data('divider-width')}"><tr><td>&nbsp;</td></tr></table>`

$(this)
.removeAttr('data-divider-width')
.removeAttr('class')
.after(`<!--[if mso]>${insertNode}<![endif]-->`)
})

return $
}

@MJMLElement
class Divider extends Component {
...
}

Divider.tagName = tagName
Divider.defaultMJMLDefinition = defaultMJMLDefinition
Divider.columnElement = columnElement
Divider.baseStyles = baseStyles
Divider.postRender = postRender

export default Divider
```
Loading

0 comments on commit ca544a4

Please sign in to comment.