[QUESTION] Custom type component in production environment

[robertraf]

Hi, I have a question, when I create a custom type component from the editor, what would be the next step to show that component in my application? Currently I am saving the component data in firebase with the firestore plugin, the attributes that are stored in the object are the following: gjs-assets, gjs-components, gjs-css, gjs-html and gjs.styles.

What would be next if I want to use these components in my production environment? Should I use a javascript framework or library? or maybe the same grape editor without the ability to edit, thanks.

[Ju99ernaut]

I think in a production environment all you need is the html and css code generated by grapesjs.

[robertraf]

I understand that part, but if I want to render the component I have created it doesn't work. I'll explain a little, I have created a type of component that renders data from an endpoint, if I use the html and css code it doesn't work.

Custom Component Type ` editor.DomComponents.addType('group', { model: { defaults: { // The tag name that will be used in the final code tagName: 'div', attributes: "", // You would use traits to customize custom properties traits: [ { type: 'select', changeProp: 1, name: 'customProp', options: [] } ] }, init() { let trait_customProp = this.get('traits').where({ name: 'customProp' })[0]; trait_customProp.set('options', start_options); if (Object.keys(this.getAttributes()).length === 0) { console.log("Objeto init vacío"); } else { trait_customProp.set('value', this.getAttributes().value); } this.on('change:customProp', () => this.view.onRender()); } }, view: { // eg. You can customize the tag in the canvas // By default, the view will use the same tag of the model tagName: 'div',

        async onRender() {

            //Retrieving trait value

            let trait_value = this.model.get('traits').where({ name: 'customProp' })[0].attributes.value;

            if (trait_value === "") {
                console.log("Attribute's value is empty");
            } else {
                console.log(`Attribute's value: ${trait_value}`);
                this.model.addAttributes({ value: trait_value });

                //Rendering Data
                try {
                    for (option of start_options) {
                        if (Number(trait_value) === option.value) {
                            this.$el.empty();
                            let response = await axios.get(`http://localhost:8100/dmxConnect/api/documents/retrieveXcollection.php?idcollection=${trait_value}`);
                            this.model.addAttributes({ data: response.data.query1 });
                            if (response.data.query1.length > 0) {
                                //Muchos data, inentendible!
                                this.model.getAttributes().data.forEach(res => {
                                    JSON.parse(res.data).forEach(doc_data => {
                                        //console.log(doc_data.userData); 
                                        this.$el.append('<h1>' + doc_data.userData[0] + '</h1>');
                                    });
                                });
                            } else {
                                this.$el.append(`<h1>404 ${option.name}</h1>`);
                            }
                        }
                    }
                } catch (e) {
                    console.log(e);
                }
            }

        }

    }
}
);

// A block for the group type
editor.BlockManager.add('test-render', {
    label: 'Test render',
    content: {
        type: 'group'
    },
    category: 'Custom'
});`

[robertraf]

I guess I need to render the generated code for this component in my production environment, but I don't know how

[Ju99ernaut]

Add to your component:

dc.addType('group', {
    model: {
       defaults:{
          //...
          script: function () {
             //code you want to render 
           }
           //...
      }
      //...
}

The editor automatically renders what's in script, has to be JS that runs independently without the editor

[robertraf]

I understand that part, in fact I believe that the script attribute is used in the creation of the block, therefore I will not be able to use it in the creation of the component. Another point to take into account is: what is the meaning of the onRender function within view, I must use that function to render the data from my endpoint, this function only works within the editor and not in my production environment.

[robertraf]

I understand why it doesn't work, it's basically because I only render the html code and the associated css, I need to render the added component, not just those properties

[Ju99ernaut]

onRender simply specifies what should happen when you successfully place a component onto the canvas, whereas script is code that will be generated in your html inside script tags.

Something like:

<script>
//...
var items = document.querySelectorAll('#someid');

for (var i = 0; len = items.length; i < len; i++) {
   (function(){
     //minified version of script in component definition 
   })()
}
//...
</script>

[Aadarsh4u-code]

@robertraf I'm also having the same issue. i have created block of charts from chart js and added script to load in grapes js canvas editor but when im saving its html to render it on production page all html portion with style are render sucessfully but chart comopnents are not rendering. I havent any idea to deal with. could you please help me i stucked since 10 days. Please help me.

used method: editor.getProjectData() -> to get editor data editor.loadProjectData() -> to load data in production

even i have tried 1.getHtml(), setComponents nothing works for me

//Editor section

//production section