{bar}

\n{/if}\n\n",[521],{"_33":251,"_251":522},"In Svelte 2, 'computed properties' use compile-time dependency tracking to derive values from state, avoiding recomputation when dependencies haven't changed. These computed properties are 'push-based' rather than 'pull-based', which can result in unnecessary work:",{"_259":460},[525],{"_33":251,"_251":526},"Dependency tracking",[528,529,530,531,532,533,534,535,536],{"_33":251,"_251":553},{"_33":251,"_251":550,"_275":551},{"_33":251,"_251":549},{"_33":251,"_251":546,"_275":547},{"_33":251,"_251":545},{"_33":251,"_251":542,"_275":543},{"_33":251,"_251":541},{"_33":251,"_251":538,"_275":539},{"_33":251,"_251":537}," as discussed above.","",[540],{"_33":483}," option can be set via ","tag",[544],{"_33":483},"ed variables. The ","export",[548],{"_33":483}," compiler option is redundant now that the contract is defined via ","props",[552],{"_33":483},"The ",[555],{"_33":251,"_251":556},"Svelte would continue to offer a custom element compile target. No real changes would be involved here, since this proposal brings 'vanilla' Svelte components in line with web components viz. property access and event handling.",{"_259":460},[559],{"_33":251,"_251":560},"Custom elements","inlineQuestion",{"_563":564,"_565":566,"_567":568,"_569":570,"_571":572},"question-id","0db190d8-f4b2-41ee-b2ad-f5a97a8c423f","question-text","We are proposing first-class TypeScript support as a key benefit. How critical is TypeScript support to your adoption or continued use of Svelte? (1 = not a factor, 5 = blocking)","question-type","rating","question-config","{\"options\":[]}","question-description","",[574],{"_33":251,"_251":575},"Editor integrations would ideally offer autocompletion and as-you-type typechecking inside the markup. This is not my area of expertise, however, so I would welcome feedback on this proposal from people who are more familiar with the TypeScript compiler API and ecosystem.",{"_466":467},[578],{"_33":251,"_251":579},"\n\n

Hello {name}!

",[581],{"_33":251,"_251":582},"An eventual goal is to be able to use TypeScript in components:",[584],{"_33":251,"_251":585},"A major advantage of this proposal over Svelte 2 is that components become far more amenable to typechecking and other forms of static analysis. Even without TypeScript, VSCode is able to offer much richer feedback now than with Svelte 2.",{"_259":460},[588],{"_33":251,"_251":589},"TypeScript",[591,592,593],{"_33":251,"_251":600},{"_33":251,"_251":595,"_275":596},{"_33":251,"_251":594},", but care should be taken to ensure that Suspense can be implemented atop this proposal without breaking changes.","implementing Suspense",[597],{"_33":278,"_254":598},{"_280":599},"https://github.com/sveltejs/svelte/issues/1736","This proposal isn't directly concerned with ",{"_259":460},[603],{"_33":251,"_251":604},"Suspense",{"_563":606,"_565":607,"_567":608,"_569":609,"_571":572},"42790bd3-2b2c-4eee-9c17-b74d3fb4f093","We're planning to schedule DOM updates asynchronously by default. Does any current Svelte code you own rely on updates being synchronous (e.g. reading layout after `set()`)?","multiple_choice","{\"options\":[{\"id\":\"0\",\"label\":\"Yes, I have code that breaks with async updates\"},{\"id\":\"1\",\"label\":\"No, sync vs async doesn't matter for my use cases\"},{\"id\":\"2\",\"label\":\"Unsure — I'd need to audit my codebase\"}]}",[611,612,613],{"_33":251,"_251":618},{"_33":251,"_251":615,"_275":616},{"_33":251,"_251":614}," to result in a synchronous update.","customElement.foo = 1",[617],{"_33":483},"Similarly, in terms of the public component API, it might be necessary for ",[620,621,622,623,624,625,626],{"_33":251,"_251":640},{"_33":251,"_251":637,"_275":638},{"_33":251,"_251":636},{"_33":251,"_251":633,"_275":634},{"_33":251,"_251":632},{"_33":251,"_251":628,"_275":629},{"_33":251,"_251":627}," after an animation frame (which would result in lag).","not",[630],{"_33":631},"italic"," callbacks have fired, ","onupdate",[635],{"_33":483}," to be reflected in the view as soon as all the ","listHeight",[639],{"_33":483},"...then you want the change to ",{"_466":467},[643],{"_33":251,"_251":644},"\n\n

the list is {listHeight}px tall:

\n\n

{item}

",[646],{"_33":251,"_251":647},"Exceptions to this rule could be made where appropriate. For example if you're tracking the height of a list...",[649,650,651,652,653,654,655,656,657],{"_33":251,"_251":674},{"_33":251,"_251":671,"_275":672},{"_33":251,"_251":670},{"_33":251,"_251":667,"_275":668},{"_33":251,"_251":666},{"_33":251,"_251":663,"_275":664},{"_33":251,"_251":662},{"_33":251,"_251":659,"_275":660},{"_33":251,"_251":658}," is no longer available, it is important that variable reassignments don't result in a sync update, but rather schedule an update (in a microtask).","set",[661],{"_33":483}," components (or those that affect stores and components together) are not batched. Now that ","across",[665],{"_33":631}," results in a single update), changes ","this.set({ a, b, c })",[669],{"_33":483}," (","within a component",[673],{"_33":631},"In addition, while it's possible to batch changes ",[676,677,678,679,680],{"_33":251,"_251":689},{"_33":251,"_251":633,"_275":687},{"_33":251,"_251":686},{"_33":251,"_251":681,"_275":682},{"_33":251,"_251":479},"time slicing",[683],{"_33":278,"_254":684},{"_280":685},"https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html"," callbacks) separately from the framework-initiated cycle of DOM writes. It also prevents us from implementing ideas like ",[688],{"_33":483},"But it also has major drawbacks. It can result in the cyclical behaviour observed above, and it provides the framework no opportunity to optimise updates by (for example) batching operations that are likely to result in DOM reads (such as transition or ",[691,692,693],{"_33":251,"_251":697},{"_33":251,"_251":659,"_275":695},{"_33":251,"_251":694}," call.",[696],{"_33":483},"This is easily understood, and if there is an error during rendering it is easy to isolate the source of the problem since there is usually a short stack trace to the offending ",{"_466":702},[700],{"_33":251,"_251":701},"app.set({ size: 'supersize' });\nconsole.log(app.refs.box.offsetWidth); // already updated","js",[704],{"_33":251,"_251":705},"One of the things that differentiates Svelte from other frameworks is that updates are synchronous. In other words:",{"_259":460},[708],{"_33":251,"_251":709},"Sync vs async rendering",{"_466":467},[712],{"_33":251,"_251":713},"\n\n\n\n\n",[715,716,717,718,719],{"_33":251,"_251":727},{"_33":251,"_251":724,"_275":725},{"_33":251,"_251":723},{"_33":251,"_251":538,"_275":721},{"_33":251,"_251":720}," element described above:",[722],{"_33":483}," directive on (🐃) the ","bind",[726],{"_33":483},"That opportunity no longer exists in this RFC. Instead we need some other way to express the concept of 'all the properties that were passed into this component'. One suggestion is to use the ",{"_466":467},[730],{"_33":251,"_251":731},"\n{#await loader() then mod}\n \n{/await}\n\n",[733],{"_33":251,"_251":734},"It's convenient to be able to pass down props from a parent to a child component without knowing what they are. In Svelte 2 we can do this — it's hacky but it works:",{"_259":460},[737],{"_33":251,"_251":738},"Spread props",[740,741,742],{"_33":251,"_251":748},{"_33":251,"_251":743,"_275":744},{"_33":251,"_251":479},"RFC 2",[745],{"_33":278,"_254":746},{"_280":747},"https://github.com/sveltejs/rfcs/pull/5","A proposal for a store replacement exists in the form of ",[750,751,752,753,754,755,756,757,758,759,760],{"_33":251,"_251":778},{"_33":251,"_251":775,"_275":776},{"_33":251,"_251":774},{"_33":251,"_251":771,"_275":772},{"_33":251,"_251":765},{"_33":251,"_251":659,"_275":769},{"_33":251,"_251":765},{"_33":251,"_251":766,"_275":767},{"_33":251,"_251":765},{"_33":251,"_251":762,"_275":763},{"_33":251,"_251":761}," interface (designed to mirror the component API) feels slightly anachronistic in light of the rest of this RFC. A major problem with the store in its current incarnation is its lack of typechecker-friendliness, and the undocumented hoops necessary to jump through to integrate with popular libraries like MobX.","fire",[764],{"_33":483},"/","on",[768],{"_33":483},[770],{"_33":483},"get",[773],{"_33":483},", we need to reconsider this approach. At the same time, the ","this",[777],{"_33":483},"Since there is no longer a ",{"_466":702},[781],{"_33":251,"_251":782},"const { foo } = this.store.get();\nthis.store.doSomething();",[784],{"_33":251,"_251":785},"The store can also be accessed programmatically:",{"_466":467},[788],{"_33":251,"_251":789},"",[791],{"_33":251,"_251":792},"Similarly, store methods can be invoked via event listeners:",{"_466":467},[795],{"_33":251,"_251":796},"

Hello {$name}!

",[798,799,800,801,802],{"_33":251,"_251":813},{"_33":251,"_251":808,"_275":809},{"_33":251,"_251":807},{"_33":251,"_251":804,"_275":805},{"_33":251,"_251":803}," syntax for referencing store properties:","$",[806],{"_33":483}," can be attached to a component, and it will be passed down to all its children. This allows components to access (and manipulate) app-level data without needing to pass props around. Svelte 2 provides a convenient ","store",[810],{"_33":278,"_254":811},{"_280":812},"https://svelte.technology/guide#state-management","A ",{"_259":460},[816],{"_33":251,"_251":817},"Store",[819,820,821],{"_33":251,"_251":826},{"_33":251,"_251":823,"_275":824},{"_33":251,"_251":822}," function from a regular component, but it turns out to be impractical for various reasons).","$render",[825],{"_33":483},"The API would stay the same as it currently is (we experimented with a method of exporting an SSR ",[828,829,830,831,832,833,834,835,836,837,838,839,840],{"_33":251,"_251":864},{"_33":251,"_251":861,"_275":862},{"_33":251,"_251":860},{"_33":251,"_251":857,"_275":858},{"_33":251,"_251":856},{"_33":251,"_251":853,"_275":854},{"_33":251,"_251":852},{"_33":251,"_251":849,"_275":850},{"_33":251,"_251":848},{"_33":251,"_251":845,"_275":846},{"_33":251,"_251":484},{"_33":251,"_251":842,"_275":843},{"_33":251,"_251":841}," would be no-ops.","afterUpdate",[844],{"_33":483},"beforeUpdate",[847],{"_33":483},", ","onMount",[851],{"_33":483}," would need to run. ","ondestroy",[855],{"_33":483}," run for server-rendered components, which also means that ","would",[859],{"_33":631}," block ","\n\n\n\n{#each things as thing}\n

{thing}

\n{/each}",[937,938,939,940,941,942,943],{"_33":251,"_251":954},{"_33":251,"_251":951,"_275":952},{"_33":251,"_251":950},{"_33":251,"_251":861,"_275":948},{"_33":251,"_251":947},{"_33":251,"_251":901,"_275":945},{"_33":251,"_251":944},":",[946],{"_33":483}," block that, unlike the one we've been using so far, runs a single time rather than upon every instantiation — ",[949],{"_33":483}," — a second ","but it requires something potentially controversial",[953],{"_33":324},"We can do better, ",[956,957,958,959,960,961,962,963,964],{"_33":251,"_251":982},{"_33":251,"_251":977,"_275":978},{"_33":251,"_251":976},{"_33":251,"_251":973,"_275":974},{"_33":251,"_251":972},{"_33":251,"_251":966,"_275":970},{"_33":251,"_251":969},{"_33":251,"_251":966,"_275":967},{"_33":251,"_251":965}," function is attached to components on both client and server, and has no well-defined behaviour; it is purely convention.","preload",[968],{"_33":483},". The ",[971],{"_33":483}," is so cumbersome, there is a special case made for ","setup",[975],{"_33":483}," requires that components have some way of declaring their data dependencies prior to rendering, and since ","Sapper",[979],{"_33":278,"_254":980},{"_280":981},"https://sapper.svelte.technology/","Since ",[984],{"_33":251,"_251":985},"This is deeply weird, and due to an oversight (that we can't correct without a breaking change) only runs on the client.",{"_466":467},[988],{"_33":251,"_251":989},"",[991,992,993],{"_33":251,"_251":997},{"_33":251,"_251":973,"_275":995},{"_33":251,"_251":994}," hook:",[996],{"_33":483},"There is a rather awkward mechanism for declaring static properties on a component constructor in Svelte 2 — the ",{"_259":460},[1000,1001,1002],{"_33":251,"_251":966,"_275":1005},{"_33":251,"_251":484},{"_33":251,"_251":973,"_275":1003},[1004],{"_33":483},[1006],{"_33":483},[1008,1009,1010,1011,1012,1013,1014],{"_33":251,"_251":1026},{"_33":251,"_251":1023,"_275":1024},{"_33":251,"_251":848},{"_33":251,"_251":1020,"_275":1021},{"_33":251,"_251":1019},{"_33":251,"_251":1016,"_275":1017},{"_33":251,"_251":1015}," would be a signal to the compiler that a property is read-only — in other words, attempting to assign to it would cause an error.","export class",[1018],{"_33":483}," or ","export function",[1022],{"_33":483},"export const",[1025],{"_33":483},"An ",{"_466":702},[1029],{"_33":251,"_251":1030},"import Peekaboo from './Peekaboo.html';\n\nconst peekaboo = new Peekaboo(...);\npeekaboo.show();",{"_466":467},[1033],{"_33":251,"_251":1034},"\n\n

\n {#if visible}\n

now you see me

\n {/if}\n

",[1036,1037,1038],{"_33":251,"_251":1043},{"_33":251,"_251":1040,"_275":1041},{"_33":251,"_251":1039},". In Svelte 2, these are lumped in with 'private' (except not really) methods. Under this proposal, custom methods are just exported variables that happen to be functions:","custom methods",[1042],{"_33":324},"In some cases, a component that is designed to be used as a standalone widget will create its own ",[1045,1046,1047,1048,1049,1050,1051,1052,1053,1054,1055,1056,1057],{"_33":251,"_251":1075},{"_33":251,"_251":766,"_275":1073},{"_33":251,"_251":848},{"_33":251,"_251":1070,"_275":1071},{"_33":251,"_251":484},{"_33":251,"_251":659,"_275":1068},{"_33":251,"_251":1067},{"_33":251,"_251":1064,"_275":1065},{"_33":251,"_251":848},{"_33":251,"_251":1061,"_275":1062},{"_33":251,"_251":484},{"_33":251,"_251":1058,"_275":1059},{"_33":251,"_251":479},"$set",[1060],{"_33":483},"$destroy",[1063],{"_33":483},"$on",[1066],{"_33":483}," become ",[1069],{"_33":483},"destroy",[1072],{"_33":483},[1074],{"_33":483},"To differentiate those built-in methods from regular properties (so that people don't need to worry about potential conflicts), ",[1077,1078,1079,1080,1081,1082,1083,1084,1085,1086,1087,1088,1089,1090,1091,1092,1093,1094,1095,1096,1097],{"_33":251,"_251":1127},{"_33":251,"_251":1124,"_275":1125},{"_33":251,"_251":1123},{"_33":251,"_251":1118,"_275":1119},{"_33":251,"_251":1117},{"_33":251,"_251":762,"_275":1115},{"_33":251,"_251":848},{"_33":251,"_251":771,"_275":1113},{"_33":251,"_251":848},{"_33":251,"_251":659,"_275":1111},{"_33":251,"_251":848},{"_33":251,"_251":766,"_275":1109},{"_33":251,"_251":484},{"_33":251,"_251":1070,"_275":1107},{"_33":251,"_251":1106},{"_33":251,"_251":766,"_275":1104},{"_33":251,"_251":484},{"_33":251,"_251":1070,"_275":1102},{"_33":251,"_251":1101},{"_33":251,"_251":659,"_275":1099},{"_33":251,"_251":1098}," for cases where someone needs to change multiple props at the top-level with a single update.",[1100],{"_33":483}," are still necessary, and we'll keep ",[1103],{"_33":483},[1105],{"_33":483}," — we no longer need the first two. ",[1108],{"_33":483},[1110],{"_33":483},[1112],{"_33":483},[1114],{"_33":483},[1116],{"_33":483}," — ","component API",[1120],{"_33":278,"_254":1121},{"_280":1122},"https://svelte.technology/guide#component-api"," that currently comprise the ","built-in methods",[1126],{"_33":324},"Of the five ",[1129],{"_33":251,"_251":1130},"This creates consistent behaviour between Svelte components that are compiled to custom elements, and those that are not, while also making it easy to understand the component's contract.",{"_466":702},[1133],{"_33":251,"_251":1134},"app.name; // world\napp.name = 'everybody'; // triggers an update synchronously",[1136],{"_33":251,"_251":1137},"Exported properties can be exposed as accessors:",{"_466":702},[1140],{"_33":251,"_251":1141},"import App from './App.html';\n\nconst app = new App({\n target: document.querySelector('body'),\n props: {\n name: 'world'\n }\n});",[1143,1144,1145,1146,1147],{"_33":251,"_251":1155},{"_33":251,"_251":1152,"_275":1153},{"_33":251,"_251":1151},{"_33":251,"_251":550,"_275":1149},{"_33":251,"_251":1148}," to match the language used elsewhere:",[1150],{"_33":483}," is renamed to ","data",[1154],{"_33":483},"Instantiating a top-level component remains the same, except that ",[1157,1158,1159,1160,1161],{"_33":251,"_251":1169},{"_33":251,"_251":775,"_275":1167},{"_33":251,"_251":1166},{"_33":251,"_251":1163,"_275":1164},{"_33":251,"_251":1162}," a component. But there needs to be a way to interact with the component from the outside world.","inside",[1165],{"_33":631}," with state and methods ",[1168],{"_33":483},"Under this proposal, there is no longer a ",{"_259":460},[1172],{"_33":251,"_251":1173},"Component API",[1175,1176,1177,1178,1179],{"_33":251,"_251":1188},{"_33":251,"_251":1185,"_275":1186},{"_33":251,"_251":1184},{"_33":251,"_251":1181,"_275":1182},{"_33":251,"_251":1180}," is called.","createEventDispatcher",[1183],{"_33":483}," is bound to the component because of when ","dispatch",[1187],{"_33":483},"As with lifecycle functions, the ",[1190],{"_33":248,"_27":1191},[1192,1193,1194,1195,1196],{"_33":251,"_251":1205},{"_33":251,"_251":1202,"_275":1203},{"_33":251,"_251":1201},{"_33":251,"_251":1198,"_275":1199},{"_33":251,"_251":1197}," instead","document.createEvent('whatever')",[1200],{"_33":483}," is unsupported in IE; legacy mode would need to use ","new CustomEvent",[1204],{"_33":483},"Note that ",[1207],{"_33":248,"_27":1208},[1209,1210,1211,1212,1213,1214,1215,1216],{"_33":251,"_251":1231},{"_33":251,"_251":1228,"_275":1229},{"_33":251,"_251":1227},{"_33":251,"_251":1224,"_275":1225},{"_33":251,"_251":1223},{"_33":251,"_251":1220,"_275":1221},{"_33":251,"_251":484},{"_33":251,"_251":1217,"_275":1218},"cancelable",[1219],{"_33":483},"bubbles",[1222],{"_33":483}," is one of the options passed to the constructor alongside things like ","detail",[1226],{"_33":483}," instead — where ","new CustomEvent(name, opts)",[1230],{"_33":483},"🐃 We could match the arguments to ",[1233,1234,1235,1236,1237,1238,1239,1240,1241,1242,1243,1244,1245],{"_33":251,"_251":1268},{"_33":251,"_251":1265,"_275":1266},{"_33":251,"_251":1264},{"_33":251,"_251":1261,"_275":1262},{"_33":251,"_251":1249},{"_33":251,"_251":1258,"_275":1259},{"_33":251,"_251":1257},{"_33":251,"_251":1254,"_275":1255},{"_33":251,"_251":1253},{"_33":251,"_251":1250,"_275":1251},{"_33":251,"_251":1249},{"_33":251,"_251":1246,"_275":1247},{"_33":251,"_251":479},"{ answer: 42 }",[1248],{"_33":483}," of ","event.detail",[1252],{"_33":483},") and an ","tock",[1256],{"_33":483}," (or ","tick",[1260],{"_33":483},"event.type",[1263],{"_33":483}," with an ","CustomEvent",[1267],{"_33":483},"This would create a ",{"_466":702},[1271],{"_33":251,"_251":1272},"import { createEventDispatcher } from 'svelte';\n\nconst dispatch = createEventDispatcher();\n\nlet i = 0;\nconst interval = setInterval(() => {\n dispatch(i++ % 2 ? 'tick' : 'tock', {\n answer: 42\n });\n}, 1000);",[1274,1275,1276],{"_33":251,"_251":1280},{"_33":251,"_251":1181,"_275":1278},{"_33":251,"_251":1277}," that would return a function for dispatching events:",[1279],{"_33":483},"The high-level proposal is to introduce a function called ",[1282,1283,1284,1285,1286,1287,1288,1289,1290],{"_33":251,"_251":1307},{"_33":251,"_251":775,"_275":1305},{"_33":251,"_251":1304},{"_33":251,"_251":1301,"_275":1302},{"_33":251,"_251":1300},{"_33":251,"_251":1265,"_275":1298},{"_33":251,"_251":1297},{"_33":251,"_251":1292,"_275":1293},{"_33":251,"_251":1291},") — this also gives us event bubbling, which avoids needing to manually propagate events.","issue here",[1294],{"_33":278,"_254":1295},{"_280":1296},"https://github.com/sveltejs/svelte/issues/1655"," is used (",[1299],{"_33":483},", which means we need to rethink events. This gives us an opportunity to align with web components, where ","this.fire",[1303],{"_33":483},", there's no more ",[1306],{"_33":483},"Since there's no more ",{"_466":467},[1310],{"_33":251,"_251":1311},"",[1313,1314,1315,1316,1317],{"_33":251,"_251":1326},{"_33":251,"_251":1323,"_275":1324},{"_33":251,"_251":1322},{"_33":251,"_251":1319,"_275":1320},{"_33":251,"_251":1318},", or declaratively in component markup:","component.on(eventName, callback)",[1321],{"_33":483},". These events can be listened to programmatically, with ","this.fire(eventName, optionalData)",[1325],{"_33":483},"Svelte 2 components can fire events with ",{"_259":460},[1329],{"_33":251,"_251":1330},"Events",{"_466":467},[1333],{"_33":251,"_251":1334},"\n\n

Hello {name}!

",[1336],{"_33":251,"_251":1337},"This is convenient and simple, and should be preserved. Under this proposal the above would be equivalent to the following — any value referenced in the markup becomes an exported variable:",{"_466":467},[1340],{"_33":251,"_251":1341},"

Hello {name}!

",[1343,1344,1345],{"_33":251,"_251":1349},{"_33":251,"_251":861,"_275":1347},{"_33":251,"_251":1346}," block:",[1348],{"_33":483},"At present it is possible to create components with no ",{"_259":460},[1352],{"_33":251,"_251":1353},"Script-less components",{"_466":467},[1356],{"_33":251,"_251":1357},"",[1359,1360,1361],{"_33":251,"_251":1365},{"_33":251,"_251":538,"_275":1363},{"_33":251,"_251":1362}," tag:",[1364],{"_33":483},"Under this proposal, these options would be expressed by a new ",{"_466":702},[1368],{"_33":251,"_251":1369},"export default {\n namespace: 'svg',\n tag: 'my-cool-thing'\n};",[1371],{"_33":251,"_251":1372},"The default export from a Svelte 2 component can include compiler options — for example declaring a namespace (for SVG components) or a tag name (for custom elements):",{"_259":460},[1375],{"_33":251,"_251":1376},"namespace/tag options",[1378,1379,1380],{"_33":251,"_251":1386},{"_33":251,"_251":1381,"_275":1382},{"_33":251,"_251":479},"below",[1383],{"_33":278,"_254":1384},{"_280":1385},"#events","The event system itself will be discussed in more detail ",[1388],{"_33":248,"_27":1389},[1390],{"_33":251,"_251":1391},"(The 🐃 emoji used throughout this document indicates a yak that needs shaving.)",{"_466":467},[1394],{"_33":251,"_251":1395},"\n\n

drag me

",[1397],{"_33":251,"_251":1398},"This doesn't translate well to Svelte 3. But we can do something better — we can use actions instead:",{"_466":467},[1401],{"_33":251,"_251":1402},"

drag me

\n\n",[1404,1405],{"_33":251,"_251":1407,"_275":1408},{"_33":251,"_251":1406}," in Svelte 2 enable you to use user-defined events in addition to built-in DOM events:","Custom events",[1409],{"_33":324},[1411,1412,1413],{"_33":251,"_251":1417},{"_33":251,"_251":1381,"_275":1414},{"_33":251,"_251":479},[1415],{"_33":278,"_254":1416},{"_280":1385},"It's not yet clear if we should keep this, or replace it entirely with event bubbling, discussed ",{"_466":467},[1420],{"_33":251,"_251":1421},"\n

...

",[1423],{"_33":251,"_251":1424},"In Svelte 2, there is a shorthand:",{},[1427],{"_33":251,"_251":1428}," e.which === 39 ? next(e) : e.which === 37 ? prev(e) : null}\">",[1430],{"_33":251,"_251":1431},"This also allows us to do fairly sophisticated things like this:",{"_466":467},[1434],{"_33":251,"_251":1435},"",[1437,1438,1439],{"_33":251,"_251":1443},{"_33":251,"_251":775,"_275":1441},{"_33":251,"_251":1440},", we can simplify things greatly by passing functions rather than their call expressions:",[1442],{"_33":483},"...and the callee must be either a method of the component, the event, or some other whitelisted thing. It's weird, inconsistent and annoying to learn. Since there are no longer any problems around ",{"_466":467},[1446],{"_33":251,"_251":1447},"",[1449],{"_33":251,"_251":1450},"Currently, inline event handlers must be call expressions...",{"_259":1457},[1453],{"_33":251,"_251":1454,"_275":1455},"on:",[1456],{"_33":483},4,[1459],{"_33":251,"_251":1460},"The same would apply to component refs.",{"_466":702},[1463],{"_33":251,"_251":1464},"import { afterUpdate } from 'svelte';\n\nconst Component = defineComponent((__update) => {\n let width;\n let height;\n let canvas;\n let ctx;\n\n afterUpdate(() => {\n if (!ctx) ctx = canvas.getContext('2d');\n draw_some_shapes(ctx);\n });\n\n return [\n () => ({ width, height }),\n props => {\n if ('width' in props) width = props.width;\n if ('height' in props) height = props.height;\n },\n refs => {\n if ('canvas' in refs) canvas = refs.canvas;\n }\n ];\n}, create_main_fragment);",[1466],{"_33":251,"_251":1467},"The example above could compile to something like the following:",[1469,1470,1471,1472,1473,1474,1475],{"_33":251,"_251":1490},{"_33":251,"_251":1485,"_275":1486},{"_33":251,"_251":1484},{"_33":251,"_251":1481,"_275":1482},{"_33":251,"_251":1480},{"_33":251,"_251":1477,"_275":1478},{"_33":251,"_251":1476}," blocks.)","each",[1479],{"_33":483}," inside ","bind:this={array[index]}",[1483],{"_33":483},", we can also do ","l-value",[1487],{"_33":278,"_254":1488},{"_280":1489},"https://en.wikipedia.org/wiki/Value_(computer_science)#lrvalue","(Since a binding can have any ",{"_466":467},[1493],{"_33":251,"_251":1494},"",[1496,1497,1498,1499,1500],{"_33":251,"_251":1508},{"_33":251,"_251":870,"_275":1506},{"_33":251,"_251":1505},{"_33":251,"_251":1502,"_275":1503},{"_33":251,"_251":1501},". Under this proposal, refs are simple variables:","this.refs.canvas",[1504],{"_33":483}," onwards) as ",[1507],{"_33":483},"In Svelte 2, that element could be accessed (from ",{"_466":467},[1511],{"_33":251,"_251":1512},"

",[1514,1515,1516,1517,1518,1519,1520,1521,1522],{"_33":251,"_251":553},{"_33":251,"_251":1534,"_275":1535},{"_33":251,"_251":1533},{"_33":251,"_251":1477,"_275":1531},{"_33":251,"_251":1530},{"_33":251,"_251":1527,"_275":1528},{"_33":251,"_251":1526},{"_33":251,"_251":1523,"_275":1524},{"_33":251,"_251":944},"bind:this={x}",[1525],{"_33":483}," with ","ref:x",[1529],{"_33":483}," blocks. We can fix both things — and reduce API surface area — by replacing ",[1532],{"_33":483}," directive is anomalous in that it cannot have a value. This relates to a very common feature request — to be able to set refs inside ","ref:",[1536],{"_33":483},{"_259":1457},[1539],{"_33":251,"_251":1534,"_275":1540},[1541],{"_33":483},[1543,1544,1545,1546,1547],{"_33":251,"_251":1553},{"_33":251,"_251":1534,"_275":1551},{"_33":251,"_251":484},{"_33":251,"_251":1454,"_275":1549},{"_33":251,"_251":1548},", discussed below.",[1550],{"_33":483},[1552],{"_33":483},"Even though this is two extra characters (we preserve the quotes because we care about syntax highlighting in non-Svelte-aware environments) it's arguably more readable and consistent. This pattern would be used across all directives, but there are particular changes that apply to ",{"_466":467},[1556],{"_33":251,"_251":1557},"\n

...

\n\n\n

...

",[1559],{"_33":251,"_251":1560},"Currently, directive values do not have curly braces as delimiters. This is an occasional source of confusion (and compiler complexity) that can be resolved by making directives more like attributes:",[1562,1563,1564,1565,1566,1567],{"_33":266,"_27":1636},{"_33":266,"_27":1624},{"_33":266,"_27":1617},{"_33":266,"_27":1592},{"_33":266,"_27":1580},{"_33":266,"_27":1568},[1569],{"_33":248,"_27":1570},[1571,1572,1573],{"_33":251,"_251":1577,"_275":1578},{"_33":251,"_251":484},{"_33":251,"_251":1574,"_275":1575},"class:[name]=[expression]",[1576],{"_33":483},"class:[name]",[1579],{"_33":483},[1581],{"_33":248,"_27":1582},[1583,1584,1585],{"_33":251,"_251":1589,"_275":1590},{"_33":251,"_251":484},{"_33":251,"_251":1586,"_275":1587},"bind:remote=[local]",[1588],{"_33":483},"bind:[name]",[1591],{"_33":483},[1593],{"_33":248,"_27":1594},[1595,1596,1597,1598,1599,1600,1601,1602],{"_33":251,"_251":1614,"_275":1615},{"_33":251,"_251":848},{"_33":251,"_251":1611,"_275":1612},{"_33":251,"_251":484},{"_33":251,"_251":1608,"_275":1609},{"_33":251,"_251":1607},{"_33":251,"_251":1604,"_275":1605},{"_33":251,"_251":1603}," etc","in:[transition]=[params]",[1606],{"_33":483},", and ","transition:[transition]",[1610],{"_33":483},"out:[transition]",[1613],{"_33":483},"in:[transition]",[1616],{"_33":483},[1618],{"_33":248,"_27":1619},[1620],{"_33":251,"_251":1621,"_275":1622},"ref:[name]",[1623],{"_33":483},[1625],{"_33":248,"_27":1626},[1627,1628,1629],{"_33":251,"_251":1633,"_275":1634},{"_33":251,"_251":484},{"_33":251,"_251":1630,"_275":1631},"use:[action]=[argument]",[1632],{"_33":483},"use:[action]",[1635],{"_33":483},[1637],{"_33":248,"_27":1638},[1639,1640,1641],{"_33":251,"_251":1645,"_275":1646},{"_33":251,"_251":484},{"_33":251,"_251":1642,"_275":1643},"on:[event]=[callExpression]",[1644],{"_33":483},"on:[event]",[1647],{"_33":483},[1649],{"_33":251,"_251":1650},"In Svelte 2 there are six different kinds of directive:",{"_259":460},[1653],{"_33":251,"_251":1654},"Directives",[1656],{"_33":251,"_251":1657},"The remainder of this section will address how existing Svelte concepts are affected by this RFC. Some things (CSS etc) are unmentioned because they are unaffected, though if items are missing please raise your voice.","horizontalRule",[1660,1661,1662,1663,1664,1665,1666,1667,1668],{"_33":251,"_251":1681},{"_33":251,"_251":842,"_275":1679},{"_33":251,"_251":1678},{"_33":251,"_251":842,"_275":1676},{"_33":251,"_251":1675},{"_33":251,"_251":842,"_275":1673},{"_33":251,"_251":1672},{"_33":251,"_251":628,"_275":1670},{"_33":251,"_251":1669}," cause the callback to run again. This would allow components to respond to layout changes, for example.",[1671],{"_33":631}," callbacks have run, instead of on the next frame) but would ",[1674],{"_33":483}," callback would result in an immediate re-render (once all ",[1677],{"_33":483}," callbacks would run after the view was updated, whether as a result of prop or state changes. Assignments in an ",[1680],{"_33":483},"Any ",[1683],{"_33":248,"_27":1684},[1685,1686,1687],{"_33":251,"_251":1205},{"_33":251,"_251":1689,"_275":1690},{"_33":251,"_251":1688},", if unused in the view, will not get the reactive treatment.","previous_temperature",[1691],{"_33":483},{"_466":467},[1694],{"_33":251,"_251":1695},"",[1697,1698,1699],{"_33":251,"_251":1703},{"_33":251,"_251":845,"_275":1701},{"_33":251,"_251":1700}," callbacks run only once per cycle. This makes infinite loops impossible:",[1702],{"_33":483},"Under this proposal, ",{"_466":702},[1706],{"_33":251,"_251":1707},"",[1709,1710,1711,1712,1713],{"_33":251,"_251":1720},{"_33":251,"_251":1717,"_275":1718},{"_33":251,"_251":484},{"_33":251,"_251":633,"_275":1715},{"_33":251,"_251":1714}," run before and after every state change. Because Svelte 2 doesn't differentiate between external props and internal state, this can easily result in confusing cyclicality:",[1716],{"_33":483},"onstate",[1719],{"_33":483},"Currently, ",[1722],{"_33":248,"_27":1723},[1724,1725,1726,1727,1728,1729,1730],{"_33":251,"_251":1740},{"_33":251,"_251":1737,"_275":1738},{"_33":251,"_251":848},{"_33":251,"_251":351,"_275":1735},{"_33":251,"_251":484},{"_33":251,"_251":1732,"_275":1733},{"_33":251,"_251":1731}," arguments, present in Svelte 2, are absent from these callbacks — I believe they are now unnecessary.","previous",[1734],{"_33":483},[1736],{"_33":483},"changed",[1739],{"_33":483},"Note that the ",{"_466":467},[1743],{"_33":251,"_251":1744},"",[1746,1747,1748,1749,1750,1751,1752,1753,1754,1755,1756,1757,1758],{"_33":251,"_251":1775},{"_33":251,"_251":849,"_275":1773},{"_33":251,"_251":1762},{"_33":251,"_251":870,"_275":1771},{"_33":251,"_251":1770},{"_33":251,"_251":845,"_275":1768},{"_33":251,"_251":1762},{"_33":251,"_251":1717,"_275":1766},{"_33":251,"_251":1765},{"_33":251,"_251":842,"_275":1763},{"_33":251,"_251":1762},{"_33":251,"_251":633,"_275":1760},{"_33":251,"_251":1759},"):",[1761],{"_33":483}," (similar to ",[1764],{"_33":483},") and ",[1767],{"_33":483},[1769],{"_33":483}," in Svelte v2), ",[1772],{"_33":483},[1774],{"_33":483},"There are three other lifecycle functions required — ",[1777],{"_33":248,"_27":1778},[1779,1780,1781,1782,1783],{"_33":251,"_251":1792},{"_33":251,"_251":1789,"_275":1790},{"_33":251,"_251":1788},{"_33":251,"_251":1785,"_275":1786},{"_33":251,"_251":1784}," a specific value is changing.","when",[1787],{"_33":631},". The payoff is that you don't need to run that code on every single state change, and it's easier to see which values in a component are subject to change, and ","const time = useCustomHook()",[1791],{"_33":483},"This might seem less ergonomic than React Hooks, whereby you can do ",{"_466":467},[1795],{"_33":251,"_251":1796},"\n\n

The time is {formatTime(time)}

",{"_466":702},[1799],{"_33":251,"_251":1800},"// helpers.js\nimport { onDestroy } from 'svelte';\n\nexport function useInterval(fn, ms) {\n const interval = setInterval(fn, ms);\n onDestroy(() => clearInterval(interval));\n fn();\n}",[1802,1803,1804],{"_33":251,"_251":553},{"_33":251,"_251":1806,"_275":1807},{"_33":251,"_251":1805}," callback is associated with the component instance because it is called during instantiation; no compiler magic is involved. Beyond that (if it is called outside instantiation, an error is thrown), there are no rules or restrictions as to when a lifecycle function is called. Reusability is therefore straightforward:","onDestroy",[1808],{"_33":483},{"_466":467},[1811],{"_33":251,"_251":1812},"\n\n

The time is {format_time(time)}

",[1814,1815,1816],{"_33":251,"_251":1820},{"_33":251,"_251":1806,"_275":1818},{"_33":251,"_251":1817}," lifecycle function (no longer called 'hooks', to avoid confusion with React Hooks which have a fundamentally different mechanism):",[1819],{"_33":483},"That setup code could include work that needs to be undone when the component is removed. For that, we import the ",[1822,1823,1824,1825,1826,1827,1828],{"_33":251,"_251":553},{"_33":251,"_251":870,"_275":1837},{"_33":251,"_251":1836},{"_33":251,"_251":1833,"_275":1834},{"_33":251,"_251":1832},{"_33":251,"_251":870,"_275":1830},{"_33":251,"_251":1829}," will be unnecessary.",[1831],{"_33":483}," the initial render, meaning there is no way (in Svelte 2) to run setup code immediately upon instantiation — something this proposal solves. There is still a use for it, as we'll see, but in many cases ","after",[1835],{"_33":631}," hook runs ",[1838],{"_33":483},[1840,1841,1842,1843,1844,1845,1846,1847,1848,1849,1850,1851,1852],{"_33":251,"_251":1870},{"_33":251,"_251":1867,"_275":1868},{"_33":251,"_251":1866},{"_33":251,"_251":1861,"_275":1862},{"_33":251,"_251":1117},{"_33":251,"_251":1717,"_275":1859},{"_33":251,"_251":848},{"_33":251,"_251":870,"_275":1857},{"_33":251,"_251":848},{"_33":251,"_251":633,"_275":1855},{"_33":251,"_251":484},{"_33":251,"_251":853,"_275":1853},{"_33":251,"_251":479},[1854],{"_33":483},[1856],{"_33":483},[1858],{"_33":483},[1860],{"_33":483},"lifecycle hooks",[1863],{"_33":278,"_254":1864},{"_280":1865},"https://svelte.technology/guide#lifecycle-hooks",". These are currently expressed in Svelte via four ","lifecycle events",[1869],{"_33":631},"Many components need to respond to ",{"_259":460},[1873],{"_33":251,"_251":1874},"Lifecycle",[1876,1877,1878],{"_33":266,"_27":1892},{"_33":266,"_27":1887},{"_33":266,"_27":1879},[1880],{"_33":248,"_27":1881},[1882,1883],{"_33":251,"_251":546,"_275":1885},{"_33":251,"_251":1884},"ed values form the component's contract with the outside world",[1886],{"_33":483},[1888],{"_33":248,"_27":1889},[1890],{"_33":251,"_251":1891},"Variable assignments trigger view updates",[1893],{"_33":248,"_27":1894},[1895],{"_33":251,"_251":1896},"The code runs once for each instantiated component",[1898,1899,1900,1901,1902],{"_33":251,"_251":1909},{"_33":251,"_251":1906,"_275":1907},{"_33":251,"_251":1905},{"_33":251,"_251":861,"_275":1903},{"_33":251,"_251":1346},[1904],{"_33":483}," for understanding the code in a Svelte component's ","3 simple rules",[1908],{"_33":324},"To summarise, there are ",[1911],{"_33":248,"_27":1912},[1913,1914,1915,1916,1917,1918,1919,1920,1921,1922,1923],{"_33":251,"_251":1943},{"_33":251,"_251":546,"_275":1941},{"_33":251,"_251":1940},{"_33":251,"_251":1173,"_275":1936},{"_33":251,"_251":1935},{"_33":251,"_251":1932,"_275":1933},{"_33":251,"_251":1931},{"_33":251,"_251":1928,"_275":1929},{"_33":251,"_251":1927},{"_33":251,"_251":1924,"_275":1925},{"_33":251,"_251":479},"value",[1926],{"_33":631}," rather than a ","contract",[1930],{"_33":631}," the value. That's why we say that we're exporting a ","write",[1934],{"_33":631}," section), but here it also allows the consumer of this module to ",[1937],{"_33":278,"_254":1938},{"_280":1939},"#component-api"," means that other consumers of this module can read the value. In a sense, that's true (as we'll learn in the ",[1942],{"_33":483},"Ordinarily in JavaScript, ",[1945,1946,1947,1948],{"_33":251,"_251":1954,"_275":1955},{"_33":251,"_251":1953},{"_33":251,"_251":1950,"_275":1951},{"_33":251,"_251":1949},". As long as it is well-communicated, it is easy to understand. Using existing syntax, rather than inventing our own, allows us to take full advantage of existing tooling and editor support.","export default",[1952],{"_33":483},", but no worse than Svelte's existing crime of abusing ","This is an abuse of syntax",[1956],{"_33":324},{"_466":702},[1959],{"_33":251,"_251":1960},"const Component = defineComponent((__update) => {\n let name = 'world';\n\n return [\n () => ({ name }),\n props => {\n if ('name' in props) name = props.name;\n }\n ];\n}, create_main_fragment);",[1962],{"_33":251,"_251":1963},"This would compile to something like the following:",{"_466":467},[1966],{"_33":251,"_251":1967},"",[1969,1970,1971,1972,1973,1974,1975],{"_33":251,"_251":1986},{"_33":251,"_251":1928,"_275":1984},{"_33":251,"_251":1983},{"_33":251,"_251":1980,"_275":1981},{"_33":251,"_251":1979},{"_33":251,"_251":1976,"_275":1977},{"_33":251,"_251":944},"world",[1978],{"_33":483},", but that it will default to ","name",[1982],{"_33":483}," with the outside world — we are saying that a consumer of this component can specify a value for ",[1985],{"_33":631},"Here, we are exporting a ",{"_466":467},[1989],{"_33":251,"_251":1990},"\n\n

Hello {name}!

",[1992],{"_33":251,"_251":1993},"There is a solution to this problem, but brace yourself — this may feel a little weird at first:",[1995,1996,1997],{"_33":251,"_251":2002},{"_33":251,"_251":1999,"_275":2000},{"_33":251,"_251":1998}," a component) and 'state' (values that are internal to the component). Svelte does not. This is a shortcoming.","to",[2001],{"_33":631},"Many frameworks (and also web components) have a conceptual distinction between 'props' (values passed ",{"_259":460},[2005],{"_33":251,"_251":2006},"Props",{"_563":2008,"_565":2009,"_567":2010,"_569":570,"_571":572},"8e745efe-45ed-4fdb-afa7-6a02510f1b8f","We're compiling assignment expressions to trigger updates. What mutation patterns in your components would NOT be covered by tracking assignments alone?","short_text",[2012],{"_33":248,"_27":2013},[2014,2015,2016,2017],{"_33":251,"_251":2023,"_275":2024},{"_33":251,"_251":2022},{"_33":251,"_251":2019,"_275":2020},{"_33":251,"_251":2018},", in the rare cases it is necessary","x",[2021],{"_33":483}," can be used to 'force' an update on ","x = x",[2025],{"_33":483},[2027,2028,2029],{"_33":251,"_251":2033},{"_33":251,"_251":628,"_275":2031},{"_33":251,"_251":2030}," trigger updates on those arrays.",[2032],{"_33":631},"Calling array methods would ",[2035,2036,2037,2038,2039,2040,2041,2042,2043,2044,2045],{"_33":251,"_251":2065},{"_33":251,"_251":2062,"_275":2063},{"_33":251,"_251":2061},{"_33":251,"_251":2051,"_275":2059},{"_33":251,"_251":2058},{"_33":251,"_251":2055,"_275":2056},{"_33":251,"_251":2054},{"_33":251,"_251":2051,"_275":2052},{"_33":251,"_251":2050},{"_33":251,"_251":2047,"_275":2048},{"_33":251,"_251":2046}," is unaffected), but these are implementation details beyond the scope of this RFC.","

{a.d}

",[2049],{"_33":483},", so that ","a",[2053],{"_33":483}," rather than ","a.b",[2057],{"_33":483},". It's possible that changes could be tracked at a more granular level (i.e. tracking ",[2060],{"_33":483}," would trigger an update on ","a.b = c",[2064],{"_33":483},"While it's good practice to use immutable data in components, Svelte should not force developers to do so. Assigning to a property of an object or array would have the same basic behaviour — ",{"_259":460},[2068],{"_33":251,"_251":2069},"Mutating objects and arrays",[2071,2072,2073,2074],{"_33":251,"_251":2082,"_275":2083},{"_33":251,"_251":2081},{"_33":251,"_251":2076,"_275":2077},{"_33":251,"_251":2075},", perhaps. In practice though, developers readily embrace 'magic' that makes their day-to-day lives easier as long as the mechanisms are ultimately easy to understand — something observed with React Hooks, Vue's reactivity system, Immer's approach to immutable data, and countless other examples. This does underscore the need for this code transformation to be well-documented and explained, however.","SvelteScript",[2078],{"_33":278,"_254":2079},{"_280":2080},"https://mobile.twitter.com/youyuxi/status/1057291776724271104"," Variable assignment does not have side-effects in JavaScript, meaning that this is arguably something else — ","This behaviour might seem surprising, even shocking at first.",[2084],{"_33":324},{"_466":702},[2087],{"_33":251,"_251":2088},"function create_main_fragment(component, ctx) {\n // ... the code that creates and maintains the view —\n // this will be relatively unaffected by this proposal\n}\n\nconst Component = defineComponent((__update) => {\n let count = 0;\n const incr = () => {\n count += 1;\n __update({ count: true });\n };\n\n return [\n // this creates the top-level `ctx` variable for `create_main_fragment`\n () => ({ count })\n ];\n}, create_main_fragment);",[2090],{"_33":251,"_251":2091},"...would be transformed to something like this:",{"_466":467},[2094],{"_33":251,"_251":2095},"\n\n",[2097,2098,2099],{"_33":251,"_251":2103},{"_33":251,"_251":861,"_275":2101},{"_33":251,"_251":2100}," block. This component...",[2102],{"_33":483},"This code transformation also applies to assignments inside the ",[2105,2106,2107,2108,2109,2110,2111,2112],{"_33":251,"_251":2123,"_275":2127},{"_33":251,"_251":2126},{"_33":251,"_251":2123,"_275":2124},{"_33":251,"_251":2122},{"_33":251,"_251":2119,"_275":2120},{"_33":251,"_251":2118},{"_33":251,"_251":2113,"_275":2114},{"_33":251,"_251":479},"discussed later",[2115],{"_33":278,"_254":2116},{"_280":2117},"#sync-vs-async-rendering"," in contrast to Svelte's current model, for reasons to be ","asynchronously",[2121],{"_33":324}," is unimportant for now, other than to note that it schedules an update ","__update",[2125],{"_33":483}," is a framework-provided function that causes the view to update, with knowledge of which values have changed. The implementation of ",[2128],{"_33":483},{"_466":702},[2131],{"_33":251,"_251":2132},"button.addEventListener('click', () => {\n count += 1;\n __update('count');\n});",[2134],{"_33":251,"_251":2135},"When clicking the button, the text inside the button should update to reflect the current value. This can be achieved by scheduling an update after every assignment expression (these are trivial to discover via AST traversal), resulting in something resembling this pseudo-code:",[2137,2138,2139,2140,2141,2142,2143,2144,2145],{"_33":251,"_251":2160},{"_33":251,"_251":2157,"_275":2158},{"_33":251,"_251":2156},{"_33":251,"_251":2153,"_275":2154},{"_33":251,"_251":2152},{"_33":251,"_251":861,"_275":2150},{"_33":251,"_251":2149},{"_33":251,"_251":2146,"_275":2147},{"_33":251,"_251":479},"once per component instance, when the instance is created",[2148],{"_33":324}," block runs ",[2151],{"_33":483},". The code inside the ","0",[2155],{"_33":483},", with an initial value of ","count",[2159],{"_33":483},"Here, we have declared a single state variable, ",[2162],{"_33":248,"_27":2163},[2164],{"_33":251,"_251":2165},"The quotes around the event handler are unnecessary as far as Svelte is concerned, but included for the sake of non-Svelte-aware syntax highlighting",{"_466":467},[2168],{"_33":251,"_251":2169},"\n\n",[2171],{"_33":251,"_251":2172},"Consider a counter component, the workhorse of examples such as these:",{"_259":260},[2175],{"_33":251,"_251":2176},"Detailed design",[2178,2179,2180,2181,2182,2183,2184],{"_33":266,"_27":2221},{"_33":266,"_27":2216},{"_33":266,"_27":2211},{"_33":266,"_27":2206},{"_33":266,"_27":2201},{"_33":266,"_27":2196},{"_33":266,"_27":2185},[2186],{"_33":248,"_27":2187},[2188,2189],{"_33":251,"_251":2195},{"_33":251,"_251":2190,"_275":2191},"time slicing and Suspense",[2192],{"_33":278,"_254":2193},{"_280":2194},"https://auth0.com/blog/time-slice-suspense-react16/","Opportunities to adopt ideas like ",[2197],{"_33":248,"_27":2198},[2199],{"_33":251,"_251":2200},"Well-defined contracts between components and their consumers",[2202],{"_33":248,"_27":2203},[2204],{"_33":251,"_251":2205},"A realistic path towards first-class TypeScript support",[2207],{"_33":248,"_27":2208},[2209],{"_33":251,"_251":2210},"Simpler, more robust lifecycles",[2212],{"_33":248,"_27":2213},[2214],{"_33":251,"_251":2215},"Smaller bundles",[2217],{"_33":248,"_27":2218},[2219],{"_33":251,"_251":2220},"Less application code",[2222],{"_33":248,"_27":2223},[2224],{"_33":251,"_251":2225},"Easier-to-grok design",[2227],{"_33":251,"_251":2228},"This proposal outlines a novel (as far as we're aware) solution, while bringing a number of significant benefits:",[2230,2231,2232,2233,2234],{"_33":251,"_251":2245},{"_33":251,"_251":2240,"_275":2241},{"_33":251,"_251":2239},{"_33":251,"_251":2236,"_275":2237},{"_33":251,"_251":2235},"?","at the language level",[2238],{"_33":631},", which means we have tools in our toolbox that are unique to Svelte. What if we could solve reactivity ","we're a compiler",[2242],{"_33":278,"_254":2243},{"_280":2244},"https://mobile.twitter.com/Rich_Harris/status/1057290365395451905","None of these are ideal. But ",[2247,2248,2249],{"_33":266,"_27":2284},{"_33":266,"_27":2269},{"_33":266,"_27":2250},[2251],{"_33":248,"_27":2252},[2253,2254,2255,2256,2257,2258],{"_33":251,"_251":2266,"_275":2267},{"_33":251,"_251":2265},{"_33":251,"_251":659,"_275":2263},{"_33":251,"_251":2262},{"_33":251,"_251":771,"_275":2260},{"_33":251,"_251":2259}," method) allowing the developer to make explicit state changes. (Those changes are fully synchronous, which is both good and bad — good because the mental model and resulting stack traces are simple, bad because it can result in layout thrashing, buggy lifecycles, and infinite loops that need to be guarded against.) This is verbose when mutating or copying objects, and puts valuable things like first-class TypeScript integration essentially out of reach.",[2261],{"_33":483}," method (and a corresponding ",[2264],{"_33":483}," provides each component with a ","Svelte",[2268],{"_33":324},[2270],{"_33":248,"_27":2271},[2272,2273,2274,2275],{"_33":251,"_251":2281,"_275":2282},{"_33":251,"_251":2280},{"_33":251,"_251":2277,"_275":2278},{"_33":251,"_251":2276}," — schedules an update. This code is pleasant to write but is not without its downsides — it can result in unpredictable behaviour as values are passed around the app, and it encourages mutation. It also involves some minor computational and memory overhead, and some gotchas when setting as-yet-unknown properties (this will be fixed in Vue 3 with proxies, but presumably at the cost of IE support).","vm.foo = 1",[2279],{"_33":483}," can track which values changed using getters and setters (accessors). In other words, your data forms the basis of a 'viewmodel', with accessors corresponding to the initial properties. Assigning to one of them — ","Vue",[2283],{"_33":324},[2285],{"_33":248,"_27":2286},[2287,2288],{"_33":251,"_251":2290,"_275":2291},{"_33":251,"_251":2289},"'s approach is to re-render the world on every state change. This necessitates the use of a virtual DOM, which in turn necessitates a virtual DOM reconciler. It is effective, but an inefficient approach for three reasons: first, the developer's code must run frequently, providing ample opportunity for 'death by a thousand paper cuts' particularly if the developer is unskilled; second, the virtual DOM itself is a short-lived object, thirdly, discovering 'what changed' via virtual DOM diffing is wasteful in the common case that the answer is 'not much'. Reasonable people can (and do) disagree about whether these inefficiences are impactful on real apps (the answer is presumably 'it depends'), but it is well known that the most reliable way to make code faster is for it to do less work, and React does a lot of work.","React",[2292],{"_33":324},[2294],{"_33":251,"_251":2295},"Reactivity is implemented in a variety of different ways (note: I am not expert in these frameworks other than Svelte, please correct any misapprehensions):",[2297],{"_33":251,"_251":2298},"UI frameworks are all, to some degree, examples of reactive programming. The notion is that your view can be thought of as a function of your state, and so when your state changes the view must, well... react.",{"_259":260},[2301],{"_33":251,"_251":2302},"The reactivity problem",{"_563":2304,"_565":2305,"_567":2010,"_569":570,"_571":572},"e6b571e0-b485-415a-ab9a-2a7bf0323974","We plan to drop the component options object (`export default { components, transitions, … }`). What tooling (linters, editors, code-generators) in your workflow depends on that structure today?",{"_563":2307,"_565":2308,"_567":608,"_569":2309,"_571":572},"0e036a84-5081-4e15-8662-78ba052ece20","The new design removes `data`, `computed`, and `helpers` as named concepts. Which of these do you currently use most heavily?","{\"options\":[{\"id\":\"0\",\"label\":\"`data()` for instance defaults\"},{\"id\":\"1\",\"label\":\"`computed` for derived values\"},{\"id\":\"2\",\"label\":\"`helpers` for template utilities\"},{\"id\":\"3\",\"label\":\"All roughly equally\"},{\"id\":\"4\",\"label\":\"I avoid one or more of these already\"}]}",[2311,2312,2313,2314,2315],{"_33":251,"_251":2323},{"_33":251,"_251":2320,"_275":2321},{"_33":251,"_251":2319},{"_33":251,"_251":1980,"_275":2317},{"_33":251,"_251":2316}," has changed.",[2318],{"_33":483},". There's no way for the view to 'know' if ","reactivity",[2322],{"_33":631},"Why can't we? Because of ",{"_466":467},[2326],{"_33":251,"_251":2327},"\n\n

Hello {capitalise(name)}!

Your name has {len()} letters in it.

",[2329],{"_33":251,"_251":2330},"There are legitimate technical and historical reasons for this design. And some people — particularly those with a background in Vue or Ractive — are familiar with it and enjoy it. But the reality is that for most of us, it sucks. It would be much nicer to do something like this:",{"_466":467},[2333],{"_33":251,"_251":2334},"

Hello {capitalise(name)}!

Your name has {len} letters in it.

\n\n",[2336,2337,2338,2339,2340,2341,2342,2343,2344,2345,2346],{"_33":251,"_251":2363},{"_33":251,"_251":861,"_275":2361},{"_33":251,"_251":2360},{"_33":251,"_251":2357,"_275":2358},{"_33":251,"_251":2356},{"_33":251,"_251":1152,"_275":2354},{"_33":251,"_251":848},{"_33":251,"_251":2351,"_275":2352},{"_33":251,"_251":1019},{"_33":251,"_251":2348,"_275":2349},{"_33":251,"_251":2347}," — three Svelte-specific concepts with overlap that many people find highly confusing:","computed",[2350],{"_33":483},"helpers",[2353],{"_33":483},[2355],{"_33":483}," to the markup, either as props passed into the component, or as ","made available",[2359],{"_33":631}," tag. Instead, values must be ",[2362],{"_33":483},"Perhaps the biggest hangup is that the markup doesn't have access to arbitrary values inside the ",{"_466":467},[2366],{"_33":251,"_251":2367},"\n\n",[2369],{"_33":251,"_251":2370},"Declaring methods is also somewhat cumbersome, and in many editor configurations leads to red squigglies since it violates the normal semantics of JavaScript:",{"_466":467},[2373],{"_33":251,"_251":2374},"

\n \n

\n\n",[2376,2377,2378],{"_33":251,"_251":2383},{"_33":251,"_251":2380,"_275":2381},{"_33":251,"_251":2379}," them, involving unfortunate boilerplate:","register",[2382],{"_33":631},"Many developers report being intrigued by Svelte, but unwilling to accommodate some of the quirks of its design. For example, using features like nested components or transitions requires that you ",{"_259":260},[2386],{"_33":251,"_251":2387},"Motivation",[2389,2390,2391],{"_33":251,"_251":2395},{"_33":251,"_251":2320,"_275":2393},{"_33":251,"_251":2392}," at the language level.",[2394],{"_33":631},"This RFC proposes a radically new component design that solves the biggest problems with Svelte in its current incarnation, resulting in smaller apps and less code to write. It does so by leveraging Svelte's unique position as a compiler to solve the problem of ",{"_259":260},[2398],{"_33":251,"_251":2399},"Summary","clerkState",{"_2402":2403},"__internal_clerk_state",{"_2404":2405,"_2406":2407,"_2408":572,"_2409":572,"_2410":2411,"_2412":2413,"_2414":2415,"_2416":-7,"_2417":2418,"_2419":-7,"_2420":-7,"_2421":2422,"_2423":-7,"_2424":-7,"_2425":-7,"_2426":-7,"_2427":-7,"_2428":2411,"_2429":2411,"_2430":2411},"__clerk_ssr_state",{"_2440":2441,"_2442":-5,"_2443":-5,"_2444":-5,"_2445":-5,"_2446":-5,"_2447":-5,"_2448":-5,"_2449":-5,"_2450":-5,"_2451":-5,"_2452":2453,"_2454":2455,"_2456":2457,"_2432":2411},"__publishableKey","pk_live_Y2xlcmsudXNlaW5rbGluZy5jb20k","__proxyUrl","__domain","__isSatellite",false,"__signInUrl","/sign-in","__signUpUrl","/sign-up","__signInForceRedirectUrl","__signUpForceRedirectUrl","/onboarding","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_2431":2411,"_2432":2411,"_2433":572,"_2434":2435,"_2436":572,"_2437":2407,"_2438":2411,"_2439":572},"__clerkJSUrl","__clerkJSVersion","__clerkUIUrl","__clerkUIVersion","__prefetchUI","__telemetryDisabled","__telemetryDebug","__unsafeDisableDevelopmentModeConsoleWarning","isSignedIn","isAuthenticated","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","tokenType","session_token","sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","getToken",["SingleFetchFallback"],"has",["SingleFetchFallback"],"debug",["SingleFetchFallback"]]

RFC: Reactive Assignments