Sapper export and moving components between pages

[Rigo-m]

I don't know if this is already possible and I'm missing something. I promise everyone that is reading this issue that I've done everything that I could to understand if there is a way to do this but probably my understanding of things is not deep enough.

At work, we often need to build some static html,js and css code that then we zip and send to external companies for them to implement it in a CMS of their choice (mainly to put html into cycles and hydrate texts with translations).
I would've loved to use Sapper to build the code and make us of svelte handy logic, but if I sapper export the code and then, for example, move one component html to another page Svelte "deletes" the DOM from that page.
Is there a way to build HTML that could work in any page provided that the .js file is included in the page itself?

[mrkishi]

The issue is that sapper export generates a client-side application to go along with the static html. When the page is loaded, the application is then bootstrapped and everything works on the client -- including routing.

One could delete the app bootstrapping code in order to keep just the static html (which perhaps needs to be made into an option for export), but then no component behaviors would run, as well.

What parts of sapper do you have a need for? It sounds like regular Svelte components would fit you better, as they'd be able to use them anywhere they want, but then and again I'm not sure I follow your use case.

[Rigo-m]

Probably I blindfolded myself into thinking sapper export was the main deal for me because it generated static html.
Probably I need svelte components with hydration?
I'll try to simplify my problem. I need to "compile" a general .css file, a general .js file and then have a bunch of html "components" to drop in a bunch of pages. Would svelte allow me to do this?

[mrkishi]

Very much so! I'd start out with two options:

• Create a bunch of components. Compile them into a single .js and single .css file with rollup. Hand these over to the other team, and they can instantiate these with the component API:

    <link rel="stylesheet" href="bundle.css">
    <script src="bundle.js"></script>

    <div id="greeting"></div>

    <script>
        new MyGreeting({
            target: document.getElementById('greeting'),
            props: { message: 'olá, ', name: 'mundo' },
        });
    </script>

• As much as I dislike Web Components, this is one of its best use cases: sharing components hiding implementation details. Compile all components into web components, and use them inline in html:

    <link rel="stylesheet" href="bundle.css">
    <script src="bundle.js"></script>

    <my-greeting message="olá, " name="mundo"></my-greeting>

[thgh]

Check out https://github.com/thgh/svelte-number-gauge for an example rollup config.

[pngwn]

Is this a bug or do we just need some better documentation for this use-case?