search

thomasjohnkane / tailwind-alpine-chrome-extension

Starter Kit for building a Web Extension with Tailwindcss & AlpineJS
203 stars 27 forks source link

popup/index.js not working #2

Open kaankilic opened 4 years ago

kaankilic commented 4 years ago

Hi,

I've add some simple on to popups/index.js below:

import 'alpinejs'
console.log("loaded");
function startEvent() {
    return {
        open: false,
        startChat() {
            console.log("k k");
        }
    }
}

However, can not call it on index.html.

index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./popup.css">
    </head>
    <body>
        <div class="p-6 min-w-popup h-64">
            <h1 class="text-gray-500 text-2xl">Hello Web Extension</h1>
            <p class="py-2 text-lg tracking-wide">
                Update me in <span class="inline-block bg-gray-100 rounded-sm text-sm p-1 leading-none whitespace-no-wrap text-purple-600 font-mono align-baseline">`src/popup/index.html`</span>
            </p>
            <hr />
            <div class="py-2" x-data="startEvent()">
                <button
                    class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"
                    @click="startChat()"
                >
                    Test Alpine
                </button>

                <div
                    class="mt-4 bg-gray-100 text-center rounded-sm"
                    x-show="open"
                    @click.away="open = false"
                >
                    <div class="w-full text-4xl text-teal-500 p-4">Great Scott!</div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="./popup.dist.js"></script>
    </body>
</html>
HugoDF commented 3 years ago

For anyone finding this issue.

In order to access the function, you need to do window.startEvent = startEvent (there's a note about this in the Alpine docs, by default webpack/bundlers create each module in a new non-global scope)