I am trying to build a chrome extension using arrowjs,
One of my components has state which looks like this:
const state = reactive({
loading: false,
current_note: null,
});
I am using the loading property from the state to conditionally renders a loading indicator using another Arrowjs component:
${() =>
state.loading &&
html`
<div class="ctnn-loading-placeholder ctnn-mb-1_5">
${LoadingIcon({ width: 35, height: 35, color: "hsl(0, 0%, 50%)" })}
</div>
`
}
This is how i update the state:
async function findOneNote(selected) {
try {
state.loading = true;
const note = await fetchFindOneNote();
state.current_note = { ...note };
} catch (error) {
console.log("Couldn't fetch note", error);
} finally {
state.loading = false;
}
}
Using $on method, i can see that the state is indeed updated:
state.$on("loading", () => console.log("loading", state.loading));
state.$on("current_note", () => console.log("current_note", state.current_note));
However, the dom is not updating at all, i have other components that implement this pattern, but this is the only one which doesn’t work.
Example:
${() => modalState.menu === MODAL_MENUS.CREATE_NOTE && NoteForm(createNote)}
My questions are:
- Is there any special conditions that cause the template to ignore updates in the state ?
- Am i using the nested html function correctly ?
Thanks
