Use inline anonymous component instead of class component

tonysm · Jan 6, 2024 · ae1e2f5 · ae1e2f5
1 parent c7a29e0
commit ae1e2f5
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -45,15 +45,15 @@ php artisan importmap:install
 Next, we need to add the following component to our view or layout file:
 
 ```blade
-<x-importmap-tags />
+<x-importmap::tags />
 ```
 
 Add that between your `<head>` tags. The `entrypoint` should be the "main" file, commonly the `resources/js/app.js` file, which will be mapped to the `app` module (use the module name, not the file).
 
-By default the `x-importmap-tags` component assumes your entrypoint module is `app`, which matches the existing `resources/js/app.js` file from Laravel's default scaffolding. You may want to customize the entrypoint, which you can do with the `entrypoint` prop:
+By default the `x-importmap::tags` component assumes your entrypoint module is `app`, which matches the existing `resources/js/app.js` file from Laravel's default scaffolding. You may want to customize the entrypoint, which you can do with the `entrypoint` prop:
 
 ```blade
-<x-importmap-tags entrypoint="admin" />
+<x-importmap::tags entrypoint="admin" />
 ```
 
 The package will automatically map the `resources/js` folder to your `public/js` folder using Laravel's symlink feature. All you have to do after installing the package is run:
@@ -186,6 +186,9 @@ Which will add the correct `links` tags to your head tag in the HTML document, l
 <link rel="modulepreload" href="https://unpkg.com/[email protected]/dist/module.esm.js">
 ```
 
+You may add the `AddLinkHeadersForPreloadedPins` middleware to the `web` routes group so these preloaded links are sent as a `Link` header.
+Add the `Tonysm\ImportmapLaravel\Http\Middleware\AddLinkHeadersForPreloadedPins` to the `web` route group so the preloaded modules are sent as the Link headers, which are used in [HTTP/2 Server Push](https://datatracker.ietf.org/doc/html/rfc7540#section-8.2) and [Resource Hints](https://html.spec.whatwg.org/#linkTypes) to push resources to the client as early as possible. Some web servers can pick up this `Link` header and convert them to [Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) responses.
+
 ## Dependency Maintenance Commands
 
 Maintaining a healthy dependency list can be tricky. Here are a couple of commands to help you with this task.

diff --git a/resources/views/tags.blade.php → resources/views/components/tags.blade.php b/resources/views/tags.blade.php → resources/views/components/tags.blade.php
@@ -1,3 +1,12 @@
+@props(['entrypoint' => 'app', 'nonce' => null, 'importmap' => null])
+
+@php
+    $resolver = new \Tonysm\ImportmapLaravel\AssetResolver();
+
+    $importmaps = $importmap?->asArray($resolver) ?? \Tonysm\ImportmapLaravel\Facades\Importmap::asArray($resolver);
+    $preloadedModules = $importmap?->preloadedModulePaths($resolver) ?? \Tonysm\ImportmapLaravel\Facades\Importmap::preloadedModulePaths($resolver);
+@endphp
+
 <script type="importmap" data-turbo-track="reload"@if ($nonce) nonce="{{ $nonce }}" @endif>
     @json($importmaps, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)
 </script>

diff --git a/src/Commands/InstallCommand.php b/src/Commands/InstallCommand.php
@@ -140,7 +140,7 @@ private function updateAppLayoutsUsingMix()
                     $file,
                     str_replace(
                         "<script src=\"{{ mix('js/app.js') }}\" defer></script>",
-                        '<x-importmap-tags />',
+                        '<x-importmap::tags />',
                         File::get($file),
                     ),
                 ));
@@ -157,7 +157,7 @@ private function updateAppLayoutsUsingVite()
                     $file,
                     preg_replace(
                         '/\@vite.*/',
-                        '<x-importmap-tags />',
+                        '<x-importmap::tags />',
                         File::get($file),
                     ),
                 ))
@@ -182,7 +182,7 @@ private function appendImportmapTagsToLayoutsHead(): void
                     $file,
                     preg_replace(
                         '/(\s*)(<\/head>)/',
-                        "\\1    <x-importmap-tags />\n\\1\\2",
+                        "\\1    <x-importmap::tags />\n\\1\\2",
                         File::get($file),
                     ),
                 ));

diff --git a/src/ImportmapLaravelServiceProvider.php b/src/ImportmapLaravelServiceProvider.php
@@ -2,6 +2,7 @@
 
 namespace Tonysm\ImportmapLaravel;
 
+use Illuminate\View\Compilers\BladeCompiler;
 use Spatie\LaravelPackageTools\Package;
 use Spatie\LaravelPackageTools\PackageServiceProvider;
 use Tonysm\ImportmapLaravel\View\Components;
@@ -19,7 +20,6 @@ public function configurePackage(Package $package): void
             ->name('importmap')
             ->hasConfigFile()
             ->hasViews()
-            ->hasViewComponent('importmap', Components\Tags::class)
             ->hasCommand(Commands\InstallCommand::class)
             ->hasCommand(Commands\OptimizeCommand::class)
             ->hasCommand(Commands\ClearCacheCommand::class)
@@ -51,5 +51,14 @@ public function packageBooted()
                 public_path('js') => resource_path('js'),
             ]);
         }
+
+        $this->configureComponents();
+    }
+
+    private function configureComponents()
+    {
+        $this->callAfterResolving('blade.compiler', function (BladeCompiler $blade) {
+            $blade->anonymousComponentPath(__DIR__.'/../resources/views/components', 'importmap');
+        });
     }
 }
diff --git a/src/View/Components/Tags.php b/src/View/Components/Tags.php
diff --git a/tests/TagsComponentTest.php b/tests/TagsComponentTest.php
@@ -33,14 +33,14 @@ protected function setUp(): void
     /** @test */
     public function generates_tags_without_nonce()
     {
-        $this->blade('<x-importmap-tags />')
+        $this->blade('<x-importmap::tags />')
             ->assertSee('<link rel="modulepreload" href="https://cdn.skypack.dev/md5" />', escape: false);
     }
 
     /** @test */
     public function uses_given_csp_nonce()
     {
-        $this->blade('<x-importmap-tags nonce="h3ll0" />')
+        $this->blade('<x-importmap::tags nonce="h3ll0" />')
             ->assertSee('<link rel="modulepreload" href="https://cdn.skypack.dev/md5" nonce="h3ll0" />', escape: false);
     }
 
@@ -51,7 +51,7 @@ public function uses_custom_map()
         $importmap->pin('foo', preload: true);
         $importmap->pin('bar', preload: true);
 
-        $this->blade('<x-importmap-tags :importmap="$importmap" />', ['importmap' => $importmap])
+        $this->blade('<x-importmap::tags :importmap="$importmap" />', ['importmap' => $importmap])
             ->assertSee('<link rel="modulepreload" href="'.asset('js/foo.js').'" />', escape: false)
             ->assertSee('<link rel="modulepreload" href="'.asset('js/bar.js').'" />', escape: false)
             ->assertDontSee('<link rel="modulepreload" href="https://cdn.skypack.dev/md5" />', escape: false);