search

stephancasas / presto

HTML componentization, specialized for Alpine JS.
MIT License
26 stars 0 forks source link

template x-for dropped when bundling #3

Closed LaundroMat closed 3 years ago

LaundroMat commented 3 years ago

First of all, thank you for creating this!

When I try and bundle this code with npx presto

./src/app.html

<meta presto name="App">

<main class="container mx-auto px-2 md:px-0">
    <div x-data="{options: ['date', 'price', 'relevance']}">
        <select>
            <template x-for="selection in options"  :key="selection">
                <option :value="selection" x-text="selection"></option>
            </template>
        </select>
    </div>
</main>

./src/index.html

<!doctype html>
<link presto href="./app.html">
<body class="antialiased bg-gray-100 font-sans text-gray-700 ">
    <App />
</body>
</html>

this is being rendered:

./index.html

<html>
<head></head>
<body>
    <main class="container mx-auto px-2 md:px-0">
        <div x-data="{options: ['date', 'price', 'relevance']}">
            <select>
                <option :value="selection" x-text="selection"></option>
            </select>
        </div>
    </main>
</body>
</html>

As you can see, the template x-for loop is missing.

Is this intended behaviour and did I miss something or is this a bug?

stephancasas commented 3 years ago

Howdy! Thank you for your kind words and for raising this issue.

I am able to replicate the output you've described, and this is definitely not intended behavior. Presto uses cheeriojs as a bundled dependency to handle DOM manipulations, which has a habit of dropping <template> tags when it ingests HTML. While I'm sure the developers of cheerio had very good reasons for doing this, it definitely works against Presto's workflow.

To counteract this, Presto maintains a list of "unsafe" tags, and uses a series of regex sequences to escape occurrences into non-standard tags that are reverted just before writing to disk — <template> is definitely on this list. It does seem, however, that escaping did not occur as expected, so I'll investigate this tonight and push a bugfix asap.

Thank you again!

stephancasas commented 3 years ago

Hello, again!

It looks like cheerio attempts to standardize content between <select> tags by dropping everything other than <option> elements. To override this behavior, I've added select to the list of unsafe tags maintained by Presto.

Please update your project's version of Presto to v1.0.33 and attempt running your tests again.

As I push further toward getting Presto's source staged for examination and pull requests, moving away from cheerio as a dependency is something under heavy consideration. Knowing that this is going to eventually occur has been a key reason that Presto is presently only available as a preview in its dist state.

Please let me know what your findings are when you've had a chance to test.

Thanks!

LaundroMat commented 3 years ago

Thanks for the quick fix! It works now, also in my code (and not only in the barebones I posted). Keep up the good work!