search

YoloDev / rstml-component

MIT License
4 stars 2 forks source link

strict equality '===' transformed to '== =' #21

Closed fattenap closed 9 months ago

fattenap commented 9 months ago

Hi @Alxandr ,

First off, I really like this library. Thank you for making it available for people like me to use.

I came across an issue but I'm not too sure whether this is an issue with your lib or rshtml or something else 🤔 So I thought I'd ask you first.

When parsing inline scripts using html! it seems that it transforms all the strict comparison operators, that use three symbols, and splits them. For example:

if(active === true) { ... } would be transformed to if(active == = true) { ... }

Is this something that your lib would have control over or is it something that one of the dependencies manages?

Thanks

Alxandr commented 9 months ago

I need a bit more info about how you're embedding your script - but my best guess with what information I have is that it's a limitation of the rust macro system. Regardless, it's almost certainly not rstml-component.

To illustrate, the following works "as you would expect": html!(<div>some text</div>) - however, it's basically a big hack. The thing you have to remember is that anything you pass in to a rust macro has to be valid rust tokens (not syntax, just tokens). So first this gets parsed into a list of tokens (something like [LessThan, Ident(div), GreaterThan, Ident(some), Ident(text)....]). This removes all whitespace and comments. The "proper" way to deal with this (and what you probably want to do with embedded javascript) is this: html!(<div>"some text"</div>). Basically, make node content into strings.

fattenap commented 9 months ago

The way that I have been adding embedded scripts is 

html! (
      <head>
        <script type="application/javascript">
          const menuKeyboardNavListener = (event) => {
            const menubar = document.querySelector("#menu-items");
            if (menubar.contains(event.target)) {
              const menuItems = menubar.querySelectorAll("li [role=menuitem]");
              if (event.key === "ArrowDown" || event.key === "ArrowRight" ||
                event.key === "ArrowUp" || event.key === "ArrowLeft") {
                …
            }
          };
    …
    </script>
    </head>
    …
)

But given your explanation, it's something that I need to work around. No problem. Thank you for explaining.

Alxandr commented 9 months ago

My recomendation - put it in a js file next to the rs file, and include it using one of the import macros. That way you get a const string containing your JS, that you can easily use as html!(<script>{my_script}</script>);. It's a bit less "everything in one file" - but the alternative is a giant rust string which means no syntax highlighting.