rename element to component

Author: rmorshea

README.md

@@ -50,7 +50,7 @@ IDOM can be used to create a simple slideshow which changes whenever a user clic
 ```python
 import idom
 
-@idom.element
+@idom.component
 def Slideshow():
     index, set_index = idom.hooks.use_state(0)
     url = f"https://picsum.photos/800/300?image={index}"

docs/main.py

@@ -23,7 +23,7 @@ async def forward_to_index(request):
     return response.redirect("/docs/index.html")
 
 
-mount, element = multiview()
+mount, component = multiview()
 
 examples_dir = here / "source" / "examples"
 sys.path.insert(0, str(examples_dir))
@@ -54,7 +54,9 @@ async def forward_to_index(request):
     idom.run = original_run
 
 
-server = PerClientStateServer(element, {"redirect_root_to_index": False}).register(app)
+server = PerClientStateServer(component, {"redirect_root_to_index": False}).register(
+    app
+)
 
 
 def production():

docs/source/core-concepts.rst

@@ -5,8 +5,8 @@ This section covers core features of IDOM that are used in making
 interactive interfaces.
 
 
-Pure Elements
--------------
+Pure Components
+---------------
 
 As in most programming paradigms, so many of the problems come down to how we manage
 state. The first tool in encouraging its proper curation is the usage of
@@ -17,7 +17,7 @@ way to manage state is to have no state at all."
 With IDOM the core of your application will be built on the back of basic functions and
 coroutines that return :ref:`VDOM <VDOM Mimetype>` models and which do so without state
 and without `side effects`_. We call these kinds of model rendering functions
-:ref:`Pure Elements`. For example, one might want a function which
+:ref:`Pure Components`. For example, one might want a function which
 accepted a list of strings and turned it into a series of paragraph elements:
 
 .. code-block::
@@ -26,12 +26,12 @@ accepted a list of strings and turned it into a series of paragraph elements:
         return idom.html.div([idom.html.p(text) for text in list_of_text])
 
 
-Stateful Elements
------------------
+Stateful Components
+-------------------
 
-A Stateful Element is one which uses a :ref:`Life Cycle Hooks`. These life cycle hooks
-allow you to add state to otherwise stateless functions. To create a stateful element
-you'll need to apply the :func:`~idom.core.element.element` decorator to a coroutine_
+A Stateful Component is one which uses a :ref:`Life Cycle Hooks`. These life cycle hooks
+allow you to add state to otherwise stateless functions. To create a stateful component
+you'll need to apply the :func:`~idom.core.component.component` decorator to a coroutine_
 whose body contains a hook usage. We'll demonstrate that with a simple
 :ref:`click counter`:
 
@@ -40,7 +40,7 @@ whose body contains a hook usage. We'll demonstrate that with a simple
     import idom
 
 
-    @idom.element
+    @idom.component
     def ClickCount():
         count, set_count = idom.hooks.use_state(0)
 
@@ -50,14 +50,14 @@ whose body contains a hook usage. We'll demonstrate that with a simple
         )
 
 
-Element Layout
---------------
+Component Layout
+----------------
 
-Displaying an element requires you to turn elements into :ref:`VDOM <VDOM Mimetype>` -
+Displaying components requires you to turn them into :ref:`VDOM <VDOM Mimetype>` -
 this is done using a :class:`~idom.core.layout.Layout`. Layouts are responsible for
-rendering elements (turning them into VDOM) and scheduling their re-renders when they
+rendering components (turning them into VDOM) and scheduling their re-renders when they
 :meth:`~idom.core.layout.Layout.update`. To create a layout, you'll need an
-:class:`~idom.core.element.Element` instance, which will become its root, and won't
+:class:`~idom.core.component.Component` instance, which will become its root, and won't
 ever be removed from the model. Then you'll just need to call and await a
 :meth:`~idom.core.layout.Layout.render` which will return a :ref:`JSON Patch`:
 
@@ -80,7 +80,7 @@ have to re-render the layout and see what changed:
     event_handler_id = "on-click"
 
 
-    @idom.element
+    @idom.component
     def ClickCount():
         count, set_count = idom.hooks.use_state(0)
 
@@ -212,7 +212,7 @@ models:
     import idom
     from idom.server.sanic import PerClientStateServer
 
-    @idom.element
+    @idom.component
     def View(self):
         return idom.html.h1(["Hello World"])
 
@@ -233,7 +233,7 @@ The implementation registers hooks into the application to serve the model once
 
     app = Sanic()
 
-    @idom.element
+    @idom.component
     def View(self):
         return idom.html.h1(["Hello World"])
 

docs/source/examples/click_count.py

@@ -1,7 +1,7 @@
 import idom
 
 
-@idom.element
+@idom.component
 def ClickCount():
     count, set_count = idom.hooks.use_state(0)
 

docs/source/examples/material_ui_button_no_action.py

@@ -3,7 +3,7 @@
 material_ui = idom.install("@material-ui/core", fallback="loading...")
 
 idom.run(
-    idom.element(
+    idom.component(
         lambda: material_ui.Button(
             {"color": "primary", "variant": "contained"}, "Hello World!"
         )

docs/source/examples/material_ui_button_on_click.py

@@ -6,7 +6,7 @@
 material_ui = idom.install("@material-ui/core", fallback="loading...")
 
 
-@idom.element
+@idom.component
 def ViewSliderEvents():
     event, set_event = idom.hooks.use_state(None)
 

docs/source/examples/material_ui_slider.py

@@ -6,7 +6,7 @@
 material_ui = idom.install("@material-ui/core", fallback="loading...")
 
 
-@idom.element
+@idom.component
 def ViewSliderEvents():
     event, set_event = idom.hooks.use_state(None)
 

docs/source/examples/matplotlib_plot.py

@@ -6,7 +6,7 @@
 from idom.widgets.html import image
 
 
-@idom.element
+@idom.component
 def PolynomialPlot():
     coefficients, set_coefficients = idom.hooks.use_state([0])
 
@@ -19,7 +19,7 @@ def PolynomialPlot():
     )
 
 
-@idom.element
+@idom.component
 def ExpandableNumberInputs(values, set_values):
     inputs = []
     for i in range(len(values)):

docs/source/examples/simple_dashboard.py

@@ -9,7 +9,7 @@
 victory = idom.install("victory", fallback="loading...")
 
 
-@idom.element
+@idom.component
 def RandomWalk():
     mu = idom.hooks.use_ref(0)
     sigma = idom.hooks.use_ref(1)
@@ -38,7 +38,7 @@ def RandomWalk():
     )
 
 
-@idom.element
+@idom.component
 def RandomWalkGraph(mu, sigma):
     interval = use_interval(0.5)
     data, set_data = idom.hooks.use_state([{"x": 0, "y": 0}] * 50)
@@ -56,7 +56,7 @@ async def animate():
     return victory.VictoryLine({"data": data, "style": {"parent": {"width": "500px"}}})
 
 
-@idom.element
+@idom.component
 def NumberInput(label, value, set_value_callback, domain):
     minimum, maximum, step = domain
     attrs = {"min": minimum, "max": maximum, "step": step}

docs/source/examples/slideshow.py

@@ -1,7 +1,7 @@
 import idom
 
 
-@idom.element
+@idom.component
 def Slideshow():
     index, set_index = idom.hooks.use_state(0)