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.

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

<svelte:component> adds unnecessary empty text nodes #4423

Closed
shirotech opened this issue Feb 16, 2020 · 3 comments
Closed

<svelte:component> adds unnecessary empty text nodes #4423

shirotech opened this issue Feb 16, 2020 · 3 comments

Comments

@shirotech
Copy link

shirotech commented Feb 16, 2020

Describe the bug
When we use a dynamic component with a wrapped if block in an each loop, it generates multiple empty text nodes for some reason.

Logs

running Svelte compiler version 3.18.2
about:srcdoc:160 Found Text Nodes <ul>​…​</ul>​ #text #text
about:srcdoc:160 Found Text Nodes <ul>​…​</ul>​ #text #text
about:srcdoc:160 Found Text Nodes <ul>​…​</ul>​ #text #text
about:srcdoc:160 Found Text Nodes <ul>​…​</ul>​ #text #text

To Reproduce
https://svelte.dev/repl/bf64c8c4fa0b4cde9b9f93cb20168354?version=3.18.2

  • Open console
  • Click Add button and observe

Expected behavior
It should not generate the extraneous empty text nodes

Information about your Svelte project:

  • Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
    It affects all browsers

  • Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)
    OSX

  • Svelte version (Please check you can reproduce the issue with the latest release!)
    3.18.2

  • Whether your project uses Webpack or Rollup
    Rollup

Severity
Causes layout issues on production, very severe.

Additional context
Note that using the component directly doesn't have this issue, so I assume this behaviour is not intended and most likely a bug. https://svelte.dev/repl/4fcd86502bdc4dc68511e6856adc4646?version=3.18.2

@shirotech
Copy link
Author

I found that sometimes a node needs a dummy reference:

return text('');

However, I've done a few tests and tried to use an empty comment instead.

export function empty() {
	return document.createComment('');
}

An empty text node actually impacts the dom structure, whereas an empty comment does not. What are your thoughts on this?

@fips0
Copy link

fips0 commented Feb 17, 2020

See also #3586

@Conduitry
Copy link
Member

These empty text nodes are referred to internally as 'anchors' and they are needed in certain situations. #3 / #512 was about removing them where possible. I'm not sure in what issue or PR they were switched from comments to empty text nodes. We already have #3586 for discussing switching back to comments, so closing this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants