Big performance gains

Author: aerni

resources/dist/js/cp.js

@@ -1,3 +1,3 @@
 {
-    "/js/cp.js": "/js/cp.js?id=a521fe1077c471aea50c"
+    "/js/cp.js": "/js/cp.js?id=a687ae0d0e3f52f48703"
 }

resources/dist/mix-manifest.json

@@ -1,5 +1,5 @@
 <template>
-    <div :class="this.classes">
+    <div :class="this.classes" v-if="icons">
         <v-select
             ref="input"
             :name="name"
@@ -23,7 +23,7 @@
             </template>
 
             <template #list-footer>
-                <span v-show="hasNextPage" ref="load" />
+                <span class="chrome-fix" v-show="hasNextPage" ref="load" />
             </template>
         </v-select>
     </div>
@@ -48,12 +48,18 @@ export default {
     },
 
     computed: {
+        icons() {
+            return this.$store.state.publish.fontAwesome.icons
+        },
+
         classes() {
             return `font-awesome ${this.meta.license} version-${this.meta.version.charAt(0)}`
         },
 
         filtered() {
-            return this.meta.icons.filter((icon) => icon.label.toLowerCase().includes(this.search.toLowerCase()))
+            return this.icons
+                .filter((icon) => icon.label.toLowerCase().includes(this.search.toLowerCase()))
+                .filter((icon) => this.meta.styles.includes(icon.style))
         },
 
         paginated() {
@@ -136,4 +142,9 @@ export default {
         font-family: "Font Awesome 6 Brands" !important;
     }
 
+    .chrome-fix {
+        display: inline-block;
+        height: 1px;
+    }
+
 </style>

resources/js/FontAwesome.vue

@@ -1,3 +1,8 @@
+import './store'
 import FontAwesome from './FontAwesome.vue'
 
 Statamic.$components.register('font_awesome-fieldtype', FontAwesome)
+
+Statamic.booted(() => {
+    Statamic.$store.dispatch("publish/fontAwesome/fetchIcons")
+})

resources/js/cp.js

@@ -0,0 +1,29 @@
+Statamic.$store.registerModule(['publish', 'fontAwesome'], {
+
+    namespaced: true,
+
+    state: {
+        icons: null,
+    },
+
+    getters: {
+        icons: state => state.icons,
+    },
+
+    actions: {
+        fetchIcons({ commit }) {
+            return Statamic.$request.post(`/!/font-awesome/icons`)
+                .then(response => commit('setIcons', response.data))
+                .catch(function (error) {
+                    console.log(error);
+                });
+        },
+    },
+
+    mutations: {
+        setIcons(state, icons) {
+            state.icons = icons;
+        },
+    }
+
+})

resources/js/store.js

@@ -0,0 +1,8 @@
+<?php
+
+use Aerni\FontAwesome\FontAwesomeController;
+use Illuminate\Support\Facades\Route;
+
+Route::name('font-awesome.')->group(function () {
+    Route::post('/icons', [FontAwesomeController::class, 'index'])->name('font-awesome.icons');
+});

routes/actions.php

@@ -2,10 +2,10 @@
 
 namespace Aerni\FontAwesome;
 
-use Illuminate\Support\Str;
 use Illuminate\Support\Collection;
-use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Str;
 
 class FontAwesome
 {
@@ -25,9 +25,9 @@ public function all(): Collection
         return $this->icons()->flatten(1)->sortBy('id')->values();
     }
 
-    public function get(string|array $style): Collection
+    public function icon(string $icon): ?array
     {
-        return $this->icons()->only($style)->flatten(1)->sortBy('id')->values();
+        return $this->all()->firstWhere('class', $icon);
     }
 
     public function styles(): Collection
@@ -44,7 +44,7 @@ public function kit(string $token = null): Collection
         return Cache::rememberForever("font_awesome::kit::{$this->kitToken}", function () {
             $response = Http::withToken($this->authToken())
                 ->post('https://api.fontawesome.com', [
-                    'query' => $this->kitQuery()
+                    'query' => $this->kitQuery(),
                 ])->json()['data']['me']['kit'];
 
             return collect([
@@ -61,20 +61,20 @@ protected function icons(): Collection
     {
         return Cache::rememberForever('font_awesome::icons', function () {
             $response = Http::post('https://api.fontawesome.com', [
-                    'query' => $this->iconsQuery()
-                ])->json()['data']['release']['icons'];
+                'query' => $this->iconsQuery(),
+            ])->json()['data']['release']['icons'];
 
             $icons = collect($response)->flatMap(function ($icon) {
                 // The styles available for the license type of the kit.
                 $styles = $icon['membership'][$this->kit()->get('license')];
 
                 return collect($styles)->map(function ($style) use ($icon) {
                     return [
-                            'style' => $style,
-                            'id' => "{$icon['id']}-{$style}",
-                            'label' => $icon['label'] . " ($style)",
-                            'class' => $this->iconClass($icon['id'], $style)
-                            ];
+                        'style' => $style,
+                        'id' => "{$icon['id']}-{$style}",
+                        'label' => $icon['label']." ($style)",
+                        'class' => $this->iconClass($icon['id'], $style),
+                    ];
                 })->toArray();
             })->groupBy('style');
 
@@ -92,7 +92,7 @@ protected function uploadedIcons(): Collection
             return [
                 'style' => 'uploaded',
                 'id' => "{$icon['name']}-uploaded",
-                'label' => Str::title($icon['name']) . " (uploaded)",
+                'label' => Str::title($icon['name']).' (uploaded)',
                 'class' => "fak fa-{$icon['name']}",
             ];
         })->sortBy('id');
@@ -101,7 +101,7 @@ protected function uploadedIcons(): Collection
     protected function iconClass(string $icon, string $style): string
     {
         return Str::startsWith($this->kit()->get('version'), '5')
-            ? 'fa' . substr($style, 0, 1) . ' fa-' . $icon
+            ? 'fa'.substr($style, 0, 1).' fa-'.$icon
             : "fa-$style fa-$icon";
     }
 
@@ -124,11 +124,11 @@ protected function iconsQuery(): string
     {
         return
             'query {
-                release (version:' . '"' . $this->kit()->get('version') . '"' . ') {
+                release (version:'.'"'.$this->kit()->get('version').'"'.') {
                     icons {
                         label
                         id
-                        membership {' . $this->kit()->get('license') . '}
+                        membership {'.$this->kit()->get('license').'}
                     }
                 }
             }';
@@ -139,11 +139,11 @@ protected function kitQuery(): string
         return
             'query {
                 me {
-                    kit (token:' . '"' . $this->kitToken . '"' . ') {
+                    kit (token:'.'"'.$this->kitToken.'"'.') {
                         token
                         licenseSelected
                         version
-                        iconUploads {' . "name" . '}
+                        iconUploads {'.'name'.'}
                     }
                 }
             }';

src/FontAwesome.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace Aerni\FontAwesome;
+
+use Facades\Aerni\FontAwesome\FontAwesome;
+
+class FontAwesomeController
+{
+    public function index()
+    {
+        return response()->json(FontAwesome::all());
+    }
+}

src/FontAwesomeController.php

@@ -2,8 +2,8 @@
 
 namespace Aerni\FontAwesome;
 
-use Statamic\Fields\Fieldtype;
 use Facades\Aerni\FontAwesome\FontAwesome;
+use Statamic\Fields\Fieldtype;
 
 class FontAwesomeFieldtype extends Fieldtype
 {
@@ -28,22 +28,16 @@ protected function configFieldItems(): array
 
     public function preload(): array
     {
-        $icons = $this->config('styles')
-            ? FontAwesome::get($this->config('styles'))
-            : FontAwesome::all();
-
         return [
-            'icons' => $icons,
+            'styles' => $this->config('styles') ?? FontAwesome::styles(),
             'license' => FontAwesome::kit()->get('license'),
             'version' => FontAwesome::kit()->get('version'),
         ];
     }
 
     public function preProcess($data): ?array
     {
-        return $this->preload()['icons']->first(function ($icon) use ($data) {
-            return $icon['class'] === $data;
-        });
+        return $data ? FontAwesome::icon($data) : null;
     }
 
     public function process($data): ?string

src/FontAwesomeFieldtype.php

@@ -15,6 +15,10 @@ class ServiceProvider extends AddonServiceProvider
         FontAwesomeTags::class,
     ];
 
+    protected $routes = [
+        'actions' => __DIR__.'/../routes/actions.php',
+    ];
+
     protected $scripts = [
         __DIR__.'/../resources/dist/js/cp.js',
     ];