Views-based dependencies loading ( css/js )

sage
1

Hello. I would first like to thank you for the bedrock/sage ecosystem that literally changed my wordpress dev life. Thank you.

This topic is more like a feature request, or maybe i’m missing something.
I often end bundling all my views dependencies in app{js/css}, writing context tests to fire events, because bud config only accepts to list individual files as application entrypoints for bundling/and optimization.

What I would like to be possible is a views/context include logic in Sage for loading contextual, separately bundled scripts or stylesheets, next to the common bundle call in source, but only on certain views, like an include.

I may be missing something, and that’s already possible but is more a laravel topic, but I didn’t find something close in doc, so if that’s the case maybe you could provide a pointer to such ressource?

Thanks again.

2 Likes
2

Yes, this is already possible: You define separate entrypoints in bud and enqueue these in a hook that checks whether the conditions (matching view) is met.

bud.config.js:

   .entry({
      app: {
        import: ["@scripts/app", "@styles/app"],
      },

      myTax: {
        import: ["@scripts/my-tax", "@styles/my-tax"],
        dependOn: ["app"],
      },
    })

In this example the taxonomy-specific entrypoint should depend on the general app entrypoint,
as it shares code (e.g. global variables) from the app script.

And then (e.g. in setup.php):

add_action('wp_enqueue_scripts', function () {
    if (is_tax('my-tax')) {
        bundle('myTax')->enqueue();
    }
}, 100);
2 Likes
3

Also consider dynamic imports. Here’s a simple example:

if (document.querySelector('.example')) {
  import('./components/example-module')
}
2 Likes
4

Sorry for late reply.
Thank you Both of you
<3 it’s working bananas. :wink:

2 Likes