Add @formAssets directive

package.json

@@ -1,11 +1,11 @@
 {
     "private": true,
+    "type": "module",
     "scripts": {
         "dev": "vite",
         "build": "vite build"
     },
     "dependencies": {
-        "alpinejs": "^3.13.3",
         "filepond": "^4.30.6",
         "filepond-plugin-file-validate-size": "^2.2.8",
         "filepond-plugin-file-validate-type": "^1.2.9",
@@ -16,7 +16,6 @@
         "uniqid": "^5.2.0"
     },
     "devDependencies": {
-        "laravel-vite-plugin": "^0.7.8",
-        "vite": "^4.5.5"
+        "vite": "^6.2.0"
     }
 }

resources/js/alpine/filepond.js

@@ -36,6 +36,8 @@ import uk_UA from 'filepond/locale/uk-ua';
 import vi_VI from 'filepond/locale/vi-vi';
 import zh_CN from 'filepond/locale/zh-cn';
 import zh_TW from 'filepond/locale/zh-tw';
+import 'filepond/dist/filepond.min.css';
+import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
 
 const locales = {
     'ar-ar': ar_AR,

resources/views/default.blade.php

@@ -7,6 +7,4 @@
     @formView("forms.{$this->type}")
 </form>
 
-@assets
-    <script type="module" src="/vendor/livewire-forms/js/livewire-forms.js"></script>
-@endassets
+@formAssets

resources/views/default/fields/assets.blade.php

@@ -32,8 +32,3 @@
 @elseif($field->instructions && $field->instructions_position === 'below')
     @formView('messages.instructions')
 @endif
-
-@assets
-    <link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
-    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet" />
-@endassets

src/BladeDirectives.php

@@ -70,4 +70,17 @@ public static function formField(string $expression): string
             echo view(\Aerni\LivewireForms\Facades\ViewManager::themeViewPath(\$this->theme, 'layouts.field'), ['field' => \$field]);
         ?>";
     }
+
+    /**
+     * Push the Livewire Form assets into the head.
+     */
+    public static function formAssets(): string
+    {
+        return Blade::compileString("
+            @assets
+                <link href='/vendor/livewire-forms/css/livewire-forms.css' rel='stylesheet' />
+                <script src='/vendor/livewire-forms/js/livewire-forms.js' type='module'></script>
+            @endassets
+        ");
+    }
 }

src/ServiceProvider.php

@@ -31,6 +31,10 @@ class ServiceProvider extends AddonServiceProvider
         __DIR__.'/../resources/dist/js/livewire-forms.js',
     ];
 
+    protected $stylesheets = [
+        __DIR__.'/../resources/dist/css/livewire-forms.css',
+    ];
+
     public function bootAddon()
     {
         $this

vite.config.js

@@ -2,11 +2,13 @@ import { defineConfig } from 'vite';
 
 export default defineConfig({
     build: {
-        outDir: 'resources/dist/js',
+        outDir: 'resources/dist',
         lib: {
             entry: 'resources/js/livewire-forms.js',
             name: 'livewire-forms',
-            fileName: () => 'livewire-forms.js',
+            fileName: 'js/livewire-forms',
+            cssFileName: 'css/livewire-forms',
+            formats: ['es'],
         }
     }
 });