Description
Today I created a small, self-contained standalone/web-component in svelte and stumbled across the following behaviour:
In my component, i declare a few properties like so:
export let zip = null;
export let radius = 10;I then create/bundle the component with rollup, include and use it in my webpage:
<html>
<head>
<script src='bundle.js'></script>
</head>
<body>
<my-component zip="12345" radius="15></my-component>
</body>
Then, in the component I wanted to use the defined props in the onMount-Hook to set additional parameters for a call to an external API. The result from this call should then be displayed by the component. But at that point in the lifecycle, they are just undefined or have their initial default values. Only after the second, third, n-th beforeUpdate-Hook they get their external values passed down, as can be seen on this screenshot:
Basically it does one complete lifecycle for each defined prop. I somewhat fixed the problem of the missing values by encapsulating everything in a $-block, but that creates subsequent calls to the external API for each prop.
At that point I didn't know if I did something wrong, or if this is somewhat expected for web-components to do. If not, then that should be fixed so that all prop-values are correctly set in onMount.
Versions from package.json:
"npm-run-all": "^4.1.5",
"rollup": "^1.2.2",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-node-resolve": "^4.0.1",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^4.0.4",
"sirv-cli": "^0.2.3",
"svelte": "^3.0.0-beta.7"