Custom injection tags in template.html

[pixeline]

Is your feature request related to a problem? Please describe.

I would like to inject some html generated via npm into the template.html file, using the %sapper% tags. I don't think it is possible yet ?

Describe the solution you'd like For example, I would like to be able to add %sapper.mytag% to the template.html file. Then, in server.js be able to do something like this:

function exampleCallback(){
       return "<h2>Yolo</h2>";
}
Sapper.htmlInjectionTags.add("mytag", exampleCallback);

How important is this feature to you? It would allow me to automate the injection of PWA specific html tags for app icons and favicons, that I generate via https://github.com/onderceylan/pwa-asset-generator/

[antony]

@pixeline I use a library called regexp-replace to inject template content , which I do after the application has built.

For favicons, I built a component which iterates a series of icon sizes and generates the required tags using a loop in <svelte:head>.

For me, adding special functions for injecting code into the template.html seems like an added complication, however I'm happy to hear other opinions on the subject.

[pixeline]

For favicons, I built a component which iterates a series of icon sizes and generates the required tags using a loop in <svelte:head>.

@antony interesting! I would love to have a look at it (thinking in components is still shady for me). Can you share ? I might write a tutorial using that with the npm package i mentioned to have a full Sapper solution to fav/app icons. After all, they are part of the PWA construction process, which Sapper is intended for.

[antony]

I don't have it isolated into a project just now, but I might pull it out into one soon.

[oldlinuxuser]

Definitely a good idea. Looking forward to see this feature avaliable soon

[antony]

@fibxp There are ways to do what the author intended, so it's unlikely this will be added as a feature any time soon.

[antony]

@pixeline I remembered I build a component (which wasn't usable at the time due to a restriction in the <svelte:head> tag. I believe that restriction has now been lifted.

https://github.com/beyonk-adventures/svelte-favicons

It's in Svelte 2 so would benefit from a port to Svelte 3, but the theory is solid.

[arxpoetica]

I can think of multiple use cases where template interpolation may be needed:

• internationalization and localization - attributes in html tags, etc
• seo optimization ( tags etc) — this can currently be solved via the tag, but that's not always ideal
• opengraph resolution

There are likely others. I'm surprised to hear the argument that this won't likely land as a feature.

[zwergius]

Hi,

So just adding my voice here - I believe this would be a grat addition. Let's say we want to set dark/light theme according to users preference, we'd have to inject a script checking localStorage / mediaQuery before rendering the app to avoid the dreaded flicker...

I've tried implementing this in but it runs on each route change.

Just my 2 cents..