Home Explore Help
Sign In
core
/
pwa
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: main
Branches Tags
pwa
/
docs
/
states.html

states.html 54 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="author" content="Maxence Charriere">
    6. 

  6. <meta content="Documentation about how to set and observe states." name="description">
    7. 

  7. <meta name="keywords" content="go-app, go, golang, app, pwa, progressive web app, webassembly, web assembly, webapp, web, gui, ui, user interface, graphical user interface, frontend, opensource, open source, github">
    8. 

  8. <meta name="theme-color" content="#2e343a">
    9. 

  9. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
    10. 

  10. <meta content="http://127.0.0.1:60452/states" property="og:url">
    11. 

  11. <meta content="State Management" property="og:title">
    12. 

  12. <meta property="og:description" content="Documentation about how to set and observe states.">
    13. 

  13. <meta property="og:type" content="website">
    14. 

  14. <meta property="og:image" content="https://go-app.dev/web/images/go-app.png">
    15. 

  15. <title>State Management</title>
    16. 

  16. <link type="text/css" rel="preload" href="/app.css" as="style">
    17. 

  17. <link as="style" type="text/css" rel="preload" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap">
    18. 

  18. <link type="text/css" rel="preload" href="/web/css/prism.css" as="style">
    19. 

  19. <link as="style" type="text/css" rel="preload" href="/web/css/docs.css">
    20. 

  20. <link rel="icon" href="https://raw.githubusercontent.com/maxence-charriere/go-app/master/docs/web/icon.svg">
    21. 

  21. <link rel="apple-touch-icon" href="/web/icon.png">
    22. 

  22. <link href="/manifest.webmanifest" rel="manifest">
    23. 

  23. <link type="text/css" href="/app.css" rel="stylesheet">
    24. 

  24. <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap">
    25. 

  25. <link rel="stylesheet" type="text/css" href="/web/css/prism.css">
    26. 

  26. <link type="text/css" href="/web/css/docs.css" rel="stylesheet">
    27. 

  27. <script defer src="/wasm_exec.js"></script>
    28. 

  28. <script defer src="/app.js"></script>
    29. 

  29. <script src="/web/js/prism.js" defer></script>
    30. 

  30. <script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1013306768105236" crossorigin="anonymous" async></script>
    31. 

  31. <!-- Global site tag (gtag.js) - Google Analytics -->
    32. 

  32. 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-SW4FQEM9VM"></script>
    33. 

  33. 	<script>
    34. 

  34. 	  window.dataLayer = window.dataLayer || [];
    35. 

  35. 	  function gtag(){dataLayer.push(arguments);}
    36. 

  36. 	  gtag('js', new Date());
    37. 

  37. 	
    38. 

  38. 	  gtag('config', 'G-SW4FQEM9VM', {'send_page_view': false});
    39. 

  39. 	</script>
    40. 

  40. </head>
    41. 

  41. <body>
    42. 

  42. <div data-goapp-ui="shell" class="fill background">
    43. 

  43. <div id="goapp-shell-1f618216-b470-4951-96ca-8ab371e8377b" style="display:flex;width:100%;height:100%;overflow:hidden;">
    44. 

  44. <div style="position:relative;display:none;flex-shrink:0;flex-basis:270px;overflow:hidden;"><div class="menu fill" data-goapp-ui="scroll"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
    45. 

  45. <div style="width:calc(100% - 24px);padding:0 12px;height:72px;"><div data-goapp="Stack" class="fill" style="display:flex;justify-content:flex-start;align-items:center;"><header><a class="heading app-title" href="/">Go-App</a></header></div></div>
    46. 

  46. <div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><nav>
    47. 

  47. <div class="separator"></div>
    48. 

  48. <a class="link heading fit unselectable" title href="/"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    49. 

  49. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    50. 

  50.     	<path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
    51. 

  51. 	</svg></div>
    52. 

  52. <div>Home</div>
    53. 

  53. </div></a>
    54. 

  54. <a class="link heading fit unselectable" title href="/getting-started"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    55. 

  55. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    56. 

  56. 		<path fill="currentColor" d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" />
    57. 

  57. 	</svg></div>
    58. 

  58. <div>Getting Started</div>
    59. 

  59. </div></a>
    60. 

  60. <a class="link heading fit unselectable" title href="/architecture"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    61. 

  61. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    62. 

  62. 		<path fill="currentColor" d="M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z" />
    63. 

  63. 	</svg></div>
    64. 

  64. <div>Architecture</div>
    65. 

  65. </div></a>
    66. 

  66. <a class="link heading fit unselectable" title href="/reference"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    67. 

  67. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg width="24px" height="24px" viewBox="0 0 207 78" xmlns="http://www.w3.org/2000/svg">
    68. 

  68. 		<g fill="currentColor" fill-rule="evenodd">
    69. 

  69. 			<path d="m16.2 24.1c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h35.7c.4 0 .5.3.3.6l-1.7 2.6c-.2.3-.7.6-1 .6z"/>
    70. 

  70. 			<path d="m1.1 33.3c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h45.6c.4 0 .6.3.5.6l-.8 2.4c-.1.4-.5.6-.9.6z"/>
    71. 

  71. 			<path d="m25.3 42.5c-.4 0-.5-.3-.3-.6l1.4-2.5c.2-.3.6-.6 1-.6h20c.4 0 .6.3.6.7l-.2 2.4c0 .4-.4.7-.7.7z"/>
    72. 

  72. 			<g transform="translate(55)">
    73. 

  73. 				<path d="m74.1 22.3c-6.3 1.6-10.6 2.8-16.8 4.4-1.5.4-1.6.5-2.9-1-1.5-1.7-2.6-2.8-4.7-3.8-6.3-3.1-12.4-2.2-18.1 1.5-6.8 4.4-10.3 10.9-10.2 19 .1 8 5.6 14.6 13.5 15.7 6.8.9 12.5-1.5 17-6.6.9-1.1 1.7-2.3 2.7-3.7-3.6 0-8.1 0-19.3 0-2.1 0-2.6-1.3-1.9-3 1.3-3.1 3.7-8.3 5.1-10.9.3-.6 1-1.6 2.5-1.6h36.4c-.2 2.7-.2 5.4-.6 8.1-1.1 7.2-3.8 13.8-8.2 19.6-7.2 9.5-16.6 15.4-28.5 17-9.8 1.3-18.9-.6-26.9-6.6-7.4-5.6-11.6-13-12.7-22.2-1.3-10.9 1.9-20.7 8.5-29.3 7.1-9.3 16.5-15.2 28-17.3 9.4-1.7 18.4-.6 26.5 4.9 5.3 3.5 9.1 8.3 11.6 14.1.6.9.2 1.4-1 1.7z"/>
    74. 

  74. 				<path d="m107.2 77.6c-9.1-.2-17.4-2.8-24.4-8.8-5.9-5.1-9.6-11.6-10.8-19.3-1.8-11.3 1.3-21.3 8.1-30.2 7.3-9.6 16.1-14.6 28-16.7 10.2-1.8 19.8-.8 28.5 5.1 7.9 5.4 12.8 12.7 14.1 22.3 1.7 13.5-2.2 24.5-11.5 33.9-6.6 6.7-14.7 10.9-24 12.8-2.7.5-5.4.6-8 .9zm23.8-40.4c-.1-1.3-.1-2.3-.3-3.3-1.8-9.9-10.9-15.5-20.4-13.3-9.3 2.1-15.3 8-17.5 17.4-1.8 7.8 2 15.7 9.2 18.9 5.5 2.4 11 2.1 16.3-.6 7.9-4.1 12.2-10.5 12.7-19.1z" fill-rule="nonzero"/>
    75. 

  75. 			</g>
    76. 

  76. 		</g>
    77. 

  77. 	</svg></div>
    78. 

  78. <div>Reference</div>
    79. 

  79. </div></a>
    80. 

  80. <div class="separator"></div>
    81. 

  81. <a class="link heading fit unselectable" title href="/components"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    82. 

  82. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    83. 

  83. 		<path fill="currentColor" d="M10,5V11H21V5M16,18H21V12H16M4,18H9V5H4M10,18H15V12H10V18Z" />
    84. 

  84. 	</svg></div>
    85. 

  85. <div>Components</div>
    86. 

  86. </div></a>
    87. 

  87. <a class="link heading fit unselectable" title href="/declarative-syntax"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    88. 

  88. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    89. 

  89. 		<path fill="currentColor" d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
    90. 

  90. 	</svg></div>
    91. 

  91. <div>Declarative Syntax</div>
    92. 

  92. </div></a>
    93. 

  93. <a href="/routing" class="link heading fit unselectable" title><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    94. 

  94. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    95. 

  95. 		<path fill="currentColor" d="M11,10H5L3,8L5,6H11V3L12,2L13,3V4H19L21,6L19,8H13V10H19L21,12L19,14H13V20A2,2 0 0,1 15,22H9A2,2 0 0,1 11,20V10Z" />
    96. 

  96. 	</svg></div>
    97. 

  97. <div>Routing</div>
    98. 

  98. </div></a>
    99. 

  99. <a title href="/static-resources" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    100. 

  100. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    101. 

  101.     	<path fill="currentColor" d="M7,15L11.5,9L15,13.5L17.5,10.5L21,15M22,4H14L12,2H6A2,2 0 0,0 4,4V16A2,2 0 0,0 6,18H22A2,2 0 0,0 24,16V6A2,2 0 0,0 22,4M2,6H0V11H0V20A2,2 0 0,0 2,22H20V20H2V6Z" />
    102. 

  102. 	</svg></div>
    103. 

  103. <div>Images and Static Resources</div>
    104. 

  104. </div></a>
    105. 

  105. <a title href="/js" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    106. 

  106. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    107. 

  107. 		<path fill="currentColor" d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" />
    108. 

  108. 	</svg></div>
    109. 

  109. <div>JavaScript Interoperability</div>
    110. 

  110. </div></a>
    111. 

  111. <a class="link heading fit unselectable" title href="/concurrency"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    112. 

  112. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    113. 

  113. 		<path fill="currentColor" d="M16,4.5V7H5V9H16V11.5L19.5,8M16,12.5V15H5V17H16V19.5L19.5,16" />
    114. 

  114. 	</svg></div>
    115. 

  115. <div>Concurrency</div>
    116. 

  116. </div></a>
    117. 

  117. <a class="link heading fit unselectable" title href="/seo"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    118. 

  118. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    119. 

  119.     	<path fill="currentColor" d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,4.5L8.95,4.53C8.71,5.05 8.34,5.93 8.07,7H10.93C10.66,5.93 10.29,5.05 10.05,4.53C9.87,4.5 9.69,4.5 9.5,4.5M13.83,7C13.24,5.97 12.29,5.17 11.15,4.78C11.39,5.31 11.7,6.08 11.93,7H13.83M5.17,7H7.07C7.3,6.08 7.61,5.31 7.85,4.78C6.71,5.17 5.76,5.97 5.17,7M4.5,9.5C4.5,10 4.58,10.53 4.73,11H6.87L6.75,9.5L6.87,8H4.73C4.58,8.47 4.5,9 4.5,9.5M14.27,11C14.42,10.53 14.5,10 14.5,9.5C14.5,9 14.42,8.47 14.27,8H12.13C12.21,8.5 12.25,9 12.25,9.5C12.25,10 12.21,10.5 12.13,11H14.27M7.87,8L7.75,9.5L7.87,11H11.13C11.21,10.5 11.25,10 11.25,9.5C11.25,9 11.21,8.5 11.13,8H7.87M9.5,14.5C9.68,14.5 9.86,14.5 10.03,14.47C10.28,13.95 10.66,13.07 10.93,12H8.07C8.34,13.07 8.72,13.95 8.97,14.47L9.5,14.5M13.83,12H11.93C11.7,12.92 11.39,13.69 11.15,14.22C12.29,13.83 13.24,13.03 13.83,12M5.17,12C5.76,13.03 6.71,13.83 7.85,14.22C7.61,13.69 7.3,12.92 7.07,12H5.17Z" />
    120. 

  120. 	</svg></div>
    121. 

  121. <div>SEO</div>
    122. 

  122. </div></a>
    123. 

  123. <a title href="/lifecycle" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    124. 

  124. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    125. 

  125.     	<path fill="currentColor" d="M23,12L19,16V13H6.83C6.42,14.17 5.31,15 4,15A3,3 0 0,1 1,12A3,3 0 0,1 4,9C5.31,9 6.42,9.83 6.83,11H19V8L23,12Z" />
    126. 

  126. 	</svg></div>
    127. 

  127. <div>Lifecycle and Updates</div>
    128. 

  128. </div></a>
    129. 

  129. <a class="link heading fit unselectable" title href="/install"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    130. 

  130. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    131. 

  131. 		<path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
    132. 

  132. 	</svg></div>
    133. 

  133. <div>Install</div>
    134. 

  134. </div></a>
    135. 

  135. <a title href="/testing" class="link heading fit unselectable"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    136. 

  136. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    137. 

  137.     	<path fill="currentColor" d="M7,2V4H8V18A4,4 0 0,0 12,22A4,4 0 0,0 16,18V4H17V2H7M11,16C10.4,16 10,15.6 10,15C10,14.4 10.4,14 11,14C11.6,14 12,14.4 12,15C12,15.6 11.6,16 11,16M13,12C12.4,12 12,11.6 12,11C12,10.4 12.4,10 13,10C13.6,10 14,10.4 14,11C14,11.6 13.6,12 13,12M14,7H10V4H14V7Z" />
    138. 

  138. 	</svg></div>
    139. 

  139. <div>Testing</div>
    140. 

  140. </div></a>
    141. 

  141. <a href="/actions" class="link heading fit unselectable" title><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    142. 

  142. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    143. 

  143. 		<path fill="currentColor" d="M16,4L9,8.04V15.96L16,20L23,15.96V8.04M16,6.31L19.8,8.5L16,10.69L12.21,8.5M0,7V9H7V7M11,10.11L15,12.42V17.11L11,14.81M21,10.11V14.81L17,17.11V12.42M2,11V13H7V11M4,15V17H7V15" />
    144. 

  144. 	</svg></div>
    145. 

  145. <div>Actions</div>
    146. 

  146. </div></a>
    147. 

  147. <a class="link heading fit unselectable" title href="/states"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    148. 

  148. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    149. 

  149.     	<path fill="currentColor" d="M4 12V9C4 11.2 7.6 13 12 13S20 11.2 20 9V12C20 12.5 19.8 12.9 19.5 13.4C18.7 13.1 17.9 13 17 13C14.5 13 12.1 14.1 10.6 15.9C6.8 15.6 4 14 4 12M12 11C16.4 11 20 9.2 20 7S16.4 3 12 3 4 4.8 4 7 7.6 11 12 11M9.1 19.7L8.8 19L9.1 18.3C9.2 18.1 9.3 18 9.3 17.8C6.2 17.2 4 15.8 4 14V17C4 18.8 6.4 20.3 9.7 20.8C9.5 20.5 9.3 20.1 9.1 19.7M17 18C16.4 18 16 18.4 16 19S16.4 20 17 20 18 19.6 18 19 17.6 18 17 18M23 19C22.1 21.3 19.7 23 17 23S11.9 21.3 11 19C11.9 16.7 14.3 15 17 15S22.1 16.7 23 19M19.5 19C19.5 17.6 18.4 16.5 17 16.5S14.5 17.6 14.5 19 15.6 21.5 17 21.5 19.5 20.4 19.5 19Z" />
    150. 

  150. 	</svg></div>
    151. 

  151. <div>State Management</div>
    152. 

  152. </div></a>
    153. 

  153. <a class="link heading fit unselectable" title href="/notifications"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    154. 

  154. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    155. 

  155.     	<path fill="currentColor" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
    156. 

  156. 	</svg></div>
    157. 

  157. <div>Notifications</div>
    158. 

  158. </div></a>
    159. 

  159. <div class="separator"></div>
    160. 

  160. <a class="link heading fit unselectable" title href="/migrate"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    161. 

  161. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    162. 

  162.     	<path fill="currentColor" d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
    163. 

  163. 	</svg></div>
    164. 

  164. <div>Migrate From v8 to v9</div>
    165. 

  165. </div></a>
    166. 

  166. <a class="link heading fit unselectable" title href="/github-deploy"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    167. 

  167. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    168. 

  168. 		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
    169. 

  169. 	</svg></div>
    170. 

  170. <div>Deploy on GitHub Pages</div>
    171. 

  171. </div></a>
    172. 

  172. <div class="separator"></div>
    173. 

  173. <a class="link heading fit unselectable" title href="https://twitter.com/jonhymaxoo"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    174. 

  174. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    175. 

  175. 		<path fill="#1DA1F2" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
    176. 

  176. 	</svg></div>
    177. 

  177. <div>Twitter</div>
    178. 

  178. </div></a>
    179. 

  179. <a title href="https://github.com/maxence-charriere/go-app" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    180. 

  180. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    181. 

  181. 		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
    182. 

  182. 	</svg></div>
    183. 

  183. <div>GitHub</div>
    184. 

  184. </div></a>
    185. 

  185. <a class="link heading fit unselectable" title href="https://opencollective.com/go-app"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    186. 

  186. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    187. 

  187. 		<path fill="currentColor" d="M15.41,22C15.35,22 15.28,22 15.22,22C15.1,21.95 15,21.85 14.96,21.73L12.74,15.93C12.65,15.69 12.77,15.42 13,15.32C13.71,15.06 14.28,14.5 14.58,13.83C15.22,12.4 14.58,10.73 13.15,10.09C11.72,9.45 10.05,10.09 9.41,11.5C9.11,12.21 9.09,13 9.36,13.69C9.66,14.43 10.25,15 11,15.28C11.24,15.37 11.37,15.64 11.28,15.89L9,21.69C8.96,21.81 8.87,21.91 8.75,21.96C8.63,22 8.5,22 8.39,21.96C3.24,19.97 0.67,14.18 2.66,9.03C4.65,3.88 10.44,1.31 15.59,3.3C18.06,4.26 20.05,6.15 21.13,8.57C22.22,11 22.29,13.75 21.33,16.22C20.32,18.88 18.23,21 15.58,22C15.5,22 15.47,22 15.41,22M12,3.59C7.03,3.46 2.9,7.39 2.77,12.36C2.68,16.08 4.88,19.47 8.32,20.9L10.21,16C8.38,15 7.69,12.72 8.68,10.89C9.67,9.06 11.96,8.38 13.79,9.36C15.62,10.35 16.31,12.64 15.32,14.47C14.97,15.12 14.44,15.65 13.79,16L15.68,20.93C17.86,19.95 19.57,18.16 20.44,15.93C22.28,11.31 20.04,6.08 15.42,4.23C14.33,3.8 13.17,3.58 12,3.59Z" />
    188. 

  188. 	</svg></div>
    189. 

  189. <div>Open Collective</div>
    190. 

  190. </div></a>
    191. 

  191. <div class="separator"></div>
    192. 

  192. <a title href="/privacy-policy" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    193. 

  193. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    194. 

  194.     	<path fill="currentColor" d="M22 17V16.5C22 15.12 20.88 14 19.5 14S17 15.12 17 16.5V17C16.45 17 16 17.45 16 18V22C16 22.55 16.45 23 17 23H22C22.55 23 23 22.55 23 22V18C23 17.45 22.55 17 22 17M21 17H18V16.5C18 15.67 18.67 15 19.5 15S21 15.67 21 16.5V17M8 8C8 5.79 9.79 4 12 4S16 5.79 16 8 14.21 12 12 12 8 10.21 8 8M14 20H4V18C4 15.79 7.58 14 12 14C13.27 14 14.46 14.15 15.53 14.41C15.32 14.82 15.15 15.25 15.07 15.71C14.42 16.26 14 17.08 14 18V20Z" />
    195. 

  195. 	</svg></div>
    196. 

  196. <div>Privacy Policy</div>
    197. 

  197. </div></a>
    198. 

  198. <div class="separator"></div>
    199. 

  199. </nav></div>
    200. 

  200. <div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
    201. 

  201. </div></div></div>
    202. 

  202. <div style="position:relative;display:none;flex-shrink:0;flex-basis:270px;overflow:hidden;"><div data-goapp-ui="scroll" class="fill"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
    203. 

  203. <div style="width:calc(100% - 24px);padding:0 12px;height:72px;"></div>
    204. 

  204. <div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><nav class="index">
    205. 

  205. <div class="separator"></div>
    206. 

  206. <header class="h2">Index</header>
    207. 

  207. <div class="separator"></div>
    208. 

  208. <a href="#what-is-a-state" title="What is a state?" class="index-link">What is a state?</a>
    209. 

  209. <a title="Set" class="index-link" href="#set">Set</a>
    210. 

  210. <a href="#options" title="Options" class="index-link">    Options</a>
    211. 

  211. <a class="index-link" href="#observe" title="Observe">Observe</a>
    212. 

  212. <a class="index-link" href="#conditional-observation" title="Conditional Observation">    Conditional Observation</a>
    213. 

  213. <a class="index-link" href="#additional-instructions" title="Additional Instructions">    Additional Instructions</a>
    214. 

  214. <a class="index-link" href="#get" title="Get">Get</a>
    215. 

  215. <div class="separator"></div>
    216. 

  216. <a class="index-link" href="#next" title="Next">Next</a>
    217. 

  217. <a class="index-link" href="#report-an-issue" title="Report an Issue">Report an Issue</a>
    218. 

  218. <div class="separator"></div>
    219. 

  219. </nav></div>
    220. 

  220. <div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
    221. 

  221. </div></div></div>
    222. 

  222. <div style="position:relative;flex-grow:1;overflow:hidden;"><div data-goapp-ui="scroll" class="fill"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
    223. 

  223. <div style="width:calc(100% - 24px);padding:0 12px;height:72px;"><nav class="fill"><div data-goapp="Stack" class="fill" style="display:flex;justify-content:flex-end;align-items:center;"></div></nav></div>
    224. 

  224. <div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><main><article>
    225. 

  225. <header id="page-top" class="page-title center"><div data-goapp="Stack" style="display:flex;justify-content:center;align-items:center;">
    226. 

  226. <div class="icon-left unselectable" style="width:90px;height:90px;max-width:90px;max-height:90px;min-width:90px;min-height:90px;" data-goapp="Icon"><svg style="width:90px;height:90px" viewBox="0 0 24 24">
    227. 

  227.     	<path fill="currentColor" d="M4 12V9C4 11.2 7.6 13 12 13S20 11.2 20 9V12C20 12.5 19.8 12.9 19.5 13.4C18.7 13.1 17.9 13 17 13C14.5 13 12.1 14.1 10.6 15.9C6.8 15.6 4 14 4 12M12 11C16.4 11 20 9.2 20 7S16.4 3 12 3 4 4.8 4 7 7.6 11 12 11M9.1 19.7L8.8 19L9.1 18.3C9.2 18.1 9.3 18 9.3 17.8C6.2 17.2 4 15.8 4 14V17C4 18.8 6.4 20.3 9.7 20.8C9.5 20.5 9.3 20.1 9.1 19.7M17 18C16.4 18 16 18.4 16 19S16.4 20 17 20 18 19.6 18 19 17.6 18 17 18M23 19C22.1 21.3 19.7 23 17 23S11.9 21.3 11 19C11.9 16.7 14.3 15 17 15S22.1 16.7 23 19M19.5 19C19.5 17.6 18.4 16.5 17 16.5S14.5 17.6 14.5 19 15.6 21.5 17 21.5 19.5 20.4 19.5 19Z" />
    228. 

  228. 	</svg></div>
    229. 

  229. <h1>State Management</h1>
    230. 

  230. </div></header>
    231. 

  231. <div class="separator"></div>
    232. 

  232. <div>
    233. 

  233. <aside class="heading fill" style="display:none;"><div data-goapp="Stack" style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
    234. 

  234. <div style="width:56px;height:56px;min-width:56px;min-height:56px;border:2px solid currentColor;border-top:2px solid white;border-radius:50%;animation:goapp-spin-frames 500ms linear infinite;"></div>
    235. 

  235. <div style="margin-left:18px;"><div>Loading states.md...</div></div>
    236. 

  236. </div></aside>
    237. 

  237. <div class="fill"><div class="markdown"><h2 id="what-is-a-state">What is a state?</h2>
    238. 

  238. 

  239. <p>A state is a value identified by a key, that is available across the app, observable, and concurrency safe.</p>
    240. 

  240. 

  241. <h2 id="set">Set</h2>
    242. 

  242. 

  243. <p>A state is set from a <a href="/reference#Context">Context</a> with the <code>SetState(state string, v interface{}, opts ...StateOption)</code> method:</p>
    244. 

  244. 

  245. <pre><code class="language-go">// Handling the &quot;greet&quot; action:
    246. 

  246. func handleGreet(ctx app.Context, a app.Action) {
    247. 

  247. 	name, ok := a.Value.(string)
    248. 

  248. 	if !ok {
    249. 

  249. 		return
    250. 

  250. 	}
    251. 

  251. 

  252. 	// Setting a state named &quot;greet-name&quot; with the name value.
    253. 

  253. 	ctx.SetState(&quot;greet-name&quot;, name)
    254. 

  254. }
    255. 

  255. </code></pre>
    256. 

  256. 

  257. <p>By default a state lives within app memory, It gets deleted when the app is closed. The way a state is set can be modified by using options.</p>
    258. 

  258. 

  259. <h3 id="options">Options</h3>
    260. 

  260. 

  261. <table>
    262. 

  262. <thead>
    263. 

  263. <tr>
    264. 

  264. <th>Name</th>
    265. 

  265. <th>Description</th>
    266. 

  266. <th>Note</th>
    267. 

  267. </tr>
    268. 

  268. </thead>
    269. 

  269. 

  270. <tbody>
    271. 

  271. <tr>
    272. 

  272. <td><a href="/reference#Persist">Persist</a></td>
    273. 

  273. <td>The state is persisted on local storage, making it available for later sessions.</td>
    274. 

  274. <td>The value must be compatible with <a href="https://pkg.go.dev/encoding/json">encoding/json</a>.</td>
    275. 

  275. </tr>
    276. 

  276. 

  277. <tr>
    278. 

  278. <td><a href="/reference#Encrypt">Encrypt</a></td>
    279. 

  279. <td>The state is encrypted when persisted on local storage.</td>
    280. 

  280. <td>Requires the use of the <a href="/reference#Persist">Persist</a> option.</td>
    281. 

  281. </tr>
    282. 

  282. 

  283. <tr>
    284. 

  284. <td><a href="/reference#ExpiresIn">ExpiresIn</a></td>
    285. 

  285. <td>The state is deleted after the given duration.</td>
    286. 

  286. <td></td>
    287. 

  287. </tr>
    288. 

  288. 

  289. <tr>
    290. 

  290. <td><a href="/reference#ExpiresAt">ExpiresAt</a></td>
    291. 

  291. <td>The state is deleted at the given time.</td>
    292. 

  292. <td></td>
    293. 

  293. </tr>
    294. 

  294. 

  295. <tr>
    296. 

  296. <td><a href="/reference#Broadcast">Broadcast</a></td>
    297. 

  297. <td>The state is propagated to other browser tabs and windows.</td>
    298. 

  298. <td>The value must be compatible with <a href="https://pkg.go.dev/encoding/json">encoding/json</a>.</td>
    299. 

  299. </tr>
    300. 

  300. </tbody>
    301. 

  301. </table>
    302. 

  302. <p>Options are set by appending the options at the end of the <code>SetState</code> method. Here is an example where a state is persisted in local storage and propagated across browsers tabs and windows:</p>
    303. 

  303. 

  304. <pre><code class="language-go">func handleGreet(ctx app.Context, a app.Action) {
    305. 

  305. 	name, ok := a.Value.(string)
    306. 

  306. 	if !ok {
    307. 

  307. 		return
    308. 

  308. 	}
    309. 

  309. 

  310. 	ctx.SetState(&quot;greet-name&quot;, name,
    311. 

  311. 		app.Persist,
    312. 

  312. 		app.Broadcast,
    313. 

  313. 	)
    314. 

  314. }
    315. 

  315. </code></pre>
    316. 

  316. 

  317. <h2 id="observe">Observe</h2>
    318. 

  318. 

  319. <p>Observing a state is to get its value and get notified whenever it is modified with <code>SetState</code>. It is done from a <a href="/reference#Context">Context</a> with the <code>ObserveState</code> method.</p>
    320. 

  320. 

  321. <pre><code class="language-go">type hello struct {
    322. 

  322. 	app.Compo
    323. 

  323. 	name string
    324. 

  324. }
    325. 

  325. 

  326. func (h *hello) OnMount(ctx app.Context) {
    327. 

  327. 	ctx.ObserveState(&quot;greet-name&quot;).Value(&amp;h.name)
    328. 

  328. }
    329. 

  329. </code></pre>
    330. 

  330. 

  331. <p><code>ObserveState</code> creates an <a href="/reference#Observable">Observable</a>. The <a href="/reference#Observable.Value">Observable.Value</a> method stores the <code>&quot;greet-name&quot;</code> state value into the <code>name</code> field, then associates the observable with the state, which will trigger the <code>name</code> field update each time the state is modified.</p>
    332. 

  332. 

  333. <h3 id="conditional-observation">Conditional Observation</h3>
    334. 

  334. 

  335. <p><a href="/reference#Observable.While">Observable.While</a> set a condition to the observation. Here is an example where the <code>&quot;greet-name&quot;</code> state will be observed only until a name reaches a length of 5 characters:</p>
    336. 

  336. 

  337. <pre><code class="language-go">func (h *hello) OnMount(ctx app.Context) {
    338. 

  338. 	ctx.ObserveState(&quot;greet-name&quot;).
    339. 

  339. 		While(func() bool {
    340. 

  340. 			return len(h.name) &lt; 5
    341. 

  341. 		}).
    342. 

  342. 		Value(&amp;h.name)
    343. 

  343. }
    344. 

  344. </code></pre>
    345. 

  345. 

  346. <h3 id="additional-instructions">Additional Instructions</h3>
    347. 

  347. 

  348. <p>When a state is modified, <a href="/reference#Observable.OnChange">Observable.OnChange</a> sets additional instructions to be executed after a change occurs:</p>
    349. 

  349. 

  350. <pre><code class="language-go">func (h *hello) OnMount(ctx app.Context) {
    351. 

  351. 	ctx.ObserveState(&quot;greet-name&quot;).
    352. 

  352. 		OnChange(func() {
    353. 

  353. 			fmt.Println(&quot;greet-name was changed at&quot;, time.Now())
    354. 

  354. 		}).
    355. 

  355. 		Value(&amp;h.name)
    356. 

  356. }
    357. 

  357. </code></pre>
    358. 

  358. 

  359. <h2 id="get">Get</h2>
    360. 

  360. 

  361. <p>For scenarios where a state value is just to be retrieved without being observed, there is the <a href="/reference#Context">Context</a> <code>GetState</code> method:</p>
    362. 

  362. 

  363. <pre><code class="language-go">func handleGreet(ctx app.Context, a app.Action) {
    364. 

  364. 	var name string
    365. 

  365. 	ctx.GetState(&quot;greet-name&quot;, &amp;name)
    366. 

  366. 

  367. 	// ...
    368. 

  368. }
    369. 

  369. </code></pre>
    370. 

  370. 

  371. <h2 id="next">Next</h2>
    372. 

  372. 

  373. <ul>
    374. 

  374. <li><a href="/reference">Reference</a></li>
    375. 

  375. </ul>
    376. 

  376. </div></div>
    377. 

  377. </div>
    378. 

  378. <div class="separator"></div>
    379. 

  379. <aside>
    380. 

  380. <header id="repport-an-issue" class="h2">Report an issue</header>
    381. 

  381. <p>
    382. 

  382. Found something incorrect, a typo or have suggestions to improve this page? 
    383. 

  383. <a href="https://github.com/maxence-charriere/go-app/issues/new?title=Documentation issue in State Management page">🚀 Submit a GitHub issue!</a>
    384. 

  384. </p>
    385. 

  385. </aside>
    386. 

  386. <div class="separator"></div>
    387. 

  387. </article></main></div>
    388. 

  388. <div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
    389. 

  389. </div></div></div>
    390. 

  390. <div style="position:relative;display:none;flex-shrink:0;flex-basis:336px;overflow:hidden;"><div data-goapp-ui="flyer" class="fill"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
    391. 

  391. <div style="width:calc(100% - 36px);padding:0 18px;height:72px;"></div>
    392. 

  392. <div id="goapp-flyer-layout-be07248c-3d54-4415-87da-5f341bbbd174" style="display:flex;flex-direction:column;justify-content:center;width:calc(100% - 36px);height:calc(100% - 72px);padding:0 18px;overflow:hidden;">
    393. 

  393. <div style="height:0px;overflow:hidden;"><aside class="fill"><div data-goapp-ui="adsenseDisplay" class="fill no-scroll"><ins id="goapp-adsense-display-aaf30518-98a8-466d-b0bc-4ff5caef4397"></ins></div></aside></div>
    394. 

  394. <div style="display:none;height:0px;"><div style="display:flex;justify-content:center;align-items:center;" data-goapp="Stack" class="fill"><aside class="magnify text-center"><a href="https://github.com/sponsors/maxence-charriere" class="default">
    395. 

  395. <div data-goapp="Icon" class="center icon-top" style="width:72px;height:72px;max-width:72px;max-height:72px;min-width:72px;min-height:72px;"><svg style="width:72px;height:72px" viewBox="0 0 24 24">
    396. 

  396. 		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
    397. 

  397. 	</svg></div>
    398. 

  398. <header class="h3 default">Support on GitHub</header>
    399. 

  399. <p class="subtext">Help with go-app development by sponsoring it on GitHub.</p>
    400. 

  400. </a></aside></div></div>
    401. 

  401. <div style="display:none;height:0px;overflow:hidden;"></div>
    402. 

  402. </div>
    403. 

  403. <div style="width:calc(100% - 36px);padding:0 18px;height:0px;"></div>
    404. 

  404. </div></div></div>
    405. 

  405. </div>
    406. 

  406. <div style="display:block;position:absolute;top:0;left:0;cursor:pointer;"><div class="goapp-shell-hamburger-button-default">☰</div></div>
    407. 

  407. <div style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;"><div data-goapp-ui="scroll" class="menu fill menu-hamburger-background"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
    408. 

  408. <div style="width:calc(100% - 24px);padding:0 12px;height:72px;"><div data-goapp="Stack" class="fill" style="display:flex;justify-content:flex-start;align-items:center;"><header><a class="heading app-title" href="/">Go-App</a></header></div></div>
    409. 

  409. <div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><nav>
    410. 

  410. <div class="separator"></div>
    411. 

  411. <a class="link heading fit unselectable" title href="/"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    412. 

  412. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    413. 

  413.     	<path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
    414. 

  414. 	</svg></div>
    415. 

  415. <div>Home</div>
    416. 

  416. </div></a>
    417. 

  417. <a href="/getting-started" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    418. 

  418. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    419. 

  419. 		<path fill="currentColor" d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" />
    420. 

  420. 	</svg></div>
    421. 

  421. <div>Getting Started</div>
    422. 

  422. </div></a>
    423. 

  423. <a class="link heading fit unselectable" title href="/architecture"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    424. 

  424. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    425. 

  425. 		<path fill="currentColor" d="M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z" />
    426. 

  426. 	</svg></div>
    427. 

  427. <div>Architecture</div>
    428. 

  428. </div></a>
    429. 

  429. <a class="link heading fit unselectable" title href="/reference"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    430. 

  430. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg width="24px" height="24px" viewBox="0 0 207 78" xmlns="http://www.w3.org/2000/svg">
    431. 

  431. 		<g fill="currentColor" fill-rule="evenodd">
    432. 

  432. 			<path d="m16.2 24.1c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h35.7c.4 0 .5.3.3.6l-1.7 2.6c-.2.3-.7.6-1 .6z"/>
    433. 

  433. 			<path d="m1.1 33.3c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h45.6c.4 0 .6.3.5.6l-.8 2.4c-.1.4-.5.6-.9.6z"/>
    434. 

  434. 			<path d="m25.3 42.5c-.4 0-.5-.3-.3-.6l1.4-2.5c.2-.3.6-.6 1-.6h20c.4 0 .6.3.6.7l-.2 2.4c0 .4-.4.7-.7.7z"/>
    435. 

  435. 			<g transform="translate(55)">
    436. 

  436. 				<path d="m74.1 22.3c-6.3 1.6-10.6 2.8-16.8 4.4-1.5.4-1.6.5-2.9-1-1.5-1.7-2.6-2.8-4.7-3.8-6.3-3.1-12.4-2.2-18.1 1.5-6.8 4.4-10.3 10.9-10.2 19 .1 8 5.6 14.6 13.5 15.7 6.8.9 12.5-1.5 17-6.6.9-1.1 1.7-2.3 2.7-3.7-3.6 0-8.1 0-19.3 0-2.1 0-2.6-1.3-1.9-3 1.3-3.1 3.7-8.3 5.1-10.9.3-.6 1-1.6 2.5-1.6h36.4c-.2 2.7-.2 5.4-.6 8.1-1.1 7.2-3.8 13.8-8.2 19.6-7.2 9.5-16.6 15.4-28.5 17-9.8 1.3-18.9-.6-26.9-6.6-7.4-5.6-11.6-13-12.7-22.2-1.3-10.9 1.9-20.7 8.5-29.3 7.1-9.3 16.5-15.2 28-17.3 9.4-1.7 18.4-.6 26.5 4.9 5.3 3.5 9.1 8.3 11.6 14.1.6.9.2 1.4-1 1.7z"/>
    437. 

  437. 				<path d="m107.2 77.6c-9.1-.2-17.4-2.8-24.4-8.8-5.9-5.1-9.6-11.6-10.8-19.3-1.8-11.3 1.3-21.3 8.1-30.2 7.3-9.6 16.1-14.6 28-16.7 10.2-1.8 19.8-.8 28.5 5.1 7.9 5.4 12.8 12.7 14.1 22.3 1.7 13.5-2.2 24.5-11.5 33.9-6.6 6.7-14.7 10.9-24 12.8-2.7.5-5.4.6-8 .9zm23.8-40.4c-.1-1.3-.1-2.3-.3-3.3-1.8-9.9-10.9-15.5-20.4-13.3-9.3 2.1-15.3 8-17.5 17.4-1.8 7.8 2 15.7 9.2 18.9 5.5 2.4 11 2.1 16.3-.6 7.9-4.1 12.2-10.5 12.7-19.1z" fill-rule="nonzero"/>
    438. 

  438. 			</g>
    439. 

  439. 		</g>
    440. 

  440. 	</svg></div>
    441. 

  441. <div>Reference</div>
    442. 

  442. </div></a>
    443. 

  443. <div class="separator"></div>
    444. 

  444. <a title href="/components" class="link heading fit unselectable"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    445. 

  445. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    446. 

  446. 		<path fill="currentColor" d="M10,5V11H21V5M16,18H21V12H16M4,18H9V5H4M10,18H15V12H10V18Z" />
    447. 

  447. 	</svg></div>
    448. 

  448. <div>Components</div>
    449. 

  449. </div></a>
    450. 

  450. <a class="link heading fit unselectable" title href="/declarative-syntax"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    451. 

  451. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    452. 

  452. 		<path fill="currentColor" d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
    453. 

  453. 	</svg></div>
    454. 

  454. <div>Declarative Syntax</div>
    455. 

  455. </div></a>
    456. 

  456. <a href="/routing" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    457. 

  457. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    458. 

  458. 		<path fill="currentColor" d="M11,10H5L3,8L5,6H11V3L12,2L13,3V4H19L21,6L19,8H13V10H19L21,12L19,14H13V20A2,2 0 0,1 15,22H9A2,2 0 0,1 11,20V10Z" />
    459. 

  459. 	</svg></div>
    460. 

  460. <div>Routing</div>
    461. 

  461. </div></a>
    462. 

  462. <a class="link heading fit unselectable" title href="/static-resources"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    463. 

  463. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    464. 

  464.     	<path fill="currentColor" d="M7,15L11.5,9L15,13.5L17.5,10.5L21,15M22,4H14L12,2H6A2,2 0 0,0 4,4V16A2,2 0 0,0 6,18H22A2,2 0 0,0 24,16V6A2,2 0 0,0 22,4M2,6H0V11H0V20A2,2 0 0,0 2,22H20V20H2V6Z" />
    465. 

  465. 	</svg></div>
    466. 

  466. <div>Images and Static Resources</div>
    467. 

  467. </div></a>
    468. 

  468. <a class="link heading fit unselectable" title href="/js"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    469. 

  469. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    470. 

  470. 		<path fill="currentColor" d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" />
    471. 

  471. 	</svg></div>
    472. 

  472. <div>JavaScript Interoperability</div>
    473. 

  473. </div></a>
    474. 

  474. <a class="link heading fit unselectable" title href="/concurrency"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    475. 

  475. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    476. 

  476. 		<path fill="currentColor" d="M16,4.5V7H5V9H16V11.5L19.5,8M16,12.5V15H5V17H16V19.5L19.5,16" />
    477. 

  477. 	</svg></div>
    478. 

  478. <div>Concurrency</div>
    479. 

  479. </div></a>
    480. 

  480. <a class="link heading fit unselectable" title href="/seo"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    481. 

  481. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    482. 

  482.     	<path fill="currentColor" d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,4.5L8.95,4.53C8.71,5.05 8.34,5.93 8.07,7H10.93C10.66,5.93 10.29,5.05 10.05,4.53C9.87,4.5 9.69,4.5 9.5,4.5M13.83,7C13.24,5.97 12.29,5.17 11.15,4.78C11.39,5.31 11.7,6.08 11.93,7H13.83M5.17,7H7.07C7.3,6.08 7.61,5.31 7.85,4.78C6.71,5.17 5.76,5.97 5.17,7M4.5,9.5C4.5,10 4.58,10.53 4.73,11H6.87L6.75,9.5L6.87,8H4.73C4.58,8.47 4.5,9 4.5,9.5M14.27,11C14.42,10.53 14.5,10 14.5,9.5C14.5,9 14.42,8.47 14.27,8H12.13C12.21,8.5 12.25,9 12.25,9.5C12.25,10 12.21,10.5 12.13,11H14.27M7.87,8L7.75,9.5L7.87,11H11.13C11.21,10.5 11.25,10 11.25,9.5C11.25,9 11.21,8.5 11.13,8H7.87M9.5,14.5C9.68,14.5 9.86,14.5 10.03,14.47C10.28,13.95 10.66,13.07 10.93,12H8.07C8.34,13.07 8.72,13.95 8.97,14.47L9.5,14.5M13.83,12H11.93C11.7,12.92 11.39,13.69 11.15,14.22C12.29,13.83 13.24,13.03 13.83,12M5.17,12C5.76,13.03 6.71,13.83 7.85,14.22C7.61,13.69 7.3,12.92 7.07,12H5.17Z" />
    483. 

  483. 	</svg></div>
    484. 

  484. <div>SEO</div>
    485. 

  485. </div></a>
    486. 

  486. <a class="link heading fit unselectable" title href="/lifecycle"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    487. 

  487. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    488. 

  488.     	<path fill="currentColor" d="M23,12L19,16V13H6.83C6.42,14.17 5.31,15 4,15A3,3 0 0,1 1,12A3,3 0 0,1 4,9C5.31,9 6.42,9.83 6.83,11H19V8L23,12Z" />
    489. 

  489. 	</svg></div>
    490. 

  490. <div>Lifecycle and Updates</div>
    491. 

  491. </div></a>
    492. 

  492. <a title href="/install" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    493. 

  493. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    494. 

  494. 		<path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
    495. 

  495. 	</svg></div>
    496. 

  496. <div>Install</div>
    497. 

  497. </div></a>
    498. 

  498. <a class="link heading fit unselectable" title href="/testing"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    499. 

  499. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    500. 

  500.     	<path fill="currentColor" d="M7,2V4H8V18A4,4 0 0,0 12,22A4,4 0 0,0 16,18V4H17V2H7M11,16C10.4,16 10,15.6 10,15C10,14.4 10.4,14 11,14C11.6,14 12,14.4 12,15C12,15.6 11.6,16 11,16M13,12C12.4,12 12,11.6 12,11C12,10.4 12.4,10 13,10C13.6,10 14,10.4 14,11C14,11.6 13.6,12 13,12M14,7H10V4H14V7Z" />
    501. 

  501. 	</svg></div>
    502. 

  502. <div>Testing</div>
    503. 

  503. </div></a>
    504. 

  504. <a class="link heading fit unselectable" title href="/actions"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    505. 

  505. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    506. 

  506. 		<path fill="currentColor" d="M16,4L9,8.04V15.96L16,20L23,15.96V8.04M16,6.31L19.8,8.5L16,10.69L12.21,8.5M0,7V9H7V7M11,10.11L15,12.42V17.11L11,14.81M21,10.11V14.81L17,17.11V12.42M2,11V13H7V11M4,15V17H7V15" />
    507. 

  507. 	</svg></div>
    508. 

  508. <div>Actions</div>
    509. 

  509. </div></a>
    510. 

  510. <a href="/states" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    511. 

  511. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    512. 

  512.     	<path fill="currentColor" d="M4 12V9C4 11.2 7.6 13 12 13S20 11.2 20 9V12C20 12.5 19.8 12.9 19.5 13.4C18.7 13.1 17.9 13 17 13C14.5 13 12.1 14.1 10.6 15.9C6.8 15.6 4 14 4 12M12 11C16.4 11 20 9.2 20 7S16.4 3 12 3 4 4.8 4 7 7.6 11 12 11M9.1 19.7L8.8 19L9.1 18.3C9.2 18.1 9.3 18 9.3 17.8C6.2 17.2 4 15.8 4 14V17C4 18.8 6.4 20.3 9.7 20.8C9.5 20.5 9.3 20.1 9.1 19.7M17 18C16.4 18 16 18.4 16 19S16.4 20 17 20 18 19.6 18 19 17.6 18 17 18M23 19C22.1 21.3 19.7 23 17 23S11.9 21.3 11 19C11.9 16.7 14.3 15 17 15S22.1 16.7 23 19M19.5 19C19.5 17.6 18.4 16.5 17 16.5S14.5 17.6 14.5 19 15.6 21.5 17 21.5 19.5 20.4 19.5 19Z" />
    513. 

  513. 	</svg></div>
    514. 

  514. <div>State Management</div>
    515. 

  515. </div></a>
    516. 

  516. <a class="link heading fit unselectable" title href="/notifications"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    517. 

  517. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    518. 

  518.     	<path fill="currentColor" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
    519. 

  519. 	</svg></div>
    520. 

  520. <div>Notifications</div>
    521. 

  521. </div></a>
    522. 

  522. <div class="separator"></div>
    523. 

  523. <a class="link heading fit unselectable" title href="/migrate"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    524. 

  524. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    525. 

  525.     	<path fill="currentColor" d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
    526. 

  526. 	</svg></div>
    527. 

  527. <div>Migrate From v8 to v9</div>
    528. 

  528. </div></a>
    529. 

  529. <a class="link heading fit unselectable" title href="/github-deploy"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    530. 

  530. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    531. 

  531. 		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
    532. 

  532. 	</svg></div>
    533. 

  533. <div>Deploy on GitHub Pages</div>
    534. 

  534. </div></a>
    535. 

  535. <div class="separator"></div>
    536. 

  536. <a class="link heading fit unselectable" title href="https://twitter.com/jonhymaxoo"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    537. 

  537. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    538. 

  538. 		<path fill="#1DA1F2" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
    539. 

  539. 	</svg></div>
    540. 

  540. <div>Twitter</div>
    541. 

  541. </div></a>
    542. 

  542. <a href="https://github.com/maxence-charriere/go-app" class="link heading fit unselectable" title><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    543. 

  543. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    544. 

  544. 		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
    545. 

  545. 	</svg></div>
    546. 

  546. <div>GitHub</div>
    547. 

  547. </div></a>
    548. 

  548. <a class="link heading fit unselectable" title href="https://opencollective.com/go-app"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
    549. 

  549. <div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    550. 

  550. 		<path fill="currentColor" d="M15.41,22C15.35,22 15.28,22 15.22,22C15.1,21.95 15,21.85 14.96,21.73L12.74,15.93C12.65,15.69 12.77,15.42 13,15.32C13.71,15.06 14.28,14.5 14.58,13.83C15.22,12.4 14.58,10.73 13.15,10.09C11.72,9.45 10.05,10.09 9.41,11.5C9.11,12.21 9.09,13 9.36,13.69C9.66,14.43 10.25,15 11,15.28C11.24,15.37 11.37,15.64 11.28,15.89L9,21.69C8.96,21.81 8.87,21.91 8.75,21.96C8.63,22 8.5,22 8.39,21.96C3.24,19.97 0.67,14.18 2.66,9.03C4.65,3.88 10.44,1.31 15.59,3.3C18.06,4.26 20.05,6.15 21.13,8.57C22.22,11 22.29,13.75 21.33,16.22C20.32,18.88 18.23,21 15.58,22C15.5,22 15.47,22 15.41,22M12,3.59C7.03,3.46 2.9,7.39 2.77,12.36C2.68,16.08 4.88,19.47 8.32,20.9L10.21,16C8.38,15 7.69,12.72 8.68,10.89C9.67,9.06 11.96,8.38 13.79,9.36C15.62,10.35 16.31,12.64 15.32,14.47C14.97,15.12 14.44,15.65 13.79,16L15.68,20.93C17.86,19.95 19.57,18.16 20.44,15.93C22.28,11.31 20.04,6.08 15.42,4.23C14.33,3.8 13.17,3.58 12,3.59Z" />
    551. 

  551. 	</svg></div>
    552. 

  552. <div>Open Collective</div>
    553. 

  553. </div></a>
    554. 

  554. <div class="separator"></div>
    555. 

  555. <a title href="/privacy-policy" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
    556. 

  556. <div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    557. 

  557.     	<path fill="currentColor" d="M22 17V16.5C22 15.12 20.88 14 19.5 14S17 15.12 17 16.5V17C16.45 17 16 17.45 16 18V22C16 22.55 16.45 23 17 23H22C22.55 23 23 22.55 23 22V18C23 17.45 22.55 17 22 17M21 17H18V16.5C18 15.67 18.67 15 19.5 15S21 15.67 21 16.5V17M8 8C8 5.79 9.79 4 12 4S16 5.79 16 8 14.21 12 12 12 8 10.21 8 8M14 20H4V18C4 15.79 7.58 14 12 14C13.27 14 14.46 14.15 15.53 14.41C15.32 14.82 15.15 15.25 15.07 15.71C14.42 16.26 14 17.08 14 18V20Z" />
    558. 

  558. 	</svg></div>
    559. 

  559. <div>Privacy Policy</div>
    560. 

  560. </div></a>
    561. 

  561. <div class="separator"></div>
    562. 

  562. </nav></div>
    563. 

  563. <div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
    564. 

  564. </div></div></div>
    565. 

  565. </div>
    566. 

  566. <aside class="goapp-app-info" id="app-wasm-loader">
    567. 

  567. <img src="/web/icon.png" id="app-wasm-loader-icon" class="goapp-logo goapp-spin">
    568. 

  568. <p id="app-wasm-loader-label" class="goapp-label">go-app documentation 0%</p>
    569. 

  569. </aside>
    570. 

  570. </body>
    571. 

  571. </html>
    572.