Merge pull request #20 from hlxsites/remove-mixin

#474566 - remove mixin

blocks/breadcrumbs/breadcrumbs.js

@@ -6,7 +6,6 @@ export default class Breadcrumbs extends ComponentBase {
     ...ComponentBase.loaderConfig,
     targetsSelectors: 'main > div',
     targetsSelectorsLimit: 1,
-    targetsAsContainers: true,
   };
 
   nestedComponentsConfig = {};

blocks/columns/columns.js

@@ -9,7 +9,6 @@ export default class Columns {
     const { currentAttributes } = collectAttributes(
       data.componentName,
       data.rawClasses,
-      [],
       Columns.observedAttributes,
       this.element,
     );
@@ -32,9 +31,7 @@ export default class Columns {
       const parent = this.element.parentElement;
       const children = Array.from(parent.children);
       parent.classList.add('raqn-grid');
-      let parentGridTemplateColumns = parent.style.getPropertyValue(
-        '--grid-template-columns',
-      );
+      let parentGridTemplateColumns = parent.style.getPropertyValue('--grid-template-columns');
       if (!parentGridTemplateColumns) {
         // we have no grid template columns yet
         parentGridTemplateColumns = children
@@ -46,10 +43,7 @@ export default class Columns {
           })
           .join(' ');
         // set the new grid template columns
-        parent.style.setProperty(
-          '--grid-template-columns',
-          parentGridTemplateColumns,
-        );
+        parent.style.setProperty('--grid-template-columns', parentGridTemplateColumns);
       } else {
         const { position } = this;
         const prio = children.indexOf(this.element) + 1;
@@ -74,20 +68,14 @@ export default class Columns {
           })
           .join(' ');
         // set the new grid template columns
-        parent.style.setProperty(
-          '--grid-template-columns',
-          parentGridTemplateColumns,
-        );
+        parent.style.setProperty('--grid-template-columns', parentGridTemplateColumns);
       }
       this.element.style.gridColumn = this.position;
       this.element.style.gridRow = 1;
     }
   }
 
   getAttribute(name) {
-    return (
-      this.element.getAttribute(name) ||
-      this.element.getAttribute(`data-${name}`)
-    );
+    return this.element.getAttribute(name) || this.element.getAttribute(`data-${name}`);
   }
 }

blocks/section-metadata/section-metadata.js

@@ -1,23 +1,22 @@
 import { collectAttributes } from '../../scripts/libs.js';
 import ComponentBase from '../../scripts/component-base.js';
-import ComponentMixin from '../../scripts/component-mixin.js';
 
 // TODO the block for this component should not have content, the values should come only form class attribute as for any other component
 // as for any other block. should replace the this.parentElement
 export default class SectionMetadata extends ComponentBase {
   async ready() {
-    const classes = [...this.querySelectorAll(':scope > div > div:first-child')]
-      .map((keyCell) => `${keyCell.textContent.trim()}-${keyCell.nextElementSibling.textContent.trim()}`);
-
-    const { currentAttributes } = collectAttributes('section-metadata', classes, await ComponentMixin.getMixins(), this.knownAttributes, this);
+    const classes = [...this.querySelectorAll(':scope > div > div:first-child')].map(
+      (keyCell) => `${keyCell.textContent.trim()}-${keyCell.nextElementSibling.textContent.trim()}`,
+    );
+
+    const { currentAttributes } = collectAttributes('section-metadata', classes, this.knownAttributes, this);
     const section = this.parentElement;
     Object.keys(currentAttributes).forEach((key) => {
-      if(key === 'class') {
+      if (key === 'class') {
         section.setAttribute(key, currentAttributes[key]);
       } else {
         section.setAttribute(`data-${key}`, currentAttributes[key]);
       }
     });
-    await ComponentMixin.startAll(section);
   }
 }

head.html

@@ -23,7 +23,6 @@
     <style>body { display: none; }</style>
     <link rel="stylesheet" href="/styles/styles.css" />
     <script src="/scripts/pubsub.js" type="module"></script>
-    <script src="/scripts/component-mixin.js" type="module"></script>
     <script src="/scripts/component-base.js" type="module"></script>
     <script src="/scripts/component-loader.js" type="module"></script>
     <script src="/scripts/libs.js" type="module"></script>

scripts/component-loader.js

@@ -1,7 +1,4 @@
 import { collectAttributes, loadModule, deepMerge, mergeUniqueArrays } from './libs.js';
-// import ComponentBase from './component-base.js';
-
-import ComponentMixin from './component-mixin.js';
 
 export default class ComponentLoader {
   constructor({ componentName, targets = [], loaderConfig, rawClasses, config, nestedComponentsConfig, active }) {
@@ -128,7 +125,6 @@ export default class ComponentLoader {
     const { currentAttributes, nestedComponents } = collectAttributes(
       this.componentName,
       data.rawClasses,
-      await ComponentMixin.getMixins(),
       this?.Handler?.knownAttributes,
       componentElem,
     );
@@ -172,7 +168,6 @@ export default class ComponentLoader {
       const initListener = async (event) => {
         if (event.detail.element === componentElem) {
           componentElem.removeEventListener('initialized', initListener);
-          await ComponentMixin.startAll(componentElem);
           componentElem.removeAttribute('isloading');
           resolve(componentElem);
         }

scripts/init.js

@@ -1,5 +1,4 @@
 import ComponentLoader from './component-loader.js';
-import ComponentMixin from './component-mixin.js';
 import { globalConfig, eagerImage, getMeta, getMetaGroup } from './libs.js';
 
 const component = {
@@ -105,8 +104,7 @@ const onLoadComponents = {
 
   findLcp(data) {
     return (
-      this.lcp.find(({ componentName }) => componentName === data.componentName) ||
-      data.lcp /* ||
+      this.lcp.find(({ componentName }) => componentName === data.componentName) || data.lcp /* ||
       [...document.querySelectorAll('main > div > [class]:nth-child(-n+2)')].find((el) => el === data.block) */
     );
   },
@@ -127,16 +125,11 @@ const onLoadComponents = {
 
 const globalInit = {
   async init() {
-    this.loadMixins();
     this.setLang();
     this.initEagerImages();
     onLoadComponents.init();
   },
 
-  loadMixins() {
-    ComponentMixin.getMixins();
-  },
-
   // TODO - maybe take this from the url structure.
   setLang() {
     document.documentElement.lang ||= 'en';

scripts/libs.js

@@ -147,7 +147,7 @@ export function getMetaGroup(group) {
   }));
 }
 
-export function collectAttributes(componentName, classes, mixins, knownAttributes = [], element = null) {
+export function collectAttributes(componentName, classes, knownAttributes = [], element = null) {
   const classesList = [];
   const mediaAttributes = {};
   const attributesValues = element?.attributesValues || {};
@@ -173,13 +173,11 @@ export function collectAttributes(componentName, classes, mixins, knownAttribute
 
   const nestedComponentsNames = Object.keys(nestedComponents);
 
-  const mixinKnownAttributes = mixins.flatMap((mixin) => mixin.observedAttributes || []);
   const attrs = classesList
     .filter((c) => c !== componentName && c !== 'block')
     .reduce((acc, c) => {
       let value = c;
       let isKnownAttribute = null;
-      let isMixinKnownAttributes = null;
 
       const classBreakpoint = Object.keys(globalConfig.breakpoints).find((b) => c.startsWith(`${b}-`));
       const activeBreakpoint = getBreakPoints().active.name;
@@ -203,11 +201,9 @@ export function collectAttributes(componentName, classes, mixins, knownAttribute
         value = value.slice(key.length + 1);
       } else {
         isKnownAttribute = knownAttributes.find((attribute) => value.startsWith(`${attribute}-`));
-        isMixinKnownAttributes = mixinKnownAttributes.find((attribute) => value.startsWith(`${attribute}-`));
-        const getKnownAttribute = isKnownAttribute || isMixinKnownAttributes;
-        if (getKnownAttribute) {
-          key = getKnownAttribute;
-          value = value.slice(getKnownAttribute.length + 1);
+        if (isKnownAttribute) {
+          key = isKnownAttribute;
+          value = value.slice(isKnownAttribute.length + 1);
         }
       }
 
@@ -223,11 +219,7 @@ export function collectAttributes(componentName, classes, mixins, knownAttribute
         if (isKnownAttribute) attributesValues[camelCaseKey][classBreakpoint] = value;
         if (isClass) {
           attributesValues[camelCaseKey][classBreakpoint] ??= '';
-          // if (attributesValues[camelCaseKey][classBreakpoint]) {
           attributesValues[camelCaseKey][classBreakpoint] += `${value} `;
-          // } else {
-          // attributesValues[camelCaseKey][classBreakpoint] = value;
-          // }
         }
         // support multivalue attributes
       } else if (acc[key]) {