HTML Refactor

CONTRIBUTING.md

@@ -79,3 +79,14 @@ pre-commit install
 ```
 
 That's it you can now submit your PR. Thanks for contributing to Reflex!
+
+
+## Other Notes
+
+For some pull requests when adding new components you will have to generate a pyi file for the new component. This is done by running the following command in the `reflex` directory.
+
+(Please check in with the team before adding a new component to Reflex we are cautious about adding new components to Reflex's core.)
+
+``` bash
+poetry run python scripts/pyi_generator.py 
+```

reflex/__init__.py

@@ -255,7 +255,7 @@
     "reflex.components.graphing": ["recharts"],
     "reflex.config": ["config", "Config", "DBConfig"],
     "reflex.constants": ["constants", "Env"],
-    "reflex.el": ["el"],
+    "reflex.components.el": ["el"],
     "reflex.event": [
         "event",
         "EventChain",

reflex/__init__.pyi

@@ -447,7 +447,7 @@ from reflex.config import Config as Config
 from reflex.config import DBConfig as DBConfig
 from reflex import constants as constants
 from reflex.constants import Env as Env
-from reflex import el as el
+from reflex.components import el as el
 from reflex import event as event
 from reflex.event import EventChain as EventChain
 from reflex.event import background as background

reflex/components/datadisplay/dataeditor.py

@@ -283,7 +283,7 @@ def create(cls, *children, **props) -> Component:
         Returns:
             The DataEditor component.&
         """
-        from reflex.el.elements import Div
+        from reflex.components.el import Div
 
         columns = props.get("columns", [])
         data = props.get("data", [])
@@ -339,7 +339,7 @@ def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
         Returns:
             The app wrap components.
         """
-        from reflex.el.elements import Div
+        from reflex.components.el import Div
 
         class Portal(Div):
             def get_ref(self):

reflex/components/el/element.pyi

@@ -0,0 +1,91 @@
+"""Stub file for reflex/components/el/element.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Dict
+from reflex.components.component import Component
+
+class Element(Component):
+    def render(self) -> Dict: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, str]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Element":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...

reflex/components/el/elements/__init__.py

@@ -0,0 +1,226 @@
+"""Element classes."""
+from .forms import (
+    Button,
+    Fieldset,
+    Form,
+    Input,
+    Label,
+    Legend,
+    Meter,
+    Optgroup,
+    Option,
+    Output,
+    Progress,
+    Select,
+    Textarea,
+)
+from .inline import (
+    A,
+    Abbr,
+    B,
+    Bdi,
+    Bdo,
+    Br,
+    Cite,
+    Code,
+    Data,
+    Dfn,
+    Em,
+    I,
+    Kbd,
+    Mark,
+    Q,
+    Rp,
+    Rt,
+    Ruby,
+    S,
+    Samp,
+    Small,
+    Span,
+    Strong,
+    Sub,
+    Sup,
+    Time,
+    U,
+    Wbr,
+)
+from .media import (
+    Area,
+    Audio,
+    Embed,
+    Iframe,
+    Img,
+    Map,
+    Object,
+    Path,
+    Picture,
+    Portal,
+    Source,
+    Svg,
+    Track,
+    Video,
+)
+from .metadata import Base, Head, Link, Meta, Title
+from .other import Details, Dialog, Html, Math, Slot, Summary, Template
+from .scripts import Canvas, Noscript, Script
+from .sectioning import (
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6,
+    Address,
+    Article,
+    Aside,
+    Body,
+    Footer,
+    Header,
+    Main,
+    Nav,
+    Section,
+)
+from .tables import Caption, Col, Colgroup, Table, Tbody, Td, Tfoot, Th, Thead, Tr
+from .typography import (
+    Blockquote,
+    Dd,
+    Del,
+    Div,
+    Dl,
+    Dt,
+    Figcaption,
+    Hr,
+    Ins,
+    Li,
+    Ol,
+    P,
+    Pre,
+    Ul,
+)
+
+# Forms
+button = Button.create
+fieldset = Fieldset.create
+form = Form.create
+input = Input.create
+label = Label.create
+legend = Legend.create
+meter = Meter.create
+optgroup = Optgroup.create
+option = Option.create
+output = Output.create
+progress = Progress.create
+select = Select.create
+textarea = Textarea.create
+
+# Tables
+caption = Caption.create
+col = Col.create
+colgroup = Colgroup.create
+table = Table.create
+tbody = Tbody.create
+td = Td.create
+tfoot = Tfoot.create
+th = Th.create
+thead = Thead.create
+tr = Tr.create
+
+# Media
+area = Area.create
+audio = Audio.create
+img = Img.create
+map = Map.create
+track = Track.create
+video = Video.create
+embed = Embed.create
+iframe = Iframe.create
+object = Object.create
+picture = Picture.create
+portal = Portal.create
+source = Source.create
+svg = Svg.create
+path = Path.create
+
+# Sectioning
+address = Address.create
+article = Article.create
+aside = Aside.create
+body = Body.create
+footer = Footer.create
+
+# Typography
+blockquote = Blockquote.create
+dd = Dd.create
+div = Div.create
+dl = Dl.create
+dt = Dt.create
+figcaption = Figcaption.create
+hr = Hr.create
+li = Li.create
+ol = Ol.create
+p = P.create
+pre = Pre.create
+ul = Ul.create
+ins = Ins.create
+del_ = Del.create  # 'del' is a reserved keyword in Python
+h1 = H1.create
+h2 = H2.create
+h3 = H3.create
+h4 = H4.create
+h5 = H5.create
+h6 = H6.create
+main = Main.create
+nav = Nav.create
+section = Section.create
+
+# Inline
+a = A.create
+abbr = Abbr.create
+b = B.create
+bdi = Bdi.create
+bdo = Bdo.create
+br = Br.create
+cite = Cite.create
+code = Code.create
+data = Data.create
+dfn = Dfn.create
+em = Em.create
+i = I.create
+kbd = Kbd.create
+mark = Mark.create
+q = Q.create
+rp = Rp.create
+rt = Rt.create
+ruby = Ruby.create
+s = S.create
+samp = Samp.create
+small = Small.create
+span = Span.create
+strong = Strong.create
+sub = Sub.create
+sup = Sup.create
+time = Time.create
+u = U.create
+wbr = Wbr.create
+
+# Metadata
+base = Base.create
+head = Head.create
+link = Link.create
+meta = Meta.create
+title = Title.create
+
+# Scripts
+canvas = Canvas.create
+noscript = Noscript.create
+script = Script.create
+
+# Other
+details = Details.create
+dialog = Dialog.create
+summary = Summary.create
+slot = Slot.create
+template = Template.create
+svg = Svg.create
+math = Math.create
+html = Html.create