digitallyhappy / assets
Dead-simple way to load CSS or JS assets only once per page, when using Laravel 8+.
Installs: 703 226
Dependents: 10
Suggesters: 0
Security: 0
Stars: 12
Watchers: 1
Forks: 5
Open Issues: 1
Requires
- laravel/framework: ^10|^9.0|^8.0
Requires (Dev)
- orchestra/testbench: ~5|~6|^7.0|^8.0
- phpunit/phpunit: ~9.0
README
Replace your <script src='file.js'>
and <link href='file.css'>
tags with @loadOnce('file.css')
and @loadOnce('file.js')
and this package will make sure that CSS or JS will only be loaded one time per page.
Installation
Via Composer
$ composer require digitallyhappy/assets
Usage
Replace your standard CSS and JS loading HTML with the @loadOnce()
Blade directive this package provides:
- <script src="{{ asset('path/to/file.js') }}"> + @loadOnce('path/to/file.js') - <link href="{{ asset('path/to/file.css') }}" rel="stylesheet" type="text/css"> + @loadOnce('path/to/file.css')
The package provides three Blade directives, in 99% of the cases you'll use @loadOnce()
:
@loadOnce('path/to/file.css') @loadOnce('path/to/file.js') // depending of the file extension, the first time it will output // <link href="{{ asset('path/to/file.css')" rel="stylesheet" type="text/css"> // or // <script src="{{ asset('path/to/file.js')"></script> // then the rest of the times this is called... it'll output nothing // IN ADDITION, if you have an entire block of HTML that you want to only output once: @loadOnce('unique_name_for_code_block') <script> <!-- Your JS here --> </script> <!-- OR --> <style> <!-- Your CSS here --> </style> @endLoadOnce // will output the contents the first time... // then the second time it will just output nothing
However, if you want to pass a variable as the parameter, not a string, you'll notice it won't work, because the directive can't tell if it's a CSS, JS or code block. That's why we've created @loadStyleOnce()
and @loadScriptOnce()
:
@php $pathToCssFile = 'path/to/file.css'; $pathToJsFile = 'path/to/file.js'; @endphp @loadStyleOnce($pathToCssFile) // will output <link href="{{ asset('path/to/file.css')"> the first time // then the second time this is called it'll output nothing @loadScriptOnce($pathToJsFile) // will output <script src="{{ asset('path/to/file.js')"></script> the first time // then the second time this is called it'll output nothing
Why does this package exist?
In Laravel 8+, if your CSS or JS assets are loaded inside a blade file:
// card.blade.php <div class="card"> Lorem ipsum </div> <script src="path/to/script.js"></script>
And you load that blade file multiple times per page (eg. include card.blade.php
multiple times per page), you'll end up with that script
tag being loaded multiple times, on the same page. To avoid that, Larvel 8 provides the @once
directive, which will echo the thing only once, no matter how many times that blade file loaded:
// card.blade.php <div class="card"> Lorem ipsum </div> @once <script src="path/to/script.js"></script> @endonce
But what if your script.js
file is not only loaded by card.blade.php
, but also by other blade templates (eg. hero.blade.php
, loaded on the same page? If you're using the @once
directive, you will have the same problem all over again - that same script loaded multiple times.
That's where this package comes to the rescue. It will load the asset just ONCE, even if it's loaded from multiple blade files.
Change log
Please see the changelog for more information on what has changed recently.
Testing
$ composer test
Contributing
Please see contributing.md for details and a todolist.
Security
If you discover any security related issues, please email hello@tabacitu.ro instead of using the issue tracker.
Credits
License
MIT. Please see the license file for more information.