stephancasas / presto Goto Github PK

View Code? Open in Web Editor NEW

25.0 3.0 0.0 649 KB

HTML componentization, specialized for Alpine JS.

License: MIT License

html components componentization alpine alpinejs

presto's People

Contributors

Stargazers

Watchers

presto's Issues

[QUESTION] Integration with Vite

Hi @stephancasas. So, my boilerplate with the component based structure is coming on nicely. I have, however, decided to swap out rollup with Vite, for build and bundling. Everything works really well. I just want some advice on one item, when including presto in my build chain.

Vite relies on the index.html file as its starting point. So, before adding presto to my app, the build would basically do the following:

Scan index.html from the src folder
Change relative paths for assets, etc in this file
Work through index.js in the src folder, which is embed in the index.html file, and does all the js imports, bundling, etc, etc
Then copy over the final bundle (including the changed index.html) to the list folder

All of this works 100%.

Now, when including presto in my project, I will have a situation whereby both presto and vite need to make changes to the index.html. The only way I can see around this is:

Create a new "main" html file in src (example app.html)
Then change my presto.config.js to look something like this:

export default {
  input: 'src/app.html',
  output: {
    file: 'src/index.html',
    formatting: 'none'
  }
}

My build commands will then be:

"build:markup": "presto --config presto.config.js",
"build:bundle": "vite build",
"build": "npm-run-all build:markup build:bundle"

The theory is that presto will do its magic, and then create the index.html that vite will use to build and bundle

Does this make sense? Can you think of an easier/better way to achieve this?

Handle a directory as input in presto.config?

I'm trying to find a middle ground between a static site generator and hand-crafted html. I was wondering whether it is possible to create a folder (e.g. blog-posts/) and have presto traverse that whole folder and output all the files into ./dist ?

Basically, presto.config.js contain something like this:

{
    input: 'src/blog-posts/*.html',
    include: [
        'src/components/**/*.html',
    ],
    output: {
        file: 'dist/blog/*.html',
    }
}

[QUESTION] How to include alpine scripts?

Really keen to give this lib a try! Well done!

I want to also split my alpine js logic, similar to how you do withe the HTML views., i.e. having a folder structure similar to the following:

src
|--components
|  |--my-content
|     |--index.html
|     |--index.js
|  |--my-footer
|     |--index.html
|     |--index.js
|  |--my-header
|     |--index.html
|     |--index.js
|--index.html   (this is the main entry point)

My questions:

How would you suggest that I include the individual scripts with their views?
How would I import alpine.js? Should I have a operate index.js that is included in the main index.html?

template x-for dropped when bundling

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 / presto Goto Github PK

presto's People

Contributors

Stargazers

Watchers

presto's Issues

[QUESTION] Integration with Vite

Handle a directory as input in presto.config?

[QUESTION] How to include alpine scripts?

template x-for dropped when bundling

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent