fix force update in example loader

Author: rmorshea

docs/examples.py

@@ -103,16 +103,25 @@ def _printout_viewer():
 
     @idom.component
     def ShowPrint():
-        buffer = idom.hooks.use_state(StringIO)[0]
-        update = _use_force_update()
-
-        @idom.hooks.use_effect
-        def add_buffer():
-            print_callbacks.add(buffer.write)
-            update()
-
-        value = buffer.getvalue()
-        return idom.html.pre({"class": "printout"}, value) if value else idom.html.div()
+        lines, set_lines = idom.hooks.use_state(())
+
+        def set_buffer(text: str):
+            if len(lines) > 10:
+                # limit printout size - protects against malicious actors
+                # plus it gives you some nice scrolling printout
+                set_lines(lines[1:] + (text,))
+            else:
+                set_lines(lines + (text,))
+
+        @idom.hooks.use_effect(args=[set_buffer])
+        def add_set_buffer_callback():
+            print_callbacks.add(set_buffer)
+            return lambda: print_callbacks.remove(set_buffer)
+
+        if not lines:
+            return idom.html.div()
+        else:
+            return idom.html.pre({"class": "printout"}, "".join(lines))
 
     def capture_print(*args, **kwargs):
         buffer = StringIO()

docs/source/adding-interactivity/index.rst

@@ -110,6 +110,17 @@ other :ref:`later <managing state>`).
 Section 3: State as a Snapshot
 ------------------------------
 
+As we :ref:`learned earlier <Components with State>`, state setters behave a little
+differently than you might exepct at first glance. Instead of updating your current
+handle on the corresponding state variable it schedules a re-render of the component
+which owns the state:
+
+.. code-block::
+
+    print(count)
+    set_count(count + 1)
+    print(count)
+
 .. card::
     :link: state-as-a-snapshot
     :link-type: doc

docs/source/adding-interactivity/state-as-a-snapshot.rst

@@ -1,8 +1,8 @@
-.. _State as a Snapshot:
+State as a Snapshot
+===================
 
-State as a Snapshot 🚧
-======================
-
-.. note::
-
-    Under construction 🚧
+While you can read state variables like you might normally in Python, as we
+:ref:`learned earlier <Components with State>`, assigning to them is somewhat different.
+When you use a state setter to update a component, instead of modifying your handle to
+its corresponding state variable, a re-render is triggered. Only after that next render
+begins will things change.

docs/source/reference-material/javascript-api.rst

@@ -1,7 +1,7 @@
 .. _Javascript API:
 
-Javascript API
-==============
+Javascript API 🚧
+=================
 
 .. note::
 

scripts/one_example.py

@@ -4,11 +4,7 @@
 from threading import Event, Thread
 
 import idom
-from docs.examples import (
-    all_example_names,
-    get_py_example_file_by_name,
-    load_one_example,
-)
+from docs.examples import all_example_names, get_example_files_by_name, load_one_example
 from idom.widgets import hotswap
 
 
@@ -42,7 +38,8 @@ def update_component():
         print(f"Loading example: {ex_name!r}")
         mount(load_one_example(ex_name))
 
-    on_file_change(get_py_example_file_by_name(ex_name), update_component)
+    for file in get_example_files_by_name(ex_name):
+        on_file_change(file, update_component)
 
     idom.run(component)