Lazy import modules in reflex (#2144)

reflex/__init__.py

@@ -4,44 +4,314 @@ Anything imported here will be available in the default Reflex import as `rx.*`.
 To signal to typecheckers that something should be reexported,
 we use the Flask "import name as name" syntax.
 """
+import importlib
+from typing import Type
 
-from . import el as el
-from .admin import AdminDash as AdminDash
-from .app import App as App
-from .app import UploadFile as UploadFile
-from .base import Base as Base
-from .compiler.utils import get_asset_path
-from .components import *
-from .components.component import custom_component as memo
-from .components.graphing import recharts as recharts
-from .config import Config as Config
-from .config import DBConfig as DBConfig
-from .constants import Env as Env
-from .event import EventChain as EventChain
-from .event import FileUpload as upload_files
-from .event import background as background
-from .event import call_script as call_script
-from .event import clear_local_storage as clear_local_storage
-from .event import console_log as console_log
-from .event import download as download
-from .event import prevent_default as prevent_default
-from .event import redirect as redirect
-from .event import remove_cookie as remove_cookie
-from .event import remove_local_storage as remove_local_storage
-from .event import set_clipboard as set_clipboard
-from .event import set_focus as set_focus
-from .event import set_value as set_value
-from .event import stop_propagation as stop_propagation
-from .event import window_alert as window_alert
-from .middleware import Middleware as Middleware
-from .model import Model as Model
-from .model import session as session
-from .page import page as page
-from .state import ComputedVar as var
-from .state import Cookie as Cookie
-from .state import LocalStorage as LocalStorage
-from .state import State as State
-from .style import color_mode as color_mode
-from .style import toggle_color_mode as toggle_color_mode
-from .vars import Var as Var
-from .vars import cached_var as cached_var
+from reflex.page import page as page
+from reflex.utils.format import to_snake_case
+
+_ALL_COMPONENTS = [
+    "Accordion",
+    "AccordionButton",
+    "AccordionIcon",
+    "AccordionItem",
+    "AccordionPanel",
+    "Alert",
+    "AlertDescription",
+    "AlertDialog",
+    "AlertDialogBody",
+    "AlertDialogContent",
+    "AlertDialogFooter",
+    "AlertDialogHeader",
+    "AlertDialogOverlay",
+    "AlertIcon",
+    "AlertTitle",
+    "AspectRatio",
+    "Audio",
+    "Avatar",
+    "AvatarBadge",
+    "AvatarGroup",
+    "Badge",
+    "Box",
+    "Breadcrumb",
+    "BreadcrumbItem",
+    "BreadcrumbLink",
+    "BreadcrumbSeparator",
+    "Button",
+    "ButtonGroup",
+    "Card",
+    "CardBody",
+    "CardFooter",
+    "CardHeader",
+    "Center",
+    "Checkbox",
+    "CheckboxGroup",
+    "CircularProgress",
+    "CircularProgressLabel",
+    "Circle",
+    "Code",
+    "CodeBlock",
+    "Collapse",
+    "ColorModeButton",
+    "ColorModeIcon",
+    "ColorModeSwitch",
+    "Component",
+    "Cond",
+    "Container",
+    "DataTable",
+    "DataEditor",
+    "DebounceInput",
+    "Divider",
+    "Drawer",
+    "DrawerBody",
+    "DrawerCloseButton",
+    "DrawerContent",
+    "DrawerFooter",
+    "DrawerHeader",
+    "DrawerOverlay",
+    "Editable",
+    "EditableInput",
+    "EditablePreview",
+    "EditableTextarea",
+    "Editor",
+    "Email",
+    "Fade",
+    "Flex",
+    "Foreach",
+    "Form",
+    "FormControl",
+    "FormErrorMessage",
+    "FormHelperText",
+    "FormLabel",
+    "Fragment",
+    "Grid",
+    "GridItem",
+    "Heading",
+    "Highlight",
+    "Hstack",
+    "Html",
+    "Icon",
+    "IconButton",
+    "Image",
+    "Input",
+    "InputGroup",
+    "InputLeftAddon",
+    "InputLeftElement",
+    "InputRightAddon",
+    "InputRightElement",
+    "Kbd",
+    "Link",
+    "LinkBox",
+    "LinkOverlay",
+    "List",
+    "ListItem",
+    "Markdown",
+    "Menu",
+    "MenuButton",
+    "MenuDivider",
+    "MenuGroup",
+    "MenuItem",
+    "MenuItemOption",
+    "MenuList",
+    "MenuOptionGroup",
+    "Modal",
+    "ModalBody",
+    "ModalCloseButton",
+    "ModalContent",
+    "ModalFooter",
+    "ModalHeader",
+    "ModalOverlay",
+    "Moment",
+    "MultiSelect",
+    "MultiSelectOption",
+    "NextLink",
+    "NumberDecrementStepper",
+    "NumberIncrementStepper",
+    "NumberInput",
+    "NumberInputField",
+    "NumberInputStepper",
+    "Option",
+    "OrderedList",
+    "Password",
+    "PinInput",
+    "PinInputField",
+    "Plotly",
+    "Popover",
+    "PopoverAnchor",
+    "PopoverArrow",
+    "PopoverBody",
+    "PopoverCloseButton",
+    "PopoverContent",
+    "PopoverFooter",
+    "PopoverHeader",
+    "PopoverTrigger",
+    "Progress",
+    "Radio",
+    "RadioGroup",
+    "RangeSlider",
+    "RangeSliderFilledTrack",
+    "RangeSliderThumb",
+    "RangeSliderTrack",
+    "ResponsiveGrid",
+    "ScaleFade",
+    "Script",
+    "Select",
+    "Skeleton",
+    "SkeletonCircle",
+    "SkeletonText",
+    "Slide",
+    "SlideFade",
+    "Slider",
+    "SliderFilledTrack",
+    "SliderMark",
+    "SliderThumb",
+    "SliderTrack",
+    "Spacer",
+    "Span",
+    "Spinner",
+    "Square",
+    "Stack",
+    "Stat",
+    "StatArrow",
+    "StatGroup",
+    "StatHelpText",
+    "StatLabel",
+    "StatArrow",
+    "StatGroup",
+    "StatHelpText",
+    "StatLabel",
+    "StatNumber",
+    "Step",
+    "StepDescription",
+    "StepIcon",
+    "StepIndicator",
+    "StepNumber",
+    "StepSeparator",
+    "StepStatus",
+    "StepTitle",
+    "Stepper",
+    "Switch",
+    "Tab",
+    "TabList",
+    "TabPanel",
+    "TabPanels",
+    "Table",
+    "TableCaption",
+    "TableContainer",
+    "Tabs",
+    "Tag",
+    "TagCloseButton",
+    "TagLabel",
+    "TagLeftIcon",
+    "TagRightIcon",
+    "Tbody",
+    "Td",
+    "Text",
+    "TextArea",
+    "Tfoot",
+    "Th",
+    "Thead",
+    "Tooltip",
+    "Tr",
+    "UnorderedList",
+    "Upload",
+    "Video",
+    "VisuallyHidden",
+    "Vstack",
+    "Wrap",
+    "WrapItem",
+]
+
+_ALL_COMPONENTS += [to_snake_case(component) for component in _ALL_COMPONENTS]
+_ALL_COMPONENTS += [
+    "components",
+    "desktop_only",
+    "mobile_only",
+    "tablet_only",
+    "mobile_and_tablet",
+    "tablet_and_desktop",
+    "selected_files",
+    "clear_selected_files",
+    "EditorOptions",
+]
+
+_MAPPING = {
+    "reflex.admin": ["admin", "AdminDash"],
+    "reflex.app": ["app", "App", "UploadFile"],
+    "reflex.base": ["base", "Base"],
+    "reflex.compiler": ["compiler"],
+    "reflex.compiler.utils": ["get_asset_path"],
+    "reflex.components": _ALL_COMPONENTS,
+    "reflex.components.component": ["memo"],
+    "reflex.components.graphing": ["recharts"],
+    "reflex.config": ["config", "Config", "DBConfig"],
+    "reflex.constants": ["constants", "Env"],
+    "reflex.el": ["el"],
+    "reflex.event": [
+        "event",
+        "EventChain",
+        "background",
+        "call_script",
+        "clear_local_storage",
+        "console_log",
+        "download",
+        "prevent_default",
+        "redirect",
+        "remove_cookie",
+        "remove_local_storage",
+        "set_clipboard",
+        "set_focus",
+        "set_value",
+        "stop_propagation",
+        "upload_files",
+        "window_alert",
+    ],
+    "reflex.middleware": ["middleware", "Middleware"],
+    "reflex.model": ["model", "session", "Model"],
+    "reflex.page": ["page"],
+    "reflex.route": ["route"],
+    "reflex.state": ["state", "var", "Cookie", "LocalStorage", "State"],
+    "reflex.style": ["style", "color_mode", "toggle_color_mode"],
+    "reflex.testing": ["testing"],
+    "reflex.utils": ["utils"],
+    "reflex.vars": ["vars", "cached_var", "Var"],
+}
+_MAPPING = {value: key for key, values in _MAPPING.items() for value in values}
+
+
+def _removeprefix(text, prefix):
+    return text[text.startswith(prefix) and len(prefix) :]
+
+
+__all__ = [_removeprefix(mod, "reflex.") for mod in _MAPPING]
+
+
+def __getattr__(name: str) -> Type:
+    """Lazy load all modules.
+
+    Args:
+        name: name of the module to load.
+
+    Returns:
+        The module or the attribute of the module.
+
+    Raises:
+        AttributeError: If the module or the attribute does not exist.
+    """
+    try:
+        # Check for import of a module that is not in the mapping.
+        if name not in _MAPPING:
+            # If the name does not start with reflex, add it.
+            if not name.startswith("reflex") and name != "__all__":
+                name = f"reflex.{name}"
+            return importlib.import_module(name)
+
+        # Import the module.
+        module = importlib.import_module(_MAPPING[name])
+
+        # Get the attribute from the module if the name is not the module itself.
+        return (
+            getattr(module, name) if name != _MAPPING[name].rsplit(".")[-1] else module
+        )
+    except ModuleNotFoundError:
+        raise AttributeError(f"module 'reflex' has no attribute {name}") from None

reflex/__init__.pyi

@@ -0,0 +1,473 @@
+from reflex import admin as admin
+from reflex.admin import AdminDash as AdminDash
+from reflex import app as app
+from reflex.app import App as App
+from reflex.app import UploadFile as UploadFile
+from reflex import base as base
+from reflex.base import Base as Base
+from reflex import compiler as compiler
+from reflex.compiler.utils import get_asset_path as get_asset_path
+from reflex.components import Accordion as Accordion
+from reflex.components import AccordionButton as AccordionButton
+from reflex.components import AccordionIcon as AccordionIcon
+from reflex.components import AccordionItem as AccordionItem
+from reflex.components import AccordionPanel as AccordionPanel
+from reflex.components import Alert as Alert
+from reflex.components import AlertDescription as AlertDescription
+from reflex.components import AlertDialog as AlertDialog
+from reflex.components import AlertDialogBody as AlertDialogBody
+from reflex.components import AlertDialogContent as AlertDialogContent
+from reflex.components import AlertDialogFooter as AlertDialogFooter
+from reflex.components import AlertDialogHeader as AlertDialogHeader
+from reflex.components import AlertDialogOverlay as AlertDialogOverlay
+from reflex.components import AlertIcon as AlertIcon
+from reflex.components import AlertTitle as AlertTitle
+from reflex.components import AspectRatio as AspectRatio
+from reflex.components import Audio as Audio
+from reflex.components import Avatar as Avatar
+from reflex.components import AvatarBadge as AvatarBadge
+from reflex.components import AvatarGroup as AvatarGroup
+from reflex.components import Badge as Badge
+from reflex.components import Box as Box
+from reflex.components import Breadcrumb as Breadcrumb
+from reflex.components import BreadcrumbItem as BreadcrumbItem
+from reflex.components import BreadcrumbLink as BreadcrumbLink
+from reflex.components import BreadcrumbSeparator as BreadcrumbSeparator
+from reflex.components import Button as Button
+from reflex.components import ButtonGroup as ButtonGroup
+from reflex.components import Card as Card
+from reflex.components import CardBody as CardBody
+from reflex.components import CardFooter as CardFooter
+from reflex.components import CardHeader as CardHeader
+from reflex.components import Center as Center
+from reflex.components import Checkbox as Checkbox
+from reflex.components import CheckboxGroup as CheckboxGroup
+from reflex.components import CircularProgress as CircularProgress
+from reflex.components import CircularProgressLabel as CircularProgressLabel
+from reflex.components import Circle as Circle
+from reflex.components import Code as Code
+from reflex.components import CodeBlock as CodeBlock
+from reflex.components import Collapse as Collapse
+from reflex.components import ColorModeButton as ColorModeButton
+from reflex.components import ColorModeIcon as ColorModeIcon
+from reflex.components import ColorModeSwitch as ColorModeSwitch
+from reflex.components import Component as Component
+from reflex.components import Cond as Cond
+from reflex.components import Container as Container
+from reflex.components import DataTable as DataTable
+from reflex.components import DataEditor as DataEditor
+from reflex.components import DebounceInput as DebounceInput
+from reflex.components import Divider as Divider
+from reflex.components import Drawer as Drawer
+from reflex.components import DrawerBody as DrawerBody
+from reflex.components import DrawerCloseButton as DrawerCloseButton
+from reflex.components import DrawerContent as DrawerContent
+from reflex.components import DrawerFooter as DrawerFooter
+from reflex.components import DrawerHeader as DrawerHeader
+from reflex.components import DrawerOverlay as DrawerOverlay
+from reflex.components import Editable as Editable
+from reflex.components import EditableInput as EditableInput
+from reflex.components import EditablePreview as EditablePreview
+from reflex.components import EditableTextarea as EditableTextarea
+from reflex.components import Editor as Editor
+from reflex.components import Email as Email
+from reflex.components import Fade as Fade
+from reflex.components import Flex as Flex
+from reflex.components import Foreach as Foreach
+from reflex.components import Form as Form
+from reflex.components import FormControl as FormControl
+from reflex.components import FormErrorMessage as FormErrorMessage
+from reflex.components import FormHelperText as FormHelperText
+from reflex.components import FormLabel as FormLabel
+from reflex.components import Fragment as Fragment
+from reflex.components import Grid as Grid
+from reflex.components import GridItem as GridItem
+from reflex.components import Heading as Heading
+from reflex.components import Highlight as Highlight
+from reflex.components import Hstack as Hstack
+from reflex.components import Html as Html
+from reflex.components import Icon as Icon
+from reflex.components import IconButton as IconButton
+from reflex.components import Image as Image
+from reflex.components import Input as Input
+from reflex.components import InputGroup as InputGroup
+from reflex.components import InputLeftAddon as InputLeftAddon
+from reflex.components import InputLeftElement as InputLeftElement
+from reflex.components import InputRightAddon as InputRightAddon
+from reflex.components import InputRightElement as InputRightElement
+from reflex.components import Kbd as Kbd
+from reflex.components import Link as Link
+from reflex.components import LinkBox as LinkBox
+from reflex.components import LinkOverlay as LinkOverlay
+from reflex.components import List as List
+from reflex.components import ListItem as ListItem
+from reflex.components import Markdown as Markdown
+from reflex.components import Menu as Menu
+from reflex.components import MenuButton as MenuButton
+from reflex.components import MenuDivider as MenuDivider
+from reflex.components import MenuGroup as MenuGroup
+from reflex.components import MenuItem as MenuItem
+from reflex.components import MenuItemOption as MenuItemOption
+from reflex.components import MenuList as MenuList
+from reflex.components import MenuOptionGroup as MenuOptionGroup
+from reflex.components import Modal as Modal
+from reflex.components import ModalBody as ModalBody
+from reflex.components import ModalCloseButton as ModalCloseButton
+from reflex.components import ModalContent as ModalContent
+from reflex.components import ModalFooter as ModalFooter
+from reflex.components import ModalHeader as ModalHeader
+from reflex.components import ModalOverlay as ModalOverlay
+from reflex.components import Moment as Moment
+from reflex.components import MultiSelect as MultiSelect
+from reflex.components import MultiSelectOption as MultiSelectOption
+from reflex.components import NextLink as NextLink
+from reflex.components import NumberDecrementStepper as NumberDecrementStepper
+from reflex.components import NumberIncrementStepper as NumberIncrementStepper
+from reflex.components import NumberInput as NumberInput
+from reflex.components import NumberInputField as NumberInputField
+from reflex.components import NumberInputStepper as NumberInputStepper
+from reflex.components import Option as Option
+from reflex.components import OrderedList as OrderedList
+from reflex.components import Password as Password
+from reflex.components import PinInput as PinInput
+from reflex.components import PinInputField as PinInputField
+from reflex.components import Plotly as Plotly
+from reflex.components import Popover as Popover
+from reflex.components import PopoverAnchor as PopoverAnchor
+from reflex.components import PopoverArrow as PopoverArrow
+from reflex.components import PopoverBody as PopoverBody
+from reflex.components import PopoverCloseButton as PopoverCloseButton
+from reflex.components import PopoverContent as PopoverContent
+from reflex.components import PopoverFooter as PopoverFooter
+from reflex.components import PopoverHeader as PopoverHeader
+from reflex.components import PopoverTrigger as PopoverTrigger
+from reflex.components import Progress as Progress
+from reflex.components import Radio as Radio
+from reflex.components import RadioGroup as RadioGroup
+from reflex.components import RangeSlider as RangeSlider
+from reflex.components import RangeSliderFilledTrack as RangeSliderFilledTrack
+from reflex.components import RangeSliderThumb as RangeSliderThumb
+from reflex.components import RangeSliderTrack as RangeSliderTrack
+from reflex.components import ResponsiveGrid as ResponsiveGrid
+from reflex.components import ScaleFade as ScaleFade
+from reflex.components import Script as Script
+from reflex.components import Select as Select
+from reflex.components import Skeleton as Skeleton
+from reflex.components import SkeletonCircle as SkeletonCircle
+from reflex.components import SkeletonText as SkeletonText
+from reflex.components import Slide as Slide
+from reflex.components import SlideFade as SlideFade
+from reflex.components import Slider as Slider
+from reflex.components import SliderFilledTrack as SliderFilledTrack
+from reflex.components import SliderMark as SliderMark
+from reflex.components import SliderThumb as SliderThumb
+from reflex.components import SliderTrack as SliderTrack
+from reflex.components import Spacer as Spacer
+from reflex.components import Span as Span
+from reflex.components import Spinner as Spinner
+from reflex.components import Square as Square
+from reflex.components import Stack as Stack
+from reflex.components import Stat as Stat
+from reflex.components import StatArrow as StatArrow
+from reflex.components import StatGroup as StatGroup
+from reflex.components import StatHelpText as StatHelpText
+from reflex.components import StatLabel as StatLabel
+from reflex.components import StatNumber as StatNumber
+from reflex.components import Step as Step
+from reflex.components import StepDescription as StepDescription
+from reflex.components import StepIcon as StepIcon
+from reflex.components import StepIndicator as StepIndicator
+from reflex.components import StepNumber as StepNumber
+from reflex.components import StepSeparator as StepSeparator
+from reflex.components import StepStatus as StepStatus
+from reflex.components import StepTitle as StepTitle
+from reflex.components import Stepper as Stepper
+from reflex.components import Switch as Switch
+from reflex.components import Tab as Tab
+from reflex.components import TabList as TabList
+from reflex.components import TabPanel as TabPanel
+from reflex.components import TabPanels as TabPanels
+from reflex.components import Table as Table
+from reflex.components import TableCaption as TableCaption
+from reflex.components import TableContainer as TableContainer
+from reflex.components import Tabs as Tabs
+from reflex.components import Tag as Tag
+from reflex.components import TagCloseButton as TagCloseButton
+from reflex.components import TagLabel as TagLabel
+from reflex.components import TagLeftIcon as TagLeftIcon
+from reflex.components import TagRightIcon as TagRightIcon
+from reflex.components import Tbody as Tbody
+from reflex.components import Td as Td
+from reflex.components import Text as Text
+from reflex.components import TextArea as TextArea
+from reflex.components import Tfoot as Tfoot
+from reflex.components import Th as Th
+from reflex.components import Thead as Thead
+from reflex.components import Tooltip as Tooltip
+from reflex.components import Tr as Tr
+from reflex.components import UnorderedList as UnorderedList
+from reflex.components import Upload as Upload
+from reflex.components import Video as Video
+from reflex.components import VisuallyHidden as VisuallyHidden
+from reflex.components import Vstack as Vstack
+from reflex.components import Wrap as Wrap
+from reflex.components import WrapItem as WrapItem
+from reflex.components import accordion as accordion
+from reflex.components import accordion_button as accordion_button
+from reflex.components import accordion_icon as accordion_icon
+from reflex.components import accordion_item as accordion_item
+from reflex.components import accordion_panel as accordion_panel
+from reflex.components import alert as alert
+from reflex.components import alert_description as alert_description
+from reflex.components import alert_dialog as alert_dialog
+from reflex.components import alert_dialog_body as alert_dialog_body
+from reflex.components import alert_dialog_content as alert_dialog_content
+from reflex.components import alert_dialog_footer as alert_dialog_footer
+from reflex.components import alert_dialog_header as alert_dialog_header
+from reflex.components import alert_dialog_overlay as alert_dialog_overlay
+from reflex.components import alert_icon as alert_icon
+from reflex.components import alert_title as alert_title
+from reflex.components import aspect_ratio as aspect_ratio
+from reflex.components import audio as audio
+from reflex.components import avatar as avatar
+from reflex.components import avatar_badge as avatar_badge
+from reflex.components import avatar_group as avatar_group
+from reflex.components import badge as badge
+from reflex.components import box as box
+from reflex.components import breadcrumb as breadcrumb
+from reflex.components import breadcrumb_item as breadcrumb_item
+from reflex.components import breadcrumb_link as breadcrumb_link
+from reflex.components import breadcrumb_separator as breadcrumb_separator
+from reflex.components import button as button
+from reflex.components import button_group as button_group
+from reflex.components import card as card
+from reflex.components import card_body as card_body
+from reflex.components import card_footer as card_footer
+from reflex.components import card_header as card_header
+from reflex.components import center as center
+from reflex.components import checkbox as checkbox
+from reflex.components import checkbox_group as checkbox_group
+from reflex.components import circular_progress as circular_progress
+from reflex.components import circular_progress_label as circular_progress_label
+from reflex.components import circle as circle
+from reflex.components import code as code
+from reflex.components import code_block as code_block
+from reflex.components import collapse as collapse
+from reflex.components import color_mode_button as color_mode_button
+from reflex.components import color_mode_icon as color_mode_icon
+from reflex.components import color_mode_switch as color_mode_switch
+from reflex.components import component as component
+from reflex.components import cond as cond
+from reflex.components import container as container
+from reflex.components import data_table as data_table
+from reflex.components import data_editor as data_editor
+from reflex.components import debounce_input as debounce_input
+from reflex.components import divider as divider
+from reflex.components import drawer as drawer
+from reflex.components import drawer_body as drawer_body
+from reflex.components import drawer_close_button as drawer_close_button
+from reflex.components import drawer_content as drawer_content
+from reflex.components import drawer_footer as drawer_footer
+from reflex.components import drawer_header as drawer_header
+from reflex.components import drawer_overlay as drawer_overlay
+from reflex.components import editable as editable
+from reflex.components import editable_input as editable_input
+from reflex.components import editable_preview as editable_preview
+from reflex.components import editable_textarea as editable_textarea
+from reflex.components import editor as editor
+from reflex.components import email as email
+from reflex.components import fade as fade
+from reflex.components import flex as flex
+from reflex.components import foreach as foreach
+from reflex.components import form as form
+from reflex.components import form_control as form_control
+from reflex.components import form_error_message as form_error_message
+from reflex.components import form_helper_text as form_helper_text
+from reflex.components import form_label as form_label
+from reflex.components import fragment as fragment
+from reflex.components import grid as grid
+from reflex.components import grid_item as grid_item
+from reflex.components import heading as heading
+from reflex.components import highlight as highlight
+from reflex.components import hstack as hstack
+from reflex.components import html as html
+from reflex.components import icon as icon
+from reflex.components import icon_button as icon_button
+from reflex.components import image as image
+from reflex.components import input as input
+from reflex.components import input_group as input_group
+from reflex.components import input_left_addon as input_left_addon
+from reflex.components import input_left_element as input_left_element
+from reflex.components import input_right_addon as input_right_addon
+from reflex.components import input_right_element as input_right_element
+from reflex.components import kbd as kbd
+from reflex.components import link as link
+from reflex.components import link_box as link_box
+from reflex.components import link_overlay as link_overlay
+from reflex.components import list as list
+from reflex.components import list_item as list_item
+from reflex.components import markdown as markdown
+from reflex.components import menu as menu
+from reflex.components import menu_button as menu_button
+from reflex.components import menu_divider as menu_divider
+from reflex.components import menu_group as menu_group
+from reflex.components import menu_item as menu_item
+from reflex.components import menu_item_option as menu_item_option
+from reflex.components import menu_list as menu_list
+from reflex.components import menu_option_group as menu_option_group
+from reflex.components import modal as modal
+from reflex.components import modal_body as modal_body
+from reflex.components import modal_close_button as modal_close_button
+from reflex.components import modal_content as modal_content
+from reflex.components import modal_footer as modal_footer
+from reflex.components import modal_header as modal_header
+from reflex.components import modal_overlay as modal_overlay
+from reflex.components import moment as moment
+from reflex.components import multi_select as multi_select
+from reflex.components import multi_select_option as multi_select_option
+from reflex.components import next_link as next_link
+from reflex.components import number_decrement_stepper as number_decrement_stepper
+from reflex.components import number_increment_stepper as number_increment_stepper
+from reflex.components import number_input as number_input
+from reflex.components import number_input_field as number_input_field
+from reflex.components import number_input_stepper as number_input_stepper
+from reflex.components import option as option
+from reflex.components import ordered_list as ordered_list
+from reflex.components import password as password
+from reflex.components import pin_input as pin_input
+from reflex.components import pin_input_field as pin_input_field
+from reflex.components import plotly as plotly
+from reflex.components import popover as popover
+from reflex.components import popover_anchor as popover_anchor
+from reflex.components import popover_arrow as popover_arrow
+from reflex.components import popover_body as popover_body
+from reflex.components import popover_close_button as popover_close_button
+from reflex.components import popover_content as popover_content
+from reflex.components import popover_footer as popover_footer
+from reflex.components import popover_header as popover_header
+from reflex.components import popover_trigger as popover_trigger
+from reflex.components import progress as progress
+from reflex.components import radio as radio
+from reflex.components import radio_group as radio_group
+from reflex.components import range_slider as range_slider
+from reflex.components import range_slider_filled_track as range_slider_filled_track
+from reflex.components import range_slider_thumb as range_slider_thumb
+from reflex.components import range_slider_track as range_slider_track
+from reflex.components import responsive_grid as responsive_grid
+from reflex.components import scale_fade as scale_fade
+from reflex.components import script as script
+from reflex.components import select as select
+from reflex.components import skeleton as skeleton
+from reflex.components import skeleton_circle as skeleton_circle
+from reflex.components import skeleton_text as skeleton_text
+from reflex.components import slide as slide
+from reflex.components import slide_fade as slide_fade
+from reflex.components import slider as slider
+from reflex.components import slider_filled_track as slider_filled_track
+from reflex.components import slider_mark as slider_mark
+from reflex.components import slider_thumb as slider_thumb
+from reflex.components import slider_track as slider_track
+from reflex.components import spacer as spacer
+from reflex.components import span as span
+from reflex.components import spinner as spinner
+from reflex.components import square as square
+from reflex.components import stack as stack
+from reflex.components import stat as stat
+from reflex.components import stat_arrow as stat_arrow
+from reflex.components import stat_group as stat_group
+from reflex.components import stat_help_text as stat_help_text
+from reflex.components import stat_label as stat_label
+from reflex.components import stat_number as stat_number
+from reflex.components import step as step
+from reflex.components import step_description as step_description
+from reflex.components import step_icon as step_icon
+from reflex.components import step_indicator as step_indicator
+from reflex.components import step_number as step_number
+from reflex.components import step_separator as step_separator
+from reflex.components import step_status as step_status
+from reflex.components import step_title as step_title
+from reflex.components import stepper as stepper
+from reflex.components import switch as switch
+from reflex.components import tab as tab
+from reflex.components import tab_list as tab_list
+from reflex.components import tab_panel as tab_panel
+from reflex.components import tab_panels as tab_panels
+from reflex.components import table as table
+from reflex.components import table_caption as table_caption
+from reflex.components import table_container as table_container
+from reflex.components import tabs as tabs
+from reflex.components import tag as tag
+from reflex.components import tag_close_button as tag_close_button
+from reflex.components import tag_label as tag_label
+from reflex.components import tag_left_icon as tag_left_icon
+from reflex.components import tag_right_icon as tag_right_icon
+from reflex.components import tbody as tbody
+from reflex.components import td as td
+from reflex.components import text as text
+from reflex.components import text_area as text_area
+from reflex.components import tfoot as tfoot
+from reflex.components import th as th
+from reflex.components import thead as thead
+from reflex.components import tooltip as tooltip
+from reflex.components import tr as tr
+from reflex.components import unordered_list as unordered_list
+from reflex.components import upload as upload
+from reflex.components import video as video
+from reflex.components import visually_hidden as visually_hidden
+from reflex.components import vstack as vstack
+from reflex.components import wrap as wrap
+from reflex.components import wrap_item as wrap_item
+from reflex import components as components
+from reflex.components import desktop_only as desktop_only
+from reflex.components import mobile_only as mobile_only
+from reflex.components import tablet_only as tablet_only
+from reflex.components import mobile_and_tablet as mobile_and_tablet
+from reflex.components import tablet_and_desktop as tablet_and_desktop
+from reflex.components import selected_files as selected_files
+from reflex.components import clear_selected_files as clear_selected_files
+from reflex.components import EditorOptions as EditorOptions
+from reflex.components.component import memo as memo
+from reflex.components.graphing import recharts as recharts
+from reflex import config as config
+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 import event as event
+from reflex.event import EventChain as EventChain
+from reflex.event import background as background
+from reflex.event import call_script as call_script
+from reflex.event import clear_local_storage as clear_local_storage
+from reflex.event import console_log as console_log
+from reflex.event import download as download
+from reflex.event import prevent_default as prevent_default
+from reflex.event import redirect as redirect
+from reflex.event import remove_cookie as remove_cookie
+from reflex.event import remove_local_storage as remove_local_storage
+from reflex.event import set_clipboard as set_clipboard
+from reflex.event import set_focus as set_focus
+from reflex.event import set_value as set_value
+from reflex.event import stop_propagation as stop_propagation
+from reflex.event import upload_files as upload_files
+from reflex.event import window_alert as window_alert
+from reflex import middleware as middleware
+from reflex.middleware import Middleware as Middleware
+from reflex import model as model
+from reflex.model import session as session
+from reflex.model import Model as Model
+from reflex.page import page as page
+from reflex import route as route
+from reflex import state as state
+from reflex.state import var as var
+from reflex.state import Cookie as Cookie
+from reflex.state import LocalStorage as LocalStorage
+from reflex.state import State as State
+from reflex import style as style
+from reflex.style import color_mode as color_mode
+from reflex.style import toggle_color_mode as toggle_color_mode
+from reflex import testing as testing
+from reflex import utils as utils
+from reflex import vars as vars
+from reflex.vars import cached_var as cached_var
+from reflex.vars import Var as Var

reflex/components/__init__.py

@@ -26,172 +26,61 @@ from .typography import *
 
 # Add the convenience methods for all the components manually.
 # This is necessary for static type checking to work.
-component = Component.create
-badge = Badge.create
-code = Code.create
-code_block = CodeBlock.create
-connection_banner = ConnectionBanner.create
-connection_modal = ConnectionModal.create
-data_editor = DataEditor.create
-data_editor_theme = DataEditorTheme
-data_table = DataTable.create
-divider = Divider.create
-list = List.create
-list_item = ListItem.create
-ordered_list = OrderedList.create
-unordered_list = UnorderedList.create
-stat = Stat.create
-stat_arrow = StatArrow.create
-stat_group = StatGroup.create
-stat_help_text = StatHelpText.create
-stat_label = StatLabel.create
-stat_number = StatNumber.create
-tag = Tag.create
-tag_label = TagLabel.create
-tag_left_icon = TagLeftIcon.create
-tag_right_icon = TagRightIcon.create
-tag_close_button = TagCloseButton.create
-table = Table.create
-table_caption = TableCaption.create
-table_container = TableContainer.create
-tbody = Tbody.create
-td = Td.create
-tfoot = Tfoot.create
-th = Th.create
-thead = Thead.create
-tr = Tr.create
 accordion = Accordion.create
 accordion_button = AccordionButton.create
 accordion_icon = AccordionIcon.create
 accordion_item = AccordionItem.create
 accordion_panel = AccordionPanel.create
-tab = Tab.create
-tab_list = TabList.create
-tab_panel = TabPanel.create
-tab_panels = TabPanels.create
-tabs = Tabs.create
-visually_hidden = VisuallyHidden.create
-fade = Fade.create
-scale_fade = ScaleFade.create
-slide = Slide.create
-slide_fade = SlideFade.create
-collapse = Collapse.create
 alert = Alert.create
 alert_description = AlertDescription.create
-alert_icon = AlertIcon.create
-alert_title = AlertTitle.create
-card = Card.create
-card_body = CardBody.create
-card_footer = CardFooter.create
-card_header = CardHeader.create
-circular_progress = CircularProgress.create
-circular_progress_label = CircularProgressLabel.create
-progress = Progress.create
-skeleton = Skeleton.create
-skeleton_circle = SkeletonCircle.create
-skeleton_text = SkeletonText.create
-spinner = Spinner.create
-button = Button.create
-button_group = ButtonGroup.create
-checkbox = Checkbox.create
-checkbox_group = CheckboxGroup.create
-date_picker = DatePicker.create
-date_time_picker = DateTimePicker.create
-debounce_input = DebounceInput.create
-editable = Editable.create
-editable_input = EditableInput.create
-editable_preview = EditablePreview.create
-editable_textarea = EditableTextarea.create
-editor = Editor.create
-form = Form.create
-form_control = FormControl.create
-form_error_message = FormErrorMessage.create
-form_helper_text = FormHelperText.create
-form_label = FormLabel.create
-icon_button = IconButton.create
-input = Input.create
-input_group = InputGroup.create
-input_left_addon = InputLeftAddon.create
-input_right_addon = InputRightAddon.create
-input_left_element = InputLeftElement.create
-input_right_element = InputRightElement.create
-moment = Moment.create
-multi_select = MultiSelect.create
-multi_select_option = MultiSelectOption
-number_decrement_stepper = NumberDecrementStepper.create
-number_increment_stepper = NumberIncrementStepper.create
-number_input = NumberInput.create
-number_input_field = NumberInputField.create
-number_input_stepper = NumberInputStepper.create
-option = Option.create
-password = Password.create
-email = Email.create
-pin_input = PinInput.create
-pin_input_field = PinInputField.create
-radio = Radio.create
-radio_group = RadioGroup.create
-range_slider = RangeSlider.create
-range_slider_filled_track = RangeSliderFilledTrack.create
-range_slider_thumb = RangeSliderThumb.create
-range_slider_track = RangeSliderTrack.create
-select = Select.create
-slider = Slider.create
-slider_filled_track = SliderFilledTrack.create
-slider_mark = SliderMark.create
-slider_thumb = SliderThumb.create
-slider_track = SliderTrack.create
-switch = Switch.create
-text_area = TextArea.create
-upload = Upload.create
-plotly = Plotly.create
-box = Box.create
-center = Center.create
-circle = Circle.create
-container = Container.create
-flex = Flex.create
-foreach = Foreach.create
-fragment = Fragment.create
-grid = Grid.create
-grid_item = GridItem.create
-hstack = Hstack.create
-html = Html.create
-responsive_grid = ResponsiveGrid.create
-spacer = Spacer.create
-square = Square.create
-stack = Stack.create
-vstack = Vstack.create
-wrap = Wrap.create
-wrap_item = WrapItem.create
-avatar = Avatar.create
-avatar_badge = AvatarBadge.create
-avatar_group = AvatarGroup.create
-icon = Icon.create
-image = Image.create
-video = Video.create
-audio = Audio.create
-breadcrumb = Breadcrumb.create
-breadcrumb_item = BreadcrumbItem.create
-breadcrumb_link = BreadcrumbLink.create
-breadcrumb_separator = BreadcrumbSeparator.create
-link = Link.create
-link_box = LinkBox.create
-link_overlay = LinkOverlay.create
-next_link = NextLink.create
-step = Step.create
-step_description = StepDescription.create
-step_icon = StepIcon.create
-step_indicator = StepIndicator.create
-step_number = StepNumber.create
-step_separator = StepSeparator.create
-step_status = StepStatus.create
-step_title = StepTitle.create
-stepper = Stepper.create
 alert_dialog = AlertDialog.create
 alert_dialog_body = AlertDialogBody.create
 alert_dialog_content = AlertDialogContent.create
 alert_dialog_footer = AlertDialogFooter.create
 alert_dialog_header = AlertDialogHeader.create
 alert_dialog_overlay = AlertDialogOverlay.create
+alert_icon = AlertIcon.create
+alert_title = AlertTitle.create
+aspect_ratio = AspectRatio.create
+audio = Audio.create
+avatar = Avatar.create
+avatar_badge = AvatarBadge.create
+avatar_group = AvatarGroup.create
+badge = Badge.create
+box = Box.create
+breadcrumb = Breadcrumb.create
+breadcrumb_item = BreadcrumbItem.create
+breadcrumb_link = BreadcrumbLink.create
+breadcrumb_separator = BreadcrumbSeparator.create
+button = Button.create
+button_group = ButtonGroup.create
+card = Card.create
+card_body = CardBody.create
+card_footer = CardFooter.create
+card_header = CardHeader.create
+center = Center.create
+checkbox = Checkbox.create
+checkbox_group = CheckboxGroup.create
+circle = Circle.create
+circular_progress = CircularProgress.create
+circular_progress_label = CircularProgressLabel.create
+code = Code.create
+code_block = CodeBlock.create
+collapse = Collapse.create
+color_mode_button = ColorModeButton.create
+color_mode_icon = ColorModeIcon.create
+color_mode_switch = ColorModeSwitch.create
+component = Component.create
+connection_banner = ConnectionBanner.create
+connection_modal = ConnectionModal.create
+container = Container.create
+data_editor = DataEditor.create
+data_editor_theme = DataEditorTheme
+data_table = DataTable.create
+date_picker = DatePicker.create
+date_time_picker = DateTimePicker.create
+debounce_input = DebounceInput.create
+divider = Divider.create
 drawer = Drawer.create
 drawer_body = DrawerBody.create
 drawer_close_button = DrawerCloseButton.create
@@ -199,6 +88,43 @@ drawer_content = DrawerContent.create
 drawer_footer = DrawerFooter.create
 drawer_header = DrawerHeader.create
 drawer_overlay = DrawerOverlay.create
+editable = Editable.create
+editable_input = EditableInput.create
+editable_preview = EditablePreview.create
+editable_textarea = EditableTextarea.create
+editor = Editor.create
+email = Email.create
+fade = Fade.create
+flex = Flex.create
+foreach = Foreach.create
+form = Form.create
+form_control = FormControl.create
+form_error_message = FormErrorMessage.create
+form_helper_text = FormHelperText.create
+form_label = FormLabel.create
+fragment = Fragment.create
+grid = Grid.create
+grid_item = GridItem.create
+heading = Heading.create
+highlight = Highlight.create
+hstack = Hstack.create
+html = Html.create
+icon = Icon.create
+icon_button = IconButton.create
+image = Image.create
+input = Input.create
+input_group = InputGroup.create
+input_left_addon = InputLeftAddon.create
+input_left_element = InputLeftElement.create
+input_right_addon = InputRightAddon.create
+input_right_element = InputRightElement.create
+kbd = Kbd.create
+link = Link.create
+link_box = LinkBox.create
+link_overlay = LinkOverlay.create
+list = List.create
+list_item = ListItem.create
+markdown = Markdown.create
 menu = Menu.create
 menu_button = MenuButton.create
 menu_divider = MenuDivider.create
@@ -214,6 +140,21 @@ modal_content = ModalContent.create
 modal_footer = ModalFooter.create
 modal_header = ModalHeader.create
 modal_overlay = ModalOverlay.create
+moment = Moment.create
+multi_select = MultiSelect.create
+multi_select_option = MultiSelectOption
+next_link = NextLink.create
+number_decrement_stepper = NumberDecrementStepper.create
+number_increment_stepper = NumberIncrementStepper.create
+number_input = NumberInput.create
+number_input_field = NumberInputField.create
+number_input_stepper = NumberInputStepper.create
+option = Option.create
+ordered_list = OrderedList.create
+password = Password.create
+pin_input = PinInput.create
+pin_input_field = PinInputField.create
+plotly = Plotly.create
 popover = Popover.create
 popover_anchor = PopoverAnchor.create
 popover_arrow = PopoverArrow.create
@@ -223,15 +164,74 @@ popover_content = PopoverContent.create
 popover_footer = PopoverFooter.create
 popover_header = PopoverHeader.create
 popover_trigger = PopoverTrigger.create
-tooltip = Tooltip.create
-heading = Heading.create
-highlight = Highlight.create
-markdown = Markdown.create
-span = Span.create
-text = Text.create
+progress = Progress.create
+radio = Radio.create
+radio_group = RadioGroup.create
+range_slider = RangeSlider.create
+range_slider_filled_track = RangeSliderFilledTrack.create
+range_slider_thumb = RangeSliderThumb.create
+range_slider_track = RangeSliderTrack.create
+responsive_grid = ResponsiveGrid.create
+scale_fade = ScaleFade.create
 script = Script.create
-aspect_ratio = AspectRatio.create
-kbd = KeyboardKey.create
-color_mode_button = ColorModeButton.create
-color_mode_icon = ColorModeIcon.create
-color_mode_switch = ColorModeSwitch.create
+select = Select.create
+skeleton = Skeleton.create
+skeleton_circle = SkeletonCircle.create
+skeleton_text = SkeletonText.create
+slide = Slide.create
+slide_fade = SlideFade.create
+slider = Slider.create
+slider_filled_track = SliderFilledTrack.create
+slider_mark = SliderMark.create
+slider_thumb = SliderThumb.create
+slider_track = SliderTrack.create
+spacer = Spacer.create
+span = Span.create
+spinner = Spinner.create
+square = Square.create
+stack = Stack.create
+stat = Stat.create
+stat_arrow = StatArrow.create
+stat_group = StatGroup.create
+stat_help_text = StatHelpText.create
+stat_label = StatLabel.create
+stat_number = StatNumber.create
+step = Step.create
+step_description = StepDescription.create
+step_icon = StepIcon.create
+step_indicator = StepIndicator.create
+step_number = StepNumber.create
+step_separator = StepSeparator.create
+step_status = StepStatus.create
+step_title = StepTitle.create
+stepper = Stepper.create
+switch = Switch.create
+tab = Tab.create
+tab_list = TabList.create
+tab_panel = TabPanel.create
+tab_panels = TabPanels.create
+table = Table.create
+table_caption = TableCaption.create
+table_container = TableContainer.create
+tabs = Tabs.create
+tag = Tag.create
+tag_close_button = TagCloseButton.create
+tag_label = TagLabel.create
+tag_left_icon = TagLeftIcon.create
+tag_right_icon = TagRightIcon.create
+tbody = Tbody.create
+td = Td.create
+text = Text.create
+text_area = TextArea.create
+tfoot = Tfoot.create
+th = Th.create
+thead = Thead.create
+tooltip = Tooltip.create
+tr = Tr.create
+unordered_list = UnorderedList.create
+upload = Upload.create
+video = Video.create
+visually_hidden = VisuallyHidden.create
+vstack = Vstack.create
+wrap = Wrap.create
+wrap_item = WrapItem.create

reflex/components/component.py

@@ -1000,6 +1000,10 @@ def custom_component(
     return wrapper
 
 
+# Alias memo to custom_component.
+memo = custom_component
+
+
 class NoSSRComponent(Component):
     """A dynamic component that is not rendered on the server."""
 

reflex/components/datadisplay/__init__.py

@@ -7,7 +7,7 @@ from .code import LiteralCodeLanguage as LiteralCodeLanguage
 from .dataeditor import DataEditor, DataEditorTheme
 from .datatable import DataTable
 from .divider import Divider
-from .keyboard_key import KeyboardKey
+from .keyboard_key import KeyboardKey as Kbd
 from .list import List, ListItem, OrderedList, UnorderedList
 from .moment import Moment
 from .stat import Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber

reflex/event.py

@@ -270,6 +270,10 @@ class FileUpload(Base):
     pass
 
 
+# Alias for rx.upload_files
+upload_files = FileUpload
+
+
 # Special server-side events.
 def server_side(name: str, sig: inspect.Signature, **kwargs) -> EventSpec:
     """A server-side event.

reflex/page.py

@@ -2,8 +2,7 @@
 
 from __future__ import annotations
 
-from reflex.components.component import Component
-from reflex.event import EventHandler
+from typing import Any
 
 DECORATED_PAGES = []
 
@@ -14,8 +13,8 @@ def page(
     image: str | None = None,
     description: str | None = None,
     meta: str | None = None,
-    script_tags: list[Component] | None = None,
-    on_load: EventHandler | list[EventHandler] | None = None,
+    script_tags: list[Any] | None = None,
+    on_load: Any | list[Any] | None = None,
 ):
     """Decorate a function as a page.
 

reflex/page.pyi

@@ -0,0 +1,17 @@
+"""The page decorator and associated variables and functions."""
+
+from reflex.components.component import Component
+from reflex.event import EventHandler
+
+DECORATED_PAGES: list
+
+def page(
+    route: str | None = None,
+    title: str | None = None,
+    image: str | None = None,
+    description: str | None = None,
+    meta: str | None = None,
+    script_tags: list[Component] | None = None,
+    on_load: EventHandler | list[EventHandler] | None = None,
+): ...
+def get_decorated_pages() -> list[dict]: ...

reflex/state.py

@@ -47,6 +47,7 @@ from reflex.utils.serializers import SerializedType, serialize, serializer
 from reflex.vars import BaseVar, ComputedVar, Var
 
 Delta = Dict[str, Any]
+var = ComputedVar
 
 
 class HeaderData(Base):

scripts/pyi_generator.py

@@ -609,6 +609,19 @@ class PyiGenerator:
                 self._scan_folder(target)
 
 
+def generate_init():
+    """Generate a pyi file for the main __init__.py."""
+    from reflex import _MAPPING  # type: ignore
+
+    imports = [
+        f"from {path if mod != path.rsplit('.')[-1] or mod == 'page' else '.'.join(path.rsplit('.')[:-1])} import {mod} as {mod}"
+        for mod, path in _MAPPING.items()
+    ]
+
+    with open("reflex/__init__.pyi", "w") as pyi_file:
+        pyi_file.writelines("\n".join(imports))
+
+
 if __name__ == "__main__":
     logging.basicConfig(level=logging.DEBUG)
     logging.getLogger("blib2to3.pgen2.driver").setLevel(logging.INFO)
@@ -617,3 +630,4 @@ if __name__ == "__main__":
     logger.info(f"Running .pyi generator for {targets}")
     gen = PyiGenerator()
     gen.scan_all(targets)
+    generate_init()

tests/test_state.py

@@ -905,7 +905,7 @@ class InterdependentState(State):
         Returns:
             ComputedVar v1x2 multiplied by 2
         """
-        return self.v1x2 * 2
+        return self.v1x2 * 2  # type: ignore
 
 
 @pytest.fixture
@@ -1105,7 +1105,7 @@ def test_computed_var_cached_depends_on_non_cached():
 
         @rx.cached_var
         def dep_v(self) -> int:
-            return self.no_cache_v
+            return self.no_cache_v  # type: ignore
 
         @rx.cached_var
         def comp_v(self) -> int:
@@ -1148,7 +1148,7 @@ def test_computed_var_depends_on_parent_non_cached():
     class ChildState(ParentState):
         @rx.cached_var
         def dep_v(self) -> int:
-            return self.no_cache_v
+            return self.no_cache_v  # type: ignore
 
     ps = ParentState()
     cs = ps.substates[ChildState.get_name()]