Replies: 6 comments 9 replies
-
|
React has useContext etc for this(https://react.dev/learn/passing-data-deeply-with-context). I have been thinking of doing something similar for htpy but I think using the builtin contextvars module (https://docs.python.org/3/library/contextvars.html) solves this without doing anything else in htpy: import contextvars
import htpy as h
color_scheme = contextvars.ContextVar("color_scheme", default="light")
print(h.div(class_=f"color-scheme-{color_scheme.get()}")["Hi"])
color_scheme.set("dark")
print(h.div(class_=f"color-scheme-{color_scheme.get()}")["Hi"])result: So it is basically global state but managed a bit nicer. By using contextvars, it would be thread/async safe and works with typing. set/reset can be used in a view/middleware to set the values. Does that work for you? In that case we should definitely document this pattern. |
Beta Was this translation helpful? Give feedback.
-
|
(Did not yet had the need for this myself so I have not used it.) |
Beta Was this translation helpful? Give feedback.
-
|
I played with making it possible to pass contexts similar to how React does it, what do you think about #48 ? |
Beta Was this translation helpful? Give feedback.
-
|
Ohh! Thats very nice of you 😃 Could you write up an example how this would be used in a scenario where I have multiple nested components? Example:I have a theme (str) and a side_menu_open (bool). |
Beta Was this translation helpful? Give feedback.
-
|
The idea is that you first define your context variable such as from htpy import Context
theme_ctx = Context("gold")You provide/override values for all sub-components with To get/use a value, use Your example would look something like this (I also added type hints but those are optional): import htpy as h
# Defaults are currently required but should be optional (and raise an error if trying to use them without providing a value).
theme_ctx = h.Context("plain")
side_menu_open_ctx = h.Context(False)
# @app.get("/")
def get_root() -> h.Node:
current_theme = "blue" # get user theme from database/session etc
side_menu_open = True # get the side menu open state from database/session etc
return theme_ctx.provide(
current_theme,
lambda: side_menu_open_ctx.provide(side_menu_open, lambda: index_page()),
)
def index_page() -> h.Node:
return theme_ctx.use(
lambda theme: h.body(class_=f"theme-{theme}")[
side_menu(),
h.main(),
]
)
def side_menu() -> h.Node:
return side_menu_open_ctx.use(lambda is_open: h.aside(open=is_open)["The side menu"])
print(get_root())output: |
Beta Was this translation helpful? Give feedback.
-
|
Cool! Have you seen ReactPy? They have a hooks api. I haven't looked at that library yet I only skimmed the docs. |
Beta Was this translation helpful? Give feedback.
-
|
contextvars works too but is more like using globals. Using it properly could be tricky and have a lot of rough edges with unexpected behavior when using lazy callables/generators and overriding the context in part of the tree. It can be useful for instance to set the request object in a middleware and then be able to access it everywhere. It is just a global variable that is thread/asyncio safe. So if that is all you need, contextvars is a fine solution. Here is an example where using a generator(lazy evaluated) and trying to override the theme for a part of the tree: import contextvars
import htpy as h
theme = contextvars.ContextVar("theme", default="plain")
# @app.get("/")
def get_root() -> h.Node:
return index_page()
def index_page() -> h.Node:
token = theme.set("fancy")
result = h.body(class_=f"theme-{theme.get()}")[
h.h1[f"Showing of the {theme.get()} theme!"],
h.ul[(item() for x in range(2))],
]
theme.reset(token)
return result
def item() -> h.Node:
return h.li[f"Theme is currently {theme.get()}"]
print(get_root())which outputs: (notice that the value is reverted to "plain" in the There are many ways to shoot oneself in the foot like that. That is why I am playing with a htpy-rendering-tree-aware-Context-API. That kind of bug/confusion can never happen then. The context values then lives entirely in the htpy rendering tree and always matches it. Thanks for showing ReactPy, I had not seen it before! Creating hooks would require adding a decorator to the component in any case I think. Also, there will probably never be any other hooks in htpy(useState, useEffect etc does not make sense here). Anyways, it got me thinking and we could have a decorator that adds the context value as an argument instead: @side_menu_open_ctx.consumer
def side_menu(side_menu_is_open: bool) -> h.Node:
return h.aside(open=side_menu_is_open)["The side menu"]I think it looks quite a bit nicer, what do you think about that? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the explanation! I agree that you probably don't want hooks, etc. in htpy. Love the decorator yes 👏🏻! |
Beta Was this translation helpful? Give feedback.
-
|
This is released as part of htpy 24.8.2, give it a try and let me know how it goes! |
Beta Was this translation helpful? Give feedback.
-
|
There are two options:
@tree_context.consumer
@theme_context.consumer
def side_menu(theme: Theme, tree: FileAndFolderTree) -> h.Node:
return ... |
Beta Was this translation helpful? Give feedback.
-
|
(Documented the fact that a component can have multiple consumers: https://htpy.dev/usage/#passing-data-with-context) |
Beta Was this translation helpful? Give feedback.
-
|
I have been testing it out all day!
|
Beta Was this translation helpful? Give feedback.
-
|
That is nice to hear! Have not had any really good use case for them myself yet :) I did a quick run of the |
Beta Was this translation helpful? Give feedback.
-
|
Looks like the perf issues where due to my db code and network. I am surprised you do not have a use-case for it in your own code. |
Beta Was this translation helpful? Give feedback.
-
Having to pass state down from the
body -> side_menu -> current_tab -> list_of_folders -> folder -> list_of_items -> itemisn't fun.How do you solve this?
Beta Was this translation helpful? Give feedback.
All reactions