Merge pull request #38 from tanthammar/lazy-load-assets

Lazy load assets
invaders-xx · Sep 17, 2024 · 4e5deda · 4e5deda
2 parents d6f94c9 + dbc3e77
commit 4e5deda
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 51 deletions.
diff --git a/resources/views/json-editor.blade.php b/resources/views/json-editor.blade.php
@@ -1,52 +1,65 @@
 <x-filament-forms::field-wrapper
-    :id="$getId()"
-    :label="$getLabel()"
-    :label-sr-only="$isLabelHidden()"
-    :helper-text="$getHelperText()"
-    :hint="$getHint()"
-    :hint-icon="$getHintIcon()"
-    :required="$isRequired()"
-    :state-path="$getStatePath()"
+        :id="$getId()"
+        :label="$getLabel()"
+        :label-sr-only="$isLabelHidden()"
+        :helper-text="$getHelperText()"
+        :hint="$getHint()"
+        :hint-icon="$getHintIcon()"
+        :required="$isRequired()"
+        :state-path="$getStatePath()"
 >
-    <div class="w-full" x-data="{
+    <div class="w-full"
+         x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('invaders-filament-jsoneditor', package: 'invaders/jsoneditor'))]"
+         data-js-before="app.js"
+         x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('invaders-filament-jsoneditor', package: 'invaders/jsoneditor'))]"
+         data-dispatch="jsoneditor-loaded"
+         x-on:jsoneditor-loaded-js.window="start"
+         x-data="{
             state: $wire.entangle('{{ $getStatePath() }}'),
-        }"
-         x-init="$nextTick(() => {
-            const options = {
-                modes: {{ $getModes() }},
-                history: true,
-                onChange: function(){
-                },
-                onChangeJSON: function(json){
-                    state=JSON.stringify(json);
-                },
-                onChangeText: function(jsonString){
-                    state=jsonString;
-                },
-                onValidationError: function (errors) {
-                    errors.forEach((error) => {
-                      switch (error.type) {
-                        case 'validation': // schema validation error
-                          break;
-                        case 'error':  // json parse error
-                            console.log(error.message);
-                          break;
-                      }
-                    })
-                }
-            };
-            if(typeof json_editor !== 'undefined'){
-                json_editor = new JSONEditor($refs.editor, options);
-                json_editor.set(state);
-            } else {
-                let json_editor = new JSONEditor($refs.editor, options);
-                json_editor.set(state);
+            editor: null,
+            destroy() {
+                this.editor = null;
+                console.info('destroy');
+            },
+            start() {
+                $nextTick(() => {
+                    if(this.editor !== null) {
+                        return;
+                    }
+                    const options = {
+                        modes: {{ $getModes() }},
+                        history: true,
+                        onChange: () => {
+                            // onChange callback code if needed
+                        },
+                        onChangeJSON: (json) => {
+                            this.state = JSON.stringify(json);
+                        },
+                        onChangeText: (jsonString) => {
+                            this.state = jsonString;
+                        },
+                        onValidationError: (errors) => {
+                            errors.forEach((error) => {
+                                switch (error.type) {
+                                    case 'validation': // schema validation error
+                                        // Handle schema validation error
+                                        break;
+                                    case 'error':  // json parse error
+                                        console.log(error.message);
+                                        break;
+                                }
+                            });
+                        }
+                    };
+                    if(typeof JSONEditor !== 'undefined') {
+                        this.editor = new JSONEditor($refs.editor, options);
+                        Alpine.raw(this.editor).set(this.state);
+                    }
+                })
             }
-         })"
+        }"
          x-cloak
          wire:ignore>
-            <div x-ref="editor" class="w-full ace_editor"
-                 style="min-height: 30vh;height:{{ $getHeight() }}px"></div>
+        <div x-ref="editor" class="w-full ace_editor" style="min-height: 30vh;height:{{ $getHeight() }}px"></div>
     </div>
-</x-filament-forms::field-wrapper>
-
+</x-filament-forms::field-wrapper>
diff --git a/src/FilamentJsoneditorServiceProvider.php b/src/FilamentJsoneditorServiceProvider.php
@@ -16,20 +16,18 @@ public function configurePackage(Package $package): void
     {
         $package
             ->name(static::$name)
-            ->hasConfigFile()
-            ->hasAssets()
             ->hasViews();
 
         $this->publishes([
-            __DIR__ . '/../dist/jsoneditor/img/jsoneditor-icons.svg' => public_path('css/awcodes/headings/img/jsoneditor-icons.svg'),
+            __DIR__ . '/../dist/jsoneditor/img/jsoneditor-icons.svg' => public_path('css/invaders/jsoneditor/img/jsoneditor-icons.svg'),
         ], 'filament-jsoneditor-img');
     }
 
     public function packageBooted(): void
     {
         FilamentAsset::register([
-            Css::make('invaders-filament-jsoneditor', __DIR__ . '/../dist/jsoneditor/jsoneditor.min.css'),
-            Js::make('invaders-filament-jsoneditor', __DIR__ . '/../dist/jsoneditor/jsoneditor.min.js'),
-        ], 'awcodes/headings');
+            Css::make('invaders-filament-jsoneditor', __DIR__ . '/../dist/jsoneditor/jsoneditor.min.css')->loadedOnRequest(),
+            Js::make('invaders-filament-jsoneditor', __DIR__ . '/../dist/jsoneditor/jsoneditor.min.js')->loadedOnRequest(),
+        ], 'invaders/jsoneditor');
     }
 }