Coder Social home page Coder Social logo

Comments (3)

renatodeleao avatar renatodeleao commented on June 24, 2024 3

@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

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

from mjml-rails.

Renjaminino avatar Renjaminino commented on June 24, 2024

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.

from mjml-rails.

sighmon avatar sighmon commented on June 24, 2024

@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.

from mjml-rails.

Related Issues (20)

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.