AC component props not updating on time to render component

Hi @patrick,

I’m having issues with props not updating on time for the render function. I believe this wasn’t an issue before the refactor of how AC handles updating the DOM(but I might be wrong).

I have this custom component:

<div is="dmx-jonl_md" id="markdown" dmx-bind:text="getSingleDocument.data.query.translations[0].body" class="js-toc-content text-gray-700 fs-6 mb-10"></div>

And my text prop is binded to the result of a regular SC.

<dmx-serverconnect id="getSingleDocument" url="/api/document/getSingle" dmx-param:id="browser.location.pathparts[1]"></dmx-serverconnect>

Code for the custom component:

dmx.Component('jonl_md', {
    attributes: {
        text: { type: String, default: '' },
    },
    render: function (node) {
        console.log(this.props)
        node.innerHTML = window.markdownit().render(this.props.text);
    }
});

this.props.text is empty for when it’s going to be rendered for the first time(which is expected) but when the data is available it won’t rerun and AC won’t refresh the DOM.

Will this work? I think you mentioned something that the update function no longer works or shouldn’t be used?

update: function (props) {
        if (this.props.text && (props.text != this.props.text)) {
            this.$node.innerHTML = window.markdownit().use(window.markdownItAnchor, {
                slugify: s => slugify(s),
                permalink: window.markdownItAnchor.permalink.headerLink({ renderHref: function (slug) { return `${window.location.pathname}#${slug}` } })
            }).render(this.props.text);
            this.dispatchEvent('rendered');
        }
    }