So while Solid's JSX and might resemble React it by no means works like React and there should be no illusions that a JSX library will just work with Solid. Afterall, there are no JSX libraries, as they all work without JSX, only HyperScript or React ones.

Unfortunately people lack the the time to invest to really understand those things

If there was a place I thought reactivity would be weak, I embraced it and I worked on it until I was happy with the results.

It was clear no one was interested in what I was working towards.

but everything they were doing started to make sense

I kept on wanting them to work like Fine-Grained reactivity, since it was much more intuitive.

Vue was always felt contrived for me.

I couldn't land on how I wanted to box primitives. Should I use a getter/setter, or function form like Knockout, or explicit get/set like MobX? These were all ugly.

Over time Adam, Surplus' creator, had less and less time to spend on the project and I decided to take my own shot.

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.

Templates are prone to unnoticed runtime errors, are hard to test, and are not easy to restructure or decompose.

In contrast, Javascript-made templates can be organised into components with nicely decomposed and DRY code that is more reusable and testable.

The $: can also be used to trigger effects.

We can run effects when some data changes using watchEffect - it takes a function that runs whenever a reactive value used inside changes.

MobX - for me personally MobX is a far better way to manage state than React Hooks. It doesn't care about the UI layer so it can be used outside the React ecosystem, and it's simple to mutate data.

Note that if you are calling reset() and not specify new initial values, you must call it with no arguments. Be careful to avoid things like promise.catch(reset) or onChange={form.reset} in React, as they will get arguments passed to them and reinitialize your form.

It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases, features are absent for a reason.

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

If a part of the content deserves its own heading, and that heading would be listed in a theoretical or actual table of contents, it should be placed in a <section>. The key exception is where the content may be syndicated; in this case, use <article> element instead.

Confidence to express ignorance is a super power. One good way I hone this skill is by saying “Nothing to add” when I have nothing to add, instead of repeating what other people said.

React hook for creating a value exactly once. useMemo doesn't give this guarantee unfortunately - https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily

Because I haven't worked with React Native, and so I'm not a specialist in it, and developing a React Native version of this package would better be done by someone being an expert in React Native.

This library exports a single React Hook, useMethods, which has all the power of useReducer but none of the ceremony that comes with actions and dispatchers.

r self-r

A Kind Word for Bullshit: The Problem of Academic Writin

The Indian government is pushing a bold proposal that would make scholarly literature accessible for free to everyone in the country

But maybe this PR should still be merged until he finds time for that?

Sorry this sat for so long!

He says that he sees the combination of long form pieces and Q&A as a new level of support. “We used to have level one, which was sending a ticket to the help desk, and it was something we could easily resolve for you. Level two was a more complex problem that maybe required an engineer or specialist from a certain team to figure out. I look at this new system as a level zero.” Before sending us a ticket, folks can search Teams. If they find a question that solves the problem, great. If they need more details, they can follow links to in-depth articles or collections that bring together Q&A and article with the same tags.“

I created a pull request to have the if (node.parentNode) conditional added to detach. It was not applied due to the desire to find the root cause of the <meta> tag manifestation of this issue.

However, IMO, having the conditional in the detach function is necessary, because there are other manifestations of this error. For example, if the DOM element in a component is removed from software outside of svelte, detach will have the same error.

IMO, the conditional needs to be added to detach to fix all manifestations of this error.

remaining: 0, callbacks: [] r: 0, // remaining outros c: [], // callbacks p: outros // parent group

Why the obfuscation of remaining to r and callbacks to c? This is fine for function-local variables but in this instance makes the code significantly harder to reason about? There is no notion of what c and r mean.

I pushed the build files & tested it in my environment so this should work as is.

I pushed a hotfix, based on v3.6.3 proposed by #2086 (comment) In package.json, under devDependencies, use: "svelte": "btakita/svelte#svelte-gh-2086-hotfix"

do I really have to do something like that in order to have my local modules working? it's quite impracticable to explain it to a team! there's nothing a little bit more straightforward?

page components can have an optional preload function that will load some data that the page depends on. This is similar to getInitialProps in Next.js or asyncData in Nuxt.js.

This dynamic is playing out during the pandemic among the many people who refuse to wear masks or practice social distancing.

Keep in mind that the values in meta are dependent on you having subscribed to them with the subscription prop.

I guess we could always add a bunch of adapter code to watch the flag and trigger a callback when it becomes true or false...

The problem I have with this approach to state and prop variables is that the difference between them is very blurry. In React you can clearly see that a prop is an input to component (because of clear function notation), and that state is something internal. In Svelte they are both just variables, with the exception that props use export keyword.

Because Svelte is a compiler, we're not bound to the peculiarities of JavaScript: we can design a component authoring experience, rather than having to fit it around the semantics of the language.

/node_modules/

Insisting on a specific implementation, rather than proposing a clear problem, suggesting a possible solution, and “not being married” to your initial preferred solution.

Modules using code that doesn’t exist in browsers such as process.env.NODE_ENV and forcing you to convert or polyfill it.

The benefit of this approach is that rather than having these defaults and fighting against them, it’s fully up to you to decide how to handle everything.

Instead, rather than trying to implement what it thinks is the best way to bundle different type of assets, it leaves that entirely up to the developer to decide.

Personally for me, this is incredibly hard to read. Regex everywhere, nested objects with different rules and configurations that are very intuitive, multiple loaders that resolve backwards, built in loaders having obscure issues that require using third party loaders in between, separation of plugins and loaders, and so on.

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.

Unfortunately, many third party libraries, even though they are written in ESM, are published to npm as CJS modules, so we still need to concatenate them.

Wow, no answers to this question. That's too bad. Did you ever find the solution?

Did you know that you can create a Svelte component and with almost no extra steps distribute- and use it like any classic old Javascript library through a global constructor (let myComponent = new MyComponent())?

So I guess what @Rich-Harris is trying to say is that (sorry, I'm just logging it here for my own benefit)

we've learned why you might want to use external but not globals: libraries. We've started to factor some of our client-side JS as libraries to share between projects. These libraries import $ from 'jquery'. However they don't want to presume how that import might be "fulfilled". In most projects it's fulfilled from a global i.e. a script loaded from a CDN. However in one project it's fulfilled from a local copy of jQuery for reasons I won't get into. So when these libraries bundle themselves for distribution, as ES6 modules, they mark 'jquery' as an external and not as a global. This leaves the import statements in the bundle. (Warning: Don't bundle as an IIFE or UMD, or Rollup will guess at fulfilling the import from a global, as @Rich-Harris mentions above.)

There are two ways of handling this with Rollup, as described by the troubleshooting link from the warning. Unfortunately, both Rollup and React recommend the wrong one.

Luckily, there is absolutely no good reason not to use strict mode for everything — so the solution to this problem is to lobby the authors of those modules to update them.

small modules allow library authors to become lazy. Why include that six-line helper function when you can do a one-line `require`?

These are all things that make your life as a library author easier.

This happens because npm makes it ridiculously easy for people to release their half-baked experiments into the wild. The only barrier to entry is the difficulty of finding an unused package name. I’m all in favour of enabling creators, but npm lowers the barriers right to the floor, with predictable results.

I think I know why: it’s because the small modules philosophy favours library authors (like Sindre) at the ultimate expense of library users.

I hope I won’t forget, but I’ll come back to you once we’ve got an idea on how to improve this Svelte API

DX: start sapper project; configure eslint; eslint say that svelt should be dep; update package.json; build fails with crypt error; try to figure what the hell; google it; come here (if you have luck); revert package.json; add ignore error to eslint; Maybe we should offer better solution for this.

When the message say function was called outside component initialization first will look at my code and last at my configuration.

GitHub issues aren't the right place for support questions like this. Please ask on StackOverflow or in our Discord chat room.

The recommended solution for onMount is the same as for useEffect — place an async function inside the handler

(Note that you're responsible for handling any race conditions that arise as a result of the component being destroyed before the promise resolves, though assigning state inside a destroyed component is harmless.)

Most simple example: <script> import ChildComponent from './Child.svelte'; </script> <style> .class-to-add { background-color: tomato; } </style> <ChildComponent class="class-to-add" /> ...compiles to CSS without the class-to-add declaration, as svelte currently does not recognize the class name as being used. I'd expect class-to-add is bundled with all nested style declarations class-to-add is passed to ChildComponent as class-to-add svelte-HASH This looks like a bug / missing feature to me.

Also Svelte is so great because developer do not need to worry about class names conflict, except of passing (global) classes to component (sic!).

I wrote hundreds of Rect components and what I learned is that Componets should be able to be styled by developer who is using it.

Just throwing in <div class="{$$props.class || ''} otherChildClass"></div> seems the easiest, and it'll avoid undefined classes. I feel like many aren't noticing the undefined values getting inserted in their classes.

color: red; //doesn't apply this rule, because scoping doesn't extend to children

Say I want to style this javascript routing anchor tag on various pages (some may be buttons, plain links, images) it makes it incredibly difficult. Eg:

TBH It is a bit disheartening to see this issue closed when all proposed solutions do not sufficiently solve the issue at hand, I really like svelte but if this is how feature requests are handled I am probably not going to use it in the future.

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

Having to wrap everything in a selector :global(child) { } is hacky

I think instead, there would need to be some special way to make the distinction of what is a slot attribute and what is a slot prop to be consumed with let:. Maybe a new directive like <slot attr:class="abc"/>?

I can't add special props and keywords to every single component I have and will ever create for this to work.

There are work arounds, but nothing clean. I just feel like this should be functionality that should be part of the slot feature.

Explicitly exposing any attributes that might get overridden by a parent seems impractical to me.

feel like there needs to be an easy way to style sub-components without their cooperation

There's no way to change style incapsulation method without patching the compiler, and this means maintaing a fork, which is not desirable.

The problem with working around the current limitations of Svelte style (:global, svelte:head, external styles or various wild card selectors) is that the API is uglier, bigger, harder to explain AND it loses one of the best features of Svelte IMO - contextual style encapsulation. I can understand that CSS classes are a bit uncontrollable, but this type of blocking will just push developers to work around it and create worse solutions.

There is a good amount of properties that should mostly be applied from a parent's point of view. We're talking stuff like grid-area in grid layouts, margin and flex in flex layouts. Even properties like position and and the top/right/left/bottom following it in some cases.

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.

If you want this control then wrap them in a DOM node that the parent controls. If you want to pass in values then use props and if you want to pass in values from higher up the tree, the new style RFC may be able to help.

new style RFC

This allows passing classes to child components with svelte-{hash} through the class prop and prevents removing such classes from css.

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.

Web developers are well aware of the mess you can get into with global CSS, and the action of writing <Child class="foo"/> and <div class={_class}>` (or similar) in the child component is an explicit indication that, while taking advantage of all the greatness of style encapsulation by default, in this case you have decided that you want a very specific and controlled "leak", of one class, from one component instance to one component instance.

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

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.

For my simple tooltip example, I could create a TooltipHitbox component with a <slot/> inside a <div use:myTooltip={tooltipProp}> and then wrap MatButton instances with that component.

I think Svelte's approach where it replaces component instances with the component markup is vastly superior to Angular and the other frameworks. It gives the developer more control over what the DOM structure looks like at runtime—which means better performance and fewer CSS headaches, and also allows the developer to create very powerful recursive components.

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.

<LazyLoad component="img" data-src="giant-photo.jpg" class="my-cool-image" />

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.

Actions aren't necessary, otherwise they would have been implemented from the start. But they do allow for easier code-reuse and better shared libraries without exploding/complicating the ecosystem.

You'll have to create a new component that brings in the functionality of both. TooltipButton, TooltipLink, Link, and TooltipRoutedLink. We're starting to get a lot of components to handle a bit of added functionality.

For the tooltip example, if you had a whole bunch of tooltips on different elements, it would be annoying to have different event listeners and "should it be shown" variables for each one.

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

If this was tied into Svelte's flow with hooks this would not be necessary since it would know when it was being removed from the DOM.

You must: reference each element you are extending using refs or an id add code in your oncreate and ondestroy for each element you are extending, which could become quite a lot if you have a lot of elements needing extension (anchors, form inputs, etc.)

This is where hooks/behaviors are a good idea. They clean up your component code a lot. Also, it helps a ton since you don't get create/destroy events for elements that are inside {{#if}} and {{#each}}. That could become very burdensome to try and add/remove functionality with elements as they are added/removed within a component.

I would be willing to take a stab at it if you think it would be a task within reach.

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

the ability to pass around element names as strings in place of components

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.

Perhaps at that point we're better off settling on a way to pass components through as parameters? <!-- App.html --> <Outer contents={Inner}/> <!-- Outer.html --> <div> <div>Something</div> <[contents] foo='bar'/> </div>

But some sort of official way to do that in the language would make this nicer - and would mean I would have to worry less about destroying components when their parent is destroyed, which I'm certainly not being vigilant about in my code.

I would hope for it to come with React-like behavior where I could pass in a string (like div or a) and have it show up as a normal div/a element when the child component used it.

The more I think about this, the more I think that maybe React already has the right solution to this particular issue, and we're tying ourselves in knots trying to avoid unnecessary re-rendering. Basically, this JSX... <Foo {...a} b={1} {...c} d={2}/> ...translates to this JS: React.createElement(Foo, _extends({}, a, { b: 1 }, c, { d: 2 })); If we did the same thing (i.e. bail out of the optimisation allowed by knowing the attribute names ahead of time), our lives would get a lot simpler, and the performance characteristics would be pretty similar in all but somewhat contrived scenarios, I think. (It'll still be faster than React, anyway!)

Also, I'm starting to wonder if maybe it's okay to have multiple spreads? If the alternative to <Foo {...a} {...b} {...c} d={42}> is that people will write <Foo {...Object.assign({}, a, b, c)} d={42}> anyway, then do we gain anything with the constraint?

I'll work on a preliminary PR (which I expect will need some love from maintainers, sorry!)

The lack of spread continues to be a big pain for me, adding lots of difficult-to-maintain cruft in my components. Having to maintain a list of all possible attributes that I might ever need to pass through a component is causing me a lot of friction in my most composable components.

No worries, I was just thinking that this issue should probably get necro'd back to open.

No, this is about using a string to create an element of that tag name.

Use case: Wrapper components that need to render an element (e.g. because they attach event listeners). You'd probably use a <div> there by default but there may be places where this is not desirable for semantic reasons (e.g. in lists).

{#each section as {tag, is_self_closing, props, content}} {#if is_self_closing} <{tag} {...props} /> {:else} <{tag} {...props}>{content}</{tag}> {/if}

const components = { Label, Tree, Menu };

Note that Array.entries() returns an iterator, which is what allows it to work in the for-of loop; don't confuse this with Object.entries(), which returns an array of key-value pairs.

The value of dotAll is a Boolean and true if the "s" flag was used; otherwise, false. The "s" flag indicates that the dot special character (".") should additionally match the following line terminator ("newline") characters in a string, which it would not match otherwise: U+000A LINE FEED (LF) ("\n") U+000D CARRIAGE RETURN (CR) ("\r") U+2028 LINE SEPARATOR U+2029 PARAGRAPH SEPARATOR This effectively means the dot will match any character on the Unicode Basic Multilingual Plane (BMP). To allow it to match astral characters, the "u" (unicode) flag should be used. Using both flags in conjunction allows the dot to match any Unicode character, without exceptions.

Part of the functionality that is returned are event handlers. I'd like to avoid needing to manually copy the events over one by one so the hook implementation details are hidden.

The feature is highly likely to be implemented, the API and implementation are the only real topics of discussion right now.