onyourmarks-agency / tde-webpack-mjml-plugin Goto Github PK

View Code? Open in Web Editor NEW

12.0 2.0 7.0 23 KB

Webpack plugin for converting MJML files to HTML

License: MIT License

JavaScript 100.00%

tde webpack-plugin mjml-files mjml webpack webpack3 webpack2

tde-webpack-mjml-plugin's Introduction

TDE Webpack MJML Plugin

Webpack plugin for converting MJML files to HTML

Install

npm install --save-dev tde-webpack-mjml-plugin

Usage

In your webpack.config.js

var MjmlPlugin = require('tde-webpack-mjml-plugin');

module.exports = {
    // ...
    plugins: [
        new MjmlPlugin(paths.MJML, {
            extension: '.twig',
            outputPath: 'path/to/mjml'
        }),
    ]
};

API:

// webpack.config.js

module.exports = {
    plugins: [
        new MjmlPlugin(inputPath, {
            extension: options.extension,
            outputPath: options.outputPath
        }),
    ]
}

`inputPath`

Type: String

The path where MJML files are located

`options.extension`

Type: String
Default: ".html"

The default output extension

`options.outputPath`

Type: String
Default: ""

The path where HTML files should be written to

License

MIT © TDE

tde-webpack-mjml-plugin's People

Stargazers

Watchers

Forkers

voydz stidges 1415926535 graycrow elpete webatvantage

tde-webpack-mjml-plugin's Issues

Support for mj-include relative path.

This plugin doesn't work correctly when mj-include referencing a file with relative path, for example <mj-include path="../includes/header.mjml" />.

It can be fixed with creating optional filePath property on the mjml2html function options object.

So, maybe this plugin should make it possible? As another config parameter for example?

const defaultOptions = {
    extension: ".html",
    outputPath: "",
    filePath: "."
};

...

let response = mjml2html(contents, {
    filePath: that.options.filePath
});

Path delimiters mismatch in Windows.

I'm using path.resolve() to generate paths for inputPath and outputPath. In unix-based OS output files are placed in the correct directory. In windows html files are generated in the same directory as input files.

It happens because path.resolve() in Windows return path in Windows format, with backslash as delimiter, but glob() always returns paths with forward slash and replace() function cannot find a match then and output path stays the same.

Maybe it's a good idea to normalize paths to the forward slash? For example like this

const WebpackMjmlStore = function (inputPath, options) {
    this.inputPath = inputPath.replace(/\\/g,"/");
    this.options = _.defaults(options, defaultOptions);
    this.options.outputPath = this.options.outputPath.replace(/\\/g,"/");
};

I'm still getting the deprecation warning using `"tde-webpack-mjml-plugin": "^1.4.0"`.

I'm still getting the deprecation warning using "tde-webpack-mjml-plugin": "^1.4.0".

(node:30059) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

Any pointers on how to solve this?

Originally posted by @mauricesnip in #6 (comment)

Fix 2.0.1 release on NPM

Hello,

Im currently upgrading one of our setups, and I noticed that you released a 2.0.1 version. However on NPM it is still defined as 2.0.0: https://www.npmjs.com/package/tde-webpack-mjml-plugin

This gives errors when upgrading to webpack 5 unfortunately :(

Is this something you could look into to fixing?

npm ERR! code ETARGET
npm ERR! notarget No matching version found for tde-webpack-mjml-plugin@^2.0.1.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

[Important] Looking for maintainers

Internally we aren't actively using MJML anymore and with that I regret to inform that we do not plan to maintain this plugin anymore.

That said. We are willing to give access to this repository and NPM to those who would love to revive this Webpack plugin.

If you are interested, please send an email to [email protected] so we can discuss the handover.

Plans on adding webpack 4 support?

Currently this error appears with webpack 4:

(node:29987) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/node_modules/tde-webpack-mjml-plugin/src/webpack-mjml-store.js:68
      let response = mjml2html(contents);
                     ^

TypeError: mjml2html is not a function
    at /node_modules/tde-webpack-mjml-plugin/src/webpack-mjml-store.js:68:22
    at /node_modules/graceful-fs/graceful-fs.js:90:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

Thanks!

[request] Support for mjml options

Thanks for the work on this. Love the plugin.

It would be good to be able to configure the mjml options through the plugin parameters. At the moment, the only option that is passed through is the filePath:

https://github.com/tdeNL/tde-webpack-mjml-plugin/blob/59618ffa6913e65a95422436c3adad69ecf1b286/src/webpack-mjml-store.js#L93-L95

It would be great to be able to pass the options to the plugin, or alternatively enable the useMjmlConfigOptions option so that then it would pick up the config property inside the root level .mjmlconfig file. This option is set to false by default.

If you're open to PRs, I can submit something.