From c74a3a30104660de78921eac72776168ef8e9ff0 Mon Sep 17 00:00:00 2001 From: Oran C Date: Fri, 21 Jan 2022 21:45:31 -0700 Subject: [PATCH] Docs: Diagram to improve clarity of svelte Store's Added Arrows diagram to improve clarity on how the events happen Purpose: As I was following this tutorial as a new user, I found it difficult to visualize the dependencies, and relationships between the files. This diagram is a attempt to add visual clarity to the stores.js section aside: here's the graph looks like to color blind people ![image](https://user-images.githubusercontent.com/29699356/150624911-a925d5ed-0675-4c86-889e-6fc73fb6f79d.png) link to editable version of the graph [here](https://arrows.app/#/import/json=eyJncmFwaCI6eyJzdHlsZSI6eyJmb250LWZhbWlseSI6InNhbnMtc2VyaWYiLCJiYWNrZ3JvdW5kLWNvbG9yIjoiI2ZmZmZmZiIsIm5vZGUtY29sb3IiOiIjZmZmZmZmIiwiYm9yZGVyLXdpZHRoIjo0LCJib3JkZXItY29sb3IiOiIjMDAwMDAwIiwicmFkaXVzIjo1MCwibm9kZS1wYWRkaW5nIjo1LCJub2RlLW1hcmdpbiI6Miwib3V0c2lkZS1wb3NpdGlvbiI6ImF1dG8iLCJub2RlLWljb24taW1hZ2UiOiIiLCJub2RlLWJhY2tncm91bmQtaW1hZ2UiOiIiLCJpY29uLXBvc2l0aW9uIjoiaW5zaWRlIiwiaWNvbi1zaXplIjo2NCwiY2FwdGlvbi1wb3NpdGlvbiI6Imluc2lkZSIsImNhcHRpb24tbWF4LXdpZHRoIjoyMDAsImNhcHRpb24tY29sb3IiOiIjMDAwMDAwIiwiY2FwdGlvbi1mb250LXNpemUiOjUwLCJjYXB0aW9uLWZvbnQtd2VpZ2h0Ijoibm9ybWFsIiwibGFiZWwtcG9zaXRpb24iOiJpbnNpZGUiLCJsYWJlbC1kaXNwbGF5IjoicGlsbCIsImxhYmVsLWNvbG9yIjoiIzAwMDAwMCIsImxhYmVsLWJhY2tncm91bmQtY29sb3IiOiIjZmZmZmZmIiwibGFiZWwtYm9yZGVyLWNvbG9yIjoiIzAwMDAwMCIsImxhYmVsLWJvcmRlci13aWR0aCI6NCwibGFiZWwtZm9udC1zaXplIjo0MCwibGFiZWwtcGFkZGluZyI6NSwibGFiZWwtbWFyZ2luIjo0LCJkaXJlY3Rpb25hbGl0eSI6ImRpcmVjdGVkIiwiZGV0YWlsLXBvc2l0aW9uIjoiaW5saW5lIiwiZGV0YWlsLW9yaWVudGF0aW9uIjoicGFyYWxsZWwiLCJhcnJvdy13aWR0aCI6NSwiYXJyb3ctY29sb3IiOiIjMDAwMDAwIiwibWFyZ2luLXN0YXJ0Ijo1LCJtYXJnaW4tZW5kIjo1LCJtYXJnaW4tcGVlciI6MjAsImF0dGFjaG1lbnQtc3RhcnQiOiJub3JtYWwiLCJhdHRhY2htZW50LWVuZCI6Im5vcm1hbCIsInJlbGF0aW9uc2hpcC1pY29uLWltYWdlIjoiIiwidHlwZS1jb2xvciI6IiMwMDAwMDAiLCJ0eXBlLWJhY2tncm91bmQtY29sb3IiOiIjZmZmZmZmIiwidHlwZS1ib3JkZXItY29sb3IiOiIjMDAwMDAwIiwidHlwZS1ib3JkZXItd2lkdGgiOjAsInR5cGUtZm9udC1zaXplIjoxNiwidHlwZS1wYWRkaW5nIjo1LCJwcm9wZXJ0eS1wb3NpdGlvbiI6Im91dHNpZGUiLCJwcm9wZXJ0eS1hbGlnbm1lbnQiOiJjb2xvbiIsInByb3BlcnR5LWNvbG9yIjoiIzAwMDAwMCIsInByb3BlcnR5LWZvbnQtc2l6ZSI6MTYsInByb3BlcnR5LWZvbnQtd2VpZ2h0Ijoibm9ybWFsIn0sIm5vZGVzIjpbeyJpZCI6Im4wIiwicG9zaXRpb24iOnsieCI6MjEuNjUyMzkyNzQyOTkzMjYsInkiOi0yNjcuNjYxNjI1ODk3ODMxNn0sImNhcHRpb24iOiJBcHAgLnN2ZWx0ZSIsInN0eWxlIjp7ImJvcmRlci13aWR0aCI6OSwiYm9yZGVyLWNvbG9yIjoiIzAwNjJiMSJ9LCJsYWJlbHMiOltdLCJwcm9wZXJ0aWVzIjp7fX0seyJpZCI6Im4xIiwicG9zaXRpb24iOnsieCI6NDg3LjA0OTY2MTQ1NzMyMTQ2LCJ5IjotMjY3LjY2MTYyNTg5NzgzMTZ9LCJjYXB0aW9uIjoic3RvcmVzLmpzIiwic3R5bGUiOnsiYm9yZGVyLXdpZHRoIjo3fSwibGFiZWxzIjpbXSwicHJvcGVydGllcyI6e319LHsiaWQiOiJuMiIsInBvc2l0aW9uIjp7IngiOjI1NC4zNTEwMjcxMDAxNTczOCwieSI6LTE3MS4yNDUzMTc5NDExNjE0M30sImNhcHRpb24iOiJEZWNyZW1lbnRlciAuc3ZlbHRlIiwic3R5bGUiOnsiYm9yZGVyLWNvbG9yIjoiIzgwODA4MCJ9LCJsYWJlbHMiOltdLCJwcm9wZXJ0aWVzIjp7fX0seyJpZCI6Im4zIiwicG9zaXRpb24iOnsieCI6MjU0LjM1MTAyNzEwMDE1NzM4LCJ5IjotMzY0LjA3NzkzMzg1NDUwMTc0fSwiY2FwdGlvbiI6IkluY3JlbWVudGVyIC5zdmVsdGUiLCJzdHlsZSI6eyJib3JkZXItY29sb3IiOiIjODA4MDgwIn0sImxhYmVscyI6W10sInByb3BlcnRpZXMiOnt9fSx7ImlkIjoibjQiLCJwb3NpdGlvbiI6eyJ4IjoyNTQuMzUxMDI3MTAwMTU3MzgsInkiOi0zNC45NjI5OTE1NDA2Njc1fSwiY2FwdGlvbiI6IlJlc2V0dGVyIC5zdmVsdGUiLCJzdHlsZSI6eyJib3JkZXItY29sb3IiOiIjODA4MDgwIn0sImxhYmVscyI6W10sInByb3BlcnRpZXMiOnt9fV0sInJlbGF0aW9uc2hpcHMiOlt7ImlkIjoibjAiLCJ0eXBlIjoiY291bnQuc3Vic2NyaWJlKCkiLCJzdHlsZSI6eyJhcnJvdy1jb2xvciI6IiMwMDYyYjEifSwicHJvcGVydGllcyI6e30sImZyb21JZCI6Im4xIiwidG9JZCI6Im4wIn0seyJpZCI6Im4xIiwidHlwZSI6InNldCgpIiwic3R5bGUiOnsiYXJyb3ctY29sb3IiOiIjNjhiYzAwIn0sInByb3BlcnRpZXMiOnt9LCJmcm9tSWQiOiJuNCIsInRvSWQiOiJuMSJ9LHsiaWQiOiJuMiIsInR5cGUiOiJ1cGRhdGUoKSIsInN0eWxlIjp7ImFycm93LWNvbG9yIjoiIzY4YmMwMCJ9LCJwcm9wZXJ0aWVzIjp7fSwiZnJvbUlkIjoibjIiLCJ0b0lkIjoibjEifSx7ImlkIjoibjMiLCJ0eXBlIjoidXBkYXRlKCkiLCJzdHlsZSI6eyJhcnJvdy1jb2xvciI6IiM2OGJjMDAifSwicHJvcGVydGllcyI6e30sImZyb21JZCI6Im4zIiwidG9JZCI6Im4xIn0seyJpZCI6Im40IiwidHlwZSI6Im9uOmNsaWNrIiwic3R5bGUiOnsiYXJyb3ctY29sb3IiOiIjZjQ0ZTNiIn0sInByb3BlcnRpZXMiOnt9LCJmcm9tSWQiOiJuMCIsInRvSWQiOiJuMyJ9LHsiaWQiOiJuNSIsInR5cGUiOiJvbjpjbGljayIsInN0eWxlIjp7ImFycm93LWNvbG9yIjoiI2Y0NGUzYiJ9LCJwcm9wZXJ0aWVzIjp7fSwiZnJvbUlkIjoibjAiLCJ0b0lkIjoibjQifSx7ImlkIjoibjYiLCJ0eXBlIjoib246Y2xpY2siLCJzdHlsZSI6eyJhcnJvdy1jb2xvciI6IiNmNDRlM2IifSwicHJvcGVydGllcyI6e30sImZyb21JZCI6Im4wIiwidG9JZCI6Im4yIn1dfSwiZGlhZ3JhbU5hbWUiOiJVbnRpdGxlZCBncmFwaCJ9) --- .../tutorial/08-stores/01-writable-stores/text.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/site/content/tutorial/08-stores/01-writable-stores/text.md b/site/content/tutorial/08-stores/01-writable-stores/text.md index 247ef86e8d..44dbc91193 100644 --- a/site/content/tutorial/08-stores/01-writable-stores/text.md +++ b/site/content/tutorial/08-stores/01-writable-stores/text.md @@ -1,19 +1,23 @@ --- title: Writable stores --- - 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. + +diagram of component hierarchy + + In Svelte, we do this with *stores*. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `count_value` in the `count.subscribe` callback. + Click the `stores.js` tab to see the definition of `count`. It's a *writable* store, which means it has `set` and `update` methods in addition to `subscribe`. Now go to the `Incrementer.svelte` tab so that we can wire up the `+` button: - ```js function increment() { count.update(n => n + 1); } + ``` Clicking the `+` button should now update the count. Do the inverse for `Decrementer.svelte`. @@ -21,7 +25,10 @@ Clicking the `+` button should now update the count. Do the inverse for `Decreme Finally, in `Resetter.svelte`, implement `reset`: ```js + function reset() { count.set(0); } ``` + +