imp: observer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirlo",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "keywords": [
     "initiator",

rollup.config.mjs

@@ -11,8 +11,6 @@ import postcss from 'rollup-plugin-postcss';
 
 const is_production = process.env.NODE_ENV === 'production';
 
-console.log(process.env.NODE_ENV);
-
 export default [
   {
     input: ['src/js/mirlo.mjs'],

src/js/base/app.mjs

@@ -78,15 +78,20 @@ class App extends Component {
         return this.#initializeServices();
       })
       .then(() => {
-        return this.#initializeComponents(this.dom_el);
+        return this.#initializeComponents(
+          this.dom_el.querySelectorAll('[data-component]'),
+        );
       });
   }
 
   onStart() {
     super.onStart();
     // Observer
     this.#observer = new MutationObserver(this.#onObserver.bind(this));
-    this.#observer.observe(document.body, {childList: true, subtree: true});
+    this.#observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
 
     // Assign core event
     domAddEventListener(
@@ -116,12 +121,9 @@ class App extends Component {
     return Promise.all(tasks);
   }
 
-  #initializeComponents(dom_base_el) {
+  #initializeComponents(nodes) {
     const tasks = [];
-    const components = (
-      dom_base_el.parentElement || dom_base_el
-    ).querySelectorAll('[data-component]');
-    for (const dom_el of components) {
+    for (const dom_el of nodes) {
       if (domGetComponentObj(dom_el)) {
         continue;
       }
@@ -161,16 +163,29 @@ class App extends Component {
     }
   }
 
-  #traverseNodeListOnDestroy(node) {
-    node.childNodes.forEach(cnode => this.#traverseNodeListOnDestroy(cnode));
+  #traverseNodeListRemoved(node) {
+    const childrens = node.children || [];
+    for (const cnode of childrens) {
+      this.#traverseNodeListRemoved(cnode);
+    }
     domGetComponentObj(node)?.onDestroy();
   }
 
+  #traverseNodeListAdded(node) {
+    const childrens = node.children || [];
+    for (const cnode of childrens) {
+      this.#traverseNodeListAdded(cnode);
+    }
+    if (node.dataset?.component) {
+      this.#initializeComponents([node]);
+    }
+  }
+
   #onObserver(mutations) {
     mutations.forEach(mutation => {
-      mutation.addedNodes.forEach(anode => this.#initializeComponents(anode));
+      mutation.addedNodes.forEach(rnode => this.#traverseNodeListAdded(rnode));
       mutation.removedNodes.forEach(rnode =>
-        this.#traverseNodeListOnDestroy(rnode),
+        this.#traverseNodeListRemoved(rnode),
       );
     });
   }

tests/mirlo.test.mjs

@@ -13,9 +13,11 @@ beforeAll(async () => {
   app.registerComponent('test02', Test02);
   document.body.innerHTML = `
     <div id="testA" data-component="test01"></div>
-    <div id="testB" data-component="test02">
-      <div id="test01-title"></div>
-      <div data-component-state-binds="desc-html title-title"></div>
+    <div id="containerB">
+      <div id="testB" data-component="test02">
+        <div id="test01-title"></div>
+        <div data-component-state-binds="desc-html title-title"></div>
+      </div>
     </div>
   `;
   await new Promise(process.nextTick); // flush promises
@@ -37,8 +39,11 @@ test('on-fly initialization', async () => {
   expect(screen.queryByText('Hello World!')).toBeNull();
   const new_div = document.createElement('div');
   new_div.id = 'test-rmv';
-  new_div.dataset.component = 'test01';
-  document.body.appendChild(new_div);
+  const new_div_comp = document.createElement('div');
+  new_div_comp.id = 'test-comp-rmv';
+  new_div_comp.dataset.component = 'test01';
+  new_div.appendChild(new_div_comp);
+  document.getElementById('containerB').appendChild(new_div);
   await new Promise(process.nextTick); // flush promises
   expect(screen.getByText('Hello World!')).toBeVisible();
   expect(screen.getByText('Clicked!')).toBeVisible();