erickcomp/laravel-stacked-components

Provides components that will be inserted into a given stack

0.7 2024-12-10 10:45 UTC

Requires

• php: ^8.2
• laravel/framework: ^10.0|^11.0

MIT

• Erick de Azevedo Lima

• component
• laravel
• stack
• blade
• erickcomp

README

Use Blade Components syntax to insert (push/prepend) content to stacks

This package provides some blade components that you can use to insert content into stacks, most notably, scripts and styles.

The vanilla-Blade way

To push some JS file/code to a stack, you have to (from Laravel docs):

@push('scripts')
    <script src="{{ asset("/example.js") }}"></script>
@endpush

or, for inline JS:

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", (event) => {
            alert("Alert 2!!!");
        });
    </script>
@endpush

It, of course, works. But when using Blade Components, the intention is stay closer to HTML whenever possible

The Stacked Components Ways

####JS component:

<x-js src="/example.js" stack="scripts"/>

or, for inline JS:

<x-js stack="scripts">
    document.addEventListener("DOMContentLoaded", (event) => {
        alert("Alert 2!!!");
    });
</x-js>

This package automatically calls Laravel's asset function by default. You can override this behavior to call you own callable or to call nothing at all. To do either of these, you can set the environment variable

STACKED_ASSETS_COMPONENTS_DEFAULT_ASSET_FUNCTION

or the config value

stacked-components.asset-function

To call any callable, you can use one of the following options the PHP's callable syntax or the Laravel's "@" syntax (MyNamespace\MyClass@myAssetFunction). To call no function by default you must set the config value or the environment variable with the value false.

Note that if decide to use objects (anonoymous functions, invokable objects, first-class callables), you won't be able to use Laravel's config cache, since it does not support cache for these types of config values.

Content component:

<x-stacked-component stack="scripts">
    <script src="/example.js"></script>
</x-stacked-component>

or, for inline JS:

<x-stacked-content stack="scripts">
    <script src="/example.js">
                  document.addEventListener("DOMContentLoaded", (event) => {
                          alert("Alert 2!!!");
                  });
    </script>
</x-stacked-content >

Other components

This package provides 4 components

• js
• css
• stacked-div
• stacked-content

For the CSS and JS components, you can set a default stack in config/env and omit it when using the component, like this:

.env file:

STACKED_ASSETS_COMPONENTS_DEFAULT_STACK_JS="scripts"
STACKED_ASSETS_COMPONENTS_DEFAULT_STACK_CSS="styles"

and in your view file:

<x-js src="/example.js" />

Resolving name collisions with other components

This package provides the js and the css components. If your app already defined this, or even a library you're using did this, you have 2 options:

1 - Register a namespace for the components of this package. To do so, you can set the environment variable

STACKED_ASSETS_COMPONENTS_COMPONENT_NAMESPACE

or the config value

stacked-components.component-namespace

If you set the namespace with the bool value "true", it will use the namespace "stacked". If you set it to any string, the set string will be used as the blade components namespace. For more information on components namespaces check the Laravel docs

2 - Set the config values

stacked-components.component-name-js
stacked-components.component-name-css

or the environment variables

STACKED_ASSETS_COMPONENTS_COMPONENT_NAME_JS
STACKED_ASSETS_COMPONENTS_COMPONENT_NAME_CSS

To specify alternate names for the js and css components

Remember to clear the views caches when changing any of these values. To clear the view cache run the view:cache artisan command:

php artisan view:clear

License

The MIT License (MIT). Please see License File for more information.