how to use Alpine in html files loaded with middleware-views plugin ?

[hamidovz]

hi all ! i want to use middleware-views plugin but when i load the html file it doesn't "read" the Alpine code inside it ? how can i get this working ? i use registering from bundle option in Alpine docs: the docs

Thank you !

[rehhouari]

hey this is how to use the middleware using npm

// load the middleware
import 'pinecone-router-middleware-views'
// load pinecone router
import PineconeRouter from 'pinecone-router';
// then load alpine.js
import Alpine from 'alpinejs';
// add the router as a plugin
Alpine.plugin(PineconeRouter)
// start alpine
Alpine.start()

For an example see this view:
https://github.com/rehhouari/pinecone-example-views/blob/main/public/views/hello.html

and this is where the plugin is imported:
https://github.com/rehhouari/pinecone-example-views/blob/main/main.js

and here is a demo of it running:
https://pinecone-example-views.vercel.app/

[hamidovz]

i have 2 file. index.html and home.html. there is alpine code in home.html and uses import syntax for initialization. i keep alpine code in seperate js file and import it to the html.

when i load it via "views middleware" all of data become undefined and throws error. it feels like that the alpine init code in home.html doesn't get executed at all. and in the example you gave me is minimalistic there is not lifecycle or seperate bundle import method. would you also upload an example of using views middleware with seperate import method ?

[rehhouari]

i was sleep deprived and didn't understand but yeah script tag doesn't work sadly!
you can organize alpine code in seprate files and then import it inside the main .js file (imported from index.html) and pass it to Alpine.data()
this way you can use it inside home.html and still have it in a separet file

[rehhouari]

I just checked and <script> tags arent executed since they views are injected with .innerHTML method.

If you want to have scripts for specific views use if ($router.route == '/hello/:name') to only run the code in the specified view.
The alternative for outside an alpine component is window.PineconeRouter.currentContext.route == '/hello/:name'

to get params use $router.params.name or window.PineconeRouter.currentContext.params.name

Hope this helps.