🐛 Processing the child nodes of the newly added nodes

Author: dapize

dist/helpers/initAutoProcessor.d.ts

@@ -0,0 +1,3 @@
+import { ILayouter } from './../layouter';
+declare const searchAndProcess: (layouter: ILayouter, context: Document | HTMLElement | Element) => Promise<unknown>;
+export default searchAndProcess;

dist/helpers/searchAndProcess.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "layouter.js",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Layout builder without CSS, What???!!!",
   "homepage": "https://layouter.io",
   "main": "dist/layouter.umd.js",

dist/layouter.es.js

@@ -1,6 +1,7 @@
 import { ILayouter } from './../layouter';
 import { processors } from '../config/processors';
 import getConfig from '../config/main';
+import searchAndProcess from './searchAndProcess';
 
 const mainObserver = (layouter: ILayouter) => {
   const config = getConfig();
@@ -17,6 +18,7 @@ const mainObserver = (layouter: ILayouter) => {
             if (Object.keys(props).length) {
               layouter.set(node, props);
             }
+            searchAndProcess(layouter, node)
           }
         });
       } else if (mutation.type === 'attributes') {

dist/layouter.es.js.map

@@ -1,14 +1,11 @@
 import { ILayouter } from './../layouter';
 import { processors } from '../config/processors';
-import getConfig from '../config/main';
 
-const initAutoProcessor = (layouter: ILayouter) => {
+const searchAndProcess = (layouter: ILayouter, context: Document | HTMLElement | Element) => {
   return new Promise((resolve) => {
-    const config = getConfig();
     const props = Object.keys(processors);
     const attrs = props.map((prop) => `[${prop}]`).join(', ');
-    const nodes = config.context.document.querySelectorAll(attrs);
-
+    const nodes = context.querySelectorAll(attrs);
     if (!nodes.length) {
       resolve(layouter);
       return;
@@ -26,4 +23,4 @@ const initAutoProcessor = (layouter: ILayouter) => {
   });
 };
 
-export default initAutoProcessor;
+export default searchAndProcess;

dist/layouter.umd.js

@@ -56,7 +56,7 @@ import reset from './methods/reset';
 
 import { IStyles } from './helpers/createStyles';
 import { IBuildResult } from './methods/build';
-import initAutoProcessor from './helpers/initAutoProcessor';
+import searchAndProcess from './helpers/searchAndProcess';
 import mainObserver from './helpers/mainObserver';
 import { TDirectiveName } from './config/processors';
 
@@ -268,7 +268,7 @@ const layouter = (
   };
 
   // Auto init process
-  initAutoProcessor(instance).then(() => {
+  searchAndProcess(instance, context.document).then(() => {
     if (instance.ready) instance.ready(instance);
     mainObserver(instance);
   });

dist/layouter.umd.js.map

@@ -34,6 +34,15 @@ describe('Init', () => {
     })
   })
 
+  it('Adding a paragraph with child node', async () => {
+    const paragraph = document.createElement('div');
+    paragraph.innerHTML = '<span wdh="10">Spaneado</span>';
+    document.body.appendChild(paragraph);
+    await waitFor(() => {
+      expect(screen.getByText('Spaneado')).toHaveClass('wdh-10')
+    })
+  })
+
   it('Removing a Node from the DOM', async () => {
     const myDiv = document.createElement('div');
     myDiv.textContent = 'Content'
@@ -43,9 +52,4 @@ describe('Init', () => {
       expect(myDiv).not.toBeInTheDocument();
     })
   })
-
-  // it('Cheking if Layouter is attached in Window', () => {
-  //   console.log('window layouter: ', window.layouter);
-  //   expect(window).toHaveProperty('layouter');
-  // })
 })