Add support for Livewire v4 (#46)

## Changes
The `<script>` tag is now rendered via `Blade::render()` and added to
the json response returned by the `/embed` route.
On the client side, `injectLivewire()` consumes this tag and injects the
script into the page.

Since the script is delivered through the embed payload, the helpers
`getLivewireAssetUri()` and `getLivewireUpdateUri()` become obsolete
from my point of view.

Author: LaurinStapf

.gitignore

@@ -1,3 +1,4 @@
 vendor
 .idea
 .DS_Store
+composer.lock

composer.json

@@ -3,7 +3,7 @@
     "description": "Embed your Livewire components anywhere.",
     "require": {
         "php": "^8.1",
-        "livewire/livewire": "^v3.4.7"
+        "livewire/livewire": "^3.4.7|^4.0"
     },
     "license": "MIT",
     "autoload": {
@@ -26,4 +26,4 @@
     },
     "minimum-stability": "dev",
     "prefer-stable": true
-}
+}

js/wire-extender.js

@@ -3,8 +3,7 @@ let componentAssets;
 let currentScript = document.currentScript;
 let livewireStarted = false;
 
-function getUri(append = '')
-{
+function getUri(append = '') {
     let uri = document.querySelector('[data-uri]')?.getAttribute('data-uri');
 
     if (!uri) {
@@ -18,26 +17,14 @@ function getUri(append = '')
     return uri + append;
 }
 
-function getLivewireAssetUri()
-{
-    return document.querySelector('[data-livewire-asset-uri]')?.getAttribute('data-livewire-asset-uri') ?? getUri('livewire/livewire.min.js');
-}
-
-function getLivewireUpdateUri()
-{
-    return document.querySelector('[data-update-uri]')?.getAttribute('data-update-uri') ?? getUri('livewire/update');
-}
-
-function getEmbedUri()
-{
+function getEmbedUri() {
     const base = document.querySelector('[data-embed-uri]')?.getAttribute('data-embed-uri') ?? getUri('livewire/embed');
     const queryString = window.location.search;
 
     return base + queryString;
 }
 
-function injectLivewire()
-{
+function injectLivewire(script) {
     if (window.Livewire || livewireStarted) {
         return;
     }
@@ -46,10 +33,20 @@ function injectLivewire()
     style.innerHTML = '[wire\\:loading][wire\\:loading], [wire\\:loading\\.delay][wire\\:loading\\.delay], [wire\\:loading\\.inline-block][wire\\:loading\\.inline-block], [wire\\:loading\\.inline][wire\\:loading\\.inline], [wire\\:loading\\.block][wire\\:loading\\.block], [wire\\:loading\\.flex][wire\\:loading\\.flex], [wire\\:loading\\.table][wire\\:loading\\.table], [wire\\:loading\\.grid][wire\\:loading\\.grid], [wire\\:loading\\.inline-flex][wire\\:loading\\.inline-flex] {display: none;}[wire\\:loading\\.delay\\.none][wire\\:loading\\.delay\\.none], [wire\\:loading\\.delay\\.shortest][wire\\:loading\\.delay\\.shortest], [wire\\:loading\\.delay\\.shorter][wire\\:loading\\.delay\\.shorter], [wire\\:loading\\.delay\\.short][wire\\:loading\\.delay\\.short], [wire\\:loading\\.delay\\.default][wire\\:loading\\.delay\\.default], [wire\\:loading\\.delay\\.long][wire\\:loading\\.delay\\.long], [wire\\:loading\\.delay\\.longer][wire\\:loading\\.delay\\.longer], [wire\\:loading\\.delay\\.longest][wire\\:loading\\.delay\\.longest] {display: none;}[wire\\:offline][wire\\:offline] {display: none;}[wire\\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}';
     document.head.appendChild(style);
 
+    const temp = document.createElement('div');
+    temp.innerHTML = script.trim();
+
+    const scriptEl = temp.querySelector('script');
+
     livewireScript = document.createElement('script');
-    livewireScript.src = getLivewireAssetUri();
-    livewireScript.dataset.csrf = '';
-    livewireScript.dataset.updateUri = getLivewireUpdateUri();
+    livewireScript.src = scriptEl.src;
+
+    for (let attr of scriptEl.attributes) {
+        if (attr.name.startsWith('data-')) {
+            livewireScript.setAttribute(attr.name, attr.value);
+        }
+    }
+
     document.body.appendChild(livewireScript);
 }
 
@@ -58,7 +55,7 @@ function waitForLivewireAndStart() {
         return;
     }
 
-    if(window.Livewire) {
+    if (window.Livewire) {
         startLivewire();
     }
     livewireScript.onload = async function () {
@@ -68,20 +65,16 @@ function waitForLivewireAndStart() {
     livewireStarted = true;
 }
 
-async function startLivewire(assets)
-{
+async function startLivewire(assets) {
     Livewire.hook('request', ({ options }) => {
         options.headers['X-Wire-Extender'] = '';
         options.credentials = 'include';
     })
-    await Livewire.triggerAsync('payload.intercept', {assets: componentAssets});
+    await Livewire.triggerAsync('payload.intercept', { assets: componentAssets });
     Livewire.start();
 }
 
-function renderComponents(components)
-{
-    injectLivewire();
-
+function renderComponents(components) {
     fetch(getEmbedUri(), {
         method: 'POST',
         headers: {
@@ -90,7 +83,7 @@ function renderComponents(components)
         body: JSON.stringify({
             components: components
         }),
-       'credentials': 'include'
+        'credentials': 'include'
     })
         .then(response => response.json())
         .then(data => {
@@ -100,11 +93,13 @@ function renderComponents(components)
             }
 
             componentAssets = data.assets;
+
+            injectLivewire(data.script);
             waitForLivewireAndStart();
         });
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     let components = [];
 
     document.querySelectorAll('livewire').forEach((el) => {

routes/api.php

@@ -1,5 +1,6 @@
 <?php
 
 use WireElements\WireExtender\Http\Controllers\EmbedController;
+use WireElements\WireExtender\Http\Controllers\InjectController;
 
-Route::any('livewire/embed', EmbedController::class);
+Route::any('livewire/embed', EmbedController::class);

src/Http/Controllers/EmbedController.php

@@ -33,6 +33,7 @@ public function __invoke(Request $request)
         return [
             'components' => $components,
             'assets' => SupportScriptsAndAssets::getAssets(),
+            'script' => Blade::render('@livewireScripts'),
         ];
     }
 

src/WireExtender.php

@@ -12,7 +12,7 @@ class WireExtender
     public static function isEmbeddable($component): bool
     {
         try {
-            $reflectionClass = new ReflectionClass(app(ComponentRegistry::class)->new($component));
+            $reflectionClass = new ReflectionClass($this->resolveComponentClass($component));
             $embedAttribute = $reflectionClass->getAttributes(Embeddable::class)[0] ?? null;
 
             return is_null($embedAttribute) === false;
@@ -22,4 +22,13 @@ public static function isEmbeddable($component): bool
 
         return true;
     }
+
+    protected function resolveComponentClass(string $component): string
+    {
+        if (class_exists(ComponentRegistry::class)) {
+            return app(ComponentRegistry::class)->getClass($component);
+        }
+
+        return app('livewire.finder')->resolveClassComponentClassName($component);
+    }
 }