[QUESTION] Adding new traits to component and update current ones with these

[kaoz70]

I have some custom components created before modifying their traits (for example, I created a new trait for it), these components wont contain the new trait. If I drag a new component into the editor, it will have it.

Steps to reproduce: 1) Create a custom component and compile the code 2) Drag this custom component into the editor 3) Save the changes to DB 4) Modify the component by adding a new trait and compile again 5) Load the components from DB 6) Loaded components wont have the new trait

I load and save all the data into the database: styles, css, components,and html.

load(keys, clb, clbErr) {
                // Load from model
                const content = _model.template[_language.locale];
                delete content.assets; // Delete assets if they exist
                clb(content);
},

Is there a way to make the loaded components aware of the changes in the traits?

[artf]

This happens because the editor stores also traits information in components. You can delete this information be extending the component and updating its toJSON method

const typeModel = domc.getType('my-type').model;

domc.addType('my-type', {
    model: {
        ...
        toJSON() {
            const result = typeModel.prototype.toJSON.apply(this);
            delete result.traits;

            return result;
        }
    }
})

ps: I think I'll remove traits from JSON in the next release. Perhaps many versions back that would have made sense, but now I'd not even recommend storing stuff in Traits

[ahmedeldeeb25-zz]

@artf this removed custom traits !! as I mentioned in #2007

[ahmedeldeeb25-zz]

@kaoz70 is this solution working with properly?

[kaoz70]

@artf @ahmedeldeeb25 sorry for the late reply,

@artf I couldnt get this working, I keep on getting Maximum call stack size exceeded errros, it seems that the toJSON() gets called recursively. I'm using the trait manager to populate a dropdown so that the user can select values from an API endpoint. You mentioned that you will probably remove traits in the next version, what can I use instead of traits for this?

@ahmedeldeeb25 I didnt get this to work, can you share some code to see at what point you are, I'm kind of stuck here.

[artf]

@kaoz70

You mentioned that you will probably remove traits in the next version, what can I use instead of traits for this?

I said I'm gonna remove traits FROM the JSON used to store component data, not traits itself.

I keep on getting Maximum call stack size exceeded errors

Did you do exactly how I've done in my code, like putting typeModel outside of toJSON?

[Lakshit-Singhal]

@kaoz70 can you share a sample how we can use Trait Manager to call an Api and populate data in our components ?

It will be really helpful ... Thanks in Advance!

[kaoz70]

@Lakshit-Singhal In that case I think the best option would be to create a custom plugin, and before you initialize GrapesJS, call the API, get the values and pass them in the initialization function via the plugin's options, that way they are present when the trait gets initialized. Check the documentation on how to create a custom plugin, or you can take a look at my plugins: GrapesJS Bootstrap 4 and GrapesJS Swiper Slider to get an idea.