Make it work with multiple forms

Author: aerni

src/BladeDirectives.php

@@ -3,10 +3,7 @@
 namespace Aerni\LivewireForms;
 
 use Aerni\LivewireForms\Facades\Captcha;
-use Aerni\LivewireForms\Fields\Assets;
-use Aerni\LivewireForms\Fields\Captcha as CaptchaField;
 use Illuminate\Support\Facades\Blade;
-use Livewire\Livewire;
 
 class BladeDirectives
 {
@@ -76,31 +73,23 @@ public static function formField(string $expression): string
 
     /**
      * Push the Livewire Form assets into the head.
+     * This is basically a copy of Livewire's '@endassets' directive in \Livewire\Features\SupportScriptsAndAssets\SupportScriptsAndAssets
+     * We had to copy it as we ran into Blade caching issues when using the `@assets @endassets` directives directly.
      */
     public static function formAssets(): string
     {
-        $styles = collect();
-        $scripts = collect(['/vendor/livewire-forms/js/form.js']);
-
-        $fields = Livewire::current()->fields;
-
-        if ($fields->contains(fn ($field) => $field instanceof Assets)) {
-            $styles->push('/vendor/livewire-forms/css/filepond.css');
-            $scripts->push('/vendor/livewire-forms/js/filepond.js');
-        }
-
-        if ($fields->contains(fn ($field) => $field instanceof CaptchaField)) {
-            $scripts->push('/vendor/livewire-forms/js/grecaptcha.js');
-        }
-
-        $styles = $styles->map(fn ($style) => "<link href='{$style}' rel='stylesheet'/>")->implode("\n");
-        $scripts = $scripts->map(fn ($script) => "<script src='{$script}' type='module'></script>")->implode("\n");
-
-        return Blade::compileString("
-            @assets
-                $styles
-                $scripts
-            @endassets
-        ");
+        return <<<PHP
+            <?php
+                \$__assets = \$this->assets;
+                \$__assetKey = md5(\$__assets);
+
+                if (in_array(\$__assetKey, \Livewire\Features\SupportScriptsAndAssets\SupportScriptsAndAssets::\$alreadyRunAssetKeys)) {
+                    return;
+                }
+
+                \Livewire\Features\SupportScriptsAndAssets\SupportScriptsAndAssets::\$alreadyRunAssetKeys[] = \$__assetKey;
+                \Livewire\store(\$this)->push('assets', \$__assets, \$__assetKey);
+            ?>
+        PHP;
     }
 }

src/Livewire/BaseForm.php

@@ -2,20 +2,23 @@
 
 namespace Aerni\LivewireForms\Livewire;
 
+use Livewire\Component;
+use Livewire\Attributes\Computed;
+use Illuminate\Contracts\View\View;
+use Aerni\LivewireForms\Fields\Assets;
+use Aerni\LivewireForms\Fields\Captcha;
 use Aerni\LivewireForms\Facades\ViewManager;
-use Aerni\LivewireForms\Livewire\Concerns\SubmitsForm;
-use Aerni\LivewireForms\Livewire\Concerns\WithFields;
 use Aerni\LivewireForms\Livewire\Concerns\WithForm;
+use Aerni\LivewireForms\Livewire\Concerns\WithType;
+use Aerni\LivewireForms\Livewire\Concerns\WithView;
+use Aerni\LivewireForms\Livewire\Concerns\WithSteps;
+use Aerni\LivewireForms\Livewire\Concerns\WithTheme;
+use Aerni\LivewireForms\Livewire\Concerns\WithFields;
 use Aerni\LivewireForms\Livewire\Concerns\WithHandle;
+use Aerni\LivewireForms\Livewire\Concerns\SubmitsForm;
 use Aerni\LivewireForms\Livewire\Concerns\WithMessages;
 use Aerni\LivewireForms\Livewire\Concerns\WithRedirect;
 use Aerni\LivewireForms\Livewire\Concerns\WithSections;
-use Aerni\LivewireForms\Livewire\Concerns\WithSteps;
-use Aerni\LivewireForms\Livewire\Concerns\WithTheme;
-use Aerni\LivewireForms\Livewire\Concerns\WithType;
-use Aerni\LivewireForms\Livewire\Concerns\WithView;
-use Illuminate\Contracts\View\View;
-use Livewire\Component;
 
 class BaseForm extends Component
 {
@@ -37,4 +40,25 @@ public function render(): View
             'step' => $this->currentStep(),
         ]);
     }
+
+    #[Computed]
+    public function assets(): string
+    {
+        $styles = collect();
+        $scripts = collect(['/vendor/livewire-forms/js/form.js']);
+
+        if ($this->fields->contains(fn ($field) => $field instanceof Assets)) {
+            $styles->push('/vendor/livewire-forms/css/filepond.css');
+            $scripts->push('/vendor/livewire-forms/js/filepond.js');
+        }
+
+        if ($this->fields->contains(fn ($field) => $field instanceof Captcha)) {
+            $scripts->push('/vendor/livewire-forms/js/grecaptcha.js');
+        }
+
+        $styles = $styles->map(fn ($style) => "<link href='{$style}' rel='stylesheet'/>");
+        $scripts = $scripts->map(fn ($script) => "<script src='{$script}' type='module'></script>");
+
+        return $styles->merge($scripts)->implode("\n");
+    }
 }