search

PataphysicalSociety / soupault

Static website generator based on HTML element tree rewriting
https://soupault.app
MIT License
380 stars 18 forks source link

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

Open DrSensor opened 1 year ago

DrSensor commented 1 year ago

Currently the parser (https://github.com/aantron/lambdasoup/issues/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

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

ispringle commented 1 year ago

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.