Add metaTag config and fixes

blocks/footer/footer.js

@@ -1,7 +1,8 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { getMeta } from '../../scripts/libs.js';
+import { getMeta, metaTags } from '../../scripts/libs.js';
 
-const metaFooter = getMeta('footer');
+const { metaName, fallbackContent } = metaTags.footer;
+const metaFooter = getMeta(metaName);
 const metaFragment = !!metaFooter && `${metaFooter}.plain.html`;
 export default class Footer extends ComponentBase {
   static loaderConfig = {
@@ -11,7 +12,7 @@ export default class Footer extends ComponentBase {
     },
   };
 
-  fragmentPath = metaFragment || 'footer.plain.html';
+  fragmentPath = metaFragment || `${fallbackContent}.plain.html`;
 
   extendConfig() {
     return [

blocks/header/header.js

@@ -1,7 +1,8 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { eagerImage, getMeta } from '../../scripts/libs.js';
+import { eagerImage, getMeta, metaTags } from '../../scripts/libs.js';
 
-const metaHeader = getMeta('header');
+const { metaName, fallbackContent } = metaTags.header;
+const metaHeader = getMeta(metaName);
 const metaFragment = !!metaHeader && `${metaHeader}.plain.html`;
 export default class Header extends ComponentBase {
   static loaderConfig = {
@@ -11,7 +12,7 @@ export default class Header extends ComponentBase {
     },
   };
 
-  fragmentPath = metaFragment || 'header.plain.html';
+  fragmentPath = metaFragment || `${fallbackContent}.plain.html`;
 
   dependencies = ['navigation', 'image'];
 

blocks/theming/theming.js

@@ -1,28 +1,21 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { globalConfig, getMeta } from '../../scripts/libs.js';
-// minify alias
-const metaTheming = getMeta('theming');
+import { globalConfig, metaTags, getMeta } from '../../scripts/libs.js';
+
+const { theming, theme } = metaTags;
+const metaTheming = getMeta(theming.metaName);
 const metaFragment = metaTheming && `${metaTheming}.json`;
 const k = Object.keys;
 
 export default class Theming extends ComponentBase {
-
   nestedComponentsConfig = {};
 
   setDefaults() {
     super.setDefaults();
     this.scapeDiv = document.createElement('div');
     // keep as it is
-    this.fragmentPath = metaFragment || 'theming.json';
+    this.fragmentPath = metaFragment || theming.fallbackContent;
     this.skip = ['tags'];
-    this.toTags = [
-      'font-size',
-      'font-weight',
-      'font-family',
-      'line-height',
-      'font-style',
-      'font-margin-block',
-    ];
+    this.toTags = ['font-size', 'font-weight', 'font-family', 'line-height', 'font-style', 'font-margin-block'];
     this.transform = { 'font-margin-block': 'margin-block' };
     this.tags = '';
     this.fontFace = '';
@@ -58,10 +51,7 @@ export default class Theming extends ComponentBase {
     return k(values).map((value) => {
       const val = values[value];
       return `${tag} {${k(val)
-        .map(
-          (v) =>
-            `${this.getKey(v)}: var(--scope-${this.getKey(v)}, ${val[v]});`,
-        )
+        .map((v) => `${this.getKey(v)}: var(--scope-${this.getKey(v)}, ${val[v]});`)
         .join('')}}`;
     });
   }
@@ -82,12 +72,10 @@ export default class Theming extends ComponentBase {
       if (key === 'font-face') {
         this.fontFace += this.fontFaceTemplate(value);
       } else {
-        variable = `\n--raqn-${this.getKey(key)}-${row}: ${this.escapeHtml(
-          value,
-        ).trim()};`;
-        this.atomic += `body .${this.getKey(key)}-${row} {--scope-${this.getKey(
+        variable = `\n--raqn-${this.getKey(key)}-${row}: ${this.escapeHtml(value).trim()};`;
+        this.atomic += `body .${this.getKey(key)}-${row} {--scope-${this.getKey(key)}: var(--raqn-${this.getKey(
           key,
-        )}: var(--raqn-${this.getKey(key)}-${row});}\n`;
+        )}-${row});}\n`;
       }
     }
     return variable;
@@ -120,11 +108,9 @@ export default class Theming extends ComponentBase {
     // full scoped theme classes
     this.themes = this.themesKeys
       .map(
-        (theme) => `.theme-${theme} {${k(t)
+        (themeItem) => `.theme-${themeItem} {${k(t)
           .filter((key) => ![...this.skip, ...this.toTags].includes(key))
-          .map((key) =>
-            t[key][theme] ? `--scope-${key}: var(--raqn-${key}-${theme});` : '',
-          )
+          .map((key) => (t[key][themeItem] ? `--scope-${key}: var(--raqn-${key}-${themeItem});` : ''))
           .filter((v) => v !== '')
           .join('')}
       }`,
@@ -147,8 +133,8 @@ export default class Theming extends ComponentBase {
       style.classList.add(cssSegment);
       document.head.appendChild(style);
     });
-    const themeMeta = getMeta('theme');
-    document.body.classList.add(themeMeta || 'theme-default');
+    const themeMeta = getMeta(theme.metaName);
+    document.body.classList.add(themeMeta || theme.fallbackContent);
   }
 
   async processFragment(response) {

scripts/component-base.js

@@ -41,6 +41,8 @@ export default class ComponentBase extends HTMLElement {
     this.fragmentPath = null;
     this.dependencies = [];
     this.attributesValues = {};
+    this.initOptions = {};
+    this.externalOptions = {};
     this.childComponents = {
       // using the nested feature
       nestedComponents: [],
@@ -55,6 +57,7 @@ export default class ComponentBase extends HTMLElement {
 
     // use the this.extendConfig() method to extend the default config
     this.config = {
+      listenBreakpoints: false,
       hideOnInitError: true,
       hideOnChildrenError: false,
       addToTargetMethod: 'replaceWith',
@@ -72,13 +75,6 @@ export default class ComponentBase extends HTMLElement {
       button: {
         componentName: 'button',
       },
-      columns: {
-        componentName: 'columns',
-        active: false,
-        loaderConfig: {
-          targetsAsContainers: false,
-        },
-      },
     };
   }
 
@@ -134,6 +130,7 @@ export default class ComponentBase extends HTMLElement {
 
   async connectComponent() {
     const { uuid } = this;
+    if (!this.initOptions.target) return this;
     this.setAttribute('isloading', '');
     const initialized = new Promise((resolve, reject) => {
       const initListener = async (event) => {
@@ -147,7 +144,7 @@ export default class ComponentBase extends HTMLElement {
       };
       this.addEventListener(`initialized:${uuid}`, initListener);
     });
-    const { targetsAsContainers } = deepMerge({}, this.Handler.loaderConfig, this.loaderConfig);
+    const { targetsAsContainers } = this.initOptions.loaderConfig;
     const conf = this.config;
     const addToTargetMethod = targetsAsContainers ? conf.targetsAsContainers.addToTargetMethod : conf.addToTargetMethod;
     this.initOptions.target[addToTargetMethod](this);
@@ -182,6 +179,7 @@ export default class ComponentBase extends HTMLElement {
   }
 
   mergeConfigs() {
+    this.initOptions.loaderConfig = deepMerge({}, this.Handler.loaderConfig, this.initOptions.loaderConfig);
     this.props = deepMerge({}, this.initOptions.props, this.externalOptions.props);
 
     this.config = deepMerge({}, this.config, this.initOptions.componentConfig, this.externalOptions.config);
@@ -204,9 +202,9 @@ export default class ComponentBase extends HTMLElement {
       this[prop] = value;
     });
     // Set attributes based on attributesValues
-    Object.entries(this.attributesValues).forEach(([attr, attrValues]) => {
+    this.sortedAttributes.forEach(([attr, attrValues]) => {
       const isClass = attr === 'class';
-      const val = (attrValues[this.breakpoints.active.name] ?? attrValues.all);
+      const val = attrValues[this.breakpoints.active.name] ?? attrValues.all;
       if (isClass) {
         const classes = (attrValues.all ? `${attrValues.all} ` : '') + (attrValues[this.breakpoints.active.name] ?? '');
         const classesArr = classes.split(' ').flatMap((cls) => {
@@ -221,6 +219,15 @@ export default class ComponentBase extends HTMLElement {
     });
   }
 
+  get sortedAttributes() {
+    const knownAttr = this.Handler.observedAttributes;
+    // Sometimes the order in which the attributes are set matters.
+    // Control the order by using the order of the observedAttributes.
+    return Object.entries(this.attributesValues).sort(
+      (a, b) => knownAttr.indexOf(`data-${a}`) - knownAttr.indexOf(`data-${b}`),
+    );
+  }
+
   addDefaultsToNestedConfig() {
     Object.keys(this.nestedComponentsConfig).forEach((key) => {
       const defaults = {
@@ -249,7 +256,7 @@ export default class ComponentBase extends HTMLElement {
   }
 
   setBreakpointAttributesValues(e) {
-    Object.entries(this.attributesValues).forEach(([attribute, breakpointsValues]) => {
+    this.sortedAttributes.forEach(([attribute, breakpointsValues]) => {
       const isAttribute = attribute !== 'class';
       if (isAttribute) {
         const newValue = breakpointsValues[e.raqnBreakpoint.name] ?? breakpointsValues.all;
@@ -300,7 +307,9 @@ export default class ComponentBase extends HTMLElement {
   }
 
   addListeners() {
-    listenBreakpointChange(this.onBreakpointChange);
+    if (this.externalOptions.hasBreakpointsValues || this.config.listenBreakpoints) {
+      listenBreakpointChange(this.onBreakpointChange);
+    }
   }
 
   async initChildComponents() {

scripts/component-loader.js

@@ -130,7 +130,8 @@ export default class ComponentLoader {
       throwInitError: true,
       target,
       container,
-      configByClasses: !container ? mergeUniqueArrays(this.configByClasses, target.classList) : this.configByClasses,
+      configByClasses:
+        !container && target ? mergeUniqueArrays(this.configByClasses, target.classList) : this.configByClasses,
       props: this.props,
       componentConfig: this.componentConfig,
       externalConfigName: this.externalConfigName,

scripts/init.js

@@ -1,5 +1,5 @@
 import ComponentLoader from './component-loader.js';
-import { globalConfig, eagerImage, getMeta, getMetaGroup, mergeUniqueArrays } from './libs.js';
+import { globalConfig, metaTags, eagerImage, getMeta, getMetaGroup, mergeUniqueArrays } from './libs.js';
 
 const component = {
   async init(settings) {
@@ -124,8 +124,9 @@ const onLoadComponents = {
   },
 
   setLcp() {
-    const lcpMeta = getMeta('lcp', { getArray: true });
-    const defaultLcp = ['theming', 'header', 'breadcrumbs'];
+    const { metaName, fallbackContent } = metaTags.lcp;
+    const lcpMeta = getMeta(metaName, { getArray: true });
+    const defaultLcp = fallbackContent;
     const lcp = lcpMeta?.length ? lcpMeta : defaultLcp;
     // theming must be in LCP to prevent CLS
     this.lcp = mergeUniqueArrays(lcp, ['theming']).map((componentName) => ({
@@ -134,7 +135,7 @@ const onLoadComponents = {
   },
 
   setStructure() {
-    const structureComponents = getMetaGroup('structure');
+    const structureComponents = getMetaGroup(metaTags.structure.metaNamePrefix);
     this.structureComponents = structureComponents.flatMap(({ name, content }) => {
       if (content !== true) return [];
       return {
@@ -180,7 +181,7 @@ const globalInit = {
   },
 
   initEagerImages() {
-    const eagerImages = getMeta('eager-images');
+    const eagerImages = getMeta(metaTags.eagerImage.metaName);
     if (eagerImages) {
       const length = parseInt(eagerImages, 10);
       eagerImage(document.body, length);