feat(view): add icon component (#1009)

Co-authored-by: brendt <[email protected]>

Author: nhedger

.env.example

@@ -14,6 +14,9 @@ DISCOVERY_CACHE=false
 # Enable or disable config cache
 CONFIG_CACHE=false
 
+# Enable or disable icon cache
+ICON_CACHE=true
+
 # Enable or disable view cache
 VIEW_CACHE=false
 

src/Tempest/Cache/src/CacheConfig.php

@@ -17,6 +17,8 @@ final class CacheConfig
 
     public ?bool $enable;
 
+    public bool $iconCache = false;
+
     public bool $projectCache = false;
 
     public bool $viewCache = false;
@@ -34,6 +36,7 @@ public function __construct(
         ?bool $enable = null,
     ) {
         $this->enable = $enable ?? env('CACHE');
+        $this->iconCache = (bool) env('ICON_CACHE', true);
         $this->projectCache = (bool) env('PROJECT_CACHE', false);
         $this->viewCache = (bool) env('VIEW_CACHE', false);
         $this->discoveryCache = $this->resolveDiscoveryCacheStrategy();

src/Tempest/Cache/src/IconCache.php

@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Cache;
+
+use Psr\Cache\CacheItemPoolInterface;
+use Symfony\Component\Cache\Adapter\FilesystemAdapter;
+
+final class IconCache implements Cache
+{
+    use IsCache;
+
+    private CacheItemPoolInterface $pool;
+
+    public function __construct(
+        private readonly CacheConfig $cacheConfig,
+    ) {
+        $this->pool = new FilesystemAdapter(
+            directory: $this->cacheConfig->directory . '/icons',
+        );
+    }
+
+    protected function getCachePool(): CacheItemPoolInterface
+    {
+        return $this->pool;
+    }
+
+    public function isEnabled(): bool
+    {
+        return $this->cacheConfig->enable ?? $this->cacheConfig->iconCache;
+    }
+}

src/Tempest/Console/src/Testing/ConsoleTester.php

@@ -182,6 +182,24 @@ public function assertSee(string $text): self
         return $this->assertContains($text);
     }
 
+    public function assertSeeCount(string $text, int $expectedCount): self
+    {
+        $actualCount = substr_count($this->output->asUnformattedString(), $text);
+
+        Assert::assertSame(
+            $expectedCount,
+            $actualCount,
+            sprintf(
+                'Failed to assert that console output counted: %s exactly %d times. These lines were printed: %s',
+                $text,
+                $expectedCount,
+                PHP_EOL . PHP_EOL . $this->output->asUnformattedString() . PHP_EOL,
+            ),
+        );
+
+        return $this;
+    }
+
     public function assertNotSee(string $text): self
     {
         return $this->assertDoesNotContain($text);

src/Tempest/View/src/Components/Icon.php

@@ -0,0 +1,119 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\View\Components;
+
+use DateInterval;
+use DateTimeImmutable;
+use Exception;
+use Tempest\Cache\IconCache;
+use Tempest\Core\AppConfig;
+use Tempest\Http\Status;
+use Tempest\HttpClient\HttpClient;
+use Tempest\Support\Str\ImmutableString;
+use Tempest\View\Elements\ViewComponentElement;
+use Tempest\View\IconConfig;
+use Tempest\View\ViewComponent;
+
+final readonly class Icon implements ViewComponent
+{
+    public function __construct(
+        private AppConfig $appConfig,
+        private IconCache $iconCache,
+        private IconConfig $iconConfig,
+        private HttpClient $http,
+    ) {
+    }
+
+    public static function getName(): string
+    {
+        return 'x-icon';
+    }
+
+    public function compile(ViewComponentElement $element): string
+    {
+        $name = $element->getAttribute('name');
+        $class = $element->getAttribute('class');
+
+        $svg = $this->render($name);
+
+        if (! $svg) {
+            return $this->appConfig->environment->isLocal()
+                ? ('<!-- unknown-icon: ' . $name . ' -->')
+                : '';
+        }
+
+        return match ($class) {
+            null => $svg,
+            default => $this->injectClass($svg, $class),
+        };
+    }
+
+    /**
+     * Downloads the icon's SVG file from the Iconify API
+     */
+    private function download(string $prefix, string $name): ?string
+    {
+        try {
+            $url = new ImmutableString($this->iconConfig->iconifyApiUrl)
+                ->finish('/')
+                ->append("{$prefix}/{$name}.svg")
+                ->toString();
+
+            $response = $this->http->get($url);
+
+            if ($response->status !== Status::OK) {
+                return null;
+            }
+
+            return $response->body;
+        } catch (Exception) {
+            return null;
+        }
+    }
+
+    /**
+     * Renders an icon
+     *
+     * This method is responsible for rendering the icon. If the icon is not
+     * in the cache, it will download it on the fly and cache it for future
+     * use. If the icon is already in the cache, it will be served from there.
+     */
+    private function render(string $name): ?string
+    {
+        try {
+            $parts = explode(':', $name, 2);
+
+            if (count($parts) !== 2) {
+                return null;
+            }
+
+            [$prefix, $name] = $parts;
+
+            return $this->iconCache->resolve(
+                key: "iconify-{$prefix}-{$name}",
+                cache: fn () => $this->download($prefix, $name),
+                expiresAt: $this->iconConfig->cacheDuration
+                    ? new DateTimeImmutable()
+                        ->add(DateInterval::createFromDateString("{$this->iconConfig->cacheDuration} seconds"))
+                    : null,
+            );
+        } catch (Exception) {
+            return null;
+        }
+    }
+
+    /**
+     * Forwards the user-provided class attribute to the SVG element
+     */
+    private function injectClass(string $svg, string $class): string
+    {
+        return new ImmutableString($svg)
+            ->replace(
+                search: '<svg ',
+                replace: "<svg class=\"{$class}\" ",
+            )
+            ->toString();
+    }
+}

src/Tempest/View/src/Config/icon.config.php

@@ -0,0 +1,7 @@
+<?php
+
+declare(strict_types=1);
+
+use Tempest\View\IconConfig;
+
+return new IconConfig();

src/Tempest/View/src/IconConfig.php

@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\View;
+
+final class IconConfig
+{
+    public function __construct(
+        /**
+         * The number of seconds to cache the icon SVG files.
+         *
+         * If null, the icons will be cached indefinitely.
+         *
+         * @var int|null
+         */
+        public ?int $cacheDuration = null,
+
+        /**
+         * URL of the Iconify API.
+         *
+         * This allows you to switch to a local or self-hosted Iconify API.
+         *
+         * @var string
+         */
+        public string $iconifyApiUrl = 'https://api.iconify.design',
+    ) {
+    }
+}

tests/Integration/Cache/CacheClearCommandTest.php

@@ -17,10 +17,10 @@ public function test_cache_clear_single(): void
     {
         $this->console
             ->call('cache:clear')
+            ->print()
             ->assertSee(ProjectCache::class)
             ->submit('0')
             ->submit('yes')
-            ->assertSee(ProjectCache::class)
-            ->assertNotSee(ViewCache::class);
+           ->assertSeeCount('CLEARED', 1);
     }
 }