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}

The extra div soup is two fold:

(this issue)

A component reserving a slot but needing to perform manipulation on its content dom reference will need to add an extra element wrapper on the receiving site (some people mention it here: #2106).

A big app will have lots of components compared to regular html elements and these need to be wrapped before being fed to a slot, every single time on the call site

I think this is very important feature to implement. Because for now we need to wrap target components by useless wrapper nodes.

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

Popper for Svelte with actions, no wrapper components or component bindings required! Other Popper libraries for Svelte (including the official @popperjs/svelte library) use a wrapper component that takes the required DOM elements as props. Not only does this require multiple bind:this, you also have to pollute your script tag with multiple DOM references. We can do better with Svelte actions!

class Session extends Map { set(id, value) { if (typeof value === 'object') value = JSON.stringify(value); sessionStorage.setItem(id, value); } get(id) { const value = sessionStorage.getItem(id); try { return JSON.parse(value); } catch (e) { return value; } } }

Original objects are never modified, but transparently wrapped by observable proxies.

Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters.

Capacitor is a framework that provides developers a coherent API set to access various features on different platforms. By doing so, it also simplifies using those features. Especially for web APIs that are hard to use or require multiple steps to set them up, Capacitor provides an easy-to-use interface.

I have created a thin wrapper around fetch() with many improvements if you are using a purely json REST API:

Embedding Svelte inside Angular is pretty easy, for the most part. I wrote a function that would take in a Svelte component and generate an Angular controller class.

This is Sass based, and therefore doesn't require Svelte components

It won't work in all use cases, but it's better than the div soup.

I run into this on almost every project and end up doing this as a workaround: :global([slot="content"]) This allows me to style that extra div in the component that contains the slots but it would be super nice to have <MyComponent slot="content"/> and eliminate that extra div

If this is getting implemented, I think I'll love to see both implemented. I can see a lot of use cases where I would like to encapsulate the component with additional wrappers and in another scenarios I would like to just use the component. Now i work around this using empty div but then at times it breaks the structure because of the div element and I'll have to add more class utilities to make it work. This will be a great addition for Svelte.

I don't like adding unnecessary divs.

// Rewrite submit function form.submit = () => { const result = originalSubmit.call(form)

Here's a proxy store I wrote to derive the value of a store nested within other stores, it plays nice with typescript and can go infinitely deep

const store = readable(machine.initialState, set => { service.subscribe(state => { if (state.changed) set(state) }) service.start() return () => { service.stop() } })

The readable store takes a function as a second argument which has its own internal set method, allowing us to wrap any api, like Xstate or Redux that has its own built in sub­scrip­tion model but with a slightly different api.

Would style .classInChild from your parent. The only drawback is that you might need an extra wrapping element.

Is there a good way to do this given the compiler won't know at build time what events are needed? Should I make a wrapper that does addEventListener myself with a bind:this? Would be nice if Svelte could handle dynamic events though.

The primary motivation for this change is to have the same behavior between dom elements and wrapper components. Class directives are extremely convenient but that convenience is lost when a section of code needs to be converted to a component.

This is especially useful for components that are a simple wrapper around a dom element.

TypeScript provides a language service which can do all the heavy lifting for us

return super(scope, &block) unless scope == :all

This is a wrapper for: skip_before_action :verify_authenticity_token

We can simply create a memoize function that takes another function and modifies it to memoize calls.

Write a wrapper script that sets the LD_LIBRARY_PATH environment variable.

Through a process called rehashing, rbenv maintains shims

Shims are lightweight executables that simply pass your command along to rbenv.

This version of Field is a thin wrapper over the official Field component, and the only Field API that this library uses/overrides is the field-level validate prop, so even if you are using this library's Field component, you will still get improvements as features are added to the React Final Form library in the future.

@angular-react/core

if the client is incapable of working with HTTP headers