diff --git a/package.json b/package.json index 16e630b1..7d211aad 100644 --- a/package.json +++ b/package.json @@ -40,12 +40,15 @@ "codemirror": "^5.49.2", "electron-debug": "^3.0.1", "electron-json-storage": "^4.1.8", + "erb": "^1.3.0-hf.1", "electron-updater": "4.3.9", "es6-promisify": "^6.0.2", "fix-path": "^2.1.0", "fuse.js": "^3.4.5", + "handlebars": "4.7.7", "immutable": "^4.0.0-rc.12", "js-beautify": "^1.10.2", + "js-yaml": "^3.14.0", "mjml": "^4.12.0", "mjml-migrate": "^4.12.0", "ncp": "^2.0.0", diff --git a/src/actions/settings.js b/src/actions/settings.js index b242561f..54be4ada 100644 --- a/src/actions/settings.js +++ b/src/actions/settings.js @@ -60,6 +60,7 @@ export function loadSettings() { desktop: 650, }, snippets: [], + templating: [], }) // clean old format for TargetEmails diff --git a/src/components/FilesList/FilePreview.js b/src/components/FilesList/FilePreview.js index 6c211dd3..1029ff9b 100644 --- a/src/components/FilesList/FilePreview.js +++ b/src/components/FilesList/FilePreview.js @@ -2,24 +2,66 @@ import React, { Component } from 'react' import cx from 'classnames' import { Motion, spring } from 'react-motion' import { connect } from 'react-redux' +import isEqual from 'lodash/isEqual' +import find from 'lodash/find' import Button from 'components/Button' import Iframe from 'components/Iframe' import { updateSettings } from 'actions/settings' +import { addAlert } from 'reducers/alerts' +import { compile } from 'helpers/preview-content' export default connect( state => ({ preview: state.preview, previewSize: state.settings.get('previewSize'), + templating: state.settings.get('templating'), }), { updateSettings, + addAlert, }, )( class FilePreview extends Component { + state = { + content: '', + } + + componentDidUpdate(prevProps) { + const prev = { + engine: this.getProjectVariables(prevProps).engine, + variables: this.getProjectVariables(prevProps).variables, + raw: prevProps.preview ? prevProps.preview.content : '', + } + + const current = { + engine: this.getProjectVariables(this.props).engine, + variables: this.getProjectVariables(this.props).variables, + raw: this.props.preview ? this.props.preview.content : '', + } + + !isEqual(prev, current) && this.updateContent(current) + } + + getProjectVariables = props => { + const { templating, iframeBase } = props + return find(templating, { projectPath: iframeBase }) || {} + } + + updateContent = async params => { + try { + const content = await compile(params) + this.setState({ content }) + } catch (err) { + this.props.addAlert(`[Template Compiler Error] ${err.message}`, 'error') + throw new Error(err) + } + } + render() { const { preview, disablePointer, previewSize, onSetSize, iframeBase } = this.props + const { content } = this.state return (
@@ -55,7 +97,7 @@ export default connect(
{preview ? ( preview.type === 'html' ? ( -