[DRAFT] Theme editing dom

blocks/grid/grid.css

@@ -7,7 +7,7 @@ raqn-grid {
   --grid-align-items: initial;
   --grid-justify-content: initial;
   --grid-align-content: initial;
-  --grid-template-columns: initial;
+  --grid-template-columns: 1fr 1fr;
   --grid-template-rows: initial;
   --grid-background: var(--background, black);
   --grid-color: var(--text, white);

blocks/grid/grid.editor.js

@@ -5,57 +5,59 @@ export default function config() {
       inputs: [],
     },
     attributes: {
-      grid: {
-        'template-rows': {
+      data: {
+        reverse: {
+          type: 'select',
+          options: [
+            {
+              label: 'Default',
+              value: 'default',
+            },
+            {
+              label: 'True',
+              value: 'true',
+            },
+            {
+              label: 'Alternate',
+              value: 'alternate',
+            },
+          ],
+          label: 'Reverse',
+          helpText: 'Reverse the order of the grid items.',
+        },
+      },
+      style: {
+        '--grid-template-rows': {
           type: 'text',
           label: 'Row',
           helpText: 'The row number.',
           value: '1fr',
         },
-        'template-columns': {
+        '--grid-template-columns': {
           type: 'text',
           label: 'Columns',
           helpText: 'The column number.',
           value: '1fr 1fr',
         },
-        gap: {
+        '--grid-gap': {
           type: 'text',
           label: 'Gap',
           helpText: 'The gap between the grid items.',
           value: '20px',
         },
-        height: {
+        '--grid-height': {
           type: 'text',
           label: 'Height',
           helpText: 'The height of the grid.',
           value: 'initial',
         },
-        width: {
+        '--grid-width': {
           type: 'text',
           label: 'Width',
           helpText: 'The width of the grid.',
           value: 'auto',
         },
-        reverse: {
-          type: 'select',
-          options: [
-            {
-              label: 'Default',
-              value: 'default',
-            },
-            {
-              label: 'True',
-              value: 'true',
-            },
-            {
-              label: 'Alternate',
-              value: 'alternate',
-            },
-          ],
-          label: 'Reverse',
-          helpText: 'Reverse the order of the grid items.',
-        },
-        'justify-items': {
+        '--grid-justify-items': {
           type: 'select',
           options: [
             {
@@ -78,7 +80,7 @@ export default function config() {
           label: 'Justify Items',
           helpText: 'The alignment of the items along the inline (row) axis.',
         },
-        'align-items': {
+        '--grid-align-items': {
           type: 'select',
           options: [
             {
@@ -101,7 +103,7 @@ export default function config() {
           label: 'Align Items',
           helpText: 'The alignment of the items along the block (column) axis.',
         },
-        'justify-content': {
+        '--grid-justify-content': {
           type: 'select',
           options: [
             {
@@ -136,7 +138,7 @@ export default function config() {
           label: 'Justify Content',
           helpText: 'The alignment of the grid along the inline (row) axis.',
         },
-        'align-content': {
+        '--grid-align-content': {
           type: 'select',
           options: [
             {

blocks/grid/grid.js

@@ -5,6 +5,26 @@
   // only one attribute is observed rest is set as css variables directly
   static observedAttributes = ['data-reverse'];
 
+  dependencies = componentList.grid.module.dependencies;
+
+  attributesValues = {
+    all :{
+      style: {
+        '--grid-gap': 'initial',
+        '--grid-height': 'initial',
+        '--grid-width': 'initial',
+        '--grid-justify-items':' initial',
+        '--grid-align-items':' initial',
+        '--grid-justify-content':' initial',
+        '--grid-align-content':' initial',
+        '--grid-template-columns':' 1fr 1fr',
+        '--grid-template-rows':' initial',
+        '--grid-background': 'var(--background, black)',
+        '--grid-color': 'var(--text, white)',
+      },
+    },
+  };
+
   async onAttributeReverseChanged({ oldValue, newValue }) {
     await this.initialization;
 

blocks/theming/theming.editor.js

@@ -10,7 +10,8 @@ export default function config() {
   if (!listener) {
     const name = 'raqn-theming';
     [themeInstance] = window.raqnInstances[name];
-
+    themeInstance.finish = () => {};
+
     publish(
       MessagesEvents.theme,
       { name: 'theme', data: themeInstance.themeJson },
@@ -26,7 +27,7 @@ export default function config() {
           const { data } = params;
           const row = Object.keys(data).map((key) => data[key]);
           readValue(row, themeInstance.variations);
-          themeInstance.defineVariations(readValue(row, themeInstance.variations));
+          themeInstance.defineVariations();
           themeInstance.styles();
         }
       }

blocks/theming/theming.js

@@ -10,13 +10,19 @@ import {
   unFlat,
   getBaseUrl,
   runTasks,
+  isPreview,
 } from '../../scripts/libs.js';
+import { publish } from '../../scripts/pubsub.js';
 
 const k = Object.keys;
 
 export default class Theming extends ComponentBase {
   variations = {};
 
+  themeJson = {};
+
+  fonts = '';
+
   setDefaults() {
     super.setDefaults();
     this.scapeDiv = document.createElement('div');
@@ -32,7 +38,6 @@ export default class Theming extends ComponentBase {
 
   fontFaceTemplate(data) {
     const names = Object.keys(data);
-
     this.fontFace = names
       .map((key) => {
         // files
@@ -56,6 +61,17 @@ export default class Theming extends ComponentBase {
       .join('');
   }
 
+  get fontFace() {
+    if (!this.fonts) {
+      this.fontFaceTemplate(this.themeJson.fontface);
+    }
+    return this.fonts;
+  }
+
+  set fontFace(value) {
+    this.fonts = value;
+  }
+
   escapeHtml(unsafe) {
     this.scapeDiv.textContent = unsafe;
     return this.scapeDiv.innerHTML;
@@ -72,7 +88,8 @@ export default class Theming extends ComponentBase {
           return `
 @media ${query} {
     ${callback(obj[bp], options.byName[bp])}
-}`;
+}
+`;
         }
         // regular
         return callback(obj[bp], 'all');
@@ -93,21 +110,9 @@ export default class Theming extends ComponentBase {
 
   async processFragment(response, type = 'color') {
     if (response.ok) {
-      const isComponent = type === 'component';
-
-      const responseData = await (isComponent ? response : response.json());
+      const responseData = await response.json();
       this.themeJson[type] = responseData;
-      if (type === 'fontface') {
-        this.fontFaceTemplate(responseData);
-      } else if (isComponent) {
-        Object.keys(responseData).forEach((key) => {
-          if (key.indexOf(':') === 0 || responseData[key].data.length === 0) return;
-          this.componentsConfig[key] ??= {};
-          this.componentsConfig[key] = readValue(responseData[key].data, this.componentsConfig[key]);
-        });
-      } else {
-        this.variations = readValue(responseData.data, this.variations);
-      }
+      this.variations = readValue(responseData.data, this.variations);
       return this.themeJson[type];
     }
     return false;
@@ -172,6 +177,7 @@ ${k(f)
 
   async loadFragment() {
     const { themeConfig } = metaTags;
+    // no component config required in this file only color font layout and fontface
     const themeConfigs = getMetaGroup(themeConfig.metaNamePrefix);
     const base = getBaseUrl();
     await runTasks.call(
@@ -197,8 +203,13 @@ ${k(f)
       this.styles,
     );
 
-    setTimeout(() => {
-      document.body.style.display = 'block';
-    });
+    setTimeout(() => this.finish());
+  }
+
+  finish() {
+    document.body.style.display = 'block';
+    if (isPreview() && !window.location.search.includes('previewOf')) {
+      publish('raqn:page:load', {}, { usePostMessage: true, targetOrigin: '*' });
+    }
   }
 }

scripts/component-base.js

@@ -330,8 +330,11 @@
   }
 
   applyClass({ oldValue, newValue }) {
+    if (oldValue === newValue) return;
+    if (Array.isArray(newValue)) this.classList.add(...newValue);
+    if (typeof newValue === 'string' && newValue.includes(' ')) this.classList.add(...newValue.split(' '));
     if (oldValue?.length) this.classList.remove(...oldValue);
-    if (newValue?.length) this.classList.add(...newValue);
+    if (newValue?.length) this.classList.add(newValue);
   }
 
   applyAttribute({ oldValue, newValue }) {
@@ -415,8 +418,30 @@
       );
     }
   }
-
+  /*
+   async addFragmentContent() {
+    await runTasks.call(
+      this,
+      null,
+      function fragmentVirtualDom() {
+        const placeholder = document.createElement('div');
+        placeholder.innerHTML = this.fragmentContent;
+        const virtualDom = generateVirtualDom(placeholder);
+        virtualDom.isRoot = true;
+        this.innerHTML = '';
+        return virtualDom;
+      },
+      // eslint-disable-next-line prefer-arrow-callback
+      async function fragmentVirtualDomManipulation({ fragmentVirtualDom }) {
+        await generalManipulation(fragmentVirtualDom);
+      },
+      function renderFragment({ fragmentVirtualDom }) {
+        console.log(fragmentVirtualDom);
+        this.append(...fragmentVirtualDom.children.map(dom => renderVirtualDom(dom)));
+      },
+    );
+  */
   fragmentVirtualDom() {
     const element = document.createElement('div');
     element.innerHTML = this.fragmentContent;
     return generateVirtualDom(element.childNodes);