reflex 0.3.2a1__py3-none-any.whl → 0.3.3a1__py3-none-any.whl

reflex/.templates/jinja/web/pages/custom_component.js.jinja2

@@ -3,8 +3,25 @@
 {% block export %}
 {% for component in components %}
 
-export const {{component.name}} = memo(({ {{-component.props|join(", ")-}} }) => (
-  {{utils.render(component.render)}}
-))
+export const {{component.name}} = memo(({ {{-component.props|join(", ")-}} }) => {
+{% if component.name == "CodeBlock" and "language" in component.props %}
+    if (language) {
+      (async () => {
+        try {
+          const module = await import(`react-syntax-highlighter/dist/cjs/languages/prism/${language}`);
+          SyntaxHighlighter.registerLanguage(language, module.default);
+        } catch (error) {
+          console.error(`Error importing language module for ${language}:`, error);
+        }
+      })();
+
+
+    }
+{% endif %}
+    return(
+        {{utils.render(component.render)}}
+      )
+
+})
 {% endfor %}
 {% endblock %}

reflex/.templates/web/next.config.js

@@ -3,4 +3,5 @@ module.exports = {
   compress: true,
   reactStrictMode: true,
   trailingSlash: true,
+  output: "",
 };

reflex/.templates/web/utils/helpers/range.js

@@ -0,0 +1,43 @@
+/**
+ * Simulate the python range() builtin function.
+ * inspired by https://dev.to/guyariely/using-python-range-in-javascript-337p
+ * 
+ * If needed outside of an iterator context, use `Array.from(range(10))` or
+ * spread syntax `[...range(10)]` to get an array.
+ * 
+ * @param {number} start: the start or end of the range.
+ * @param {number} stop: the end of the range.
+ * @param {number} step: the step of the range.
+ * @returns {object} an object with a Symbol.iterator method over the range
+ */
+export default function range(start, stop, step) {
+    return {
+      [Symbol.iterator]() {
+        if (stop === undefined) {
+          stop = start;
+          start = 0;
+        }
+        if (step === undefined) {
+          step = 1;
+        }
+  
+        let i = start - step;
+  
+        return {
+          next() {
+            i += step;
+            if ((step > 0 && i < stop) || (step < 0 && i > stop)) {
+              return {
+                value: i,
+                done: false,
+              };
+            }
+            return {
+              value: undefined,
+              done: true,
+            };
+          },
+        };
+      },
+    };
+  }

reflex/.templates/web/utils/state.js

@@ -12,6 +12,9 @@ import { initialEvents } from "utils/context.js"
 const EVENTURL = env.EVENT
 const UPLOADURL = env.UPLOAD
 
+// These hostnames indicate that the backend and frontend are reachable via the same domain.
+const SAME_DOMAIN_HOSTNAMES = ["localhost", "0.0.0.0", "::", "0:0:0:0:0:0:0:0"]
+
 // Global variable to hold the token.
 let token;
 
@@ -74,12 +77,13 @@ export const getToken = () => {
 export const getEventURL = () => {
   // Get backend URL object from the endpoint.
   const endpoint = new URL(EVENTURL);
-  if (endpoint.hostname === "localhost") {
-    // If the backend URL references localhost, and the frontend is not on localhost,
-    // then use the frontend host.
+  if (SAME_DOMAIN_HOSTNAMES.includes(endpoint.hostname)) {
+    // Use the frontend domain to access the backend
     const frontend_hostname = window.location.hostname;
-    if (frontend_hostname !== "localhost") {
-      endpoint.hostname = frontend_hostname;
+    endpoint.hostname = frontend_hostname;
+    if (window.location.protocol === "https:" && endpoint.protocol === "ws:") {
+      endpoint.protocol = "wss:";
+      endpoint.port = "";  // Assume websocket is on https port via load balancer.
     }
   }
   return endpoint
@@ -569,7 +573,7 @@ export const getRefValues = (refs) => {
     return;
   }
   // getAttribute is used by RangeSlider because it doesn't assign value
-  return refs.map((ref) => ref.current.value || ref.current.getAttribute("aria-valuenow"));
+  return refs.map((ref) => ref.current ? ref.current.value || ref.current.getAttribute("aria-valuenow") : null);
 }
 
 /**

reflex/__init__.py

@@ -4,44 +4,316 @@ 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",
+    "ConnectionBanner",
+    "ConnectionModal",
+    "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