Improve Virtual DOM and add Template

blocks/button/button.js

@@ -7,11 +7,7 @@ export default class Button extends ComponentBase {
     selectorTest: (el) => el.childNodes.length === 1,
   };
 
-  nestedComponentsConfig = {
-    popupTrigger: {
-      componentName: 'popup-trigger',
-    },
-  };
+  nestedComponentsConfig = {};
 
   extendConfig() {
     return [

blocks/card/card.css

@@ -28,7 +28,7 @@ raqn-card > div img {
 }
 
 /* Make entire item clickable */
-raqn-card div > div:first-child > p > em:only-child > a:only-child {
+raqn-card div > div:first-child > em:first-child > a:only-child {
   position: absolute;
   inset-block-end: 0;
   inset-inline-end: 0;
@@ -39,10 +39,6 @@ raqn-card div > div:first-child > p > em:only-child > a:only-child {
   z-index: 1;
 }
 
-raqn-card div > div:first-child > p:has(> em:only-child > a:only-child) {
-  margin: 0;
-}
-
 raqn-card div > div {
   display: flex;
   flex-direction: column;
@@ -51,12 +47,12 @@ raqn-card div > div {
   inset-inline-end: 0;
 }
 
-raqn-card div > div p:last-child:has(> raqn-button, raqn-icon) {
+raqn-card div > div > :where(raqn-button, raqn-icon):last-child {
   flex-grow: 1;
   display: flex;
   align-items: flex-end;
 }
 
-raqn-card div > div p:last-child:has(> raqn-icon) {
+raqn-card div > div > raqn-icon:last-child {
   justify-content: flex-end;
 }

blocks/footer/footer.css

@@ -1,7 +1,5 @@
 footer {
   background: var(--background-color);
-  width: var(--max-width);
-  margin: 0 auto;
 }
 
 raqn-footer {

blocks/grid/grid.css

@@ -1,5 +1,6 @@
 raqn-grid {
   /* Set to initial to prevent inheritance for nested grids */
+  --grid-gap: initial;
   --grid-height: initial;
   --grid-width: 100%;
   --grid-justify-items: initial;
@@ -29,12 +30,5 @@ raqn-grid {
   height: var(--grid-height);
   background: var(--grid-background);
   color: var(--grid-color);
-}
-
-/* 
- * First level grids will (as any other block) will act as a container
- * and width should not be applied.
- */
-raqn-grid:not(main > div > raqn-grid) {
   width: var(--grid-width);
 }

blocks/grid/grid.js

@@ -8,12 +8,11 @@ export default class Grid extends ComponentBase {
   attributesValues = {
     all: {
       grid: {
-        gap: '80px',
         template: {
           columns: 'repeat(auto-fill, 200px)',
           rows: 'auto',
         },
-        heigth: 'initial',
+        height: 'initial',
       },
     },
   };

blocks/popup-trigger/popup-trigger.js

@@ -1,19 +1,17 @@
 import ComponentBase from '../../scripts/component-base.js';
-
+import { componentList } from '../../scripts/component-list/component-list.js';
 import { popupState } from '../../scripts/libs.js';
-import { generalManipulation, generateDom, renderVirtualDom } from '../../scripts/render/dom.js';
+import { loadModules } from '../../scripts/render/dom-reducers.js';
 
 export default class PopupTrigger extends ComponentBase {
-  static observedAttributes = ['data-active', 'data-url'];
+  static observedAttributes = ['data-active', 'data-action'];
 
   static loaderConfig = {
     ...ComponentBase.loaderConfig,
     targetsSelectors: 'a:is([href*="#popup-trigger"],[href*="#popup-close"])',
     targetsAsContainers: true,
   };
 
-  dependencies = ['popup'];
-
   nestedComponentsConfig = {};
 
   get isActive() {
@@ -24,8 +22,9 @@ export default class PopupTrigger extends ComponentBase {
     return [
       ...super.extendConfig(),
       {
-        elements: {
-          popupBtn: 'raqn-button',
+        selectors: {
+          popupBtn: 'button',
+          triggerIcon: 'raqn-icon',
         },
         closePopupIdentifier: '#popup-close',
       },
@@ -40,53 +39,33 @@ export default class PopupTrigger extends ComponentBase {
   }
 
   onInit() {
-    this.createButton();
-    this.popupBtn.append(...this.childNodes);
-    this.append(this.popupBtn);
-    const dom = generalManipulation(generateDom(this.childNodes));
-    this.innerHTML = '';
-    this.append(...renderVirtualDom(dom));
-    this.processTargetAnchor();
+    this.setAction();
+    this.queryElements();
+    // console.error('🚀 ~ this.elements:', this.elements);
+    // console.error('🚀 ~ this.children:', this.children);
   }
 
-  processTargetAnchor() {
-    const { target: anchor } = this.initOptions;
+  setAction() {
     const { closePopupIdentifier } = this.config;
-    const anchorUrl = new URL(anchor.href);
+    const anchorUrl = new URL(this.dataset.action, window.location.origin);
 
     if (anchorUrl.hash === closePopupIdentifier) {
       this.isClosePopupTrigger = true;
-    } else {
-      this.dataset.url = anchorUrl.pathname;
-    }
-
-    if (anchor.hasAttribute('aria-label')) {
-      this.ariaLabel = anchor.getAttribute('aria-label');
-      this.popupBtn.setAttribute('aria-label', this.ariaLabel);
+      this.dataset.action = anchorUrl.hash;
     }
   }
 
-  addContentFromTarget() {
-    const { target } = this.initOptions;
-    this.popupBtn.append(...target.childNodes);
-  }
-
-  createButton() {
-    this.popupBtn = document.createElement('raqn-button');
-    this.popupBtn.setAttribute('aria-expanded', 'false');
-    this.popupBtn.setAttribute('aria-haspopup', 'true');
-    this.popupBtn.setAttribute('type', 'button');
-  }
-
   addListeners() {
-    this.popupBtn.addEventListener('click', (e) => {
+    this.elements.popupBtn.addEventListener('click', (e) => {
       e.preventDefault();
       this.dataset.active = !this.isActive;
     });
   }
 
-  onAttributeUrlChanged({ oldValue, newValue }) {
-    if (this.isClosePopupTrigger) return;
+  onAttributeActionChanged({ oldValue, newValue }) {
+    if (this.isClosePopupTrigger) {
+      return;
+    }
     if (oldValue === newValue) return;
     let sourceUrl;
 
@@ -127,30 +106,33 @@ export default class PopupTrigger extends ComponentBase {
     this.popup = await this.createPopup();
     this.addPopupToPage();
     // the icon is initialize async by page loader
-    this.triggerIcon = this.querySelector('raqn-icon');
+    // this.triggerIcon = this.querySelector('raqn-icon');
 
     // Reassign to just toggle after the popup is created;
     this.loadPopup = this.togglePopup;
     this.togglePopup();
   }
 
   async createPopup() {
-    const popup = document.createElement('raqn-popup');
-    popup.dataset.url = this.popupSourceUrl;
-    popup.dataset.active = true;
+    const { popup } = componentList;
+    loadModules(null, { popup });
+
+    const popupEl = document.createElement('raqn-popup');
+    popupEl.dataset.action = this.popupSourceUrl;
+    popupEl.dataset.active = true;
     // Set the popupTrigger property of the popup component to this trigger instance
-    popup.popupTrigger = this;
-    return popup;
+    popupEl.popupTrigger = this;
+    return popupEl;
   }
 
   togglePopup() {
     this.popup.dataset.active = this.isActive;
-    this.popupBtn.setAttribute('aria-expanded', this.isActive);
-    if (this.triggerIcon) {
-      this.triggerIcon.dataset.active = this.isActive;
+    this.elements.popupBtn.setAttribute('aria-expanded', this.isActive);
+    if (this.elements.triggerIcon) {
+      this.elements.triggerIcon.dataset.active = this.isActive;
     }
     if (!this.isActive) {
-      this.popupBtn.focus();
+      this.elements.popupBtn.focus();
     }
   }
 

scripts/component-base.js

@@ -12,7 +12,8 @@ import {
   mergeUniqueArrays,
 } from './libs.js';
 import { externalConfig } from './libs/external-config.js';
-import { generalManipulation, generateDom, renderVirtualDom } from './render/dom.js';
+import { generateVirtualDom, renderVirtualDom } from './render/dom.js';
+import { generalManipulation } from './render/dom-manipulations.js';
 
 export default class ComponentBase extends HTMLElement {
   // All supported data attributes must be added to observedAttributes
@@ -233,7 +234,7 @@ export default class ComponentBase extends HTMLElement {
   // Build-in method called after the element is added to the DOM.
   async connectedCallback() {
     // Common identifier for raqn web components
-    this.setAttribute('raqnWebComponent', '');
+    this.setAttribute('raqnwebcomponent', '');
     this.setAttribute('isloading', '');
     try {
       this.initialized = this.getAttribute('initialized');
@@ -482,7 +483,10 @@ export default class ComponentBase extends HTMLElement {
   async addFragmentContent() {
     const element = document.createElement('div');
     element.innerHTML = this.fragmentContent;
-    this.append(...renderVirtualDom(generalManipulation(generateDom(element.childNodes))));
+    const virtualDom = generateVirtualDom(element.childNodes);
+    const transformDom = generalManipulation(virtualDom);
+    const realDom = renderVirtualDom(transformDom);
+    this.append(...realDom);
   }
 
   queryElements() {