HTML Refactor #2164

Alek99 · 2023-11-13T23:25:04Z

"""Welcome to Reflex! This file outlines the steps to create a basic app."""
from rxconfig import config

import reflex as rx

docs_url = "https://reflex.dev/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


class State(rx.State):
    """The app state."""

    pass


def index():
    return rx.fragment(
        rx.el.footer(
            "\n",
            rx.el.div(
                "\n",
                rx.el.div(
                    "\n",
                    rx.el.div(
                        "\n",
                        rx.el.span("Unique", class_name="text-violet-500"),
                        "\n",
                        rx.el.span("Fund", class_name="dark:text-slate-400"),
                        "\n",
                        class_name="w-full text-lg font-extrabold md:w-fit md:text-left",
                    ),
                    "\n",
                    rx.el.p(
                        "\n        UniqueFund provides access to fast and reliable financing solutions for\n        SMEs.\n      ",
                        class_name="text-sm text-slate-600",
                    ),
                    "\n",
                    class_name="flex w-full flex-col space-y-4 text-center md:w-2/5 md:text-left",
                ),
                "\n",
                rx.el.div(
                    "\n",
                    rx.el.div("Company", class_name="text-sm font-semibold"),
                    "\n",
                    rx.el.ul(
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            About\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            Terms of Service\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            Privacy Policy\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            Cookie Policy\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        class_name="text-sm",
                    ),
                    "\n",
                    class_name="w-full text-center text-slate-600 md:w-1/5 md:text-left",
                ),
                "\n",
                rx.el.div(
                    "\n",
                    rx.el.div("Solutions", class_name="text-sm font-semibold"),
                    "\n",
                    rx.el.ul(
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            Business Line of Credit\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            SBA Loan\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            Revenue Based Financing\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            Invoice Factoring\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        class_name="text-sm",
                    ),
                    "\n",
                    class_name="w-full text-center text-slate-600 md:w-1/5 md:text-left",
                ),
                "\n",
                rx.el.div(
                    "\n",
                    rx.el.div("Partnership", class_name="text-sm font-semibold text-slate-600"),
                    "\n",
                    rx.el.ul(
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            Loan Partner\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            Affiliate\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        rx.el.li(
                            "\n",
                            rx.el.a(
                                "\n            Brand Guideline\n          ",
                                class_name="underline decoration-transparent underline-offset-4 transition hover:decoration-slate-700",
                                href="#",
                                rel="noopener noreferrer",
                                target="_blank",
                            ),
                            "\n",
                            class_name="pt-3",
                        ),
                        "\n",
                        class_name="text-sm",
                    ),
                    "\n",
                    class_name="w-full text-center text-slate-600 md:w-1/5 md:text-left",
                ),
                "\n",
                class_name="container mx-auto flex flex-col items-start space-y-12 px-8 pb-8 pt-12 md:flex-row md:space-y-0 md:space-x-12 md:px-12",
            ),
            "\n",
            rx.el.div(
                "\n    \u00a9\n    \n    2023\n    \n    UniqueFund. All rights reserved.\n  ",
                class_name="container mx-auto border-t border-slate-200 p-8 text-center text-sm text-slate-600 dark:border-slate-900 md:flex-row md:px-12",
            ),
            "\n",
            class_name="mt-28 bg-slate-50 dark:bg-black",
        )
    )

# Add state and page to the app.
app = rx.App()
app.add_page(index)
app.compile()

masenf

This is great. I think documenting and maintaining this rx.el namespace is going to be good for people who want a truly lightweight app. With no chakra/radix components in use, then they wont be installed at all!

potential conflict with this recent PR: e761a04

The rx.el.element.Element.render method will still end up accidentally getting sx props because they will get added in _render and not removed here. I'm thinking that now is probably the time to have Component pass style as style and have ChakraComponent pass style as sx. Then we can stop special casing that here and in the radix tree.

masenf · 2023-11-14T21:16:56Z

reflex/el/elements/base.py

+    """Base class for common attributes."""
+
+    #  Provides a hint for generating a keyboard shortcut for the current element.
+    access_key: Var_[Union[str, int, bool]]


i'd like to read this type as access_key: Var_[Attribute] or maybe Var_[HTMLAttribute].

something that reduces the complexity of what my brain has to grok to understand the line.

masenf · 2023-11-14T21:18:41Z

reflex/el/elements/inline.py

+from .base import BaseHTML
+
+
+class A(BaseHTML):  # Inherits common attributes from BaseMeta


Suggested change

class A(BaseHTML): # Inherits common attributes from BaseMeta

class A(BaseHTML):

Alek99 · 2023-11-15T00:23:26Z

One question should I move the .el into the components directory?

masenf · 2023-11-15T04:45:08Z

One question should I move the .el into the components directory?

I think it would make more sense in there, but I think we should still expose it as rx.el in the API

…ut for deploy command, remove deploy legacy command (#2179)

* add in new no_of_lines prop for text * black update --------- Co-authored-by: Tom Gotsman <tomgotsman@toms-mbp.lan>

…ing components (#2194)

picklelo · 2023-11-20T19:15:54Z

scripts/precompile.py

@@ -14,7 +14,7 @@

 from reflex.utils import path_ops

-from .constants import ELEMENT_TO_PROPS, ELEMENTS
+from ..reflex.components.el.constants import ELEMENT_TO_PROPS, ELEMENTS


We shouldn't need a relative import, does the normal from reflex.components.el.constants work here?

masenf

Looks awesome.

For future work, we still need to get event triggers defined on some of these, but I think we should roll with what is already a big improvement.

The Svg element is essentially a separate XML doc embedded in the HTML, and I don't know how we want to handle that, but as it is, i don't think we will be reverse compiling svg to reflex code anytime soon, nor do i think that's desirable from a perf perspective. We can probably just inline the svg code in the Svg element for the reverse compiler in the short term.

masenf · 2023-11-20T22:21:52Z

reflex/components/radix/themes/components.pyi

-            size: Text field size "1" - "3"
+            size: Specifies the visible width of a text control


The inherited HTML element description probably shouldn't take precedent over the description from the class

Html refact

b019619

Alek99 marked this pull request as ready for review November 13, 2023 23:36

Alek Petuskey added 3 commits November 13, 2023 16:00

Add comments

362ff22

Fix comments

8048b56

Add noqa

6018965

masenf previously approved these changes Nov 14, 2023

View reviewed changes

Update html and add path

15f1124

Alek99 dismissed masenf’s stale review via 15f1124 November 20, 2023 01:25

picklelo and others added 20 commits November 19, 2023 17:55

Lazy import modules in reflex (#2144)

eea3902

Add ConnectionModel and ConnectionBanner to lazy components (#2167)

6f0b81d

form: only pass handleSubmit when on_submit is defined (#2162)

19830a5

Set is_hydrated var explicitly on rx.State (#2168)

bbb0982

Fix CustomComponent rendering (#2169)

05c2843

bump up websockets (#2170)

47fa946

Bump to v0.3.3 (#2178)

b70a067

Add chat icon (#2181)

1cbda68

Hosting CLI: remove requirements generation when init, add back timeo…

8a6a19b

…ut for deploy command, remove deploy legacy command (#2179)

add in new no_of_lines prop for text (#2184)

d045b21

* add in new no_of_lines prop for text * black update --------- Co-authored-by: Tom Gotsman <tomgotsman@toms-mbp.lan>

Apply new pyi script (#2041)

48c6ac2

Fix missing lazy imports (#2187)

93a966d

reflex_init_in_docker_test: export both frontend and backend (#2182)

8cca1b7

Fix wrong modal sizes (#2183)

c74696c

[REF-723+] Upload with progress and cancellation (#1899)

4721c4f

Bump to v0.3.4 (#2193)

cdd351c

_valid_children and _invalid_children accessible from class (#2192)

437e312

Speed up reflex CLI imports (#2185)

d77b700

check_generated_pyi: fix diff checking (#2029)

667d8ba

[fixup] _valid_children and _invalid_children pyi_generator and graph…

ff6b1e3

…ing components (#2194)

arnomoonens and others added 9 commits November 19, 2023 17:56

pyproject.toml: upgrade httpx to 0.25.0 (#2013)

a72d59d

Fix import

c7b3372

Merge branch 'main' into alek/htmlref

7177b18

Fix pre commit

5cce89a

Added pyi and docs for them

e47491b

Grammar

166aafa

Fix pyi

ddf998f

Fix pyi

210474a

Fix pyi

7461722

picklelo reviewed Nov 20, 2023

View reviewed changes

Remot precompile script

5124ccb

masenf approved these changes Nov 20, 2023

View reviewed changes

picklelo merged commit 88a3276 into main Nov 20, 2023
45 checks passed

masenf deleted the alek/htmlref branch December 6, 2023 22:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML Refactor #2164

HTML Refactor #2164

Alek99 commented Nov 13, 2023 •

edited

masenf left a comment

masenf Nov 14, 2023

masenf Nov 14, 2023

Alek99 commented Nov 15, 2023

masenf commented Nov 15, 2023

picklelo Nov 20, 2023

masenf left a comment

masenf Nov 20, 2023

		from .base import BaseHTML


		class A(BaseHTML): # Inherits common attributes from BaseMeta

	class A(BaseHTML): # Inherits common attributes from BaseMeta
	class A(BaseHTML):

		size: Text field size "1" - "3"
		size: Specifies the visible width of a text control

HTML Refactor #2164

HTML Refactor #2164

Conversation

Alek99 commented Nov 13, 2023 • edited

masenf left a comment

Choose a reason for hiding this comment

masenf Nov 14, 2023

Choose a reason for hiding this comment

masenf Nov 14, 2023

Choose a reason for hiding this comment

Alek99 commented Nov 15, 2023

masenf commented Nov 15, 2023

picklelo Nov 20, 2023

Choose a reason for hiding this comment

masenf left a comment

Choose a reason for hiding this comment

masenf Nov 20, 2023

Choose a reason for hiding this comment

Alek99 commented Nov 13, 2023 •

edited