Skip to content

Slot Forwarding Reactivity #7021

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
Closed
scottgonzalez opened this issue Dec 16, 2021 · 4 comments
Closed

Slot Forwarding Reactivity #7021

scottgonzalez opened this issue Dec 16, 2021 · 4 comments
Milestone
5.x

Comments

@scottgonzalez
Copy link

Describe the bug

When Component A uses a slot from Component B, which forwards the slot to Component C, reactivity breaks if the Component A reassigns a variable that is passed in two separate props to Component B.

This is pretty hard to explain abstractly, but is easy to see in the provided reproduction.

Reproduction

shows bug instantly (bug automatically triggered in onMount): https://svelte.dev/repl/09e21fce26c948258928f17b1545a21b?version=3.44.3

shows bug on user interaction (clicking the button triggers the bug): https://svelte.dev/repl/e09c2a49a4f344d8b81eb03f9dce251e?version=3.44.3

This bug is caused by App passing thing inside the things property as well as reassigning thing in the onOptionsChange callback property.

Logs

No response

System Info

System:
    OS: macOS 11.2.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 56.49 MB / 32.00 GB
    Shell: 5.0.18 - /usr/local/bin/bash
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 94.1.30.89
    Chrome: 96.0.4664.110
    Firefox: 94.0.2
    Safari: 14.0.3
  npmPackages:
    svelte: ^3.37.0 => 3.37.0 
    webpack: ^4.44.2 => 4.44.2

Severity

annoyance
@iacore
Copy link

iacore commented Jan 6, 2022 •
edited
Loading

Your example is too complicated. Working example: https://svelte.dev/repl/c5841a328c6f490f960388906e9bf184?version=3.44.3

This is related to you calling onOptionsChange (passed in as prop). Please use component event instead of that.

Change export let things to let things = [] fix the issue.

@scottgonzalez
Copy link
Author

@locriacyber The example is not too complicated and provides a reduced test case for a real bug. I am not looking for workarounds, I am looking for the bug to be resolved.

@niemyjski
Copy link

niemyjski commented Sep 26, 2023 •
edited
Loading

@Rich-Harris I've seen quite a few rfc's and pr's around slot forwarding and reactivity but no work arounds for common every day patterns. I'm not sure runes would completely solve this and no comment from team. Would be a great scenario for runes testing.

Basically, what I've seen is myself and others trying to build table components with a header / footer or row components that have slots and then have more derived example like table with paging component that tries to forward these slots but forward existing variables and default content. This breaks down really quick, very verbose and by the time you get to the grandparent level completely unusable.

references:

niemyjski added a commit to exceptionless/Exceptionless that referenced this issue Sep 26, 2023
@niemyjski
Work arounds for slot forwarding, couldn't reuse let:variable syntax …
72d46ee 
…and had to use writables for page.

sveltejs/svelte#7021
niemyjski added a commit to exceptionless/Exceptionless that referenced this issue Oct 15, 2023
@ejsmith @niemyjski
Beginning work on new Svelte UI (#1417)
dda5dbe 
* Created new sveltekit project

* Added VS Code launch support for svelte.

* Added tailwind and dasiyui

* Added helpful resources

* Added models generated from swagger.

* WIP Added login page

* Updated login

* Fixed launch config and updated login styles

* WIP - login page validation work.

* Added api client.

* Added problem details

* Fixed tests

* Fixed tests

* WIP Problem details.

* Login page refactor

* Some cleanup and get events list page

* Minor

* Store token in localstorage, redirect back to page after login

* Logout page

* Added api launch config

* Fixed formatting.

* Change default proxy port to match API. Some work on OAuth login.

* Login page fixes

* Fixed login page

* Swagger fixes

* Google login working

* Adding other oauth providers

* State is google specific

* Added shared layout for auth pages.

* Few minor oauth updates

* Fixed merge build errors

* Fixed build errors

* Update deps

* Applied linting

* Regenerated models after Nullable reference types

* Added default templates

npx swagger-typescript-api generate-templates -o api-templates

* Updates to client side model generation

* Added ability to pull in fluent validation rules into swagger.

* Updated generation

* more generation improvements

* Improved code gen

* More code gen fixes

* Updated signup model validation

* code gen improvements

* Removed constructor

* Some cleanup of problem details / validation

* Updated swagger config

* WIP: MiniValidation with automatic problem details

DamianEdwards/MiniValidation#51

* Login and logout flow + dashboard with auth detection.

* Reverted some model state changes

* Reworked how api client redirects

* Added websockets and layout auth redirection

* Added samples for both paging and infinity paging

* Updated to tanstack query (other one was deprecated)

* More example resources

* Updated deps

* Added paging helpers to json response

* Updated server response types and base summary model

* Added Events Table component which supports column selection, default summaries (WIP)

* Pushed summary updates

* FetchClient changes to add middleware and make it more generic

* Add global default options to FetchClient, setup global model validator, and global middleware to redirect on 401.

* Some small fixes.

* some fetch updates

* Fixed build warnings

* Early WIP - Taillog component

* Greatly improved summaries

* some query client work

* WIP event tail log

* Always return search tokens

* Updated deps

* Added default public env file

* Conditionally turn off account creation

* Moved oauth to use env

* Added exceptionless client

* Fixed client warnings and errors by adding trace logging.

* changed file type of hook

* Fixed app login

* Fixed summary formatters

* More efficient events tail log.

* Added temporary drawer

* Added live mode, start of pager.

* Moving app base to /next, more FetchClient updates, fix unmount code for eventstail component.

* Some styling

* More style

* Conditionally render summaries

* Added new websocket message component to streamline how we listen to events

* Working on getting both client apps to run together

* Remove lint from build

* Handle fallback for /next client app

* Fixed logo

* Change URL to /next for SPA startup

* Change launchUrl to match SPA url

* Some paging updates

* Added paging summary

* Fixed paging

* Fixed paging

* Fixed the pager on mobile.

* Created generic table component (WIP)

* forward events

https://learn.svelte.dev/tutorial/event-forwarding

* Ensure json doesn't get new line inserted

* Fixed summary tests

* Fixed validation tests

* Fixed all tests

* Fixed bad auto git merge

* Fixed redirect

* Added pagination helper.

* WIP: Added column sorting

* Added column picker

* Added ability to navigate to the first page

* Fixed binding issue

* Fixed callback

* Fixed drawer

* Use store for drawer and for live view

* WIP search and filtering

* Added empty table message.

* Workaround for $$Generic

sveltejs/svelte-eslint-parser#306

* Fixed linting errors, updated deps

* Use global fetch / loading

* Updated deps

* Work arounds for slot forwarding, couldn't reuse let:variable syntax and had to use writables for page.

sveltejs/svelte#7021

* use persisted storage for events column options

* WIP events drawer

* Updated deps

* Rearranged models a bit and pulled in some models from the exceptionless client

* Added components for time formatting

* WIP: Events drawer and overview.

* Fix issue with code formatter changing line endings and causing git issues. Turn daisyui banner off.

* Parallelize build

* Events Sidebar

* Ran formatting

* Try building just exceptionless all in one image during docker build step

* Don't run client tests yet

* Try only building app docker image

* Set artifact retention

* Tweak how we start docker services

* Don't wait for docker compose

* Debug

* Try different approach

* Checkout on deploy

* Try different docker build

* Another parallel approach

* Break out deploy

* More build tweaks

* Add code coverage

* Use run-all to run multiple tasks

* Revert some CSP policy changes

* Comment out unused code to pass lint rules

* Allow http gravatar

* Add missing logo back

* increased sidebar width

* WIP - Error and Simple error stack traces

* Fixed http file

* Updated deps

* Reworked how stack traces are rendered

* removed extra whitespace.

* Whitespace formatting

* More styling fixes

* make stack trace look nicer

* Updated deps

* WIP: Clickable filters with ability to enter custom keyword filters.

* rearranged loading rendering order in component due to global loader.

* Renamed functions

* Added more search + log level component

* Fixed warning

---------

Co-authored-by: Blake Niemyjski <[email protected]>
@dummdidumm
Copy link
Member

dummdidumm commented Nov 15, 2023 •
edited
Loading

This will be fixed in Svelte 5 - but also, slots will be deprecated in favor of the more powerful and easier to use snippets. Closing as duplicate of #7913

@dummdidumm dummdidumm added this to the 5.x milestone Nov 15, 2023
@dummdidumm dummdidumm closed this as not planned Won't fix, can't repro, duplicate, stale Nov 15, 2023
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
5.x
Development

No branches or pull requests
4 participants
@scottgonzalez @niemyjski @dummdidumm @iacore