jon-sully
commented
2 months ago So... I ran into this and figured out a solution, specifically for Stimulus, but it's not exactly pretty. Leaving my notes here in case anybody else wants to give it a go.
After digging through the source of this project and iterating over a LOT of regex tries, the secret lies in the
ELEMENT_CONTENT = %r{ (?:<%.*?%>|[^>])* }mx
# change to
ELEMENT_CONTENT = %r{ (?:<%.*?%>|data-action\s*=\s*"(?:[^"]*?->[^"]*?)"|[^>])* }mxAnd the
[%r{<#{ELEMENT_CONTENT}[^/]>}om,
:open_element],
# change to
[%r{<#{ELEMENT_CONTENT}[^/]*?>}om,
:open_element],Which basically reconfigures the parser to ignore anything inside a data-action="[anything]" attribute/value.
I tried to monkey-patch this in, but ultimately htmlbeautifier isn't loaded from something like Rails, which initializes monkey patches. There are other ways, but they didn't work well for me.
What did work well for me is... a bit rougher, but overall a self-contained solution.
I created a new bin-script called bin/erb then essentially collapsed this project down into a single executable script (make sure you chmod to make it executable!) with my edits inside.
[!NOTE]
I also prefer having a line break between basically every disparate element in my HTML, so I also tweaked
Builder#emit— you'll see the "JonSully override". Feel free to remove that line if you prefer
The Code for `bin/erb` (click to open)
```ruby
#!/usr/bin/env ruby
# NOTE: Bundles up the gem `htmlbeautifier` into a single executable Ruby script
# NOTE: Contains a couple of overrides from the stock script.
# NOTE: Set `execute path` in the VS Code plugin to simply `bin/erb` (This file)
require "strscan"
require "optparse"
require "fileutils"
require "stringio"
class Parser
def initialize
@maps = []
yield self if block_given?
end
def map(pattern, method)
@maps << [pattern, method]
end
def scan(subject, receiver)
@scanner = StringScanner.new(subject)
dispatch(receiver) until @scanner.eos?
end
def source_so_far
@scanner.string[0...@scanner.pos]
end
def source_line_number
[source_so_far.chomp.split(%r{\n}).count, 1].max
end
private
def dispatch(receiver)
_, method = @maps.find { |pattern, _| @scanner.scan(pattern) }
raise "Unmatched sequence" unless method
receiver.__send__(method, *extract_params(@scanner))
rescue => e
raise "#{e.message} on line #{source_line_number}"
end
def extract_params(scanner)
return [scanner[0]] unless scanner[1]
params = []
i = 1
while scanner[i]
params << scanner[i]
i += 1
end
params
end
end
class HtmlParser < Parser
# ELEMENT_CONTENT = %r{ (?:<%.*?%>|[^>])* }mx # stock
ELEMENT_CONTENT = %r{ (?:<%.*?%>|data-action\s*=\s*"(?:[^"]*?->[^"]*?)"|[^>])* }mx # JonSully override
HTML_VOID_ELEMENTS = %r{(?:
area | base | br | col | command | embed | hr | img | input | keygen |
link | meta | param | source | track | wbr
)}mix
HTML_BLOCK_ELEMENTS = %r{(?:
address | article | aside | audio | blockquote | canvas | dd | details |
dir | div | dl | dt | fieldset | figcaption | figure | footer | form |
h1 | h2 | h3 | h4 | h5 | h6 | header | hr | li | menu | noframes |
noscript | ol | p | pre | section | table | tbody | td | tfoot | th |
thead | tr | ul | video
)}mix
MAPPINGS = [
[%r{(<%-?=?)(.*?)(-?%>)}om,
:embed],
[%r{}om,
:close_ie_cc],
[%r{}om,
:standalone_element],
[%r{}om,
:standalone_element],
[%r{(
I told you it wasn't exactly pretty! But now if we set the VS Code extension to use a custom "execute path", setting it to simply bin/erb, it'll work.
Plus we can uninstall the htmlbeautifier gem itself since we're running our own stock ruby, not the gem.
andyw8
is incorrectly formatted to
(Without the
>it works correctly).This causes problems for Hotwire/Stimulus since it uses notation such as: