-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support overwriting the default template loader via a handle hook #2773
Conversation
🦋 Changeset detectedLatest commit: 7971df6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Not being part of the core team, I can't approve PRs. But I can give you some feedback. I suspect that Now, using something other than |
Appreciate the feedback @rmunn. I'm happy to make whatever the necessary changes are, once I'm given some ("blessed") direction. |
@rmunn thanks so much for all your contributions! We'd love to keep you involved. Are you on Discord by chance? I sent you an email, but just wanted to mention it here as well to make sure I had the right address 😄 |
This is a fun problem to solve. I'm wondering if you could do this sort of thing... <!-- src/app.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
<body>
+ <!-- BEFORE -->
<div id="svelte">%svelte.body%</div>
+ <!-- AFTER -->
</body>
</html> ...and then, in export function handle({ request, resolve }) {
const response = await resolve(request);
if (response.headers['content-type'] === 'text/html') {
const skin = await loadSkin(request.host, request.path);
const [before, after] = skin.split('{{app}}');
response.body = response.body
.replace('<!-- BEFORE -->', before)
.replace('<!-- AFTER -->', after || '');
}
return response;
} ...and have users provide a skin that only includes (One minor detail that shouldn't affect anything, but is worth mentioning just in case — I'd like to remove the @rmunn is right that |
@Rich-Harris excellent thinking! And that may not even require any SK mods. I'll give it a go and get back to you. (I was looking forward to having been a contributor tho! 😞 Guess I'll have to find something else I can help out with...) Congrats on the new job, by the by. |
As expected, that worked fantastically. I guess I have to withdraw this PR, then. |
I'll go ahead and close this then since it sounds like you're no longer pursuing it |
Hey team ! Sorry, I don't want to reopen this, but how far is difficult to have a dynamic template ? for exemple if you have one template for main app : app.html and an other for newsletter for exemple newsletter.html with tags Is it very difficult for load the one we want depending URL.pathname ? (Sorry for my English btw) |
@7antra I documented the exact steps I ended up taking, which sounds like it can do what you want: https://adamtuttle.codes/blog/2021/sveltekit-customizing-app-html-at-runtime/ |
Ref #2762
Here's a brief video explaining why I can't accomplish the same thing without this change. (Apologies for the dog snoring in the background! 🐶 💤 )
Basically, our app is multi-tenant and we allow our customers to provide their own skins for different sections. But most importantly: the skin content is not within our control. All customers run on the same cluster of servers, and at runtime we inspect the hostname/url and look up the appropriate skin to wrap around the app.
As discussed in #2762, I tried to make this work with
{@html before}<slot />{@html after}
in a layout, and that works as long as the skin doesn't have ANY tags wrapping the app content (must be a direct descendant of<body>
). Since I'm splitting the skin content on a token, any wrapping tags become unclosed, and then{@html ...}
goes haywire.This change allows me to overwrite the default
template({ head, body})
method called during SSR by specifying a custom per-request template method in ahandle()
hook:Before submitting the PR, please make sure you do the following
I'm not sure how I could write a test for this functionality, but if someone wants to offer some advice, I can give it a try.
Tests
pnpm test
and lint the project withpnpm lint
andpnpm check
I also am not able to get the tests to pass locally; both before and after my change they fail at the same spot:
Changesets
pnpx changeset
and following the prompts. All changesets should bepatch
until SvelteKit 1.0