Fix Pre-8.23.0 Laravel Bug (#2)

* Fix Laravel bug
* Additional  tests, remove composer 1
* Apply fixes from StyleCI

Author: aarondfrancis

.github/workflows/tests.yml

@@ -16,10 +16,6 @@ jobs:
           - laravel: 7.*
             testbench: 5.*
 
-          - laravel: 7.*
-            dependency-version: prefer-lowest
-            composer-version: --1
-
           - laravel: 8.*
             testbench: 6.*
 
@@ -44,7 +40,7 @@ jobs:
 
       - name: Install dependencies
         run: |
-          composer self-update ${{ matrix.composer-version }}
+          composer self-update
           composer require "laravel/framework:${{ matrix.laravel }}" "orchestra/testbench:${{ matrix.testbench }}" --no-interaction --no-update
           composer update --${{ matrix.dependency-version }} --prefer-dist --no-interaction
 

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+## 0.4.2 - 2021-05-24
+
+### Fixed
+- Cover a bug in Laravel pre 8.23.0.
+
 ## 0.4.1 - 2021-05-23
 
 ### Added

composer.json

@@ -21,6 +21,7 @@
         "illuminate/console": "^7.26.0|^8.0",
         "illuminate/http": "^7.26.0|^8.0",
         "illuminate/cache": "^7.26.0|^8.0",
+        "illuminate/view": "^7.26.0|^8.0",
         "guzzlehttp/guzzle": "^7.2",
         "ramsey/uuid": "^3.7|^4.0"
     },

src/Blade/BladeManager.php

@@ -12,6 +12,19 @@
 
 class BladeManager
 {
+    /**
+     * Laravel before 8.23.0 has a bug that adds extra spaces around components.
+     * Obviously this is a problem if your component is wrapped in <pre></pre>
+     * tags, which ours usually is.
+     *
+     * @see https://github.com/laravel/framework/blob/8.x/CHANGELOG-8.x.md#v8230-2021-01-19.
+     * @var bool
+     */
+    public static $affectedBySpacingBug = false;
+
+    /**
+     * @var array
+     */
     protected static $blocks = [];
 
     public static function registerBlock(Block $block)
@@ -66,6 +79,18 @@ public static function renderContent($content)
             $swap[$block->placeholder('styles')] = $block->styles;
         }
 
+        // If this version of Laravel is affected by the spacing bug, then
+        // we will swap our our placeholders with a preceding space, and
+        // a following space. This effectively fixes the bug.
+        if (static::$affectedBySpacingBug) {
+            $swap[' ##PRE_TL_COMPONENT##'] = '';
+            $swap['##POST_TL_COMPONENT## '] = '';
+        }
+
+        // No matter what, always get rid of the placeholders.
+        $swap['##PRE_TL_COMPONENT##'] = '';
+        $swap['##POST_TL_COMPONENT##'] = '';
+
         return str_replace(array_keys($swap), array_values($swap), $content);
     }
 }

src/Blade/CodeComponent.php

@@ -59,13 +59,15 @@ public function render()
         // classes and style string. Echo out the slot, but capture it using output
         // buffering. We then pass it through as the contents to highlight, leaving
         // the placeholder so we can replace it later with fully highlighted code.
+        // We have to add the ##PRE## and ##POST## tags to cover a framework bug.
+        // @see BladeManager::renderContent.
         return <<<'EOT'
-<code {{
+##PRE_TL_COMPONENT##<code {{
         $attributes->except('style')->merge([
             'class' => $block->placeholder('classes'),
             'style' => $attributes->get('style') . $block->placeholder('styles')
         ])
-    }}><?php ob_start(); ?>{{ $slot }}<?php $capture(ob_get_clean()) ?>{{ $block->placeholder() }}</code>
+    }}><?php ob_start(); ?>{{ $slot }}<?php $capture(ob_get_clean()) ?>{{ $block->placeholder() }}</code>##POST_TL_COMPONENT##
 EOT;
     }
 }

src/Manager.php

@@ -70,7 +70,7 @@ public function environment()
     }
 
     /**
-     * @param string $environment
+     * @param string|null $environment
      */
     public function overrideEnvironment($environment = null)
     {

src/TorchlightServiceProvider.php

@@ -6,6 +6,7 @@
 namespace Torchlight;
 
 use Illuminate\Support\ServiceProvider;
+use Torchlight\Blade\BladeManager;
 use Torchlight\Blade\CodeComponent;
 use Torchlight\Commands\Install;
 
@@ -44,11 +45,19 @@ public function publishConfig()
 
     public function registerBladeComponent()
     {
-        if (Torchlight::config('torchlight.blade_components')) {
-            $this->loadViewComponentsAs('torchlight', [
-                'code' => CodeComponent::class
-            ]);
+        if (!Torchlight::config('torchlight.blade_components')) {
+            return;
         }
+
+        // Laravel before 8.23.0 has a bug that adds extra spaces around components.
+        // Obviously this is a problem if your component is wrapped in <pre></pre>
+        // tags, which ours usually is.
+        // See https://github.com/laravel/framework/blob/8.x/CHANGELOG-8.x.md#v8230-2021-01-19.
+        BladeManager::$affectedBySpacingBug = version_compare(app()->version(), '8.23.0', '<');
+
+        $this->loadViewComponentsAs('torchlight', [
+            'code' => CodeComponent::class
+        ]);
     }
 
     public function register()

tests/MiddlewareAndComponentTest.php

@@ -20,6 +20,9 @@ public function getEnvironmentSetUp($app)
 
     protected function getView($view)
     {
+        // When testing multiple versions locally, this helps.
+        $this->artisan('view:clear');
+
         Route::get('/torchlight', function () use ($view) {
             return View::file(__DIR__ . '/Support/' . $view);
         })->middleware(RenderTorchlight::class);
@@ -60,8 +63,8 @@ public function it_sends_a_simple_request_with_no_response()
         $response = $this->getView('simple-php-hello-world.blade.php');
 
         $this->assertEquals(
-            '<code class="" style="">echo &quot;hello world&quot;;</code>',
-            rtrim($response->content())
+            '<pre><code class="" style="">echo &quot;hello world&quot;;</code></pre>',
+            $response->content()
         );
 
         Http::assertSent(function ($request) {
@@ -83,9 +86,8 @@ public function it_sends_a_simple_request_with_highlighted_response()
         $response = $this->getView('simple-php-hello-world.blade.php');
 
         $this->assertEquals(
-            '<code class="torchlight" style="background-color: #292D3E;">this is the highlighted response from the server</code>',
-            // See https://github.com/laravel/framework/pull/35874/files for the rtrim reasoning.
-            rtrim($response->content())
+            '<pre><code class="torchlight" style="background-color: #292D3E;">this is the highlighted response from the server</code></pre>',
+            $response->content()
         );
     }
 
@@ -98,7 +100,7 @@ public function classes_get_merged()
 
         $this->assertEquals(
             '<code class="torchlight mt-4" style="background-color: #292D3E;">this is the highlighted response from the server</code>',
-            rtrim($response->content())
+            $response->content()
         );
     }
 
@@ -111,7 +113,20 @@ public function attributes_are_preserved()
 
         $this->assertEquals(
             '<code class="torchlight" style="background-color: #292D3E;" x-data="{}">this is the highlighted response from the server</code>',
-            rtrim($response->content())
+            $response->content()
+        );
+    }
+
+    /** @test */
+    public function inline_keeps_its_spaces()
+    {
+        $this->legitApiResponse();
+
+        $response = $this->getView('an-inline-component.blade.php');
+
+        $this->assertEquals(
+            'this is <code class="torchlight" style="background-color: #292D3E;">this is the highlighted response from the server</code> inline',
+            $response->content()
         );
     }
 
@@ -177,18 +192,11 @@ public function two_components_work()
         $response = $this->getView('two-simple-php-hello-world.blade.php');
 
         $expected = <<<EOT
-<code class="torchlight1" style="background-color: #111111;">response 1</code>
-<code class="torchlight2" style="background-color: #222222;">response 2</code>
-EOT;
-
-        // See https://github.com/laravel/framework/pull/35874/files for reasoning.
-        $expected = str_replace("\n", '', $expected);
+<pre><code class="torchlight1" style="background-color: #111111;">response 1</code></pre>
 
-        // Covering bugfixes from earlier versions of Laravel
-        // https://github.com/laravel/framework/pull/35874/files.
-        $actual = rtrim(str_replace("\n", '', $response->content()));
-        $actual = str_replace('</code>  <code', '</code><code', $actual);
+<pre><code class="torchlight2" style="background-color: #222222;">response 2</code></pre>
+EOT;
 
-        $this->assertEquals($expected, $actual);
+        $this->assertEquals($expected, $response->content());
     }
 }

tests/Support/an-inline-component.blade.php

@@ -0,0 +1 @@
+this is <x-torchlight-code torchlight-id='real_response_id' language='php'>echo "hello world"</x-torchlight-code> inline

tests/Support/simple-php-hello-world.blade.php

@@ -1,3 +1,3 @@
-<x-torchlight-code torchlight-id='real_response_id' language='php'>
+<pre><x-torchlight-code torchlight-id='real_response_id' language='php'>
     echo "hello world";
-</x-torchlight-code>
+</x-torchlight-code></pre>

tests/Support/two-simple-php-hello-world.blade.php

@@ -1,7 +1,7 @@
-<x-torchlight-code torchlight-id='id1' language='php'>
+<pre><x-torchlight-code torchlight-id='id1' language='php'>
     echo "hello world 1";
-</x-torchlight-code>
+</x-torchlight-code></pre>
 
-<x-torchlight-code torchlight-id='id2' language='php'>
+<pre><x-torchlight-code torchlight-id='id2' language='php'>
     echo "hello world 2";
-</x-torchlight-code>
+</x-torchlight-code></pre>