Components & JS: adding child components within the script option

[glaprida]

Hi there,

I want to create a component that when dragged into the canvas runs a function to set its inner components dynamically.

I have defined the parent component as well as the child component like this:

CHILD COMPONENT

editor.DomComponents.addType('NavLink', {
     isComponent: el => el.tagName === 'A',
     extend: 'text',
     model: {
       defaults: {
         content: 'NavLink',
         editable: false,
         draggable: false,
       }
     }
   });

PARENT COMPONENT

editor.DomComponents.addType('Navigation', {
     isComponent: el => el.tagName === 'nav' ,
     model: {
       defaults: {
         tagName: 'nav',
         draggable: 'header, header *',
         droppable: false,
         editable: false,
         script:navScript,
         /*components:[ // this is what I want to be dynamically generated
           {type:'NavLink'},
           {type:'NavLink'},
           {type:'NavLink'},
         ],*/
       }
     }
   });

FN THAT RUNS ON PARENT

const navScript = function(){
      fetch('/pages.json')
        .then((response) => response.json())
        .then((data) => {
          const pages = data.pages;

          pages.forEach((page) => {
            const link = document.createElement('a');
            link.setAttribute('data-gjs-type', 'NavLink');
            link.setAttribute('data-gjs-highlightable','true'); 
            link.textContent = page.title;

            this.appendChild(link);
          });
        })
        .catch((error) => {
          console.error('Error fetching JSON:', error);
        });
    }

JSON RESPONSE

{
   "pages":[
       {"title":"Home"},
       {"title":"Work"},
       {"title":"Our Services"},
       {"title":"Blog"},
       {"title":"Contact us"}
   ]
}

the thing is, while it appends each page correctly inside the Navigation component, the editor doesn't seem to interpret them as components. I can't select them, I don't see them on the layers panel...

I guess my question is:

a) is there a way to append COMPONENTS instead of html?
b) if there isn't... how can I make the editor understand the appended html as components?

Thanks!!!!

[glaprida]

I made it work another way, based on #553

What I did was to remove the script option on the Navigation component, and instead I did

editor.on('component:mount', (c) => {
        
        if(c.attributes.attributes.dataNavigation === 'true'){

            fetch('/pages.json')
                .then((response) => response.json())
                .then((data) => {
                const pages = data.pages;

                let navLinks = [];

                pages.forEach((page) => {
                    navLinks.push({type:'NavLink',content:page.title});
                });

                c.components(navLinks);

            })
                .catch((error) => {
                console.error('Error fetching JSON:', error);
            });

        }
    });