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)
 

docs/source/examples/snake_game.py

@@ -13,7 +13,7 @@ class GameState(enum.Enum):
     play = 3
 
 
-@idom.element
+@idom.component
 def GameView():
     game_state, set_game_state = idom.hooks.use_state(GameState.init)
 
@@ -40,7 +40,7 @@ class Direction(enum.Enum):
     ArrowRight = (1, 0)
 
 
-@idom.element
+@idom.component
 def GameLoop(grid_size, block_scale, set_game_state):
     # we `use_ref` here to capture the latest direction press without any delay
     direction = idom.hooks.use_ref(Direction.ArrowRight.value)

docs/source/examples/super_simple_chart.py

@@ -8,7 +8,7 @@
 
 
 idom.run(
-    idom.element(
+    idom.component(
         lambda: ssc.SuperSimpleChart(
             {
                 "data": [

docs/source/examples/todo.py

@@ -1,7 +1,7 @@
 import idom
 
 
-@idom.element
+@idom.component
 def Todo():
     items, set_items = idom.hooks.use_state([])
 

docs/source/examples/use_reducer_counter.py

@@ -12,7 +12,7 @@ def reducer(count, action):
         raise ValueError(f"Unknown action '{action}'")
 
 
-@idom.element
+@idom.component
 def Counter():
     count, dispatch = idom.hooks.use_reducer(reducer, 0)
     return idom.html.div(

docs/source/examples/use_state_counter.py

@@ -9,7 +9,7 @@ def decrement(last_count):
     return last_count - 1
 
 
-@idom.element
+@idom.component
 def Counter():
     initial_count = 0
     count, set_count = idom.hooks.use_state(initial_count)

docs/source/examples/victory_chart.py

@@ -3,7 +3,7 @@
 victory = idom.install("victory", fallback="loading...")
 
 idom.run(
-    idom.element(
+    idom.component(
         lambda: victory.VictoryBar({"style": {"parent": {"width": "500px"}}}),
     )
 )

docs/source/getting-started.rst

@@ -14,14 +14,14 @@ Since it's likely a lot to take in at once, we'll break it down piece by piece:
     :lines: 4-5
     :linenos:
 
-The ``idom.element`` decorator creates an :ref:`Element <Stateful Elements>` constructor
+The ``idom.component`` decorator creates a :ref:`Component <Stateful Components>` constructor
 whose render function is defined by the `asynchronous function`_ below it. To create
-an :class:`~idom.core.element.Element` instance we call ``Slideshow()`` with the same
-arguments as its render function. The render function of an Element returns a data
-structure that depicts a user interface, or in more technical terms a Document Object
-Model (DOM). We call this structural representation of the DOM a `Virtual DOM`__ (VDOM)
-- a term familiar to those who work with `ReactJS`_. In the case of ``Slideshow`` it
-will return a VDOM representing an image which, when clicked, will change.
+a Component instance we call ``Slideshow()`` with the same arguments as its render
+function. The render function of a Component returns a data structure that depicts a
+user interface, or in more technical terms a Document Object Model (DOM). We call this
+structural representation of the DOM a `Virtual DOM`__ (VDOM) - a term familiar to those
+who work with `ReactJS`_. In the case of ``Slideshow`` it will return a VDOM
+representing an image which, when clicked, will change.
 
 __ https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom
 
@@ -31,9 +31,9 @@ __ https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom
     :linenos:
 
 The :func:`~idom.core.hooks.use_state` function is a :ref:`Hook <Life Cycle Hooks>`.
-Calling a Hook inside an Element's render function (one decorated by ``idom.element``)
+Calling a Hook inside a Component's render function (one decorated by ``idom.component``)
 adds some local state to it. IDOM will preserve the state added by Hooks between calls
-to the Element's render function.
+to the Component's render function.
 
 The ``use_state`` hook returns two values - the *current* state value and a function
 that let's you update that value. In the case of ``Slideshow`` the value of the
@@ -49,7 +49,7 @@ function allow us to change it. The one required argument of ``use_state`` is th
 The coroutine above will get added as an event handler to the resulting view. When it
 responds to an event it will use the update function returned by the ``use_state`` Hook
 to change which image is shown to the user. Calling the update function will schedule
-the Element to be re-rendered. That is, the Element's render function will be called
+the Component to be re-rendered. That is, the Component's render function will be called
 again, and its new result will be displayed.
 
 .. note::

docs/source/javascript-modules.rst

@@ -54,18 +54,18 @@ in a REPL or Jupyter Notebook):
 
     Any standard javascript dependency specifier is allowed here.
 
-Once the package has been succesfully installed, you can import and display the element:
+Once the package has been succesfully installed, you can import and display the component:
 
 .. example:: material_ui_button_no_action
 
 
-Passing Props To Javascript
----------------------------
+Passing Props To Javascript Components
+--------------------------------------
 
 So now that we can install and display a Material UI Button we probably want to make it
 do something. Thankfully there's nothing new to learn here, you can pass event handlers
 to the button just as you did when :ref:`getting started`. Thus, all we need to do is
-add an ``onClick`` handler to the element:
+add an ``onClick`` handler to the component:
 
 .. example:: material_ui_button_on_click