Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Doesn't work well with AlpineJS (namespace syntax) #51

Open
DrSensor opened this issue May 30, 2023 · 1 comment
Open

Doesn't work well with AlpineJS (namespace syntax) #51

DrSensor opened this issue May 30, 2023 · 1 comment

Comments

@DrSensor
Copy link

DrSensor commented May 30, 2023 •
edited
Loading

Currently the parser (aantron/lambdasoup#12) remove the namespace which break html page that use AlpineJS.

For example:

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>
 
    <span x-text="count"></span>
</div>

<div x-data="{ placeholder: 'Type here...' }">
    <input type="text" x-bind:placeholder="placeholder">
</div>

transformed into

<!DOCTYPE html>
<html>
 <head></head>
 <body>
  <script src="//unpkg.com/alpinejs" defer=""></script>
  <div x-data="{ count: 0 }">
   <button click="count++">Increment</button>
 
    <span x-text="count"></span>
  </div>
  <div x-data="{ placeholder: 'Type here...' }">
   <input type="text" placeholder="placeholder">
  </div>
 </body>
</html>

However, the alternative syntax works fine, e.g

  • x-on:click -> @click
  • x-bind:placeholder -> :placeholder

Not AlpineJS related issues but it might cause trouble on other buildless js/html framework:

  • Attribute :: transformed into ::="" (not removed 👍)
  • Attribute name:="value" transformed into ="value" (malformed 👎)
@ispringle
Copy link

Hey, I'm fairly certain this is a problem with the lambdasoup library. It eats attrs it doesn't recognize when it tries to pretty print. You can get around this by disabling pretty print in your soupault config. When I took your example and added

[settings]
  ...
  pretty_print_html = false

It resulted in the following output:

<script src="//unpkg.com/alpinejs" defer=""></script>

<div x-data="{ count: 0 }">
    <button click="count++">Increment</button>
 
    <span x-text="count"></span>
</div>

<div x-data="{ placeholder: 'Type here...' }">
    <input type="text" placeholder="placeholder">
</div>

So I am fairly certain this is really on the lambdasoup library and now on soupault.

@aantron aantron mentioned this issue Sep 5, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@DrSensor @ispringle