__init__.py 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. """Import all classes and functions the end user will need to make an app.
  2. Anything imported here will be available in the default Reflex import as `rx.*`.
  3. Dynamic Imports
  4. ---------------
  5. Reflex utilizes dynamic imports, or lazy loading, to reduce startup/import times.
  6. With this approach, imports are delayed until they are actually needed. We use
  7. the `lazy_loader` library(https://github.com/scientific-python/lazy_loader) to achieve this.
  8. How it works
  9. --------------
  10. `lazy_loader.attach` takes two optional arguments: `submodules` and `submod_attrs`.
  11. - `submodules` typically points to directories or files to be accessed.
  12. - `submod_attrs` defines a mapping of directory or file names as keys with a list
  13. of attributes or modules to access.
  14. Example directory structure:
  15. reflex/
  16. |_ components/
  17. |_ radix/
  18. |_ themes/
  19. |_ components/
  20. |_ box.py
  21. To add `box` under the `rx` namespace (`rx.box`), add the relative path to `submod_attrs` in
  22. `reflex/__init__.py` (this file):
  23. ```python
  24. lazy_loader.attach(
  25. submodules={"components"},
  26. submod_attrs={
  27. "components.radix.themes.components.box": ["box"]
  28. }
  29. )
  30. ```
  31. This implies that `box` will be imported from `reflex/components/radix/themes/components/box.py`.
  32. To add box under the `rx.radix` namespace (`rx.radix.box`), add the relative path to the
  33. submod_attrs argument in `reflex/components/radix/__init__.py`:
  34. ```python
  35. lazy_loader.attach(
  36. submodules = {"themes"},
  37. submod_attrs = {
  38. "themes.components.box": ["box"]
  39. }
  40. )
  41. ```
  42. Note: It is important to specify the immediate submodules of a directory in the submodules
  43. argument to ensure they are registered at runtime. For example, 'components' for reflex,
  44. 'radix' for components, 'themes' for radix, etc.
  45. Pyi_generator
  46. --------------
  47. To generate `.pyi` files for `__init__.py` files, we read the `_SUBMODULES` and `_SUBMOD_ATTRS`
  48. attributes to generate the import statements. It is highly recommended to define these with
  49. the provided annotations to facilitate their generation.
  50. Aliases
  51. ------------
  52. This is a special case to specify an alias for a component.
  53. As an example, we use this typically for `rx.list` where defining `list` attribute in the list.py
  54. overshadows python's list object which messes up the pyi generation for `list.pyi`. As a result, aliases
  55. should be used for similar cases like this. Note that this logic is employed to fix the pyi generation and alias
  56. should still be defined or accessible. Check out the __getattr__ logic in `reflex/components/radix/themes/layouts/list.py`
  57. ```python
  58. lazy_loader.attach(
  59. submodules={"components"},
  60. submod_attrs={
  61. "components.radix.themes.layouts": [("list_ns", "list")]
  62. }
  63. )
  64. ```
  65. In the example above, you will be able to do `rx.list`
  66. """
  67. from __future__ import annotations
  68. from reflex.utils import (
  69. compat, # for side-effects
  70. lazy_loader,
  71. )
  72. # import this here explicitly to avoid returning the page module since page attr has the
  73. # same name as page module(page.py)
  74. from .page import page as page
  75. # Remove the `compat` name from the namespace, it was imported for side-effects only.
  76. del compat
  77. RADIX_THEMES_MAPPING: dict = {
  78. "components.radix.themes.base": ["color_mode", "theme", "theme_panel"],
  79. "components.radix.themes.color_mode": ["color_mode"],
  80. }
  81. RADIX_THEMES_COMPONENTS_MAPPING: dict = {
  82. **{
  83. f"components.radix.themes.components.{mod}": [mod]
  84. for mod in [
  85. "alert_dialog",
  86. "aspect_ratio",
  87. "avatar",
  88. "badge",
  89. "button",
  90. "callout",
  91. "card",
  92. "checkbox",
  93. "context_menu",
  94. "data_list",
  95. "dialog",
  96. "hover_card",
  97. "icon_button",
  98. "input",
  99. "inset",
  100. "popover",
  101. "scroll_area",
  102. "select",
  103. "skeleton",
  104. "slider",
  105. "spinner",
  106. "switch",
  107. "table",
  108. "tabs",
  109. "text_area",
  110. "tooltip",
  111. "segmented_control",
  112. "radio_cards",
  113. "checkbox_cards",
  114. "checkbox_group",
  115. ]
  116. },
  117. "components.radix.themes.components.text_field": ["text_field", "input"],
  118. "components.radix.themes.components.radio_group": ["radio", "radio_group"],
  119. "components.radix.themes.components.dropdown_menu": ["menu", "dropdown_menu"],
  120. "components.radix.themes.components.separator": ["divider", "separator"],
  121. "components.radix.themes.components.progress": ["progress"],
  122. }
  123. RADIX_THEMES_LAYOUT_MAPPING: dict = {
  124. "components.radix.themes.layout.box": [
  125. "box",
  126. ],
  127. "components.radix.themes.layout.center": [
  128. "center",
  129. ],
  130. "components.radix.themes.layout.container": [
  131. "container",
  132. ],
  133. "components.radix.themes.layout.flex": [
  134. "flex",
  135. ],
  136. "components.radix.themes.layout.grid": [
  137. "grid",
  138. ],
  139. "components.radix.themes.layout.section": [
  140. "section",
  141. ],
  142. "components.radix.themes.layout.spacer": [
  143. "spacer",
  144. ],
  145. "components.radix.themes.layout.stack": [
  146. "stack",
  147. "hstack",
  148. "vstack",
  149. ],
  150. "components.radix.themes.layout.list": [
  151. ("list_ns", "list"),
  152. "list_item",
  153. "ordered_list",
  154. "unordered_list",
  155. ],
  156. }
  157. RADIX_THEMES_TYPOGRAPHY_MAPPING: dict = {
  158. "components.radix.themes.typography.blockquote": [
  159. "blockquote",
  160. ],
  161. "components.radix.themes.typography.code": [
  162. "code",
  163. ],
  164. "components.radix.themes.typography.heading": [
  165. "heading",
  166. ],
  167. "components.radix.themes.typography.link": [
  168. "link",
  169. ],
  170. "components.radix.themes.typography.text": [
  171. "text",
  172. ],
  173. }
  174. RADIX_PRIMITIVES_MAPPING: dict = {
  175. "components.radix.primitives.accordion": [
  176. "accordion",
  177. ],
  178. "components.radix.primitives.drawer": [
  179. "drawer",
  180. ],
  181. "components.radix.primitives.form": [
  182. "form",
  183. ],
  184. }
  185. COMPONENTS_CORE_MAPPING: dict = {
  186. "components.core.banner": [
  187. "connection_banner",
  188. "connection_modal",
  189. ],
  190. "components.core.cond": ["cond", "color_mode_cond"],
  191. "components.core.foreach": ["foreach"],
  192. "components.core.debounce": ["debounce_input"],
  193. "components.core.html": ["html"],
  194. "components.core.match": ["match"],
  195. "components.core.clipboard": ["clipboard"],
  196. "components.core.colors": ["color"],
  197. "components.core.breakpoints": ["breakpoints"],
  198. "components.core.responsive": [
  199. "desktop_only",
  200. "mobile_and_tablet",
  201. "mobile_only",
  202. "tablet_and_desktop",
  203. "tablet_only",
  204. ],
  205. "components.core.upload": [
  206. "cancel_upload",
  207. "clear_selected_files",
  208. "get_upload_dir",
  209. "get_upload_url",
  210. "selected_files",
  211. "upload",
  212. ],
  213. }
  214. COMPONENTS_BASE_MAPPING: dict = {
  215. "components.base.fragment": ["fragment", "Fragment"],
  216. "components.base.script": ["script", "Script"],
  217. }
  218. RADIX_MAPPING: dict = {
  219. **RADIX_THEMES_MAPPING,
  220. **RADIX_THEMES_COMPONENTS_MAPPING,
  221. **RADIX_THEMES_TYPOGRAPHY_MAPPING,
  222. **RADIX_THEMES_LAYOUT_MAPPING,
  223. **RADIX_PRIMITIVES_MAPPING,
  224. }
  225. _MAPPING: dict = {
  226. "experimental": ["_x"],
  227. "admin": ["AdminDash"],
  228. "app": ["App", "UploadFile"],
  229. "base": ["Base"],
  230. "components.component": [
  231. "Component",
  232. "NoSSRComponent",
  233. "memo",
  234. "ComponentNamespace",
  235. ],
  236. "components.el.elements.media": ["image"],
  237. "components.lucide": ["icon"],
  238. **COMPONENTS_BASE_MAPPING,
  239. "components.suneditor": [
  240. "editor",
  241. "EditorButtonList",
  242. "EditorOptions",
  243. ],
  244. "components": ["el", "radix", "lucide", "recharts", "next"],
  245. "components.markdown": ["markdown"],
  246. **RADIX_MAPPING,
  247. "components.plotly": ["plotly"],
  248. "components.react_player": ["audio", "video"],
  249. **COMPONENTS_CORE_MAPPING,
  250. "components.datadisplay.code": [
  251. "code_block",
  252. ],
  253. "components.datadisplay.dataeditor": [
  254. "data_editor",
  255. "data_editor_theme",
  256. ],
  257. "components.sonner.toast": ["toast"],
  258. "components.datadisplay.logo": ["logo"],
  259. "components.gridjs": ["data_table"],
  260. "components.moment": ["MomentDelta", "moment"],
  261. "config": ["Config", "DBConfig"],
  262. "constants": ["Env"],
  263. "event": [
  264. "EventChain",
  265. "EventHandler",
  266. "background",
  267. "call_script",
  268. "clear_local_storage",
  269. "clear_session_storage",
  270. "console_log",
  271. "download",
  272. "prevent_default",
  273. "redirect",
  274. "remove_cookie",
  275. "remove_local_storage",
  276. "remove_session_storage",
  277. "set_clipboard",
  278. "set_focus",
  279. "scroll_to",
  280. "set_value",
  281. "stop_propagation",
  282. "upload_files",
  283. "window_alert",
  284. ],
  285. "middleware": ["middleware", "Middleware"],
  286. "model": ["session", "Model"],
  287. "state": [
  288. "var",
  289. "Cookie",
  290. "LocalStorage",
  291. "SessionStorage",
  292. "ComponentState",
  293. "State",
  294. ],
  295. "style": ["Style", "toggle_color_mode"],
  296. "utils.imports": ["ImportVar"],
  297. "utils.serializers": ["serializer"],
  298. "vars": ["Var"],
  299. }
  300. _SUBMODULES: set[str] = {
  301. "components",
  302. "event",
  303. "app",
  304. "style",
  305. "admin",
  306. "base",
  307. "model",
  308. "testing",
  309. "utils",
  310. "vars",
  311. "config",
  312. "compiler",
  313. }
  314. _SUBMOD_ATTRS: dict = _MAPPING
  315. getattr, __dir__, __all__ = lazy_loader.attach(
  316. __name__,
  317. submodules=_SUBMODULES,
  318. submod_attrs=_SUBMOD_ATTRS,
  319. )
  320. def __getattr__(name):
  321. if name == "chakra":
  322. from reflex.utils import console
  323. console.deprecate(
  324. "rx.chakra",
  325. reason="and moved to a separate package. "
  326. "To continue using Chakra UI components, install the `reflex-chakra` package via `pip install "
  327. "reflex-chakra`.",
  328. deprecation_version="0.6.0",
  329. removal_version="0.7.0",
  330. dedupe=True,
  331. )
  332. import reflex_chakra as rc
  333. return rc
  334. return getattr(name)