Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Templating app.html

See original GitHub issue

Describe the problem

Currently SvelteKit templating is fairly simple: it replaces %svelte.head% and %svelte.body% entries in app.html.

However, sometimes it is necessary to augment some parts of app.html that are outside of Svelte’s control.

For example, for i18n one needs to be able to change the lang attribute on <html> or set a class on <body> tag.

Describe the proposed solution

It would be useful if SvelteKit provided some built-in templating solution for app.html that extends beyond replacing %svelte.head% and %svelte.body% and provides access other request parameters.

Alternatives considered

It is possible to do such templating in handle hook. For example, we can define some logic in app.html in EJS format and then run the templating engine on response.body before returning it from the hook.

Importance

would make my life easier

Additional Information

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:11
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

17reactions
Rich-Harriscommented, Apr 28, 2022

transformPage is the recommended way to inject values into HTML outside Svelte’s control — e.g.:

<html lang="%lang%">

export function handle({ event, resolve }) {
  return resolve(event, {
    transformPage: ({ html }) => html.replace('%lang%', get_lang(event))
  });
}

Closing this as I don’t think there’s a way to make this more convenient without cluttering the API with something less flexible

3reactions
abdo643-HULKcommented, Dec 27, 2021

it can be done with svelte:body but with a lot of limitations right now, but there is an open issue for that: https://github.com/sveltejs/svelte/issues/3105. For the <html> you can’t but any attributes beforehand in the app.html file that need to change for this to work. I use it like this in my project :

<svelte:head>
	<html {lang} {dir} />
</svelte:head>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Mobile App HTML Mobile Website Templates - ThemeForest
Get 209 mobile app HTML mobile website templates on ThemeForest such as Mobileux | Multipurpose HTML Mobile App Template, Ombe - Coffee Shop...
Read more >
HTML Service: Templated HTML | Apps Script
If you've used a templating language that mixes code and HTML, ... Apps Script templates can contain three special tags, called scriptlets.
Read more >
Free App HTML Templates (2022) - htmltemplates.co
App is a free one-page HTML template built with Bootstrap 4. App is a one-pager landing page template that is a good choice...
Read more >
How To Use Templates in a Flask Application - DigitalOcean
In Flask, you can use the Jinja templating language to render HTML templates. A template is a file that can contain both fixed...
Read more >
HTML In-App Templates - User Guide - MoEngage
Use HTML templates for showing pop-ups inside your mobile apps. This will unlock features like surveys, lead gen, spin the wheel, and so...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Ability to specify link media attribute

Next page

Config Function