Upgrade dependencies

[stefanovualto]

Hi guys,

First of all, I would like to congratulate you on what you achieved here with this template... It is almost exactly what I need. And after trying different unsuccessful approaches I found your template which gave me some hopes in using svelte through web components.

I was wondering if you think about updating the dependencies? Because I am trying to do it, but running into issues due to some breaking change in the compiler configuration 😞 and the way how you inject the generatedCss ...

Again, Kudos for your work! ❤️

[MonkeyAndres]

Thanks to you for choosing it, I'm afraid it's a little complex to update the template as this change in the rollup-plugin-svelte breaks all the hack.

Also, I was getting a weird error from rollup when updating it. Feel free to continue my research and open a pull request.

[stefanovualto]

I am not convinced 100% about the DX though, I am trying to modify few things to test the real webcomponent (to avoid surprises in prod).
But as soon as I will have time to fix the upgrade I will put it in a PR...
Thanks again for your hacks! 😄

[MonkeyAndres]

We're using this template in a semi-prod environment if it gives you some more confidence.

Thanks to you, I'll close the issue.

[stefanovualto]

Just in case I find a way to make it works, but with the incremental build if the css is not modified it doesn't re-inject the css into the root shadowdom (but first build is fine)

here is part of my actual configuration:

       // other latest imports (from today)
       import css from "rollup-plugin-css-only";
       import replace from "@rollup/plugin-replace";

       ...

       svelte({
            preprocess: sveltePreprocess({ sourceMap: !production }),
            compilerOptions: {
                dev: !production,
                customElement: true,
            },
            emitCss: false,
            include: "./src/_index.svelte",
        }),

        svelte({
            preprocess: sveltePreprocess({ sourceMap: !production }),
            compilerOptions: {
                dev: !production,
            },
            emitCss: true,
            exclude: "./src/_index.svelte",
        }),

        // injects the svelte app css into the shadow dom root node (if you minify later you need only one replace)
        // no sure about the key `bundle.js` works for me I didn't check in your template
        css({
            output(styles, styleNodes, bundle) {
               const match = production
                    ? `.shadowRoot.innerHTML="`
                    : `.shadowRoot.innerHTML = "`;

                bundle["bundle.js"].code = bundle[`bundle.js`].code.replace(
                    match,
                    `${match}<style>${styles}</style>`
                );
            },
        }),

       // add transition into shadow dom
        replace({
            ".ownerDocument": ".getRootNode()",
            delimiters: ["", ""],
        }),
        replace({
            ".head.appendChild": ".appendChild",
            delimiters: ["", ""],
        }),

[MonkeyAndres]

Thanks a lot, it seems like a good solution, we will update the template to use it 🤘🏼