search

wire-elements / spotlight

Livewire component that brings Spotlight/Alfred-like functionality to your Laravel application.
MIT License
911 stars 71 forks source link

Alpine v3 support #30

Closed PhiloNL closed 3 years ago

PhiloNL commented 3 years ago

Update Spotlight to Alpine v3.

Uncaught (in promise) ReferenceError: id is not defined
    at eval (eval at generateFunctionFromString (app.js:1643), <anonymous>:3:32)
    at app.js:1654
    at tryCatch (app.js:1678)
    at app.js:2903
    at runIfTypeOfFunction (app.js:1673)
    at app.js:1656
    at tryCatch (app.js:1678)
    at loop (app.js:2886)
    at app.js:2876
    at Array.reactiveEffect (app.js:496)
bhuebschen commented 3 years ago 
Uncaught (in promise) ReferenceError: id is not defined
    at eval (eval at generateFunctionFromString (app.js:1643), <anonymous>:3:32)
    at app.js:1654
    at tryCatch (app.js:1678)
    at app.js:2903
    at runIfTypeOfFunction (app.js:1673)
    at app.js:1656
    at tryCatch (app.js:1678)
    at loop (app.js:2886)
    at app.js:2876
    at Array.reactiveEffect (app.js:496)

quick-fix for this:

                    <template x-for="(item, i) in filteredItems()" :key>
                        <li>
                            <button @click="go(item[0].item.id)" class="block w-full px-6 py-3 text-left"
                                    :class="{ 'bg-gray-700': selected === i, 'hover:bg-gray-800': selected !== i }">
                                <span x-text="item[0].item.name"
                                      :class="{'text-gray-300': selected !== i, 'text-white': selected === i }"></span>
                                <span x-text="item[0].item.description" class="ml-1"
                                      :class="{'text-gray-500': selected !== i, 'text-gray-400': selected === i }"></span>
                            </button>
                        </li>
                    </template>

no need to remove x-init="init()"

PhiloNL commented 3 years ago 
Uncaught (in promise) ReferenceError: id is not defined
    at eval (eval at generateFunctionFromString (app.js:1643), <anonymous>:3:32)
    at app.js:1654
    at tryCatch (app.js:1678)
    at app.js:2903
    at runIfTypeOfFunction (app.js:1673)
    at app.js:1656
    at tryCatch (app.js:1678)
    at loop (app.js:2886)
    at app.js:2876
    at Array.reactiveEffect (app.js:496)

quick-fix for this:

                    <template x-for="(item, i) in filteredItems()" :key>
                        <li>
                            <button @click="go(item[0].item.id)" class="block w-full px-6 py-3 text-left"
                                    :class="{ 'bg-gray-700': selected === i, 'hover:bg-gray-800': selected !== i }">
                                <span x-text="item[0].item.name"
                                      :class="{'text-gray-300': selected !== i, 'text-white': selected === i }"></span>
                                <span x-text="item[0].item.description" class="ml-1"
                                      :class="{'text-gray-500': selected !== i, 'text-gray-400': selected === i }"></span>
                            </button>
                        </li>
                    </template>

no need to remove x-init="init()"

Thanks @bhuebschen! I'm curious, do you know why the original code is no longer working?

<template x-for="([{ item: { id, name, description }}, i]) in filteredItems()" :key="id">
bhuebschen commented 3 years ago

Thanks @bhuebschen! I'm curious, do you know why the original code is no longer working?

<template x-for="([{ item: { id, name, description }}, i]) in filteredItems()" :key="id">

The way AlpineJS works with variable inside a loop is different now.... now the object you work with inside the loop, is now the same as it is outside... previously it seems that the variables where made global inside the loop-scope, but this no longer works.

Take a look at https://github.com/livewire-ui/spotlight/blob/alpine-v3/resources/js/spotlight.js#L93, the way to retrieve the data is now the same in the x-for-loop

Rewriting of filteredItems requires to replace also https://github.com/livewire-ui/spotlight/blob/alpine-v3/resources/js/spotlight.js#L93 and https://github.com/livewire-ui/spotlight/blob/master/resources/js/spotlight.js#L102

Alpine previously also allowed to use the object-var as key.. this also doesn't work anymore .. but providing an empty key works fine

PhiloNL commented 3 years ago

@bhuebschen Thanks for the explanation, appreciate it 🙌 I've made the changes you suggested.