Unify element IDs based on blocks

Author: jissereitsma

Component/ComponentViewModel.php

@@ -3,10 +3,13 @@
 
 namespace Loki\Components\Component;
 
+use Loki\Components\Util\Block\GetElementId;
+use Magento\Framework\App\ObjectManager;
 use Magento\Framework\View\Element\AbstractBlock;
 use Loki\Components\Filter\Filter;
 use Loki\Components\Messages\LocalMessage;
 use Loki\Components\Validator\Validator;
+use Magento\Setup\Model\ObjectManagerProvider;
 
 class ComponentViewModel implements ComponentViewModelInterface
 {
@@ -44,8 +47,7 @@ public function getComponentName(): string
 
     public function getElementId(): string
     {
-        $nameInLayout = strtolower((string)$this->block->getNameInLayout());
-        return preg_replace('/([^a-zA-Z0-9\-]+)/', '-', $nameInLayout);
+        return ObjectManager::getInstance()->get(GetElementId::class)->execute($this->block);
     }
 
     public function getValue(): mixed

Observer/AddDomIdToBlock.php

@@ -3,14 +3,15 @@
 
 namespace Loki\Components\Observer;
 
+use Loki\Components\Util\Block\GetElementId;
 use Magento\Framework\Event\Observer;
 use Magento\Framework\Event\ObserverInterface;
-use Magento\Framework\View\Element\AbstractBlock;
 use Magento\Framework\View\Element\Template;
 
 class AddDomIdToBlock implements ObserverInterface
 {
     public function __construct(
+        private readonly GetElementId $getElementId,
         private readonly array $blockNames = [],
     ) {
     }
@@ -45,22 +46,11 @@ public function execute(Observer $observer)
             return;
         }
 
-        $elementId = $this->getElementId($block);
+        $elementId = $this->getElementId->execute($block);
         $originalString = '<'.$match[1].$match[2];
         $newString = '<'.$match[1].' id="'.$elementId.'"'.$match[2];
         $html = preg_replace('#^'.$originalString.'#', $newString, $html);
 
         $transport->setHtml($html);
     }
-
-    private function getElementId(AbstractBlock $block): string
-    {
-        $uniqId = (string)$block->getUniqId();
-        if (strlen($uniqId) > 0) {
-            return $uniqId;
-        }
-
-        $nameInLayout = strtolower((string)$block->getNameInLayout());
-        return preg_replace('#([^a-zA-Z0-9]+)#', '-', $nameInLayout);
-    }
 }

Observer/AddHtmlAttributesToComponentBlock.php

@@ -5,6 +5,7 @@
 
 use Loki\Components\Util\Ajax;
 use Loki\Components\Util\AppMode;
+use Loki\Components\Util\Block\GetElementId;
 use Magento\Framework\Event\Observer;
 use Magento\Framework\Event\ObserverInterface;
 use Magento\Framework\View\Element\AbstractBlock;
@@ -21,6 +22,7 @@ public function __construct(
         private readonly JsDataProvider $jsDataProvider,
         private readonly Ajax $ajax,
         private readonly AppMode $appMode,
+        private readonly GetElementId $getElementId
     ) {
     }
 
@@ -86,7 +88,7 @@ private function getHtmlAttributes(ComponentInterface $component, string $curren
         }
 
         $attributes = (array)$block->getData('html_attributes');
-        $attributes['id'] = $this->getElementId($block);
+        $attributes['id'] = $this->getElementId->execute($block);
         $attributes['x-data'] = $this->jsDataProvider->getComponentName($component);
 
         if ($this->appMode->isDeveloperMode()) {
@@ -119,15 +121,4 @@ private function getJsData(ComponentInterface $component): string
 
         return json_encode($componentData);
     }
-
-    private function getElementId(AbstractBlock $block): string
-    {
-        $uniqId = (string)$block->getUniqId();
-        if (strlen($uniqId) > 0) {
-            return $uniqId;
-        }
-
-        $nameInLayout = strtolower((string)$block->getNameInLayout());
-        return preg_replace('#([^a-zA-Z0-9]+)#', '-', $nameInLayout);
-    }
 }

Util/Block/GetElementId.php

@@ -0,0 +1,25 @@
+<?php declare(strict_types=1);
+
+namespace Loki\Components\Util\Block;
+
+use Loki\Components\Util\IdConvertor;
+use Magento\Framework\View\Element\AbstractBlock;
+
+class GetElementId
+{
+    public function __construct(
+        private readonly IdConvertor $idConvertor,
+    ) {
+    }
+
+    public function execute(AbstractBlock $block): string
+    {
+        $uniqId = (string)$block->getUniqId();
+        if (strlen($uniqId) > 0) {
+            return $this->idConvertor->toElementId($uniqId);
+        }
+
+        $nameInLayout = strtolower((string)$block->getNameInLayout());
+        return $this->idConvertor->toElementId($nameInLayout);
+    }
+}