Besides running contrary to the principles that lead a lot of people to Linux systems (a closed store that you can't alter...automatic updates you have no control over....run by just the one company)

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}

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.

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>

I am trying to implements this usecase (a generic lazy loader component which forwards slots/events to the "real" component).

It's more powerful to have them happen in definition order, because this lets you intercept thing in event handlers or in actions.

I wanted to use GitHub Gists which are a wonderfully low friction way of sharing code

Moreover, you can add as many use:action directives as you want to an element.

With a few lines of code we can add functionality to regular HTML elements, in a very reusable and declarative way.

the use directive takes care of the component lifecycle for us.

If it's behaviour that you can imagine needing to reuse among multiple components, or if it's something that you can imagine applying to an element inside an {#if ...} block (for example), then it probably belongs in an action. It it's something that 'belongs' to the component itself, rather than a specific element, then it's probably more of a lifecycle thing.

The use:action method seems cleaner, but aside from that, are there any underlying differences between these two methods that would make one preferred over the other in certain situations?

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!

A cleaner approach could be the use:action API.

Disk space is an issue. Resource usage is an issue. Those new packages nowadays need huge amount of storage to finally do the exact same thing as their older and lighter deb counterpart. Whatever the price of storage, it’s the opposite of a progress, it’s not optimal at all.

This is probably rare enough that you would probably make a class (e.g. .link-looking-button) that incorporates the reset styles from above and otherwise matches what you do for anchor links.

But of course, there are UX implications. For example, it can be harder to select the text, and the entire element needs fairly complex styling to create clear focus and hover states. There are also accessibility implications, like the fact that the content of the entire card is read before it is announced as a link.

The second example also opens up the possibility of including multiple links. You can’t nest links, so things get a little tricky if you need to. It’s possible though, by making the individual links set above the card-covering link with z-index.

One lesser-appreciated user-behaviour is when a user would like to choose an alternative download location. On a download link, your user can right-click -> “save link as…” and place the download directly into a folder of their choice. Handy if you want something to go directly to removable media, for example. On a download button, there’s no such option.

This raises a very important point: we can’t know every user’s reason for why they’re visiting our website, but we can use the tools made available to us to help guide them along their way. If that means storing an HTML document for use offline, we’re empowered to help make the experience as easy as possible.

Jbuilder gives you a simple DSL for declaring JSON structures that beats manipulating giant hash structures. This is particularly helpful when the generation process is fraught with conditionals and loops.

Saving form data across sessions — what do people hate more than filling out a form? Filling out a form twice!

Experiment with different states while developing — When working on an app, it’s often useful or necessary for the app to have a certain state to be able to work on particular styling and functionality, (e.g. styling a list of items and removing items requires items). Rather than recreating an app’s state on every refresh, Local Storage can persist that state, making development much more efficient and enjoyable.

A simple, fake backend for your frontend React projects — It’s often nice to add the appearance of a backend/database to your frontend portfolio projects. The extra functionality will take your app to the next level, improve the user experience and impress potential employers.

People really don't stress enough the importance of enjoying what you're programming. It aids creativity, makes you a better teammate, and makes it significantly easier to enter a state of flow. It should be considered an important factor in choosing a web development framework (or lack thereof). Kudos!

# fix a bug in one of your dependencies vim node_modules/some-package/brokenFile.js # run patch-package to create a .patch file npx patch-package some-package

Making UIs with Svelte is a pleasure. Svelte’s aesthetics feel like a warm cozy blanket on the stormy web. This impacts everything — features, documentation, syntax, semantics, performance, framework internals, npm install size, the welcoming and helpful community attitude, and its collegial open development and RFCs — it all oozes good taste. Its API is tight, powerful, and good looking — I’d point to actions and stores to support this praise, but really, the whole is what feels so good. The aesthetics of underlying technologies have a way of leaking into the end user experience.

Better contribution workflow: We will be using GitHub’s contribution tools and features, essentially moving MDN from a Wiki model to a pull request (PR) model. This is so much better for contribution, allowing for intelligent linting, mass edits, and inclusion of MDN docs in whatever workflows you want to add it to (you can edit MDN source files directly in your favorite code editor).

node-sass may be faster than dart-sass, but as of writing this dart-sass is the only library which implements the @use rule, which is strongly recommended over @import. According to the official sass-lang website:

I don't think this is what really matters at the end, since whatever is the implementation the goal should be to provide a library that people actually like to use.

Workers KV is generally good for use-cases where you need to write relatively infrequently, but read quickly and frequently. It is optimized for these high-read applications

You have 2 free member-only stories left this month.

For use$ since svelte is never going to support actions for components, i designed something that reminds React hooks that will in some ways replace this feature.

@monkeythedev can your work be used already? I would suggest not yet, i'm still doing core changes every day

But seriously, give snowpack a read to understand the benefits of leaning on standard esm imports, allowing you to avoid a bundling process entirely.

I don't need to support non-esm browsers for most projects and I really like the idea of a super light build process. By removing the complexity of configuration and the overhead of bundling, svelvet makes the development process an optimal experience for myself and hopefully others

It replaces heavier, more complex bundlers like webpack or Parcel in your development workflow.

Allowing parent layer metadata to be saved for a layer, regardless if the parent layer is in the save command, would be a huge win for those of us working on CI/remote systems. Reusing parent layers used to be ridiculously easy. It would be good if we could get some comparably easy way to do it now.

Broadly speaking, modularity is the degree to which a system's components may be separated and recombined, often with the benefit of flexibility and variety in use.

How about renaming this to something more meaningful:

I have a component, and want to let the user specify what HTML tags wrap certain text rendered by the component. So the component user can say use <b></b> or <h1></h1> etc.

You can add actions to the components with use={[Action1, [Action2, action2Props], Action3]}.

The rule is written @forward "<url>". It loads the module at the given URL just like @use, but it makes the public members of the loaded module available to users of your module as though they were defined directly in your module. Those members aren’t available in your module, though—if you want that, you’ll need to write a @use rule as well.

The file is only imported once, no matter how many times you @use it in a project.

The new @use is similar to @import. but has some notable differences:

In brief, @import is being replaced with more explicit @use and @forward rules. Over the next few years Sass @import will be deprecated, and then removed.

use: [] - An array of actions and/or action/property arrays.

Since 'using decorators' has come to mean 'smothering your code in @ symbols' it's probably no longer a great name.

The success of JSX has proved that the second curly is unnecessary. Moreover, a lot of people — particularly those who have been exposed to React — have a visceral negative reaction to double curlies, many of them assuming that it brings with it all the limitations of crusty old languages like Mustache and Handlebars, where you can't use arbitrary JavaScript in expressions.

Please raise an issue if your use case is not theoretical.

Ok, I have seen that there are lot of built-in and third party validations, but sooner or later I will face a validation rule not covered by this buffet. Can I build a custom one? Of course you can!

Library author here. I'm always fascinated by new ways people can invalidate my assumptions. I mean that in a sincerely positive way, as it results in learning.

As I said above, the intervening time matters in my use case. The value can become invalid after a while, so I want to make sure that it gets checked just before it's submitted.

This is for a time picker. If you're picking times for today, you may pick a time that is 15 minutes from now. It's valid now because it's currently in the future. If you don't touch the form for the next 20 minutes then click submit, the submission should be prevented because your selected time is now 5 minutes in the past.

Well. I also recall that people complained about this when I did it in redux-form, which resulted in a persistentSubmitErrors config parameter.

In other words, I do not want an error to appear/disappear as a user types the text that swaps it from invalid to valid.

These are fine and do not cause any issues.

Intercepting proxies are commonly used in businesses to enforce acceptable use policy, and to ease administrative overheads since no client browser configuration is required.

That is certainly a good use-case. One thing you can do is to require something other than a user-chosen string as a username, something like an email address, which should be unique. Another thing you could do, and I admit this is not user-friendly at all, to let them sign up with that user name, but send the user an email letting them know that the username is already used. It still indicates a valid username, but adds a lot of overhead to the process of enumeration.

you are granting us the right to use your User Content without the obligation to pay royalties to any third party

You or the owner of your User Content still own the copyright in User Content sent to us, but by submitting User Content via the Services, you hereby grant us an unconditional irrevocable, non-exclusive, royalty-free, fully transferable, perpetual worldwide licence to use, modify, adapt, reproduce, make derivative works of, publish and/or transmit, and/or distribute and to authorise other users of the Services and other third-parties to view, access, use, download, modify, adapt, reproduce, make derivative works of, publish and/or transmit your User Content in any format and on any platform, either now known or hereinafter invented.

Wondering how to get field state from multiple fields at once? People coming from Redux-Form might be wondering where the equivalent of Redux Form's Fields component is, as a way to get state from several fields at once. The answer is that it's not included in the library because it's so easy to write one recursively composing Field components together.

Listening for External Changes By wrapping a stateful ExternalModificationDetector component in a Field component, we can listen for changes to a field's value, and by knowing whether or not the field is active, deduce when a field's value changes due to external influences.

Looks like the problem is that debounce defaults to waiting for 0 ms ... which is completely useless!

Polyfills are great for methods like String.prototype.trim because they allow you to use the methods on String instances.

Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.

I used a self made (for the experience) rule based sytem with the Svelte use:action element directive. FI: <input .. use:valid={prop, 'mandatory'}....>

However, in function components there really isn't much need for this pattern since you can just use JS default arguments

By default all content inside template strings is escaped. This is great for strings, but not ideal if you want to insert HTML that's been returned from another function (for example: a markdown renderer). Use nanohtml/raw for to interpolate HTML directly.

ECMAScript 6th Edition (ECMA-262) introduces template literals which are intended to be used for embedding DSL in ECMAScript.

I suppose it all comes down to tooling. It should be easy to author a pattern. A set of implicit (possibly explicit) patterns to author patterns may be useful.

if we create a new branch or scope for some corner cases, we should have full features of a component without creating a new file

This seems crucial, for example for #if inside #each {#each boxes as box} {@const b = box?.a?.b} {#if b} <p>{b}</p> {/if} {/each}

but this RFC addresses a significant pain point I've had with {#each} blocks doing data visualization and graphics.

I'm suggesting there should be a way to write lifecycle related code that also responds to changing props, like how useEffect works. I think how React handles this could be a good source of inspiration.

Sometimes, you may be tempted to write that wrapper. Because all your (React or Vue or insert your reactive framework here) instincts tell you so.Resist the temptation. There is a better way. A svelter way. Introducing: the use-directive (a.k.a. “actions”).

I started Solid years ago before I thought anyone would be interested in using it. I only started promoting it because it had already achieved the goals I had set out for it.

Always fascinated to discover a use case I'd never have considered.

An action used on anchor tags to navigate around the application.

In my opinion, because Webpack was one of the first bundlers, is heavily packed with features, and has to support swathes of legacy code and legacy module systems, it can make configuring Webpack cumbersome and challenging to use. Over the years, I’ve written package managers, compilers, and bundlers, and I still find configuring Webpack to be messy and unintuitive.

But this is only a halfway decent way to clarify that this is an external dependency, because the only way to resolve a peer dependency warning is to install react from npm—there's no way to notify npm that you resolve the dependency to a browser global. So peer dependencies should be avoided in favor of external declarations. Then Rollup will take care of warning about "unresolved dependencies", even if external declarations can't express a particular version range with which your library is compatible like peer dependencies can.

Svelte will not offer a generic way to support style customizing via contextual class overrides (as we'd do it in plain HTML). Instead we'll invent something new that is entirely different. If a child component is provided and does not anticipate some contextual usage scenario (style wise) you'd need to copy it or hack around that via :global hacks.

Explicit interfaces are preferable, even if it places greater demand on library authors to design both their components and their style interfaces with these things in mind.

I think this is being rejected on grounds that are too arbitrary, and detract from what to me are the best things about Svelte -- it's fun and easy to use, and lets you write components in a way that's natural and expressive.

This has already forced me to forgo Svelte Material because I would like to add some actions to their components but I cannot and it does not make sense for them to cater to my specific use-case by baking random stuff into the library used by everyone.

The point of the feature is to not rely on the third-party author of the child component to add a prop for every action under the sun. Rather, they could just mark a recipient for actions on the component (assuming there is a viable target element), and then consumers of the library could extend the component using whatever actions they desire.

They don't need to add a prop for every action. The action itself can be passed in as a prop. <script> export let action; </script> <div use:action>whatever</div> The argument for the action can be another prop or can be part of the same prop.

Your tooltip component will have to wrap your image with a span tag or something, it can’t just add events to its children. And if you are adding multiple actions to it you will have to wrap it multiple times.

<Concern1> <Concern2> </Concern2> </Concern1>

vs.

<img use:concern1 use:concern2>

Lets not extend the framework with yet another syntax

Your LazyLoad image is now inextensible. What if you want to add a class? Perhaps the author of LazyLoad thought of that and sets className onto the <img>. But will the author consider everything? Perhaps if we get {...state} attributes.

I totally get not wanting to extend the syntax. I tried doing these things and in practice it was not easy or pretty. Actions provide a much cleaner and easier way to accomplish a certain set of functionality that would be much more difficult without it.

Why not just do something like this?

I'm still confused about the need for this, so at the expense of continuing to be that obnoxious kid at the playground, I'm going to stick my neck out again.

Devil's advocate: I'm not convinced the functionalities you list can't already be done within the JS of the component. Example: autofocus can simply be done w/ a method or oncreate.

I have created an action for form validation and its really working well

I'm just pushing on the "is this really a good idea" front

Drag and drop might be done better with hooks than components.

This can and should be done with other components, IMHO.

I'm a lot softer on this feature now - I'm starting to believe that every single use case that you would use a hook for, you could/should use a component for.

Any reason adding bind:foo to the <Outer/> element doesn't work for this case?

A function that takes the value from the input and name of the field and converts the value into the value you want stored as this field's value in the form. Common usecases include converting strings into Numbers or parsing localized dates into actual javascript Date objects.

Svelte:element as proposed here would nicely fit my use case and avoid some otherwise pretty ugly conditions I'll need to bake into Lists.svelte.

Maybe good for some cases but not a general solution for this I think.

Your solution is a very basic. The case above is more complex because using your solution you can't manipulate with fetched data outside of template and even outside {#await / } tag. So, if you need a read-only solution it's good but otherwise, it won't help you.

The language should work for developers, not the other way around.

GitHub Issues are preferred for discussion of this specification.

The code is short and simple, if you have specific needs you will probably be better off writing something custom for your application.

async function onEdit() { editing = true // enter editing mode await tick() nameEl.focus() }