Merge pull request #61 from aerni/feature/livewire-replacer

Add support for static caching
jonassiewertsen · Jun 3, 2024 · 36ad6fb · 36ad6fb
2 parents 7261f74 + aab2b6a
commit 36ad6fb
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Visit my newest project Statamictutorials.com. Many tutorials are free.
 ## Description
 A third-party [Laravel Livewire](https://laravel-livewire.com/) integration for Statamic. 
 
-It's as easy as it get's to get stared with Livewire if using Statamic.
+It's as easy as it gets to get started with Livewire if using Statamic.
 
 ## Installation
 Pull in the Livewire package with composer
@@ -20,19 +20,32 @@ Pull in the Livewire package with composer
 composer require jonassiewertsen/statamic-livewire
 ```
 
-## Upgrade
-
-Make sure to read the Livewire upgarde guide, in case you're updating to `Statamic Livewire` 3, as there are breaking changes:
-https://livewire.laravel.com/docs/upgrading
+### Manually including Livewire's frontend assets
+By default, Livewire injects the JavaScript and CSS assets it needs into each page that includes a Livewire component. If you want more control over this behavior, you can [manually include the assets](https://livewire.laravel.com/docs/installation#manually-including-livewires-frontend-assets) on a page using the following Antlers tags or Blade directives:
 
-## General documentation
-[Livewire Docs](https://livewire.laravel.com/docs/quickstart)
-
-## Livewire scripts and styles
-
-Livewire injects its styles and scripts automatically into the page. However, this does not work if caching is enabled (`half`/`full`). In that case, you want to include them [manually](https://livewire.laravel.com/docs/installation#manually-including-livewires-frontend-assets), by using the respective tags `{{ livewire:styles }}` and`{{ livewire:scripts }}`.
+```html 
+<html>
+    <head>
+        <!-- If using Antlers -->
+        {{ livewire:styles }}
+
+        <!-- If using Blade -->
+        @livewireStyles
+    </head>
+    <body>
+
+        ...
+        <!-- If using Antlers -->
+        {{ livewire:scripts }}
+
+        <!-- Blade -->
+        @livewireScripts
+    </body>
+</html>
+```
 
-In case you need to include some custom Alpine plugins, you can [bundle the assets yourself](https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine) and disable the automatic injection by using the `{{ livewire:scriptConfig }}` tag. Do not forget to include the `{{ livewire:styles }}` tag as well.
+### Manually bundling Livewire and Alpine
+If you need to include some custom Alpine plugins, you need to [manually bundle the Livewire and Alpine assets](https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine) and disable the automatic injection by using the following Antlers tag or Blade directive. Do not forget to include the Livewire styles as well.
 
 ```html 
 <html>
@@ -47,14 +60,31 @@ In case you need to include some custom Alpine plugins, you can [bundle the asse
 
         ...
         <!-- If using Antlers -->
-        {{ livewire:scripts }} / {{ livewire:scriptConfig }}
+        {{ livewire:scriptConfig }}
 
         <!-- Blade -->
-        @livewireScripts / @livewireScriptConfig
+        @livewireScriptConfig
     </body>
 </html>
 ```
 
+### Static caching
+This addon adds an `AssetsReplacer` class to make Livewire compatible with half and full static caching. You may customize the replacers in the config of this addon:
+
+```php
+'replacers' => [
+    \Jonassiewertsen\Livewire\Replacers\AssetsReplacer::class,
+],
+```
+
+## Upgrade
+
+Make sure to read the Livewire upgrade guide, in case you're updating to `Statamic Livewire` 3, as there are breaking changes:
+https://livewire.laravel.com/docs/upgrading
+
+## General documentation
+[Livewire Docs](https://livewire.laravel.com/docs/quickstart)
+
 ### Include components
 You can create Livewire components as described in the [general documentation](https://livewire.laravel.com/docs/components). 
 To include your Livewire component:

diff --git a/config/config.php b/config/config.php
@@ -29,4 +29,18 @@
             \Jonassiewertsen\Livewire\Synthesizers\EntrySynthesizer::class,
         ],
     ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Replacers
+    |--------------------------------------------------------------------------
+    |
+    | Define the replacers that will be used when static caching is enabled
+    | to dynamically replace content within the response.
+    |
+    */
+
+    'replacers' => [
+        \Jonassiewertsen\Livewire\Replacers\AssetsReplacer::class,
+    ],
 ];
diff --git a/src/Replacers/AssetsReplacer.php b/src/Replacers/AssetsReplacer.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace Jonassiewertsen\Livewire\Replacers;
+
+use Illuminate\Http\Response;
+use Illuminate\Support\Str;
+use Livewire\Features\SupportAutoInjectedAssets\SupportAutoInjectedAssets;
+use Livewire\Features\SupportScriptsAndAssets\SupportScriptsAndAssets;
+use Livewire\Livewire;
+use Livewire\Mechanisms\FrontendAssets\FrontendAssets;
+use Statamic\StaticCaching\Replacer;
+
+class AssetsReplacer implements Replacer
+{
+    public function prepareResponseToCache(Response $responseToBeCached, Response $initialResponse)
+    {
+        if (! $content = $responseToBeCached->getContent()) {
+            return;
+        }
+
+        if (! $assets = SupportScriptsAndAssets::getAssets()) {
+            return;
+        }
+
+        $responseToBeCached->setContent(
+            SupportAutoInjectedAssets::injectAssets(
+                html: $content,
+                assetsHead: implode('', $assets),
+                assetsBody: ''
+            )
+        );
+    }
+
+    public function replaceInCachedResponse(Response $response)
+    {
+        if (Str::contains($response, FrontendAssets::scripts())) {
+            return;
+        }
+
+        if (Str::contains($response, FrontendAssets::scriptConfig())) {
+            return;
+        }
+
+        app(FrontendAssets::class)->hasRenderedScripts = false;
+
+        Livewire::forceAssetInjection();
+    }
+}
diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php
@@ -13,10 +13,8 @@ class ServiceProvider extends AddonServiceProvider
         'Jonassiewertsen\Livewire\Tags\Livewire',
     ];
 
-    public function boot(): void
+    public function bootAddon(): void
     {
-        parent::boot();
-
         $this->mergeConfigFrom(__DIR__.'/../config/config.php', 'statamic-livewire');
 
         if ($this->app->runningInConsole()) {
@@ -25,10 +23,19 @@ public function boot(): void
             ], 'statamic-livewire');
         }
 
+        $this->bootReplacers();
         $this->bootSyntesizers();
     }
 
-    protected function bootSyntesizers()
+    protected function bootReplacers(): void
+    {
+        config()->set('statamic.static_caching.replacers', array_merge(
+            config('statamic.static_caching.replacers'),
+            config('statamic-livewire.replacers')
+        ));
+    }
+
+    protected function bootSyntesizers(): void
     {
         if (! config('statamic-livewire.synthesizers.enabled', false)) {
             return;