Filament•13mo ago

Using JS package in custom widget

I am trying to create a widget with a chessboard using chessboardjs. I have tried retesting the js and css using FilamenAsst::register() and flowed the instructions in the docs but I just get a Failed to open stream: No such file or directory error. Sorry I know this must be simple to do. Thanks

15 Replies

awsqed•13mo ago

this is a basic example of how to use it 1. install jquery and chessboardjs via npm 2. register assets

FilamentAsset::register([Css::make('chessboardjs', 'node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.css')->loadedOnRequest(true)]);
FilamentAsset::register([
    Js::make('jquery', 'node_modules/jquery/dist/jquery.min.js')->loadedOnRequest(true),
    Js::make('chessboardjs', 'node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.js')->loadedOnRequest(true),
]);

FilamentAsset::register([Css::make('chessboardjs', 'node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.css')->loadedOnRequest(true)]);
FilamentAsset::register([
    Js::make('jquery', 'node_modules/jquery/dist/jquery.min.js')->loadedOnRequest(true),
    Js::make('chessboardjs', 'node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.js')->loadedOnRequest(true),
]);

3. add to view

<div
    data-dispatch="chessboardjs-loaded"
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('chessboardjs'))]"
    x-load-js="[
        @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('jquery')),
        @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('chessboardjs')),
    ]"
    x-data="{
        board: null,

        initBoard() {
            this.board = window.Chessboard('board', {
                pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
            });
        }
    }"
    x-on:chessboardjs-loaded-js.window="initBoard"
>
    <div id="board" style="width: 400px"></div>
</div>

<div
    data-dispatch="chessboardjs-loaded"
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('chessboardjs'))]"
    x-load-js="[
        @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('jquery')),
        @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('chessboardjs')),
    ]"
    x-data="{
        board: null,

        initBoard() {
            this.board = window.Chessboard('board', {
                pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
            });
        }
    }"
    x-on:chessboardjs-loaded-js.window="initBoard"
>
    <div id="board" style="width: 400px"></div>
</div>

MikePageDevOP•13mo ago

Hi, Thank you for your help. I have just tried your solution but got the attached errors. Unfortunately I don't have any experience with Alpin (something I want to rectify) so I don't really understand what is going on here.

awsqed•13mo ago

can you check the network tab to see the load order of the js files (jquery and chessboardjs)? also try using jquery in the console in the page you put the view code

MikePageDevOP•13mo ago

That's odd I just refreshed the page to watch the network tab and it worked. Thank you. If you have the time would you mind explaining how this is working so I can try and expand on it please I have also found that the loading of the chessboard is intermittent. Looks like in all cases jquery is loading first. Jquery is working in the console.

awsqed•13mo ago

i just check my code and it also has the same error, but it rarely occurs, im trying to reproduce it to find out what is happening

MikePageDevOP•13mo ago

I am finding that I am getting the error around 1in5 times Thanks again for your help.

awsqed•13mo ago

well sorry im not good at explaining things through words (without example code), but basically im using this document https://filamentphp.com/docs/3.x/support/assets#asynchronous-alpinejs-components

Assets - Core Concepts - Filament

awsqed•13mo ago

you have to make sure that jquery is loaded (accessible via window.jQuery) before the chessboardjs script thats why im using alpine component to init jquery first

import jQuery from 'jquery';

export default function chessboard() {
    return {
        init() {
            window.$ = window.jQuery = jQuery;
        },

        initBoard() {
            const board = window.Chessboard('board', {
                pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
            });
        },
    };
};

import jQuery from 'jquery';

export default function chessboard() {
    return {
        init() {
            window.$ = window.jQuery = jQuery;
        },

        initBoard() {
            const board = window.Chessboard('board', {
                pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
            });
        },
    };
};

<div
    x-ignore
    ax-load
    data-dispatch="chessboardjs-loaded"
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('chessboardjs'))]"
    x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('chessboardjs'))]"
    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chessboard') }}"
    x-data="chessboard()"
    x-on:chessboardjs-loaded-js.window="initBoard"
>
    <div id="board" style="width: 400px"></div>
</div>

<div
    x-ignore
    ax-load
    data-dispatch="chessboardjs-loaded"
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('chessboardjs'))]"
    x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('chessboardjs'))]"
    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chessboard') }}"
    x-data="chessboard()"
    x-on:chessboardjs-loaded-js.window="initBoard"
>
    <div id="board" style="width: 400px"></div>
</div>

MikePageDevOP•13mo ago

I think I am ok with the asset stuff it's that Alpin I'm trying to get my head around. But I thing I am getting there. Is the above code an example or new code to try?

awsqed•13mo ago

its an example, you have to follow the document to create an alpine document for it to work

MikePageDevOP•13mo ago

any luck on the error?

awsqed•13mo ago

im using alpine component instead of the first method to get rid of the error

MikePageDevOP•13mo ago

Sorry I am confused. I thought the first method was an Alpine component.

awsqed•13mo ago

its not, the first sample code i sent you is just loading the necessary js files, then init the board with it

MikePageDevOP•13mo ago

Right ok.

Gaming

Programming

Using JS package in custom widget