Rich-Harris

I have a real mental blockage around this stuff. Partly because the docs could probably be a little better, partly because it's changed over the years, probably partly because I'm dumb. Whatever. I'm going to try and document how to do stuff I occasionally need to do, so I can refer to it next time.

Return value of pipe

x.pipe(y) === y; // true

x.on(someEvent, callback) === x; // true

Rich-Harris

A concept diff from Svelte 2 to 3

-A component must have a default export, but the default export is not the component
-The default export and its properties must be structured a certain way, you can't just use JavaScript
-Components, actions, animations, transitions, custom events etc must be registered, not just imported
-Components can be registered with a shorthand, because the normal way is cumbersome
-methods are attached to the prototype, and `this` is the component, even though it looks (including to linters and typecheckers) as though the `methods` object itself is the context
-Events must be method calls, not arbitrary expressions
-`event` has a special meaning in method calls, as does `this`, as does `refs`, as do `console` and other special names

Rich-Harris

I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.

But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.

Svelte is a language.

Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?

A few projects that have answered this question:

Rich-Harris

A modest proposal for a first-class destiny operator equivalent in Svelte components that's also valid JS.

Svelte 2 has a concept of computed properties, which are updated whenever their inputs change. They're powerful, if a little boilerplatey, but there's currently no place for them in Svelte 3.

This means that we have to use functions. Instead of this...

<!-- Svelte 2 -->
<h1>HELLO {NAME}!</h1>

Rich-Harris

export function observable(value) {
	const subscribers = [];

	function set(newValue) {
		if (newValue === value) return;
		value = newValue;
		subscribers.forEach(fn => fn(value));
	}

	function update(fn) {

Rich-Harris

Platform wishlist

An unconnected list of things it'd be nice to have in the platform. I may add to this over time

SVG 2

Is this ever going to happen? SVG 1.1 is really showing its age, and it feels like something browser vendors have long since stopped caring about

Cmd-F

Rich-Harris

<div on:click="set({ count: count + 1 })">
  {count} {double}
</div>

<script>
  export default {
    data() {
      return { count: 0 };
    },
    

Rich-Harris

Keybase proof

I hereby claim:

• I am rich-harris on github.
• I am rich_harris (https://keybase.io/rich_harris) on keybase.
• I have a public key ASDw2CDaovhZtM9cjuWYBXXb3jQ-KcZENxowOxUMSCMj6Qo

To claim this, I am signing this object:

Rich-Harris

echo "<button on:click='set({ count: count + 1 })'>{count}</button>" > App.html

npx svelte compile App.html --format iife --name App > App.js

echo "<div id=target></div>
<script src=App.js></script>
<script>
  new App({
    target,
    data: { count: 0 }

Rich-Harris

var hw = (function () {
	'use strict';

	function noop() {}

	function assign(tar, src) {
		for (var k in src) tar[k] = src[k];
		return tar;
	}