657 Matching Annotations
- Nov 2023
- Oct 2023
-
github.com github.com
- Sep 2023
-
sveltejs.github.io sveltejs.github.io
-
sveltejs.github.io sveltejs.github.io
-
sveltejs.github.io sveltejs.github.io
-
mistlog.medium.com mistlog.medium.com
-
mistlog.github.io mistlog.github.io
- Aug 2023
-
flowbite-svelte.com flowbite-svelte.com
Tags
Annotators
URL
-
-
www.sveltedevtools.com www.sveltedevtools.com
Tags
Annotators
URL
-
-
sveltequery.vercel.app sveltequery.vercel.app
Tags
Annotators
URL
-
- Jul 2023
-
github.com github.com
Tags
Annotators
URL
-
-
github.com github.com
-
github.com github.com
- Nov 2022
-
webmonetization.org webmonetization.org
-
Web Monetization
Web Monetization official site with motivation, wallets, providers, browsers, search engines, tools, documentation link, explainer link, specifications link, awesome list link, github link
Tags
- standard
- gatehub
- documentation
- wallet
- ilp
- infinity search
- chrome
- edge
- money
- revenue
- mozilla
- donations
- w3c
- moodle
- ledger
- monetization
- interledger
- 11ty
- gridsome
- coil
- explainer
- ngx
- tessy
- protocol
- svelte
- jekyll
- javasript
- awesome
- specification
- list
- uphold
- gatsby
- pipe web
- motivation
- vuepress
- hugo
- currency
- web monetization
- puma
- mojeek
- micro-payment
- plugin
- github
Annotators
URL
-
-
en.wikipedia.org en.wikipedia.org
-
Donations
To add some other intermediary services:
- ko-fi (site for contribution)
- GitHub sponsors (for GitPages)
- itch.io (for games)
- Gumroad (for sites and repositories)
- Patreon (for fan interaction)
To add a service for groups:
To add a service that enables fans to support the creators directly and anonymously via microdonations or small donations by pre-charging their Coil account to spend on content streaming or tipping the creators' wallets via a layer containing JS script following the Interledger Protocol proposed to W3C:
If you want to know more, head to Web Monetization or Community or Explainer
Disclaimer: I am a recipient of a grant from the Interledger Foundation, so there would be a Conflict of Interest if I edited directly. Plus, sharing on Hypothesis allows other users to chime in.
Tags
- gratuity
- gftw
- video
- open collective
- revenue sharing
- FOSS
- web standards
- web
- mozfest
- open source
- mozilla
- Patreon
- w3c
- monetization
- youtube
- 11ty
- Interledger Protocol
- sponsors
- ngx
- art
- browser
- tessy
- plug-in
- protocol
- payment pointer
- pwyw
- jekyll
- education
- open
- community
- fans
- privacy
- contribution
- donation
- uphold
- extension
- mozilla festival
- dev.to
- micropayment
- pay-what-you-want
- open web
- hugo
- pay what you want
- payment
- Consortium
- gatehub
- freemium
- tools
- premium
- wallet
- podcast
- model
- open-source
- wordpress
- pricing
- revenue
- Interledger
- research
- moodle
- gridsome
- collective
- coil
- micro-donation
- subscriptions
- strategies
- film
- online ledger
- svelte
- WWW
- gaming
- business
- gumroad
- microdonation
- gatsby
- tips
- pipe web
- pricing strategies
- games
- vuepress
- API
- ko-fi
- stream
- web monetization
- nonprofit
- exclusive
- github
Annotators
URL
-
-
github.com github.com
-
Use a :global rule to only expose parts of the stylesheet:
-
- Aug 2022
-
gist.github.com gist.github.com
-
stackoverflow.com stackoverflow.com
-
you can also replicate the bind:this syntax if you please: Wrapper.svelte <script> let root export { root as this } </script> <div bind:this={root} />
This lets the caller use it like this:
<Wrapper bind:this={root} />in the same way we can already do this with elements:
<div bind:this=
-
- May 2022
-
stackoverflow.com stackoverflow.com
-
You should mentioned what you listed after the word try_files. Here's what I ended up using that seemed to work: try_files $uri $uri/index.html $uri.html /index.html; The /index.html at the end needs to match the fallback: 'index.html' part of your adapter-static config. Otherwise going directly to a route that doesn't have a matching file at that path -- such as any route with a dynamic param like [id] -- will result in a 404.
-
- Apr 2022
-
svelte.dev svelte.dev
Tags
Annotators
URL
-
-
Tags
Annotators
URL
-
- Feb 2022
-
-
In addition, a component that uses Svelte's built in event forwarding system cannot allow event listeners on the "capture" phase of the event lifecycle. It also cannot allow events to be cancelable with the browser's built in preventDefault function.
-
-
github.com github.com
-
As a workaround, you can use setters in every affected reactive block instead of direct assignment. let localForm = {}; const setLocalForm = (data) => { localForm = data; }; $: setLocalForm({...$formData});
Tags
Annotators
URL
-
- Jan 2022
-
-
It's vanilla JS, doesn't bind you to specifc syntax and that's the main reason why I like svelte that it doesn't try to sandbox you into framework constraints.
-
const unsubscribe = errorStore.subscribe(value => { if (!value) { return } error = value errorStore.set() })
-
-
-
-
I personally abstract everything away into stores. Stores are amazing. With everything I mean things like fetch, Worker or WebSocket.
-
Another limitation is that you are forced into the syntax of the {#await} block. What I mean by that is that for example you can't add a loading class to a parent. You can only render stuff for the loading state in the given block. Nowhere else.
-
export const fibonacci = function (n, initialData) { return readable( { loading: true, error: null, data: initialData, }, (set) => { let controller = new AbortController(); (async () => { try { let result = await fibonacciWorker.calculate(n, { signal: controller.signal }); set({ loading: false, error: null, data: result, }); } catch (err) { // Ignore AbortErrors, they're not unexpected but a feature. // In case of abortion we just keep the loading state because another request is on its way anyway. if (err.name !== 'AbortError') { set({ loading: false, error: err, data: initialData, }); } } })(); return () => { controller.abort(); }; } ); };
-
<script> import { fibonacci } from './math.js'; $: result = fibonacci(n, 0); </script> <input type=number bind:value={n}> <p>The {n}th Fibonacci number is {$result.data}</p> {#if $result.loading} <p>Show a spinner, add class or whatever you need.</p> <p>You are not limited to the syntax of an #await block. You are free to do whatever you want.</p> {/if}
-
Yes I love stores.
-
-
stackoverflow.com stackoverflow.com
-
export const load: Load = async ({ page, session }) => { if (!isPublic(page.path) && !isAuthenticated(session)) { console.log('Unauthorized access to private page'); return { redirect: '/', status: 302 }; } else { console.log('Auth OK'); } return {}; };
-
In hooks.js I have a handle function that basically does request.locals.jwt = cookies.jwt, and then a getSession function that returns { jwt: locals.jwt }
-
-
github.com github.com
-
Instead of render props, we use Svelte's slot props: // React version <Listbox.Button> {({open, disabled} => /* Something using open and disabled */)} </Listbox.Button> <!--- Svelte version ---> <ListboxButton let:open let:disabled> <!--- Something using open and disabled ---> </ListboxButton>
-
-
news.ycombinator.com news.ycombinator.com
-
It has many advantages but the main reason for me is that it simplifies your front end code. It's not perfect by any means, but overall its cons are worth it IMO.
-
-
stackoverflow.com stackoverflow.com
-
SSR is used for pages as well, but prerendering means that rendering happens at build time instead of when a visitor visits the page.
-
-
stackoverflow.com stackoverflow.com
-
import { goto } from '$app/navigation'; function routeToPage(route: string, replaceState: boolean) { goto(`/${route}`, { replaceState }) } replaceState == true will replace the route instead of adding to the browser history. So, when you click back, you will not go back to the route you came from.
-
-
svelte.dev svelte.dev
-
github.com github.com
-
All my stores also have a defaultValue property and reset method
Interesting... why?
-
I've said it multiples times and I say it again: in Svelte stores solve all your problems and I love them so much.
-
-
It works if you always want b to be the value deriving from a. However in the example above, we want the value of b to be temporarily out of sync of a.
-
My mental model has always been that a reactive declaration like $: b = a * 2 defines b in it's entirety ("Here's my recipe for b and all the ingredients, please Svelte make b always up to date"). And outside of this declaration b is immutable.
-
First of all, here is what I meant by updating reactive declared variable
-
The intention of the issue #2444 was to propagate the changes of the reactive declared variables back to its dependencies. in the context of this example, would meant, updating b should update a as well.
Tags
- allowing variable to be temporarily out-of-sync
- Svelte: reactive variable
- excitement
- Svelte: reactivity: problem: reactive statement triggered too often
- Svelte: reactive derived variable
- Svelte: reactivity: caveat / surprising behavior
- Svelte: store
- Svelte: store: custom
- mental model
- rave review
- Svelte: reactivity: problem: reactive statement triggered when it shouldn't be
Annotators
URL
-
-
github.com github.com
-
stackoverflow.com stackoverflow.com
-
Explicitly defining the dependency in the reactive declarations
-
inputValue = updateInputValue(value);
-
-
github.com github.com
-
-
I ended up writing a custom store that "buffers" sets for both a small time interval and ensuring only one async action is in flight (and triggering an extra round of async processing if a set was seen after the last async action was launched).
-
-
github.com github.com
-
We should instead invalidate the ultimate dependencies of filtered rather than filtered itself:
-
-
-
github.com github.com
-
You declare a reactive variable and it's dependencies ("recipe").
-
Svelte currently consistently gives the reactive statement priority over your checked binding.
-
-
github.com github.com
-
github.com github.com
-
Oh, I just figured out a workaround for my project, in case it helps someone. If you want the source of truth on the prop to come from the child component, then leave it undefined in the parent. Then, you can make the reactive variable have a condition on the presence of that variable. eg: <script> let prop; $: prop && console.log(prop); </script> <Child bind:prop/> Might not work for every use case but maybe that helps someone.
-
-
github.com github.com
-
maybe this just comes down to general footguns with reactivity, and being aware of them as a developer.
-
-
marcusolsson.github.io marcusolsson.github.io
-
Create an obsidian plugin with svelte (need update to use vite/esbuild)
-
- Dec 2021
-
github.com github.com
- Nov 2021
-
svelte.school svelte.school
-
The complex typewriting effect is abstracted away in a neat function, out of site and out of mind.
-
this action is re-usable. Anytime you want a typewriter effect added to an element, you just import the function and apply it. So elegant.
-
Some call them the lifecycle methods of elements which I think is an apt description.
-
-
-
-
(you can get pretty far with <svelte:component> and passing component constructors around and spicing up props along the way)
-
-
stackoverflow.com stackoverflow.com
-
-
You sure packed lot of good lessons and important concept explanations/illustrations into this little answer/tutorial. Well done.
-
The consumer component will barely change from our last example. The only difference is the way we'll get a reference to our store (since now the store is exported from the JS module):
-
In effect, the $ syntax we've seen above will actually setup a subscription to the store. And the subscription will be cancelled when the component is destroyed. If the store is subscribed by multiple components, the store will be disposed only when the last component unsubscribes (it will be reinitialized, if a new subscription is made). This is very handy to manage the lifecycle of disposable things in your code.
-
lifecycle is also managed automatically by Svelte
-
(And we've covered 75% of the store topic... They're efficient, to the point... And simple!)
-
Now your whole WS logic can be encapsulated in your JS module. That makes for good separation of concern.
-
In order to use this, we need to use a little more advanced readable store. Here's your example updated for this:
-
In your Svelte component, you can then use your store with the special $ prefix syntax, to access the value of the store ('cause the temperature variable is a reference to the store itself, it's just a mean to our end, the result we need is the value):
-
// our temperature is now a store with initial value 0 const temperature = writable(0); // now we don't need to change this function, the change will be propaged // by the store itself const getTemperature = () => { return temperature; }
-
Here's how we would rewrite our callback example with a store instead:
-
Same as our callback example, except they offer a handful of other very useful tool (like computing derived values from other stores), and also a slick syntax in the Svelte component.
-
Stores are essentially some kind of simplified streams (or Observable as they're called in ES), that is they represent a value over time.
-
Stores are the idiomatic Svelte way when you need to import "reactivity" from your normal JS sources.
Tags
- pedagogy
- comparison
- Svelte: store: readable
- advantages/merits/pros
- means to an end
- refactoring/rewrite: example
- encapsulation
- simple explanation
- analogy
- Svelte: store
- Svelte
- Svelte: reactivity
- lifecycle callbacks
- separation of concerns
- Svelte: the Svelte way
- good example
- Svelte: extracting code from components to plain JS modules
Annotators
URL
-
-
hackernoon.com hackernoon.com
-
Personally, I prefer an event-based communication, but I don't think it's actually better. The only problem with props is that it can cause problems if badly managed, but normally, both of them are ok. In real life, I would opt for storage.
-
-
www.kirillvasiltsov.com www.kirillvasiltsov.com
-
Finally, I think Actions are great for animations, because you will definitely need to apply the same logic to many different elements. One of my favorite examples are FLIP animations, where a change in DOM position can be animated. For example shuffling a list of items. I will not dive deep into the topic in this article: I've written about some techniques in this article about FLIP animations in React and in this article about how to create spring animations with Web Animation API. Although they are not about Svelte, at the end of the day it all boils down to manipulating the HTML element directly. And Svelte Actions are a great place to do it.
-
But you can get quite close to directly updating CSS with Actions!
-
export function autofocus(node) { node.focus(); } That's it. This is a legitimate Svelte Action!
-
-
svelte.dev svelte.dev
-
stackoverflow.com stackoverflow.com
-
if you put the reactive statement $: validate(inputValue); after the function updateInputValue declaration, it's working as expected:
-
- Oct 2021
-
github.com github.com
-
while with server/externalFetch there is no direct way to pass cookie headers from the original request to the external one
-
Right now I am working around this issue by having an internal [...api].js, then call fetch for that endpoint (which automatically passes on cookies) and from there hit the actual external endpoint. It works, there is no risk of leaking anything, but imo shouldn't be necessary.
-
Sure you can abuse session but I don't like that since there is the risk of exposing credentials to client side code.
-
I am currently circumventing this issue by using getSession to have access to the cookies/headers in the load method
We did something similar for a while...
-
-
kit.svelte.dev kit.svelte.dev
-
This function allows you to modify (or replace) a fetch request for an external resource that happens inside a load function that runs on the server (or during pre-rendering). For example, your load function might make a request to a public URL like https://api.yourapp.com when the user performs a client-side navigation to the respective page, but during SSR it might make sense to hit the API directly (bypassing whatever proxies and load balancers sit between it and the public internet).
-
-
www.kylehq.com www.kylehq.com
-
QueueStore
-
For me however, things get really interesting with the creation of “custom” stores. The creators of Svelte were/are obviously well aware of the power and flexibility of these stores and have provided a simply interface to adhere to. Basically, any object that implements the “subscribe” method is a store!
-
One of the (in my opinion) most useful components of the Svelte library is that of “stores”.
-
-
www.kylehq.com www.kylehq.com
-
And on any given day, developing with Svelte and its reactive nature is simply a dream to use. You can tell Svelte to track state changes on practically anything using the $: directive. And it’s quite likely that your first reactive changes will produce all the expected UI results.
-
And on any given day, developing with Svelte and its reactive nature is simply a dream to use. You can tell Svelte to track state changes on practically anything using the $: directive. And it’s quite likely that your first reactive changes will produce all the expected UI results. But as you start to rely more on UI updates based on variable or array/object changes, it’s likely that your UI will start skipping a beat and dropping values that you know explicitly to be there.
-
-
stackoverflow.com stackoverflow.com
-
Personally I think option 1 is the way to go as it doesn't allocate any memory to create a new array but rather modifies the existing array. Then the assignment just lets the compiler know that you modified the array.
-
-
svelte.dev svelte.dev
- Sep 2021
-
-
Instead of bind:this={ref}, use bind:el={ref}. this points to the wrapper component, el points to the native element
-
-
stackoverflow.com stackoverflow.com
-
Can you make Svelte create an open shadowRoot? You can then move it yourself (client-side)
-
-
github.com github.com
-
svelte-preprocess doesn't do any kind of type-checking, it just transpiles your ts into js (see it here). If you want to fail your build when a type error is found, you can use svelte-check.
-
-
-
due to the fact that the pre-processor handles sections independently this cannot reliably be done there.
-
-
www.gitmemory.com www.gitmemory.com
-
Couldn't start client Svelte
-
-
stackoverflow.com stackoverflow.com
-
"types": ["node", "svelte"
-
-
github.com github.com
-
Webpack's resolve.mainFields option determines which fields in package.json are used to resolve identifiers. If you're using Svelte components installed from npm, you should specify this option so that your app can use the original component source code, rather than consuming the already-compiled version (which is less efficient).
-
- Jul 2021
-
stackoverflow.com stackoverflow.com
-
github.com github.com
-
this happens with getClient and setClient because it is a svelte context which is only available at component initialization (construction) and cannot be in an event handler.
-
- Jun 2021
-
sveltematerialui.com sveltematerialui.com
-
Use this to build a ClassAdder component. ClassAdder components are useful for reducing the size of your bundle. If you have tons of simple components that just need to add classes/props or set a context, using ClassAdder components means there's only one "big" Svelte component in your bundle for all of these many tiny components.
-
This is useful when you need to add classes to a component, since Svelte's "class:" directives don't work on components.
-
-
github.com github.com
-
Compared to: https://github.com/beyonk-adventures/svelte-notifications
- No way to theme or add style?! Just want to increase the width from their hard-coded narrow 210px
Tags
Annotators
URL
-
-
github.com github.com
-
Compared to https://github.com/keenethics/svelte-notifications
- Nicer styles, animation
- Can't add one that stays on screen until dismissed. If timeout arg is omitted, it simply defaults to ~3 s.
- No equivalent to
removeNotificationorclearNotifications
- No equivalent to
Tags
Annotators
URL
-
-
github.com github.com
-
(load functions call handle directly, there's no intermediate network requests.)
-
-
kit.svelte.dev kit.svelte.dev
-
If you return a Promise from load, SvelteKit will delay rendering until the promise resolves.
-
should run on the same domain as any upstream API servers requiring credentials
-
When fetch runs on the server, the resulting response will be serialized and inlined into the rendered HTML. This allows the subsequent client-side load to access identical data immediately without an additional network request.
-
-
github.com github.com
-
I don't know how much workaround is it, but for now I'm using this approach:
Looks like a catch-all
api/[...route]internal endpoint that proxies to the real external API server.
-
-
-
would be different depending on whether the fetch is internal or external
-
-
github.com github.com
-
export function get(req, res) { if (req.headers.authorization) { res.writeHead(200); res.end(JSON.stringify({ message: req.headers.authorization })); } else { res.writeHead(200); res.end(JSON.stringify({ message: 'unauthorized' })); } }
-
-
-
Closing as kit will be serverless first!
-
-
-
Allows you to use sapper with an API service residing in another server. This is especially useful if your API server is written in another language
-
- May 2021
-
-
We implemented isomorphic fetching (i.e. fetching with the browser's implementation on the client and node-fetch on the server)
-
-
github.com github.com
-
if (parsed.protocol) { // external fetch response = await fetch(parsed.href, /** @type {import('node-fetch').RequestInit} */ (opts)); } else { // otherwise we're dealing with an internal fetch const resolved = resolve(request.path, parsed.pathname);
-
-
github.com github.com
-
plus authorization if it's not explicitly provided, to a fetch request that happens inside load to an internal endpoint
Tags
Annotators
URL
-
-
kit.svelte.dev kit.svelte.dev
-
This function runs on every request, for both pages and endpoints, and determines the response. It receives the request object and a function called resolve, which invokes SvelteKit's router and generates a response accordingly.
-
This allows you to modify response headers or bodies, or bypass SvelteKit entirely
-
-
github.com github.com
-
import '@sveltejs/kit/install-fetch';
-
-
github.com github.com
-
CSR asking my Python backed directly (over nginx). Basically, in my particular situation, I want to use most shorter paths for SSR or CSR cases when I have a separate API server under the same domain and nginx frontend.
-
on CSR it connects to the svelte-kit endpoint which just use a localhost connection. and to optimize this you can use unix sockets in your endpoints to connect to backend server
-
ah you are talking about a external api endpoint server? then you could use the svelte-kit endpoints as proxy handler
-
-
-
This looks cool but right now, let's say i have an external api which depends on users cookies, the cookies only gets send through internal sk endpoints while ssr even if its the same domain. Couldn't we pass the 'server' request to the serverFetch hook? I would currently have to patch package svelte kit to pass request headers to the external api or create an sk endpoint which proxies the request.
-
-
github.com github.com
Tags
Annotators
URL
-
-
github.com github.com
-
The thing that makes the client-side invocation return the same data as the server-side one is that the results of calling fetch during SSR are serialized and inlined into the page. This ensures consistency when the page hydrates, and saves network round-trips (and also means less data needs to come over the wire, since everything can get compressed using the same gzip dictionary or whatever).
-
- Mar 2021
-
www.jackfranklin.co.uk www.jackfranklin.co.uk
-
My preference here is biased by the fact that I spend everyday at work building web components, so Svelte's approach feels very familiar to slots in web components.
first sighting: That <template>/<slot> is part of HTML standard and the reason Svelte uses similar/same syntax is probably because it was trying to make it match / based on that syntax (as they did with other areas of the syntax, some of it even JS/JSX-like, but more leaning towards HTML-like) so that it's familiar and consistent across platforms.
-
The codebase for Pomodone makes more sense to me in Svelte, not React. I find it easier to navigate and work with.
-
React and Svelte are very similar in many ways, but what I've found is that in all the little ways that they are different, I prefer Svelte.
-
but I like that Svelte comes with a good CSS story out the box.
comes with a good CSS story out the box
-
I like this approach more because I can scan the code that renders the Box component and easily spot that it takes two children. If the Box took any props, they'd be within the opening <Box> tag, and they would be distinct from any children props.
-
Coming from React to Svelte this did catch me out numerous times but for me I now prefer Svelte's approach, particularly because it removes some of the boilerplate around useEffect.
-
Svelte is different in that by default most of your code is only going to run once; a console.log('foo') line in a component will only run when that component is first rendered.
-
I was pleasantly surprised by Svelte's templating; in the past I've found templating languages overwhelming and inflexible, but Svelte offers just the right amount of templating whilst enabling you to use JavaScript too.
-
-
Svelte looks pretty similar, but has two small changes that personally make the Svelte code easier to read, in my opinion:
-
What I like is that currentUser isn't a value, it's a store, and therefore you have full control over how you deal with it.
-
Talking of context, that's much closer to the approach I take with Svelte and use a writable store.
Tags
- HTML: <template>/<slot>
- annotation meta: may need new tag
- turning things around / doing it differently
- standard ways of doing things
- unfortunate defaults
- I agree
- feels natural
- intention-revealing
- Svelte: styles
- pleasant/enjoyable to use
- Svelte: slot
- Svelte
- Svelte: templates
- clarity
- opinionated
- out of the box
- opinion
- caveat
- first sighting
- difference
- finding the right balance
- library/framework should provide this (standard solution) rather than everyone having to write their own slightly different solution (even if it is easy enough to write yourself)
- important point
- making intentions clear/explicit
- comparison
- trying to doing things the same way you did in a different library/framework (learning new way of thinking about something / overcoming habits/patterns/paradigms you are accustomed to)
- Svelte vs. React
- being explicit
- Svelte: store: writable
- verbose / noisy / too much boilerplate
- Svelte: store
- observation
- reasonable defaults
- Svelte: context
- distinction
- syntax
- me too
- easy to read
- the little details/things
Annotators
URL
-
- Jan 2021
-
-
Maybe $$slots like $$props? My use case is that I'd like to wrap a slot's content in an element that applies styling that I'd like absent without the slotted content. Something like this: {#if $$slots.description} <div class="description"> <slot name="description"></slot> </div> {/if}
-
-
github.com github.com
-
allow <slot> to be part of a slot
-
But it doesn't work so I have to wrap slots in useless and interfering divs or spans like this: <Button fz="16" h="64" {...$$props}> <span slot="prepend"><slot name="prepend" /></span> <slot /> <span slot="append"><slot name="append" /></span> </Button>
It really doesn't work? I thought, from @tanhauhau's example, that it would, right?
-
I want to make some add-ons or wrappers on components e.g BigButton.svelte <script> import Button from './Button.svelte' </script> <Button fz="16" h="64" {...$$props}> <slot slot="prepend" name="prepend" /> <slot /> <slot slot="append" name="append" /> </Button>
-
Related to #1824, can do <svelte:component this={Bar}> <slot></slot> <slot name="header" slot="header"></slot> </svelte:component> <script> import Bar from './Bar.svelte'; </script> as a forwarding workaround
-
-
-
Interesting . That feature (<slot slot="..."/>) was only recently added in #4295. It wasn't primarily intended to be used that way, but I guess it's a good workaround for this issue. I'm yet to find caveats to slotting components that way, other than it's inconvenient, as opposed to <Component slot="..."/>.
-
I'm not sure I understand the point of what you're trying to do. Components inherently have no root node so there isn't just one "node slotted" that you could possibly reference. <slot slot=""> doesn't create a wrapper around your component in the DOM. It just injects your component as Svelte usually would.
-
If components gain the slot attribute, then it would be possible to implement the proposed behavior of <svelte:fragment /> by creating a component that has a default slot with out any wrappers. However, I think it's still a good idea to add <svelte:fragment /> so everyone who encounters this common use case doesn't have to come up with their own slightly different solutions.
-
Another possible syntax is {#slot bar}<Foo/>{/slot}, which would also allow a bunch of DOM nodes and components inside the slot, without them needing to be from a single component
-
-
github.com github.com
-
svelte.dev svelte.dev
-
-
Since this is a recursive component I can imagine it being tricky to oversee all the slots and props passing.
Tags
Annotators
URL
-
-
-
I am trying to implements this usecase (a generic lazy loader component which forwards slots/events to the "real" component).
-
-
github.com github.com
-
In 3.29.0 you can now use <slot slot='...'> to forward slots into a child component, without adding DOM elements.
-
Would love to see passthrough slots to create superset components, for example Table and TableWithPagination (table slots for TableWithPagination could be passed through to Table).
-
-
svelte.dev svelte.dev
-
www.youtube.com www.youtube.com
Tags
Annotators
URL
-
-
github.com github.com
-
From a community POV, Svelte Summit should probably be mentioned, the YouTube channel has most of the recordings uploaded as standalone videos now (there is a playlist here ).
Tags
Annotators
URL
-
-
svelte.dev svelte.dev
-
Fork of https://svelte.dev/repl/2b0b7837e3ba44b5aba8d7e774094bb4?version=3.19.1 that adds a console.log.
-
-
github.com github.com
-
Or just watch the value with a reactive statement instead of an event handler on the input like: $: inputValue, onInput() This is a good solution and seems to work in all cases.
-
-
github.com github.com
-
What I think is happening is that instantiating the component is immediately running the $: reactive code, which dispatches the event synchronously, before the parent component attaches the listener.
-
Thanks to that I have chance and time to properly initialise all the properties without reactive calls and I do not have to ignore these "initialising" events before proper initialisation.
-
-
-
medium.com medium.com
-
Knowing exactly what happens in your application can mean the difference between feeling in full control or experiencing deep frustration. Personally, unknowns drive me crazy, which in turn often leads to all sorts of experiments and/or debug sessions.
-
-
svelte.dev svelte.dev
-
Note that the value of canvas will be undefined until the component has mounted, so we put the logic inside the onMount lifecycle function.
Tags
Annotators
URL
-
-
svelte.dev svelte.dev
Tags
Annotators
URL
-
-
svelte.dev svelte.dev
-
github.com github.com
-
github.com github.com
-
svelte.dev svelte.dev
-
github.com github.com
-
-
If you're using webpack with svelte-loader, make sure that you add "svelte" to resolve.mainFields in your webpack config. This ensures that webpack imports the uncompiled component (src/index.html) rather than the compiled version (index.mjs) — this is more efficient.
-