[Bug]: Frontend assets load time problem

[danie-ramdhani]

What happened?

Here's screenshot of my network request when i do hard reload browser or when the cache_assets is false:

I believe it doesn't make sense to load core.min.js for one second (and 4s to load whole laravel-livewire-tables frontend assets) meanwhile livewire.js only takes 800ms (fo thousands loc)

Even the assets is injected when the component doesn't using laravel-livewire-tables

Thanks for your time.

How to reproduce the bug

No response

Package Version

dev-v3-develop

PHP Version

8.2.x

Laravel Version

10

Alpine Version

3.13

Theme

Tailwind 3.x

Notes

No response

Error Message

No response

[lrljoe]

Leave it with me, its still alpha/beta, so the code is constantly being amended.

Do you see any difference on a subsequent refresh with browser caching? The 304 status is suggesting that your browser has determined that the asset hasn't been modified, so it may be your browser taking a few moments to determine whether to reload it or not, I'll double check the injected headers for the files to ensure that they're not causing any confusion

Very odd that it is taking so long to generate those files. On a random dev environment I'm seeing:

With cache_assets enabled:

Also -If you are using a bundler, then there's a way to use that instead, and disable the injection. Let me know if you want to try that method as there's a couple of tweaks you'll need to make in the config.

[lrljoe]

Can you share the headers for the core.min.css, thirdparty.css, core.min.js and thirdparty.min.js for me please:

i.e.

[danie-ramdhani]

here's the screenshots of all laravel-livewire-tables assets:

this isn't a big deal if I configure cache_assets to true. but it is a bit slow for me when I hard reload the browser or the cache_assets value is false.

this is the screenshot when i hard reload the browser or the cache_assets value is false:

and this is the screenshot when the cache_assets value is true:

[lrljoe]

Also have a test running at the mo where it wont inject the assets without a table component being present, just tinkering at the mo, so no real timeline other than soon.

Bundler is definitely an easier way

[lrljoe]

With cache_ assets set to false, it will always tell the browser that the file has expired.
It is more of a dev toggle than anything else

With it enabled, it'll cache the rappasoft assets for one hour (will be adjusted to match browser in next revisions)

This is all mostly just during dev, where the assets are all subject to change at short notice.

Full release will have
Publishable Option (Not recommended)
Bundled option (Encouraged)
Injected option (If bundled not available)

[danie-ramdhani]

can we inject the assets using $this->js() when the datatable is mounted?
( because i tried something like this and it's works XD )

    public function mount()
    {
        $toastNotificationScriptPath = Vite::asset('node_modules/toast-notification-js/dist/toast-notification.min.js');
        $toastNotificationStylePath = Vite::asset('node_modules/toast-notification-js/dist/toast-notification.min.css');

        // Create the toast notification
        $this->js(<<<JS
            Promise.all([
                import("$toastNotificationScriptPath"),
                import("$toastNotificationStylePath"),
            ]).then(() => {
                ToastNotification().create();
            });
        JS);
    }

[lrljoe]

@danie-ramdhani - In theory - yes, an approach like that will work. In practice, sometimes what happens is the table loads before the assets make available their methods to Alpine, and then things go... missing?

If you have 15 minutes, I'm on the Official Discord at the moment, and there's a couple of alternatives that you can use (e.g. bundled elements) that will probably be much quicker for you.

[lrljoe]

This should be fixed in the v3.0.0-beta.1 Pre-release.

Please re-open if not!