Svelte: Create an "inject svelte component in an existing app" page

Created on 5 May 2020 · 5Comments · Source: sveltejs/svelte

Hi, as a svelte beginner, I was struggling to find a way to inject a svelte component in an existing app. I mean a lot of the documentation is geared towards apps using only svelte like sapper, but not much about how to inject it in an existing, let's say, php app.

So I created a memo for myself: https://github.com/lingtalfi/TheBar/blob/master/discussions/inject-svelte-in-existing-app.md, and I believe it would be a good idea to add some kind of similar material to the svelte documentation (at least I know that it would have helped me a lot).

Cheers.

Source

lingtalfi

Most helpful comment

Hi @antony, here is a cleaned up version: https://github.com/lingtalfi/TheBar/blob/master/discussions/inject-svelte-in-existing-app.md.

Cheers.

lingtalfi on 6 May 2020

👍4

All 5 comments

The sveltejs/template repo has code similar to what you have. But instead of having the mounting code inline in the index.html it will be part of the main.js file, this removes the need to define a property on the global namespace and keeps the app more isolated.

stephane-vanraes on 5 May 2020

I would argue that although similar, both "guides" don't cover exactly the same ground.

In a php app (which is still very popular), I would say that it's more common to generate html content to create the pages of the app rather than generating javascript files. And so if we want to integrate let's say a Timer svelte component in a page, a php app would typically generate some kind of html like this:

<?php


use SomePhpFramework\SomeTool;

include "init.inc.php";



$config = SomeTool::get_config_for_timer_component_on_page_abc();



?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="/svelte-fileuploader/dist/bundle.js"></script>
    <link rel="stylesheet" href="/svelte-fileuploader/dist/bundle.css">
    <link rel="stylesheet" href="/libs/font-awesome/5.13/css/all.min.css">
</head>

<body>




<div id="my-timer-component"></div>


<script>

    let timerOptions = <?php echo json_encode($config); ?>;
    document.addEventListener("DOMContentLoaded", function (event) {
        new Timer({
            target: document.getElementById("my-timer-component"),
            props: {
                options: timerOptions,
            }
        });
    });
</script>


</body>
</html>

where the php code controls the parameters of that hypothetical Timer svelte component.

Now of course, we could also have a similar setup in the same php app and generating a js file instead of that html file above, but ultimately I think it comes down to this: would svelte force users to generate js files or would svelte let the users use whichever language they want to use.

In addition to that, on a personal level, I would still argue that I prefer to have an html file as a "handle" rather than a js file, as html is more flexible, as it accepts javascript as a sub-language and not the other way around (i.e. js doesn't accept html). Hence when creating apps, I like to have an html page handle. Let me remind here that we could have a page with many more things in it, some of them could be svelte components, some other would be jquery plugins, some of those could be just static html widgets generated with php, and thus to orchestrate all that in one page, the html language is the perfect fit, the language that glues them all.

I personally prefer to keep my php framework intact, and have svelte adapt to it, rather than the other way around. I would typically use svelte sparingly, only for some js widgets, and let all my routing/app being handled with php.

But again, besides this personal preference, I believe that the most important point, at an ethical level, is whether svelte would promote itself as a js oriented tool for js developers, or whether it would widen the audience and be just a tool that can be used in any kind of app (including php).

Therefore, I believe that my type of guide is still an useful alternative that deserves to be claimed somewhere in the docs, maybe alongside the svelte/template, or mentioned somewhere at least.

lingtalfi on 6 May 2020

The docs already describe the client-side API for compiled components and I'm not sure what else they ought to mention. How you're going to implement the build itself seems like it would vary a lot depending on your project setup and what else you have going on.

Conduitry on 6 May 2020

Hi @lingtalfi - this is a recipe not a bug, so I've linked to it from the Svelte Society project, where a cookbook is being built.

If you have time, cleaning up your https://github.com/lingtalfi/TheBar/blob/master/discussions/inject-svelte-in-existing-app.md gist into more of a Recipe format to help others would be greatly useful, and we can happily incorporate it on the Svelte Society site alongside the other recipes.