Hello !
First, I am discovering Sage and I am very grateful for your hard work!
I have to do a website, and I’m using Sage 10, no problem. I’m used to have AlpineJS with WP, but it’s a delight to have Livewire as well.
I also wanted to create a functions plugin to go with the theme, and after a happy sponsoring through github, I downloaded Clover.
I was a bit surprised that Clover doesn’t follow the same topology than Sage… In the theme, the directories are ‘app’ and ‘public’, when in the plugin, it’s ‘dist’ and ‘src’. So, to keep my habits, I renamed them, modified bud.config.js, and went on my way.
Now that I have inserted my shortcodes, I’m trying to let them render blade views. Thanks to this discussion, I can call a view from Clover without having the system telling me there is no such file in the theme folder (since it’s in the plugin folder), so it’s ok.
But then, I also need to enqueue the stylesheet for the plugin, and there, I have a problem.
To what I understand, the app() function is shared between Sage and Clover (after all, the codebase is the same, since it’s generated by Acorn). And Sage doesn’t know the ‘plugin’ bundle I am trying to enqueue in Clover…
I dug into the source code of Acorn, and thought that I could use the second parameter of the bundle() helper, but I get an error on the front end.
app/Providers/FonctionsCssServiceProvider.php :
<?php
namespace Arthos\FonctionsCss\Providers;
use function Roots\bundle;
class FonctionsCssServiceProvider implements Provider
{
protected function providers()
{
return [
ApiServiceProvider::class,
// BlockServiceProvider::class,
CommandServiceProvider::class,
ShortcodesServiceProvider::class,
];
}
public function register()
{
foreach ($this->providers() as $service) {
(new $service)->register();
}
}
public function boot()
{
if (function_exists('\Roots\view')) {
$view = \Roots\view();
$view->addNamespace('Arthos\\FonctionsCss', __DIR__ . '/../../resources/views');
}
add_action('wp_enqueue_scripts', function () {
bundle('plugin', plugin_dir_path(dirname(dirname(__FILE__))) . 'public/manifest.json')->enqueue();
// GlideJS
wp_enqueue_style('glidejs', 'https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css');
wp_enqueue_script('glidejs', 'https://cdn.jsdelivr.net/npm/@glidejs/glide');
});
}
}
bud.config.js :
export default async (app) => {
app
.setPath("@scripts", "resources/scripts")
.setPath("@styles", "resources/styles")
.entry("plugin", ["@scripts/plugin", "@styles/plugin"])
.assets(["images", "fonts"]);
app.extensions
.get("@roots/bud-extensions/webpack-hot-module-replacement-plugin")
.enable();
app.setPublicPath("/wp-content/plugins/[plugin-name]/public/");
app
.setUrl("http://localhost:3000")
.setProxyUrl("https://carsud.test")
.watch(["resources/views", "app"]);
};
The error is as follow :
Undefined array key "/Users/[user]/Sites/carsud/wp-content/plugins/[plugin-name]/public/manifest.json" (View: /Users/[user]/Sites/carsud/wp-content/themes/[theme-name]/resources/views/layouts/app.blade.php) (View: /Users/[user]/Sites/carsud/wp-content/themes/[theme-name]/resources/views/layouts/app.blade.php)
So, I’m a bit at a loss. Am I missing something obvious? Am I just plainly wrong? How could I get Clover and Sage to both use Acorn without stepping on each other’s toes? How can I enqueue the files I need without sharing them between the theme and the plugin? (Obviously, they should be independant if needed.)
Thank you very much in advance for the help!