fix: allow use of document root as target in typescript #7554

Snaipe · 2022-05-23T17:51:25Z

It is not possible to use typescript when using target: document
during component initialization, because target can only be of type
Element or ShadowRoot. This means that it is not possible to hydrate
the entire document when managing the element as a Svelte
component.

This commit fixes this by allowing documents to be targets.

Note that this just fixes the type constraint of the target option in IComponentOptions. Svelte already works well when hydrating the document root with target: document in regular javascript, so this just relaxes the type constraint.

Tests

It is unclear to me how to add a test for this -- this can only work when hydrating and there's no skip_if_not_hydrate in test/runtime. This fix was hand-tested with the following setup, but I'd appreciate help in turning this into an actual test.

Given the following App.svelte:

<script lang="ts">
export let name: string;
</script>

<html lang="en">
<head></head>
<body>Hello, {name}</body>
</html>

And the following main.ts:

import App from './App.svelte';

const app = new App({
	target: document,
	hydrate: true,
	props: {
		name: 'world'
	}
});

export default app;

Building the bundle results in the following error:

src/main.ts → build/static/bundle.js...
(!) Plugin typescript: @rollup/plugin-typescript TS2322: Type 'Document' is not assignable to type 'Element | ShadowRoot'.
  Type 'Document' is missing the following properties from type 'ShadowRoot': delegatesFocus, host, mode, slotAssignment, innerHTML
src/main.ts: (5:2)

7  target: document,
   ~~~~~~

  node_modules/svelte/types/runtime/internal/dev.d.ts:28:5
    28     target: Element | ShadowRoot;
           ~~~~~~
    The expected type comes from property 'target' which is declared here on type 'IComponentOptions<Record<string, any>>'

With this commit, the error goes away.

Workaround

The workaround I'm using is adding a // @ts-nocheck at the top of main.ts. This is of course horribly sad, since we just throw type checking out the window.

It is not possible to use typescript when using `target: document` during component initialization, because target can only be of type Element or ShadowRoot. This means that it is not possible to hydrate the entire document when managing the <html> element as a Svelte component. This commit fixes this by allowing documents to be targets.

Conduitry · 2022-05-23T17:56:46Z

Does target: document behave any differently than target: document.body? I'm not sure how I feel about targeting the document itself - rather than its body - nor am I really sure what that actually means.

mrkishi · 2022-05-23T18:03:42Z

target: document is different than target: document.body because they're apparently hydrating the whole thing—<html> and <head> included.

I don't think this is the right approach, though. You don't want target: document, you want target: document.documentElement, which is Element.

Snaipe · 2022-05-23T18:05:55Z

It does -- document.body just targets the element, while I wanted to hydrate the actual document root.

This came up in the context of SSR and prerendering: I wanted to have the main layout managed as a svelte components, so that I could define it as such:

<!-- Layout.svelte -->
<html lang="en">
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/static/favicon.png'>
    <link rel='stylesheet' href='/static/global.css'>
    <link rel='stylesheet' href='/static/bundle.css'>

    <script defer src='/static/bundle.js'></script>
  </head>

  <body>
    <slot />
  </body>
</html>

And then using said layout:

<script lang="ts">
  export let name: string;
  import Layout from 'Layout.svelte';
</script>

<Layout>
  Hello, {name}
</Layout>

Prerendering this with name: "foo" would give me the following static page that I could then serve from the http server:

<html lang="en">
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/static/favicon.png'>
    <link rel='stylesheet' href='/static/global.css'>
    <link rel='stylesheet' href='/static/bundle.css'>

    <script defer src='/static/bundle.js'></script>
  </head>

  <body>
    Hello, foo
  </body>
</html>

With the intent of re-hydrating the static content, using this main:

import App from './App.svelte';

const app = new App({
	target: document,
	hydrate: true,
	props: {
		name: 'bar'
	}
});

export default app;

when running this, the html gets correctly hydrated and Hello, bar appears instead of the original Hello, foo.

This is all already possible when using javascript, it's only typescript that complains because target can only be an Element or a ShadowRoot.

Snaipe · 2022-05-23T18:07:19Z

I don't think this is the right approach, though. You don't want target: document, you want target: document.documentElement, which is Element.

I initially tried with document.documentElement, but hydrating simply resulted in the following HTML:

<html lang="en">
<html lang="en">
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/static/favicon.png'>
    <link rel='stylesheet' href='/static/global.css'>
    <link rel='stylesheet' href='/static/bundle.css'>

    <script defer src='/static/bundle.js'></script>
  </head>

  <body>
    Hello, bar
  </body>
</html>
</html>

Which, as you can guess, is a bit problematic.

dummdidumm · 2023-02-21T16:00:26Z

While technically correct, I'm not sure how I feel about this change because it's a user mistake in 99% of all cases (forgetting the .body), which I value higher than this edge case working without a // @ts-ignore comment above it.

Rich-Harris · 2023-03-24T16:46:42Z

Wow, I had no idea this worked! I'm similarly conflicted but I think I lean towards merging — the types are currently incorrect given that we do support this (and undoing that would be am unwanted breaking change), and I think people are very unlikely to hit that problem in practice. (If they do, I'm not sure that the red squiggly is more likely to steer them in the right direction than seeing their whole app blow up.)

vercel · 2023-03-27T08:04:51Z

@dummdidumm is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

Conduitry · 2023-03-30T17:15:16Z

The updated types have been released in 3.58.0 - thank you!

dummdidumm added the types / typescript label Feb 21, 2023

benmccann changed the title ~~[fix] allow use of document root as target in typescript~~ fix: allow use of document root as target in typescript Mar 14, 2023

dummdidumm approved these changes Mar 24, 2023

View reviewed changes

Merge branch 'master' into fix/root-hydration

f286c4a

dummdidumm merged commit d49b568 into sveltejs:master Mar 27, 2023
7 of 8 checks passed

brunnerh mentioned this pull request Mar 31, 2023

Align types with Svelte v3.58.0 sveltejs/language-tools#1968

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: allow use of document root as target in typescript #7554

fix: allow use of document root as target in typescript #7554

Snaipe commented May 23, 2022

Conduitry commented May 23, 2022

mrkishi commented May 23, 2022

Snaipe commented May 23, 2022

Snaipe commented May 23, 2022 •

edited

dummdidumm commented Feb 21, 2023

Rich-Harris commented Mar 24, 2023

vercel bot commented Mar 27, 2023

Conduitry commented Mar 30, 2023

fix: allow use of document root as target in typescript #7554

fix: allow use of document root as target in typescript #7554

Conversation

Snaipe commented May 23, 2022

Tests

Workaround

Conduitry commented May 23, 2022

mrkishi commented May 23, 2022

Snaipe commented May 23, 2022

Snaipe commented May 23, 2022 • edited

dummdidumm commented Feb 21, 2023

Rich-Harris commented Mar 24, 2023

vercel bot commented Mar 27, 2023

Conduitry commented Mar 30, 2023

Snaipe commented May 23, 2022 •

edited