Update readme and examples to use latest API

Author: cpsievert

README.md

@@ -14,7 +14,7 @@ pip install ipyshiny --extra-index-url=https://pyshiny.netlify.app/pypi
 
 Every Shiny app has two main parts: the user interface (UI) and server logic.
 `{ipyshiny}` provides `output_widget()` for defining where to place a widget in the UI
-and `register_widget()` (or `@render_widget()`) for supplying a widget-like object to
+and `register_widget()` (or `@render_widget`) for supplying a widget-like object to
 the `output_widget()` container. More technically, widget-like means:
 
 * Any object that subclasses `{ipywidgets}`'s `Widget` class.
@@ -30,7 +30,7 @@ The recommended way to incorporate `{ipyshiny}` widgets into Shiny apps is to:
       the `server` function first executes), but if the widget is slow to initialize and
       doesn't need to be shown right away, you may want to delay that initialization
       until it's needed.
-2. Use Shiny's `@reactive.Effect()` to reactively modify the widget whenever relevant
+2. Use Shiny's `@reactive.Effect` to reactively modify the widget whenever relevant
    reactive values change.
 3. Use `{ipyshiny}`'s `reactive_read()` to update other outputs whenever the widget changes.
     * This way, relevant output(s) invalidate (i.e., recalculate) whenever the relevant
@@ -56,19 +56,19 @@ def server(input, output, session):
     register_widget("map", map)
 
     # When the slider changes, update the map's zoom attribute (2)
-    @reactive.Effect()
+    @reactive.Effect
     def _():
         map.zoom = input.zoom()
 
     # When zooming directly on the map, update the slider's value (2 and 3)
-    @reactive.Effect()
+    @reactive.Effect
     def _():
         ui.update_slider("zoom", value=reactive_read(map, "zoom"))
 
     # Everytime the map's bounds change, update the output message (3)
-    @output(name="map_bounds")
-    @render_text()
-    def _():
+    @output
+    @render.text
+    def map_bounds():
         b = reactive_read(map, "bounds")
         lat = [b[0][0], b[0][1]]
         lon = [b[1][0], b[1][1]]
@@ -125,7 +125,7 @@ def server(input, output, session):
 
     register_widget("scatterplot", scatterplot)
 
-    @reactive.Effect()
+    @reactive.Effect
     def _():
         scatterplot.data[1].visible = input.show_fit()
 
@@ -161,9 +161,9 @@ app_ui = ui.page_fluid(
 )
 
 def server(input, output, session):
-    @output(name="map")
-    @render_widget()
-    def _():
+    @output
+    @render_widget
+    def map():
         return L.Map(center=(52, 360), zoom=input.zoom())
 
 app = App(app_ui, server)

examples/ipyleaflet/app.py

@@ -7,34 +7,38 @@
     ui.div(
         ui.input_slider("zoom", "Map zoom level", value=4, min=1, max=10),
         ui.output_text("map_bounds"),
-        style=css(display="flex", justify_content="center", align_items="center", gap="2rem"),
+        style=css(
+            display="flex", justify_content="center", align_items="center", gap="2rem"
+        ),
     ),
-    output_widget("map")
+    output_widget("map"),
 )
 
+
 def server(input, output, session):
 
     # Initialize and display when the session starts (1)
     map = L.Map(center=(52, 360), zoom=4)
     register_widget("map", map)
 
     # When the slider changes, update the map's zoom attribute (2)
-    @reactive.Effect()
+    @reactive.Effect
     def _():
         map.zoom = input.zoom()
 
     # When zooming directly on the map, update the slider's value (2 and 3)
-    @reactive.Effect()
+    @reactive.Effect
     def _():
         ui.update_slider("zoom", value=reactive_read(map, "zoom"))
 
     # Everytime the map's bounds change, update the output message (3)
-    @output(name="map_bounds")
-    @render_text()
-    def _():
+    @output
+    @render.text
+    def map_bounds():
         b = reactive_read(map, "bounds")
         lat = [b[0][0], b[0][1]]
         lon = [b[1][0], b[1][1]]
         return f"The current latitude is {lat} and longitude is {lon}"
 
+
 app = App(app_ui, server)

examples/ipywidgets/app.py

@@ -23,7 +23,7 @@ def server(input: Inputs, output: Outputs, session: Session):
 
     register_widget("slider", s)
 
-    @reactive.Effect()
+    @reactive.Effect
     def _():
         return f"The value of the slider is: {reactive_read(s, 'value')}"
 

examples/ipywidgets/requirements.txt

@@ -2,8 +2,8 @@
     "https://connect.rstudioservices.com/": {
         "server_url": "https://connect.rstudioservices.com/",
         "filename": "/Users/cpsievert/github/ipyshiny/examples/ipywidgets",
-        "app_url": "https://connect.rstudioservices.com/content/346038e1-cbb2-407a-b0ba-91f421c128df/",
-        "app_id": 8699,
+        "app_url": "https://connect.rstudioservices.com/connect/#/apps/346038e1-cbb2-407a-b0ba-91f421c128df",
+        "app_id": "346038e1-cbb2-407a-b0ba-91f421c128df",
         "app_guid": "346038e1-cbb2-407a-b0ba-91f421c128df",
         "title": "ipywidgets",
         "app_mode": "python-shiny"

examples/ipywidgets/rsconnect-python/ipywidgets.json

@@ -53,22 +53,22 @@
 
 
 def server(input: Inputs, output: Outputs, session: Session):
-    @output(name="figure")
-    @render_ui()
+    @output(id="figure")
+    @render.ui
     def _():
         return output_widget(input.framework())
 
-    @output(name="ipyleaflet")
-    @render_widget()
+    @output(id="ipyleaflet")
+    @render_widget
     def _():
         from ipyleaflet import Map, Marker
 
         m = Map(center=(52.204793, 360.121558), zoom=4)
         m.add_layer(Marker(location=(52.204793, 360.121558)))
         return m
 
-    @output(name="qgrid")
-    @render_widget()
+    @output(id="qgrid")
+    @render_widget
     def _():
         import qgrid
 
@@ -120,8 +120,8 @@ def _():
         df_types["E"] = df_types["D"] == "foo"
         return qgrid.show_grid(df_types, show_toolbar=True)
 
-    @output(name="altair")
-    @render_widget()
+    @output(id="altair")
+    @render_widget
     def _():
         import altair as alt
         from vega_datasets import data
@@ -136,8 +136,8 @@ def _():
             )
         )
 
-    @output(name="plotly")
-    @render_widget()
+    @output(id="plotly")
+    @render_widget
     def _():
         import plotly.graph_objects as go
 
@@ -146,8 +146,8 @@ def _():
             layout_title_text="A Figure Displayed with fig.show()",
         )
 
-    @output(name="bqplot")
-    @render_widget()
+    @output(id="bqplot")
+    @render_widget
     def _():
         from bqplot import OrdinalScale, LinearScale, Bars, Lines, Axis, Figure
 
@@ -187,8 +187,8 @@ def _():
             ],
         )
 
-    @output(name="ipychart")
-    @render_widget()
+    @output(id="ipychart")
+    @render_widget
     def _():
         from ipychart import Chart
 
@@ -208,8 +208,8 @@ def _():
 
         return Chart(data=dataset, kind="bar")
 
-    @output(name="ipywebrtc")
-    @render_widget()
+    @output(id="ipywebrtc")
+    @render_widget
     def _():
         from ipywebrtc import CameraStream
 
@@ -221,16 +221,16 @@ def _():
             }
         )
 
-    @output(name="ipyvolume")
-    @render_widget()
+    @output(id="ipyvolume")
+    @render_widget
     def _():
         from ipyvolume import quickquiver
 
         x, y, z, u, v, w = np.random.random((6, 1000)) * 2 - 1
         return quickquiver(x, y, z, u, v, w, size=5)
 
-    @output(name="pydeck")
-    @render_widget()
+    @output(id="pydeck")
+    @render_widget
     def _():
         import pydeck as pdk
 
@@ -262,8 +262,8 @@ def _():
         # Combined all of it and render a viewport
         return pdk.Deck(layers=[layer], initial_view_state=view_state)
 
-    @output(name="bokeh")
-    @render_widget()
+    @output(id="bokeh")
+    @render_widget
     def _():
         from bokeh.plotting import figure
 

examples/outputs/app.py

@@ -41,7 +41,7 @@ def server(input, output, session):
 
     register_widget("scatterplot", scatterplot)
 
-    @reactive.Effect()
+    @reactive.Effect
     def _():
         scatterplot.data[1].visible = input.show_fit()