I am running into an issue that I think is related to life cycle. In the 'register' function getters and setters are defined for each property. The setter checks to see if this.vdom is defined, but the getter does not. The setter even takes steps to call the functions that create the vdom. Now I understand that we might not want a getter to have side effects, but when I pass my custom element props in Svelte, Svelte calls the getter before the vdom is initialized, which cases the component to crash.
I get 'TypeError: Cannot read properties of undefined (reading 'props')' in the get() function.
I think the reason this happens is because Svelte creates the element and then immediately goes about setting properties before anything has rendered. 'set_custom_element_data' does some property sniffing of types to see if it's an attribute or propery, so it calls 'get()', clearly before the vdom has been initialized.
// This is Svelts compilation of <murdock-select limit="100"></murdock-select> some other elements were removed.
murdock_select = element("murdock-select");
set_custom_element_data(murdock_select, "limit", "100");
Workaround:
If I don't pass any properties in the Svelte markup, it works fine. I just have to bind the custom element to a local variable and set properties in code, in a change handler or other lifecycle method after preact has initialized. This works fine.
Are there any other workarounds? It seems weird to entirely give up passing properties in markup, even if, as is the case in Svelte, this is synthetic. I guess you could blame Svelte here, but it seems odd that calling a getter would crash a component before its initialized? Could we perhaps handle the vdom not being initialized and do something different? Perhaps return defaultProps if present?
jvanderberg
commented
4 months ago
I am running into an issue that I think is related to life cycle. In the 'register' function getters and setters are defined for each property. The setter checks to see if this.vdom is defined, but the getter does not. The setter even takes steps to call the functions that create the vdom. Now I understand that we might not want a getter to have side effects, but when I pass my custom element props in Svelte, Svelte calls the getter before the vdom is initialized, which cases the component to crash.
I get 'TypeError: Cannot read properties of undefined (reading 'props')' in the get() function.
I think the reason this happens is because Svelte creates the element and then immediately goes about setting properties before anything has rendered. 'set_custom_element_data' does some property sniffing of types to see if it's an attribute or propery, so it calls 'get()', clearly before the vdom has been initialized.
Workaround:
Are there any other workarounds? It seems weird to entirely give up passing properties in markup, even if, as is the case in Svelte, this is synthetic. I guess you could blame Svelte here, but it seems odd that calling a getter would crash a component before its initialized? Could we perhaps handle the vdom not being initialized and do something different? Perhaps return defaultProps if present?