Loading pinecone-router-middleware-views and pinecone-router as es6 modules doesn't work

rogiersplayground commented 1 year ago

Describe the bug I'm going for a setup where I load all my libraries in as es6 modules in my main.js. So far I was able to load in Alpine. Like: import Alpine from 'alpinejs'. And i've added pinecone-router-middleware-views and pinecone-router. But then it won't route me to the relevant view.

To Reproduce Steps to reproduce the behavior: This is my main.js

import './style.css'

// load this middleware
import 'pinecone-router-middleware-views'
// Load router
import 'pinecone-router';

import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()

This is what I have in my index.html

<body>
<div x-data="router()" x-router>
      <template x-route="/" x-view="/views/home.html"></template>
      <template x-route="/hello/:name" x-view="/views/hello.html"></template>
      <template x-route="notfound" x-view="/404.html"></template>
    </div>

    <div id="app" x-data></div>

Expected behavior I expect that the /views/home.html is loaded for the root. But this is not working.

But when I add the CDN link <script src="https://cdn.jsdelivr.net/npm/pinecone-router@2.x.x/dist/router.min.js"></script>, it is working. But i'd prefer to bundle my js.

Desktop (please complete the following information):

Ubuntu 22.10
Browser: chrome 108

rehhouari commented 1 year ago

Hello, I just tried this with Vite and you're right it doesn't work by just importing pinecone-router directly I have missed that part in the README. Like other Alpine.js plugins you need to add the router using Alpine.plugin() here is how your main.js would look

// middlewares arent plugins import them directly.
import 'pinecone-router-middleware-views'
// this is an Alpine.js plugin so import the exported PineconeRouter
import PineconeRouter from 'pinecone-router';
import Alpine from 'alpinejs'

window.Alpine = Alpine
// add PineconeRouter as an Alpine.js plugin
Alpine.plugin(PineconeRouter)
Alpine.start()

Thanks for pointing it out and sorry for the inconvenience, I have update the readme accordingly.

rehhouari commented 1 year ago

Closing for inactivity feel free to comment again if issue isnt solved. thank you

pinecone-router / router

Loading pinecone-router-middleware-views and pinecone-router as es6 modules doesn't work #13