Code Monkey home page Code Monkey logo

atom-mjml-preview's Introduction

MJML Preview Package

Show the rendered HTML from MJML on the right pane of the editor. It is enabled for .mjml files.

mjml-preview

To toggle the preview, go to "Packages" > "mjml-preview" > "Preview MJML".

Trigger on Save

To refresh the preview pane on each save, tick the box "Trigger on Save" in the settings of the package: โŒ˜+, or ctrl+, to open package settings > look for "mjml-preview" in "installed packages" > "Settings" > "Trigger on Save".

settings

atom-mjml-preview's People

Contributors

anthonylenglet avatar iryusa avatar jayjun avatar kmcb777 avatar ngarnier avatar vizhe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

atom-mjml-preview's Issues

Failed to activate the mjml-preview package

[Enter steps to reproduce:]

  1. ...
  2. ...

Atom: 1.51.0 x64
Electron: 5.0.13
OS: Unknown Windows version
Thrown From: mjml-preview package 2.0.1

Stack Trace

Failed to activate the mjml-preview package

At Unexpected token }

C:\Users\andre\.atom\packages\mjml-preview\node_modules\babel-runtime\helpers\extends.js:13
    var source = arguments[i};
                            ^

SyntaxError: Unexpected token }
    at new Script (vm.js:85:7)
    at NativeCompileCache.runInThisContext (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:146391)
    at Module.get_Module._compile (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:147275)
    at Object.value [as .js] (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:151046)
    at Module.load (internal/modules/cjs/loader.js:701:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:633:12)
    at Function.Module._load (internal/modules/cjs/loader.js:625:3)
    at Module.require (/app.asar/static/index.js:72:46)
    at require (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:146814)
    at /packages/mjml-preview/node_modules/mjml-migrate/node_modules/mjml-parser-xml/lib/index.js:11:17)
    at /packages/mjml-preview/node_modules/mjml-migrate/node_modules/mjml-parser-xml/lib/index.js:323:3)
    at Module.get_Module._compile (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:147498)
    at Object.value [as .js] (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:151046)
    at Module.load (internal/modules/cjs/loader.js:701:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:633:12)
    at Function.Module._load (internal/modules/cjs/loader.js:625:3)
    at Module.require (/app.asar/static/index.js:72:46)
    at require (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:146814)
    at /packages/mjml-preview/node_modules/mjml-migrate/lib/migrate.js:17:45)
    at /packages/mjml-preview/node_modules/mjml-migrate/lib/migrate.js:214:3)
    at Module.get_Module._compile (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:147498)
    at Object.value [as .js] (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:151046)
    at Module.load (internal/modules/cjs/loader.js:701:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:633:12)
    at Function.Module._load (internal/modules/cjs/loader.js:625:3)
    at Module.require (/app.asar/static/index.js:72:46)
    at require (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:146814)
    at /packages/mjml-preview/node_modules/mjml-core/lib/index.js:86:20)
    at /packages/mjml-preview/node_modules/mjml-core/lib/index.js:411:3)
    at Module.get_Module._compile (~/AppData/Local/atom/app-1.51.0/resources/app/static/<embedded>:11:147498)

Commands

Non-Core Packages

atom-beautify 0.33.4 
auto-encoding 0.7.2 
autoclose-html 0.23.0 
color-picker 2.3.0 
emmet 2.4.3 
file-icons 2.1.42 
highlight-selected 0.17.0 
indent-guide-improved 1.4.13 
language-htaccess 0.2.0 
language-mjml 2.1.0 
linter 2.3.1 
linter-mjml 1.2.0 
minimap 4.29.9 
minimap-highlight-selected 4.6.1 
mjml-preview 2.0.1 
multi-cursor 3.0.0 
multi-wrap-guide 1.1.11 
open-in-browsers 0.0.30 
php-twig 4.0.0 
pigments 0.40.2 
sort-lines 0.19.0 
svg-icons 0.6.0 
svg-preview 0.14.0 

HTMLDocument.registerElement is deprecated.

Use customElements.define instead of document.registerElement see https://javascript.info/custom-elements

HTMLDocument.registerElement (file:///Applications/Pulsar.app/Contents/Resources/app.asar/static/index.js:99:12)
registerElement (/Users/franz/.pulsar/packages/atom-html-preview/node_modules/space-pen/lib/space-pen.js:66:88)
Builder.openTag (/Users/franz/.pulsar/packages/atom-html-preview/node_modules/space-pen/lib/space-pen.js:297:27)
Builder.tag (/Users/franz/.pulsar/packages/atom-html-preview/node_modules/space-pen/lib/space-pen.js:274:12)
Function.div (/Users/franz/.pulsar/packages/atom-html-preview/node_modules/space-pen/lib/space-pen.js:83:49)
Function.content (/Users/franz/.pulsar/packages/mjml-preview/lib/mjml-view.js:25:21)

Update mjml to v3.3.3

I hope you don't mind me raising an issue for something you were planning to do anyway, I'm just impatient about css-class. ๐Ÿ˜„

Thank you so much for your work on MJML, it's revolutionary. ๐ŸŽ‰

Feature request - support other file extensions

Currently I have to store the templates as .hbs so that I can inject variables into them. To render the preview, I need to rename the file to .mjml, then I rename it again once I'm finished. Is there a way to have the preview open on other file extensions?

I tried selecting the file, then using Packages > mjm-preview > MJML Preview but it still doesn't work.

Uncaught TypeError: Cannot read property 'getGrammar' of undefined

Hello

I'm unable to load the preview package.

Here are the errors ๐Ÿ‘

Uncaught TypeError: Cannot read property 'getGrammar' of undefined
C:\Users\fohoizey.atom\packages\mjml-preview\lib\mjml-preview.js:45
Show Stack Trace
The error was thrown from the mjml-preview package. You can help by creating an issue. Please explain what actions triggered this error.

[Enter steps to reproduce below:]

  1. ...
  2. ...

Atom Version: 1.12.7
Electron Version: 1.3.13
System: Unknown Windows Version
Thrown From: mjml-preview package, v1.1.0

Stack Trace

Uncaught TypeError: Cannot read property 'getGrammar' of undefined

At C:\Users\fohoizey\.atom\packages\mjml-preview\lib\mjml-preview.js:45

TypeError: Cannot read property 'getGrammar' of undefined
    at Object.openPane (file:///C:/Users/fohoizey/.atom/packages/mjml-preview/lib/mjml-preview.js:45:38)
    at atom-workspace.mjmlPreviewPreview (file:///C:/Users/fohoizey/.atom/packages/mjml-preview/lib/mjml-preview.js:38:101)
    at CommandRegistry.module.exports.CommandRegistry.handleCommandEvent (C:\Users\fohoizey\AppData\Local\atom\app-1.12.7\resources\app.asar\src\command-registry.js:259:29)
    at CommandRegistry.handleCommandEvent (C:\Users\fohoizey\AppData\Local\atom\app-1.12.7\resources\app.asar\src\command-registry.js:3:59)
    at CommandRegistry.module.exports.CommandRegistry.dispatch (C:\Users\fohoizey\AppData\Local\atom\app-1.12.7\resources\app.asar\src\command-registry.js:160:19)
    at AtomEnvironment.module.exports.AtomEnvironment.dispatchApplicationMenuCommand (C:\Users\fohoizey\AppData\Local\atom\app-1.12.7\resources\app.asar\src\atom-environment.js:1136:28)
    at EventEmitter.outerCallback (C:\Users\fohoizey\AppData\Local\atom\app-1.12.7\resources\app.asar\src\application-delegate.js:319:25)
    at emitTwo (events.js:106:13)
    at EventEmitter.emit (events.js:191:7)

Commands

     -4:42.1.0 core:confirm (atom-text-editor.editor.mini.is-focused)
     -2:24.6.0 core:paste (atom-text-editor.editor.is-focused)
     -2:18.8.0 grammar-selector:show (atom-text-editor.editor.is-focused)
  3x -2:08.9.0 mjml-preview:preview (atom-text-editor.editor.is-focused)

Config

{
  "core": {
    "telemetryConsent": "no"
  }
}

Installed Packages

# User
atom-clock, v0.1.0 (active)
language-mjml, v1.8.0 (active)
linter, v1.11.18 (active)
linter-mjml, v1.0.0 (active)
mjml-preview, v1.1.0 (active)
qolor, v0.4.1 (active)
atom-dark-syntax, v0.27.0 (inactive)
atom-dark-ui, v0.52.0 (inactive)
atom-light-syntax, v0.28.0 (inactive)
atom-light-ui, v0.45.0 (inactive)
base16-tomorrow-dark-theme, v1.3.0 (inactive)
base16-tomorrow-light-theme, v1.3.0 (inactive)
one-dark-ui, v1.6.2 (active)
one-light-ui, v1.6.2 (inactive)
one-dark-syntax, v1.5.0 (active)
one-light-syntax, v1.5.0 (inactive)
solarized-dark-syntax, v1.0.5 (inactive)
solarized-light-syntax, v1.0.5 (inactive)
about, v1.7.0 (active)
archive-view, v0.62.0 (active)
autocomplete-atom-api, v0.10.0 (active)
autocomplete-css, v0.13.1 (active)
autocomplete-html, v0.7.2 (active)
autocomplete-plus, v2.31.4 (active)
autocomplete-snippets, v1.11.0 (active)
autoflow, v0.27.0 (inactive)
autosave, v0.23.1 (active)
background-tips, v0.26.1 (active)
bookmarks, v0.42.0 (active)
bracket-matcher, v0.82.2 (active)
command-palette, v0.39.0 (inactive)
deprecation-cop, v0.54.1 (active)
dev-live-reload, v0.47.0 (active)
encoding-selector, v0.22.0 (active)
exception-reporting, v0.40.0 (active)
find-and-replace, v0.202.2 (inactive)
fuzzy-finder, v1.4.0 (active)
git-diff, v1.1.0 (active)
go-to-line, v0.31.0 (inactive)
grammar-selector, v0.48.2 (active)
image-view, v0.60.0 (active)
incompatible-packages, v0.26.1 (active)
keybinding-resolver, v0.35.0 (active)
line-ending-selector, v0.5.0 (active)
link, v0.31.2 (inactive)
markdown-preview, v0.158.8 (active)
metrics, v1.1.2 (active)
notifications, v0.65.1 (active)
open-on-github, v1.2.1 (inactive)
package-generator, v1.0.1 (inactive)
settings-view, v0.243.1 (active)
snippets, v1.0.4 (active)
spell-check, v0.68.4 (active)
status-bar, v1.4.1 (active)
styleguide, v0.47.2 (active)
symbols-view, v0.113.1 (inactive)
tabs, v0.103.0 (active)
timecop, v0.33.2 (active)
tree-view, v0.210.0 (active)
update-package-dependencies, v0.10.0 (active)
welcome, v0.35.1 (active)
whitespace, v0.35.0 (active)
wrap-guide, v0.38.2 (active)
language-c, v0.54.0 (active)
language-clojure, v0.22.1 (active)
language-coffee-script, v0.48.0 (active)
language-csharp, v0.13.0 (active)
language-css, v0.40.1 (active)
language-gfm, v0.88.0 (active)
language-git, v0.15.0 (active)
language-go, v0.43.0 (active)
language-html, v0.47.1 (active)
language-hyperlink, v0.16.1 (active)
language-java, v0.24.0 (active)
language-javascript, v0.122.0 (active)
language-json, v0.18.3 (active)
language-less, v0.29.6 (active)
language-make, v0.22.2 (active)
language-mustache, v0.13.0 (active)
language-objective-c, v0.15.1 (active)
language-perl, v0.37.0 (active)
language-php, v0.37.3 (active)
language-property-list, v0.8.0 (active)
language-python, v0.45.1 (active)
language-ruby, v0.70.2 (active)
language-ruby-on-rails, v0.25.1 (active)
language-sass, v0.57.0 (active)
language-shellscript, v0.23.0 (active)
language-source, v0.9.0 (active)
language-sql, v0.25.0 (active)
language-text, v0.7.1 (active)
language-todo, v0.29.1 (active)
language-toml, v0.18.1 (active)
language-xml, v0.34.12 (active)
language-yaml, v0.27.1 (active)

# Dev
No dev packages

Any idea of what to do ?

Thanks

Install Issue - Modules Compiled for an Earlier Version of Atom

I'm using Atom v1.18.0 x64 and I get the following error message when trying to install mjml-preview.

"Some installed packages could not be loaded because they contain native modules that were compiled for an earlier version of Atom."

Please can you advise?
Thanks.

Image caching issue

Hi,
I face a problem with the image cache. I use images from https://s3.eu-central-1.amazonaws.com
when I changed the images on s3 the mjml-preview still show the old images. I can't find a way to clear cache or force to re-load the new images from s3.

image

Best regards
Andreas

Preview shows as blank in atom 1.47 for Mac

Ever since I upgraded Atom to 1.47 for my Mac this package stopped working. When I save, a window pops open as normal, but it is blank.

When I tried on my older computer which was still on Atom 1.44 it worked no problem.

Screen Shot 2020-05-22 at 11 29 16 AM

Images not being displayed

First of all sorry for any mistake about the language and about posting this issue, 'cause It's the first time I open an issue.

The problem is that in the live preview on Atom images in the solution (so it's not about images hosted on the internet) are not being displayed.

It's the first project I do using MJML, so I don't know if I'm the only one, but I thought to open that issue if it can be helpful somehow.

Promise.done is deprecated.

Atom now uses ES6 Promises instead of Q. Call promise.then instead of promise.done

Promise.done (/Applications/Atom.app/Contents/Resources/app.asar/src/atom-environment.js:1214:5)
Object.openPane (/Users/marvin/.atom/packages/mjml-preview/lib/mjml-preview.js:73:72)
<unknown> (/Users/marvin/.atom/packages/mjml-preview/lib/mjml-preview.js:41:17)
Function.module.exports.Emitter.simpleDispatch (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/event-kit/lib/emitter.js:25:14)
Emitter.emit (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/event-kit/lib/emitter.js:129:28)
TextBuffer.saveAs (/Applications/Atom.app/Contents/Resources/app.asar/node_modules/text-buffer/lib/text-buffer.js:1144:27)

installation seems to be broken

I installed a fresh Atom from the Atom website (version: 1.45.0)
NPM Version: 6.14.3
no new packages are installed

from command line:
$ apm install mjml-preview

short log:

$ apm install mjml-preview
Installing mjml-preview to /home/joergi/.atom/packages โœ—

> [email protected] postinstall /tmp/apm-install-dir-12036-8487-lrpcvd.hkxis/node_modules/mjml-preview/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
Aborted (core dumped)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/mjml-preview/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN enoent ENOENT: no such file or directory, open '/tmp/apm-install-dir-12036-8487-lrpcvd.hkxis/package.json'
npm WARN apm-install-dir-12036-8487-lrpcvd.hkxis No description
npm WARN apm-install-dir-12036-8487-lrpcvd.hkxis No repository field.
npm WARN apm-install-dir-12036-8487-lrpcvd.hkxis No README data
npm WARN apm-install-dir-12036-8487-lrpcvd.hkxis No license field.

npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! [email protected] postinstall: `node -e "try{require('./postinstall')}catch(e){}"`
npm ERR! Exit status 134
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

long log file is attached
2020-04-06T11_35_28_888Z-debug.log

Is this plugin still supported?
Last update was like 2 years ago

Saving once closes the preview, saving again opens it again

This problem began recently so it might be because of some recent atom update.

Steps to reproduce:

  1. Open a mjml file and open the preview
  2. Make some changes and save, this will close the preview
  3. Save again and the preview will open again

Images are not rendering

Any images I include in the template are not rendering and appear broken when they are in fact valid URLs.

Atom preview crashes when using & for search in url

Hi, atom preview crashes when I use a url with an & in its search params:

href="http://mydomain.de/[email protected]&name=michael"

The error output in the atom console is:

/Users/mybook/.atom/packages/mjml-preview/node_modules/mjml-core/lib/Error.js:26
Uncaught (in promise) Error: [MJMLError] ParseError: Error while parsing the file(โ€ฆ)

at MJMLError.Error (native)
  at new MJMLError (/Users/mybook/.atom/packages/mjml-preview/node_modules/mjml-core/lib/Error.js:26:110)
  at documentParser (/Users/mybook/.atom/packages/mjml-preview/node_modules/mjml-core/lib/parsers/document.js:145:11)
  at MJMLRenderer.parseDocument (/Users/mybook/.atom/packages/mjml-preview/node_modules/mjml-core/lib/MJMLRenderer.js:137:45)
  at new MJMLRenderer (/Users/mybook/.atom/packages/mjml-preview/node_modules/mjml-core/lib/MJMLRenderer.js:125:12)
  at mjml2html (/Users/mybook/.atom/packages/mjml-preview/node_modules/mjml-core/lib/index.js:66:10)
  at MJMLView.renderMJML (/Users/mybook/.atom/packages/mjml-preview/lib/mjml-view.js:79:44)
  at MJMLView.render (/Users/mybook/.atom/packages/mjml-preview/lib/mjml-view.js:94:12)
  at /Users/mybook/.atom/packages/mjml-preview/lib/mjml-preview.js:74:27

Blank Preview - No error message...

I had tried preview previously, but without any luck and an error message (detailed in other issue)

I uninstalled the package, but tried again today after a suggestion that it might fix itself after a reinstall - I had tried this previously, but a few other packages and Atom has updated so I figured, why not?

Unfortunately... preview still isn't working, and I don't get any error message at all... All I get is a blank preview window

screen shot 2017-02-14 at 2 43 31 pm

Preview is blank (MacOS High Sierra)

I just moved from Windows -> Mac and the Preview Pane is blank but on Windows, it's working with the same code on Atom. I have tried reinstalling and still doesn't want to work, please help!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.