Skip to content
This repository was archived by the owner on Jan 27, 2025. It is now read-only.

Commit 36ad6fb

Browse files
jonassiewertsenjonassiewertsen
authored
Merge pull request #61 from aerni/feature/livewire-replacer
Add support for static caching
2 parents 7261f74 + aab2b6a commit 36ad6fb

File tree

4 files changed

+117
-18
lines changed

4 files changed

+117
-18
lines changed

Diff for: ‎README.md

+44-14
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Visit my newest project Statamictutorials.com. Many tutorials are free.
1111
## Description
1212
A third-party [Laravel Livewire](https://laravel-livewire.com/) integration for Statamic.
1313

14-
It's as easy as it get's to get stared with Livewire if using Statamic.
14+
It's as easy as it gets to get started with Livewire if using Statamic.
1515

1616
## Installation
1717
Pull in the Livewire package with composer
@@ -20,19 +20,32 @@ Pull in the Livewire package with composer
2020
composer require jonassiewertsen/statamic-livewire
2121
```
2222

23-
## Upgrade
24-
25-
Make sure to read the Livewire upgarde guide, in case you're updating to `Statamic Livewire` 3, as there are breaking changes:
26-
https://livewire.laravel.com/docs/upgrading
23+
### Manually including Livewire's frontend assets
24+
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:
2725

28-
## General documentation
29-
[Livewire Docs](https://livewire.laravel.com/docs/quickstart)
30-
31-
## Livewire scripts and styles
32-
33-
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 }}`.
26+
```html
27+
<html>
28+
<head>
29+
<!-- If using Antlers -->
30+
{{ livewire:styles }}
31+
32+
<!-- If using Blade -->
33+
@livewireStyles
34+
</head>
35+
<body>
36+
37+
...
38+
<!-- If using Antlers -->
39+
{{ livewire:scripts }}
40+
41+
<!-- Blade -->
42+
@livewireScripts
43+
</body>
44+
</html>
45+
```
3446

35-
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.
47+
### Manually bundling Livewire and Alpine
48+
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.
3649

3750
```html
3851
<html>
@@ -47,14 +60,31 @@ In case you need to include some custom Alpine plugins, you can [bundle the asse
4760

4861
...
4962
<!-- If using Antlers -->
50-
{{ livewire:scripts }} / {{ livewire:scriptConfig }}
63+
{{ livewire:scriptConfig }}
5164

5265
<!-- Blade -->
53-
@livewireScripts / @livewireScriptConfig
66+
@livewireScriptConfig
5467
</body>
5568
</html>
5669
```
5770

71+
### Static caching
72+
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:
73+
74+
```php
75+
'replacers' => [
76+
\Jonassiewertsen\Livewire\Replacers\AssetsReplacer::class,
77+
],
78+
```
79+
80+
## Upgrade
81+
82+
Make sure to read the Livewire upgrade guide, in case you're updating to `Statamic Livewire` 3, as there are breaking changes:
83+
https://livewire.laravel.com/docs/upgrading
84+
85+
## General documentation
86+
[Livewire Docs](https://livewire.laravel.com/docs/quickstart)
87+
5888
### Include components
5989
You can create Livewire components as described in the [general documentation](https://livewire.laravel.com/docs/components).
6090
To include your Livewire component:

Diff for: ‎config/config.php

+14
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,18 @@
2929
\Jonassiewertsen\Livewire\Synthesizers\EntrySynthesizer::class,
3030
],
3131
],
32+
33+
/*
34+
|--------------------------------------------------------------------------
35+
| Replacers
36+
|--------------------------------------------------------------------------
37+
|
38+
| Define the replacers that will be used when static caching is enabled
39+
| to dynamically replace content within the response.
40+
|
41+
*/
42+
43+
'replacers' => [
44+
\Jonassiewertsen\Livewire\Replacers\AssetsReplacer::class,
45+
],
3246
];

Diff for: ‎src/Replacers/AssetsReplacer.php

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?php
2+
3+
namespace Jonassiewertsen\Livewire\Replacers;
4+
5+
use Illuminate\Http\Response;
6+
use Illuminate\Support\Str;
7+
use Livewire\Features\SupportAutoInjectedAssets\SupportAutoInjectedAssets;
8+
use Livewire\Features\SupportScriptsAndAssets\SupportScriptsAndAssets;
9+
use Livewire\Livewire;
10+
use Livewire\Mechanisms\FrontendAssets\FrontendAssets;
11+
use Statamic\StaticCaching\Replacer;
12+
13+
class AssetsReplacer implements Replacer
14+
{
15+
public function prepareResponseToCache(Response $responseToBeCached, Response $initialResponse)
16+
{
17+
if (! $content = $responseToBeCached->getContent()) {
18+
return;
19+
}
20+
21+
if (! $assets = SupportScriptsAndAssets::getAssets()) {
22+
return;
23+
}
24+
25+
$responseToBeCached->setContent(
26+
SupportAutoInjectedAssets::injectAssets(
27+
html: $content,
28+
assetsHead: implode('', $assets),
29+
assetsBody: ''
30+
)
31+
);
32+
}
33+
34+
public function replaceInCachedResponse(Response $response)
35+
{
36+
if (Str::contains($response, FrontendAssets::scripts())) {
37+
return;
38+
}
39+
40+
if (Str::contains($response, FrontendAssets::scriptConfig())) {
41+
return;
42+
}
43+
44+
app(FrontendAssets::class)->hasRenderedScripts = false;
45+
46+
Livewire::forceAssetInjection();
47+
}
48+
}

Diff for: ‎src/ServiceProvider.php

+11-4
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,8 @@ class ServiceProvider extends AddonServiceProvider
1313
'Jonassiewertsen\Livewire\Tags\Livewire',
1414
];
1515

16-
public function boot(): void
16+
public function bootAddon(): void
1717
{
18-
parent::boot();
19-
2018
$this->mergeConfigFrom(__DIR__.'/../config/config.php', 'statamic-livewire');
2119

2220
if ($this->app->runningInConsole()) {
@@ -25,10 +23,19 @@ public function boot(): void
2523
], 'statamic-livewire');
2624
}
2725

26+
$this->bootReplacers();
2827
$this->bootSyntesizers();
2928
}
3029

31-
protected function bootSyntesizers()
30+
protected function bootReplacers(): void
31+
{
32+
config()->set('statamic.static_caching.replacers', array_merge(
33+
config('statamic.static_caching.replacers'),
34+
config('statamic-livewire.replacers')
35+
));
36+
}
37+
38+
protected function bootSyntesizers(): void
3239
{
3340
if (! config('statamic-livewire.synthesizers.enabled', false)) {
3441
return;

0 commit comments

Comments
 (0)