My current project involves the development of a simple Single Page App (SPA) using Svelte. I have successfully implemented a basic layout and styling, as well as an asynchronous web request triggered by a button click.
Now, my next objective is to utilize a custom library's Web Component based on lit.js to display the fetched data. However, my lack of understanding when it comes to Web Components and Svelte has led to some errors that I can't quite decipher.
According to the documentation provided for both projects, I should be able to achieve something like this:
<script>
import 'render-rev';
let renderRevElement;
async function loadData() { // called on button click, so dom is loaded
renderRevElement.configure({
doi: '10.1101/2020.07.20.212886',
display: {
publisherName: name => name.toUpperCase(),
}
});
}
</script>
<main>
...
<render-rev bind:this="{renderRevElement}" doi="10.1101/2020.07.20.212886"></render-rev>
</main>
Unfortunately, when attempting to access the configure method with the renderRevElement object, I am only seeing one valid key: __svelte_meta. It seems that I may have incorrectly indicated that the <render-rev... component is sourced from the imported module. How can I properly connect these elements?
I have also experimented with other approaches such as
import 'render-rev/render-rev.js'configure at the top level of the script, amongst other attempts... What key concept am I missing regarding the consumption of NPM modules within Svelte components?