mjml-rb 0.2.1

data/lib/mjml-rb/components/spacer.rb

@@ -0,0 +1,63 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Spacer < Base
+      TAGS = ["mj-spacer"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "border" => "string",
+        "border-bottom" => "string",
+        "border-left" => "string",
+        "border-right" => "string",
+        "border-top" => "string",
+        "container-background-color" => "color",
+        "padding-bottom" => "unit(px,%)",
+        "padding-left" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "padding-top" => "unit(px,%)",
+        "padding" => "unit(px,%){1,4}",
+        "height" => "unit(px,%)"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "height" => "20px"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        a = self.class.default_attributes.merge(attrs)
+        height = a["height"]
+        outer_td_attrs = {
+          "class" => a["css-class"],
+          "style" => style_join(
+            "background" => a["container-background-color"],
+            "border" => a["border"],
+            "border-bottom" => a["border-bottom"],
+            "border-left" => a["border-left"],
+            "border-right" => a["border-right"],
+            "border-top" => a["border-top"],
+            "padding" => a["padding"],
+            "padding-top" => a["padding-top"],
+            "padding-right" => a["padding-right"],
+            "padding-bottom" => a["padding-bottom"],
+            "padding-left" => a["padding-left"],
+            "word-break" => "break-word"
+          )
+        }
+        div_attrs = {
+          "style" => style_join(
+            "height" => height,
+            "line-height" => height,
+            "font-size" => "0"
+          )
+        }
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}><div#{html_attrs(div_attrs)}>&#8202;</div></td></tr>)
+      end
+    end
+  end
+end

data/lib/mjml-rb/components/table.rb

@@ -0,0 +1,162 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Table < Base
+      TAGS = ["mj-table"].freeze
+
+      DEFAULTS = {
+        "align"        => "left",
+        "border"       => "none",
+        "cellpadding"  => "0",
+        "cellspacing"  => "0",
+        "color"        => "#000000",
+        "font-family"  => "Ubuntu, Helvetica, Arial, sans-serif",
+        "font-size"    => "13px",
+        "line-height"  => "22px",
+        "padding"      => "10px 25px",
+        "table-layout" => "auto",
+        "width"        => "100%"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        a = DEFAULTS.merge(attrs)
+
+        outer_td_style = style_join(
+          "background"     => a["container-background-color"],
+          "font-size"      => "0px",
+          "font-family"    => "inherit",
+          "padding"        => a["padding"],
+          "padding-top"    => a["padding-top"],
+          "padding-right"  => a["padding-right"],
+          "padding-bottom" => a["padding-bottom"],
+          "padding-left"   => a["padding-left"],
+          "word-break"     => "break-word"
+        )
+        outer_td_attrs = {
+          "align"          => a["align"],
+          "vertical-align" => a["vertical-align"],
+          "class"          => a["css-class"],
+          "style"          => outer_td_style
+        }
+
+        cellspacing_has_value = has_cellspacing?(a["cellspacing"])
+        table_style = style_join(
+          "color"           => a["color"],
+          "font-family"     => a["font-family"],
+          "font-size"       => a["font-size"],
+          "line-height"     => a["line-height"],
+          "table-layout"    => a["table-layout"],
+          "width"           => a["width"],
+          "border"          => a["border"],
+          "border-collapse" => (cellspacing_has_value ? "separate" : nil)
+        )
+
+        # Attribute order matches official mjml output: cellpadding, cellspacing, role, width, border, style
+        table_attrs = {
+          "cellpadding" => a["cellpadding"],
+          "cellspacing" => a["cellspacing"],
+          "role"        => a["role"],
+          "width"       => get_width(a["width"]),
+          "border"      => "0",
+          "style"       => table_style
+        }
+
+        content = serialize_table_children(node)
+        table_html = %(<table#{html_attrs(table_attrs)}>#{content}</table>)
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}>#{table_html}</td></tr>)
+      end
+
+      private
+
+      def get_width(width)
+        return width if width == "auto"
+
+        if width =~ /^(\d+(?:\.\d+)?)\s*%$/
+          width # keep as "100%"
+        elsif width =~ /^(\d+(?:\.\d+)?)\s*px$/
+          ::Regexp.last_match(1) # return just the number e.g. "300"
+        else
+          width
+        end
+      end
+
+      def has_cellspacing?(cellspacing)
+        return false if cellspacing.nil? || cellspacing.to_s.strip.empty?
+
+        num = cellspacing.to_s.gsub(/[^\d.]/, "").to_f
+        num > 0
+      end
+
+      def serialize_table_children(node)
+        node.children.map { |child| serialize_table_node(child) }.join
+      end
+
+      def serialize_table_node(node)
+        return node.content.to_s if node.text?
+        return "" if node.comment?
+
+        attrs = normalize_table_node_attributes(node)
+        attr_html = attrs.map { |key, value| %( #{key}="#{escape_attr(value)}") }.join
+
+        return "<#{node.tag_name}#{attr_html} />" if node.children.empty?
+
+        inner = node.children.map { |child| serialize_table_node(child) }.join
+        "<#{node.tag_name}#{attr_html}>#{inner}</#{node.tag_name}>"
+      end
+
+      def normalize_table_node_attributes(node)
+        attrs = node.attributes.dup
+        style_map = parse_style_map(attrs["style"])
+
+        if %w[table td th a].include?(node.tag_name)
+          style_map["font-family"] ||= "inherit"
+        end
+
+        if node.tag_name == "table"
+          unless attrs.key?("width") || style_map.key?("width")
+            attrs["width"] = "100%"
+            style_map["width"] = "100%"
+          end
+        end
+
+        if %w[td th].include?(node.tag_name)
+          attrs["width"] ||= style_to_html_width(style_map["width"])
+          attrs["align"] ||= style_map["text-align"] if style_map["text-align"]
+          attrs["valign"] ||= style_map["vertical-align"] if style_map["vertical-align"]
+        end
+
+        attrs["style"] = serialize_style_map(style_map) unless style_map.empty?
+        attrs.delete("style") if style_map.empty?
+        attrs.compact
+      end
+
+      def parse_style_map(style)
+        return {} if style.nil? || style.strip.empty?
+
+        style.split(";").each_with_object({}) do |declaration, memo|
+          key, value = declaration.split(":", 2).map { |part| part&.strip }
+          next if key.nil? || key.empty? || value.nil? || value.empty?
+
+          memo[key] = value
+        end
+      end
+
+      def serialize_style_map(style_map)
+        style_map.map { |key, value| "#{key}: #{value}" }.join("; ")
+      end
+
+      def style_to_html_width(value)
+        return if value.nil?
+
+        match = value.match(/\A(\d+(?:\.\d+)?)px\z/)
+        match ? match[1] : value
+      end
+    end
+  end
+end

data/lib/mjml-rb/components/text.rb

@@ -0,0 +1,71 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Text < Base
+      TAGS = ["mj-text"].freeze
+
+      DEFAULTS = {
+        "align" => "left",
+        "color" => "#000000",
+        "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
+        "font-size" => "13px",
+        "line-height" => "1",
+        "padding" => "10px 25px"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        a = DEFAULTS.merge(attrs)
+        height = a["height"]
+
+        outer_td_style = style_join(
+          "background" => a["container-background-color"],
+          "font-size" => "0px",
+          "padding" => a["padding"],
+          "padding-top" => a["padding-top"],
+          "padding-right" => a["padding-right"],
+          "padding-bottom" => a["padding-bottom"],
+          "padding-left" => a["padding-left"],
+          "word-break" => "break-word"
+        )
+        outer_td_attrs = {
+          "align" => a["align"],
+          "vertical-align" => a["vertical-align"],
+          "class" => a["css-class"],
+          "style" => outer_td_style
+        }
+
+        div_style = style_join(
+          "font-family" => a["font-family"],
+          "font-size" => a["font-size"],
+          "font-style" => a["font-style"],
+          "font-weight" => a["font-weight"],
+          "letter-spacing" => a["letter-spacing"],
+          "line-height" => a["line-height"],
+          "text-align" => a["align"],
+          "text-decoration" => a["text-decoration"],
+          "text-transform" => a["text-transform"],
+          "color" => a["color"],
+          "height" => height
+        )
+
+        content = html_inner(node)
+        inner_div = %(<div style="#{div_style}">#{content}</div>)
+
+        body = if height
+                 outlook_open = %(<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="#{escape_attr(height)}" style="vertical-align:top;height:#{escape_attr(height)};"><![endif]-->)
+                 outlook_close = %(<!--[if mso | IE]></td></tr></table><![endif]-->)
+                 "#{outlook_open}#{inner_div}#{outlook_close}"
+               else
+                 inner_div
+               end
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}>#{body}</td></tr>)
+      end
+    end
+  end
+end

data/lib/mjml-rb/dependencies.rb

@@ -0,0 +1,67 @@
+module MjmlRb
+  module Dependencies
+    RULES = {
+      "mjml" => ["mj-body", "mj-head", "mj-raw"],
+      "mj-accordion" => ["mj-accordion-element", "mj-raw"],
+      "mj-accordion-element" => ["mj-accordion-title", "mj-accordion-text", "mj-raw"],
+      "mj-accordion-title" => [],
+      "mj-accordion-text" => [],
+      "mj-attributes" => [/.*/],
+      "mj-body" => ["mj-raw", "mj-section", "mj-wrapper", "mj-hero"],
+      "mj-button" => [],
+      "mj-carousel" => ["mj-carousel-image"],
+      "mj-carousel-image" => [],
+      "mj-column" => [
+        "mj-accordion",
+        "mj-button",
+        "mj-carousel",
+        "mj-divider",
+        "mj-image",
+        "mj-raw",
+        "mj-social",
+        "mj-spacer",
+        "mj-table",
+        "mj-text",
+        "mj-navbar"
+      ],
+      "mj-html-attribute" => [],
+      "mj-html-attributes" => ["mj-selector"],
+      "mj-divider" => [],
+      "mj-group" => ["mj-column", "mj-raw"],
+      "mj-head" => [
+        "mj-attributes",
+        "mj-breakpoint",
+        "mj-html-attributes",
+        "mj-font",
+        "mj-preview",
+        "mj-style",
+        "mj-title",
+        "mj-raw"
+      ],
+      "mj-hero" => [
+        "mj-accordion",
+        "mj-button",
+        "mj-carousel",
+        "mj-divider",
+        "mj-image",
+        "mj-social",
+        "mj-spacer",
+        "mj-table",
+        "mj-text",
+        "mj-navbar",
+        "mj-raw"
+      ],
+      "mj-image" => [],
+      "mj-navbar" => ["mj-navbar-link", "mj-raw"],
+      "mj-raw" => [/^(?!mj-).+/],
+      "mj-section" => ["mj-column", "mj-group", "mj-raw"],
+      "mj-selector" => ["mj-html-attribute"],
+      "mj-social" => ["mj-social-element", "mj-raw"],
+      "mj-social-element" => [],
+      "mj-spacer" => [],
+      "mj-table" => [/^(?!mj-).+/],
+      "mj-text" => [/^(?!mj-).+/],
+      "mj-wrapper" => ["mj-hero", "mj-raw", "mj-section"]
+    }.freeze
+  end
+end

data/lib/mjml-rb/migrator.rb

@@ -0,0 +1,18 @@
+module MjmlRb
+  class Migrator
+    TAG_RENAMES = {
+      "mj-container" => "mj-body"
+    }.freeze
+
+    def migrate(mjml)
+      output = mjml.to_s.dup
+
+      TAG_RENAMES.each do |from, to|
+        output.gsub!("<#{from}", "<#{to}")
+        output.gsub!("</#{from}>", "</#{to}>")
+      end
+
+      output
+    end
+  end
+end

data/lib/mjml-rb/parser.rb

@@ -0,0 +1,169 @@
+require "rexml/document"
+require "rexml/xpath"
+
+require_relative "ast_node"
+
+module MjmlRb
+  class Parser
+    include REXML
+    HTML_VOID_TAGS = %w[area base br col embed hr img input link meta param source track wbr].freeze
+
+    class ParseError < StandardError
+      attr_reader :line
+
+      def initialize(message, line: nil)
+        super(message)
+        @line = line
+      end
+    end
+
+    def parse(mjml, options = {})
+      opts = normalize_options(options)
+      xml = apply_preprocessors(mjml.to_s, opts[:preprocessors])
+      xml = normalize_html_void_tags(xml)
+      xml = expand_includes(xml, opts) unless opts[:ignore_includes]
+
+      doc = Document.new(sanitize_bare_ampersands(xml))
+      element_to_ast(doc.root, keep_comments: opts[:keep_comments])
+    rescue ParseException => e
+      raise ParseError.new("XML parse error: #{e.message}")
+    end
+
+    private
+
+    def normalize_options(options)
+      {
+        keep_comments: options[:keep_comments],
+        preprocessors: Array(options[:preprocessors]),
+        ignore_includes: !!options[:ignore_includes],
+        file_path: options[:file_path] || ".",
+        actual_path: options[:actual_path] || "."
+      }
+    end
+
+    def apply_preprocessors(xml, preprocessors)
+      preprocessors.reduce(xml) do |current, preprocessor|
+        preprocessor.respond_to?(:call) ? preprocessor.call(current).to_s : current
+      end
+    end
+
+    def expand_includes(xml, options)
+      xml = normalize_html_void_tags(xml)
+      doc = Document.new(sanitize_bare_ampersands(xml))
+      includes = XPath.match(doc, "//mj-include")
+      return xml if includes.empty?
+
+      includes.reverse_each do |include_node|
+        path_attr = include_node.attributes["path"]
+        raise ParseError, "mj-include path is required" if path_attr.to_s.empty?
+
+        include_type = include_node.attributes["type"].to_s
+        resolved_path = resolve_include_path(path_attr, options[:actual_path], options[:file_path])
+        include_content = File.read(resolved_path)
+
+        replacement = if include_type == "html"
+                        %(<mj-raw><![CDATA[#{escape_cdata(include_content)}]]></mj-raw>)
+                      else
+                        normalize_html_void_tags(strip_xml_declaration(include_content))
+                      end
+
+        fragment = Document.new(sanitize_bare_ampersands("<include-root>#{replacement}</include-root>"))
+        parent = include_node.parent
+        insert_before = include_node
+        fragment.root.children.each do |child|
+          parent.insert_before(insert_before, deep_clone(child))
+        end
+        parent.delete(include_node)
+      end
+
+      output = +""
+      doc.write(output)
+      output
+    rescue Errno::ENOENT => e
+      raise ParseError, "Cannot read included file: #{e.message}"
+    rescue ParseException => e
+      raise ParseError, "Failed to parse included content: #{e.message}"
+    end
+
+    def strip_xml_declaration(content)
+      content.sub(/\A<\?xml[^>]*\?>\s*/m, "")
+    end
+
+    def normalize_html_void_tags(content)
+      # Remove closing tags for void elements (e.g. </br>, </hr>).
+      # These are invalid in both HTML and XML but appear in legacy content.
+      content = content.gsub(/<\/(#{HTML_VOID_TAGS.join("|")})\s*>/i, "")
+
+      # Self-close opening void tags that aren't already self-closed.
+      pattern = /<(#{HTML_VOID_TAGS.join("|")})(\s[^<>]*?)?>/i
+      content.gsub(pattern) do |tag|
+        tag.end_with?("/>") ? tag : tag.sub(/>$/, " />")
+      end
+    end
+
+    def escape_cdata(content)
+      content.to_s.gsub("]]>", "]]]]><![CDATA[>")
+    end
+
+    # Escape bare "&" that are not part of a valid XML entity reference
+    # (e.g. &amp; &#123; &#x1F;).  This lets REXML parse HTML-ish content
+    # such as "Terms & Conditions" which is common in email templates.
+    def sanitize_bare_ampersands(content)
+      content.gsub(/&(?!(?:#[0-9]+|#x[0-9a-fA-F]+|[a-zA-Z][a-zA-Z0-9]*);)/, "&amp;")
+    end
+
+    def resolve_include_path(include_path, actual_path, file_path)
+      include_path = include_path.to_s
+      return include_path if File.absolute_path(include_path) == include_path && File.file?(include_path)
+
+      candidates = []
+      candidates << File.expand_path(include_path, File.dirname(actual_path.to_s))
+      candidates << File.expand_path(include_path, file_path.to_s)
+      candidates << File.expand_path(include_path, Dir.pwd)
+
+      existing = candidates.find { |candidate| File.file?(candidate) }
+      return existing if existing
+
+      raise Errno::ENOENT, include_path
+    end
+
+    def deep_clone(node)
+      case node
+      when Element
+        clone = Element.new(node.name)
+        node.attributes.each_attribute { |attr| clone.add_attribute(attr.expanded_name, attr.value) }
+        node.children.each { |child| clone.add(deep_clone(child)) }
+        clone
+      when Text
+        Text.new(node.value)
+      when Comment
+        Comment.new(node.string)
+      else
+        node
+      end
+    end
+
+    def element_to_ast(element, keep_comments:)
+      raise ParseError, "Missing XML root element" unless element
+
+      children = element.children.each_with_object([]) do |child, memo|
+        case child
+        when Element
+          memo << element_to_ast(child, keep_comments: keep_comments)
+        when Text
+          text = child.value
+          memo << AstNode.new(tag_name: "#text", content: text) unless text.strip.empty?
+        when Comment
+          memo << AstNode.new(tag_name: "#comment", content: child.string) if keep_comments
+        end
+      end
+
+      AstNode.new(
+        tag_name: element.name,
+        attributes: element.attributes.each_with_object({}) { |(name, val), h| h[name] = val },
+        children: children,
+        line: nil
+      )
+    end
+  end
+end