Skip to content
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.

Sign up for GitHub

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

Jump to bottom

<:Document title='blah'/> #1013

Closed
Rich-Harris opened this issue Dec 12, 2017 · 9 comments
Closed

<:Document title='blah'/> #1013

Rich-Harris opened this issue Dec 12, 2017 · 9 comments

Comments

@Rich-Harris
Copy link
Member

Am building a Hacker News implementation using Sapper to see what it, and Svelte, are missing. One thing that it's clear we need is a declarative way to set the document title.

I propose the addition of a <:Document> meta-component with a title property. Ideally it would simply compile to something like this:

// static
document.title = 'blah';

// dynamic, on both init and update
document.title = state.title;

On the server side, we would need to change the behaviour of the render function. Right now it returns an HTML string. I think it should return an object instead:

const { html, css, title } = Page.render({...});

As long as the returned object has a toString method, we can do this in a non-breaking way. (The css property would be a { code, map } object.)
@TehShrike
Copy link
Member

Being able to set the document title in my top-level component would be awesome!

That render signature makes sense to me.

@Rich-Harris Rich-Harris mentioned this issue Dec 13, 2017
Merged
@roman-vanesyan
Copy link

What about meta headers, etc. are they planned to be included as part of <:Document> implementation?

@Rich-Harris
Copy link
Member Author

@vanesyan I don't have any specific plans about that currently. What kind of things do you generally need? (that differ from page-to-page — site-wide stuff is best handled outside Svelte, I think).

@roman-vanesyan
Copy link

Don't know, but I found Next.js <Head /> component very powerful, yet easy to use.
For meta tags, example will be same important stuff like title - description. Social tags, like open graph, twitter metas, etc. are vary from page to page, and are loaded based on content loaded.

@roman-vanesyan
Copy link

IMHO, it's good to keep everything related at the same generic component, that do all that stuff out-of-the-box, rather than compose em' with different components.

@Rich-Harris
Copy link
Member Author

I wonder if there's a case for a <:Head> component, that just functions as a portal to the end of <head>. It wouldn't behave exactly the same way as Next's <Head> (it wouldn't deduplicate tags), but it would allow you to add arbitrary open graph tags etc.

On the server, it could be separated out like so:

const { html, css, title, head } = Component.render(...);

Strictly speaking, <:Document> would be redundant if we had <:Head>. Though it's kinda nice to be able to easily compile to document.title = 'blah' rather than this:

const title = document.createElement('title');
title.textContent = 'blah';
head.appendChild(title);

What does everyone reckon?

@roman-vanesyan
Copy link

We can analyse the children of <:Head /> and optimize cases like this based on tag name. So instead of creating title node, you just change it as document property as you suggested :)

@Rich-Harris
Copy link
Member Author

That's very true. I'm just lazy 😆

Rich-Harris added a commit that referenced this issue Dec 14, 2017
@Rich-Harris
Merge pull request #1024 from sveltejs/gh-1013
394dec9 
update SSR render method, and introduce <:Head>
@Rich-Harris
Copy link
Member Author

<:Head> is implemented in 1.48. Thanks for steering me away from <:Document> @vanesyan!

@Conduitry Conduitry mentioned this issue Jan 4, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@TehShrike @Rich-Harris @roman-vanesyan