sighmon/mjml-rails

Create and register custom components

Opened this issue · 3 comments

renatodeleao commented

Heys! thanks to the community for the work on this 🙏

This is a question, more than an issue. I was wondering how can we register mjml custom components using this setup?

I know that since we're in rails and have proper templating, we can just code custom component as partials, but i'm thinking on situation where the components are built in isolation elsewhere (as module), installed via npm/yarn and then imported, registered and ready to be used.

Let me know if this makes any sense.
Cheers ☮️
R.
(not the brightest ruby/rails dev here)

Renjaminino commented

That's a good point Renato.

I'm curious how that might be done. I know that if you run mjml in isolation, you can still import the content / partials, as long as the versions are the same. In theory you could import a deprecated mjml product into a ruby environment but it might give you compatibility warnings during compilation.

I need to actually try this myself, but once the controller in rails is set to run and compile mjml, you should be able to build a custom component, add any extra settings into your controller, and voila. All rails needs is to register where this formerly isolated component, is residing.

There was a discussion at some point, on building a controller that simply detects all the files within the mjml rails structure and works with them, even if you imported custom components. As long as they paths matched your setup.

Cheers,
R.

sighmon commented

@renatodeleao @Renjaminino I've never needed to build my own custom components, so I'm not going to be much help. But look forward to your pull request.

renatodeleao commented

@Renjaminino thanks for the reply. @sighmon here's some extra info.

Again not the most avid Rails/ruby dev so take this with a pinch of salt, but I don't see this belonging the controller responsability.

What i meant with custom-components are actually extensions of the mjml markup language, which is already possible with the js/node library. ( I've referenced the links the issue description how you can create those).

So let's picture this:

  • Mjml components are written in javascript, as the mjml itself.
  • I have custom component, named <mj-island>, this has an associated .js file that lives in my-mjml-components/mj-island.js. (most real scenario will be in node_modules but let's keep with this for example purposes)
  • I should be able to register this component in the mjml instance (or bin) (like you can when using registerComponent() with the direct mjml javascript library)
  • After that this should just work™ 
     <mjml>
   <mj-body>
      <mj-island />
  </mj-body>
</mjml>

A yet untested assumption on how to make it work

There might be an mjml-core configuration option that can help us here: packages. The current documentation barely mentions its existence and usage, but this particular piece of documentation on community components) references it

// .mjmlconfig
{
  packages: [
    "path/to/my-mjml-components/mj-insland.js"
  ]
}

So apparently we can pass a custom config file .mjmlconfig to the cli, and the packages key allow us to specify an Array of custom components paths

The option available to the CLI is mjml --config.mjmlConfigPath <path>

The path or directory of the .mjmlconfig file (for custom components use)

Assumption

So i assume that maybe it's possible to feed our mjml BIN with custom components, judging by this line of code

mjml-rails/lib/mjml/parser.rb

Line 38 in c7f5b24

command = "#{mjml_bin} -r #{in_tmp_file} -o #{out_tmp_file.path} --config.beautify #{beautify} --config.minify #{minify}"

Which could become

# removed the beautify options for brevity, we can merge them with the config file
 command = "#{mjml_bin} -r #{in_tmp_file} -o #{out_tmp_file.path}  --config.mjmlConfigPath #{configPath}" 
#initalizers/mjml.rb
Mjml.setup do |config|
  config.configPath = "#{Rails.root}/.mjmlconfig" # or an hash directly?
end

Now, the question for you guys: how delusional am I? 😅

I'll try to do a couple of tests myself, if I find that i'm crazy i'll come here and say sorry for wasting your time, if not i'll try to make a PR.

Cheers,
R

  • 👍3