reflex 0.5.5a1__py3-none-any.whl → 0.5.6__py3-none-any.whl

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

@@ -8,7 +8,6 @@ import '/styles/styles.css'
 import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js";
 import { ThemeProvider } from 'next-themes'
 
-
 {% for custom_code in custom_codes %}
 {{custom_code}}
 {% endfor %}

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -64,6 +64,8 @@ export const initialEvents = () => []
 
 export const isDevMode = {{ is_dev_mode|json_dumps }}
 
+export const lastCompiledTimeStamp = {{ last_compiled_time|json_dumps }}
+
 export function UploadFilesProvider({ children }) {
   const [filesById, setFilesById] = useState({})
   refs["__clear_selected_files"] = (id) => setFilesById(filesById => {

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -1,6 +1,11 @@
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
-import { ColorModeContext, defaultColorMode } from "/utils/context.js";
+import {
+  ColorModeContext,
+  defaultColorMode,
+  isDevMode,
+  lastCompiledTimeStamp
+} from "/utils/context.js";
 
 export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
@@ -8,6 +13,19 @@ export default function RadixThemesColorModeProvider({ children }) {
   const [resolvedColorMode, setResolvedColorMode] = useState("dark");
 
   useEffect(() => {
+    if (isDevMode) {
+      const lastCompiledTimeInLocalStorage =
+        localStorage.getItem("last_compiled_time");
+      if (
+        lastCompiledTimeInLocalStorage &&
+        lastCompiledTimeInLocalStorage !== lastCompiledTimeStamp
+      ) {
+        // on app startup, make sure the application color mode is persisted correctly.
+        setTheme(defaultColorMode);
+        localStorage.setItem("last_compiled_time", lastCompiledTimeStamp);
+        return;
+      }
+    }
     setRawColorMode(theme);
     setResolvedColorMode(resolvedTheme);
   }, [theme, resolvedTheme]);
@@ -19,7 +37,7 @@ export default function RadixThemesColorModeProvider({ children }) {
     const allowedModes = ["light", "dark", "system"];
     if (!allowedModes.includes(mode)) {
       console.error(
-        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`
+        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`,
       );
       mode = defaultColorMode;
     }

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

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+
+const handle_paste_data = (clipboardData) =>
+  new Promise((resolve, reject) => {
+    const pasted_data = [];
+    const n_items = clipboardData.items.length;
+    const extract_data = (item) => {
+      const type = item.type;
+      if (item.kind === "string") {
+        item.getAsString((data) => {
+          pasted_data.push([type, data]);
+          if (pasted_data.length === n_items) {
+            resolve(pasted_data);
+          }
+        });
+      } else if (item.kind === "file") {
+        const file = item.getAsFile();
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          pasted_data.push([type, e.target.result]);
+          if (pasted_data.length === n_items) {
+            resolve(pasted_data);
+          }
+        };
+        if (type.indexOf("text/") === 0) {
+          reader.readAsText(file);
+        } else {
+          reader.readAsDataURL(file);
+        }
+      }
+    };
+    for (const item of clipboardData.items) {
+      extract_data(item);
+    }
+  });
+
+export default function usePasteHandler(target_ids, event_actions, on_paste) {
+  return useEffect(() => {
+    const handle_paste = (_ev) => {
+      event_actions.preventDefault && _ev.preventDefault();
+      event_actions.stopPropagation && _ev.stopPropagation();
+      handle_paste_data(_ev.clipboardData).then(on_paste);
+    };
+    const targets = target_ids
+      .map((id) => document.getElementById(id))
+      .filter((element) => !!element);
+    if (target_ids.length === 0) {
+      targets.push(document);
+    }
+    targets.forEach((target) =>
+      target.addEventListener("paste", handle_paste, false),
+    );
+    return () => {
+      targets.forEach((target) =>
+        target.removeEventListener("paste", handle_paste, false),
+      );
+    };
+  });
+}

reflex/__init__.py

@@ -84,12 +84,18 @@ In the example above, you will be able to do `rx.list`
 
 from __future__ import annotations
 
-from reflex.utils import lazy_loader
+from reflex.utils import (
+    compat,  # for side-effects
+    lazy_loader,
+)
 
 # import this here explicitly to avoid returning the page module since page attr has the
 # same name as page module(page.py)
 from .page import page as page
 
+# Remove the `compat` name from the namespace, it was imported for side-effects only.
+del compat
+
 RADIX_THEMES_MAPPING: dict = {
     "components.radix.themes.base": ["color_mode", "theme", "theme_panel"],
     "components.radix.themes.color_mode": ["color_mode"],
@@ -212,7 +218,9 @@ COMPONENTS_CORE_MAPPING: dict = {
     "components.core.debounce": ["debounce_input"],
     "components.core.html": ["html"],
     "components.core.match": ["match"],
+    "components.core.clipboard": ["clipboard"],
     "components.core.colors": ["color"],
+    "components.core.breakpoints": ["breakpoints"],
     "components.core.responsive": [
         "desktop_only",
         "mobile_and_tablet",

reflex/__init__.pyi

@@ -3,6 +3,8 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
+from reflex.utils import compat
+
 from . import admin as admin
 from . import app as app
 from . import base as base
@@ -15,35 +17,64 @@ from . import style as style
 from . import testing as testing
 from . import utils as utils
 from . import vars as vars
-
-from .experimental import _x as _x
 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 .components import chakra as chakra
+from .components import el as el
+from .components import lucide as lucide
+from .components import next as next
+from .components import radix as radix
+from .components import recharts as recharts
+from .components.base.fragment import Fragment as Fragment
+from .components.base.fragment import fragment as fragment
+from .components.base.script import Script as Script
+from .components.base.script import script as script
 from .components.component import Component as Component
+from .components.component import ComponentNamespace as ComponentNamespace
 from .components.component import NoSSRComponent as NoSSRComponent
 from .components.component import memo as memo
-from .components.component import ComponentNamespace as ComponentNamespace
+from .components.core.banner import connection_banner as connection_banner
+from .components.core.banner import connection_modal as connection_modal
+from .components.core.breakpoints import breakpoints as breakpoints
+from .components.core.clipboard import clipboard as clipboard
+from .components.core.colors import color as color
+from .components.core.cond import color_mode_cond as color_mode_cond
+from .components.core.cond import cond as cond
+from .components.core.debounce import debounce_input as debounce_input
+from .components.core.foreach import foreach as foreach
+from .components.core.html import html as html
+from .components.core.match import match as match
+from .components.core.responsive import desktop_only as desktop_only
+from .components.core.responsive import mobile_and_tablet as mobile_and_tablet
+from .components.core.responsive import mobile_only as mobile_only
+from .components.core.responsive import tablet_and_desktop as tablet_and_desktop
+from .components.core.responsive import tablet_only as tablet_only
+from .components.core.upload import cancel_upload as cancel_upload
+from .components.core.upload import clear_selected_files as clear_selected_files
+from .components.core.upload import get_upload_dir as get_upload_dir
+from .components.core.upload import get_upload_url as get_upload_url
+from .components.core.upload import selected_files as selected_files
+from .components.core.upload import upload as upload
+from .components.datadisplay.code import code_block as code_block
+from .components.datadisplay.dataeditor import data_editor as data_editor
+from .components.datadisplay.dataeditor import data_editor_theme as data_editor_theme
+from .components.datadisplay.logo import logo as logo
 from .components.el.elements.media import image as image
+from .components.gridjs import data_table as data_table
 from .components.lucide import icon as icon
-from .components.base.fragment import fragment as fragment
-from .components.base.fragment import Fragment as Fragment
-from .components.base.script import script as script
-from .components.base.script import Script as Script
-from .components.suneditor import editor as editor
-from .components.suneditor import EditorButtonList as EditorButtonList
-from .components.suneditor import EditorOptions as EditorOptions
-from .components import el as el
-from .components import chakra as chakra
-from .components import radix as radix
-from .components import lucide as lucide
-from .components import recharts as recharts
-from .components import next as next
 from .components.markdown import markdown as markdown
-from .components.radix.themes.color_mode import color_mode as color_mode
+from .components.moment import MomentDelta as MomentDelta
+from .components.moment import moment as moment
+from .components.plotly import plotly as plotly
+from .components.radix.primitives.accordion import accordion as accordion
+from .components.radix.primitives.drawer import drawer as drawer
+from .components.radix.primitives.form import form as form
+from .components.radix.primitives.progress import progress as progress
 from .components.radix.themes.base import theme as theme
 from .components.radix.themes.base import theme_panel as theme_panel
+from .components.radix.themes.color_mode import color_mode as color_mode
 from .components.radix.themes.components.alert_dialog import (
     alert_dialog as alert_dialog,
 )
@@ -56,18 +87,35 @@ from .components.radix.themes.components.button import button as button
 from .components.radix.themes.components.callout import callout as callout
 from .components.radix.themes.components.card import card as card
 from .components.radix.themes.components.checkbox import checkbox as checkbox
+from .components.radix.themes.components.checkbox_cards import (
+    checkbox_cards as checkbox_cards,
+)
+from .components.radix.themes.components.checkbox_group import (
+    checkbox_group as checkbox_group,
+)
 from .components.radix.themes.components.context_menu import (
     context_menu as context_menu,
 )
 from .components.radix.themes.components.data_list import data_list as data_list
 from .components.radix.themes.components.dialog import dialog as dialog
+from .components.radix.themes.components.dropdown_menu import (
+    dropdown_menu as dropdown_menu,
+)
+from .components.radix.themes.components.dropdown_menu import menu as menu
 from .components.radix.themes.components.hover_card import hover_card as hover_card
 from .components.radix.themes.components.icon_button import icon_button as icon_button
-from .components.radix.themes.components.text_field import input as input
 from .components.radix.themes.components.inset import inset as inset
 from .components.radix.themes.components.popover import popover as popover
+from .components.radix.themes.components.radio_cards import radio_cards as radio_cards
+from .components.radix.themes.components.radio_group import radio as radio
+from .components.radix.themes.components.radio_group import radio_group as radio_group
 from .components.radix.themes.components.scroll_area import scroll_area as scroll_area
+from .components.radix.themes.components.segmented_control import (
+    segmented_control as segmented_control,
+)
 from .components.radix.themes.components.select import select as select
+from .components.radix.themes.components.separator import divider as divider
+from .components.radix.themes.components.separator import separator as separator
 from .components.radix.themes.components.skeleton import skeleton as skeleton
 from .components.radix.themes.components.slider import slider as slider
 from .components.radix.themes.components.spinner import spinner as spinner
@@ -75,80 +123,33 @@ from .components.radix.themes.components.switch import switch as switch
 from .components.radix.themes.components.table import table as table
 from .components.radix.themes.components.tabs import tabs as tabs
 from .components.radix.themes.components.text_area import text_area as text_area
-from .components.radix.themes.components.tooltip import tooltip as tooltip
-from .components.radix.themes.components.segmented_control import (
-    segmented_control as segmented_control,
-)
-from .components.radix.themes.components.radio_cards import radio_cards as radio_cards
-from .components.radix.themes.components.checkbox_cards import (
-    checkbox_cards as checkbox_cards,
-)
-from .components.radix.themes.components.checkbox_group import (
-    checkbox_group as checkbox_group,
-)
+from .components.radix.themes.components.text_field import input as input
 from .components.radix.themes.components.text_field import text_field as text_field
-from .components.radix.themes.components.radio_group import radio as radio
-from .components.radix.themes.components.radio_group import radio_group as radio_group
-from .components.radix.themes.components.dropdown_menu import menu as menu
-from .components.radix.themes.components.dropdown_menu import (
-    dropdown_menu as dropdown_menu,
-)
-from .components.radix.themes.components.separator import divider as divider
-from .components.radix.themes.components.separator import separator as separator
-from .components.radix.themes.typography.blockquote import blockquote as blockquote
-from .components.radix.themes.typography.code import code as code
-from .components.radix.themes.typography.heading import heading as heading
-from .components.radix.themes.typography.link import link as link
-from .components.radix.themes.typography.text import text as text
+from .components.radix.themes.components.tooltip import tooltip as tooltip
 from .components.radix.themes.layout.box import box as box
 from .components.radix.themes.layout.center import center as center
 from .components.radix.themes.layout.container import container as container
 from .components.radix.themes.layout.flex import flex as flex
 from .components.radix.themes.layout.grid import grid as grid
+from .components.radix.themes.layout.list import list_item as list_item
+from .components.radix.themes.layout.list import ordered_list as ordered_list
+from .components.radix.themes.layout.list import unordered_list as unordered_list
 from .components.radix.themes.layout.section import section as section
 from .components.radix.themes.layout.spacer import spacer as spacer
-from .components.radix.themes.layout.stack import stack as stack
 from .components.radix.themes.layout.stack import hstack as hstack
+from .components.radix.themes.layout.stack import stack as stack
 from .components.radix.themes.layout.stack import vstack as vstack
-from .components.radix.themes.layout.list import list_ns as list
-from .components.radix.themes.layout.list import list_item as list_item
-from .components.radix.themes.layout.list import ordered_list as ordered_list
-from .components.radix.themes.layout.list import unordered_list as unordered_list
-from .components.radix.primitives.accordion import accordion as accordion
-from .components.radix.primitives.drawer import drawer as drawer
-from .components.radix.primitives.form import form as form
-from .components.radix.primitives.progress import progress as progress
-from .components.plotly import plotly as plotly
+from .components.radix.themes.typography.blockquote import blockquote as blockquote
+from .components.radix.themes.typography.code import code as code
+from .components.radix.themes.typography.heading import heading as heading
+from .components.radix.themes.typography.link import link as link
+from .components.radix.themes.typography.text import text as text
 from .components.react_player import audio as audio
 from .components.react_player import video as video
-from .components.core.banner import connection_banner as connection_banner
-from .components.core.banner import connection_modal as connection_modal
-from .components.core.cond import cond as cond
-from .components.core.cond import color_mode_cond as color_mode_cond
-from .components.core.foreach import foreach as foreach
-from .components.core.debounce import debounce_input as debounce_input
-from .components.core.html import html as html
-from .components.core.match import match as match
-from .components.core.colors import color as color
-from .components.core.responsive import desktop_only as desktop_only
-from .components.core.responsive import mobile_and_tablet as mobile_and_tablet
-from .components.core.responsive import mobile_only as mobile_only
-from .components.core.responsive import tablet_and_desktop as tablet_and_desktop
-from .components.core.responsive import tablet_only as tablet_only
-from .components.core.upload import cancel_upload as cancel_upload
-from .components.core.upload import clear_selected_files as clear_selected_files
-from .components.core.upload import get_upload_dir as get_upload_dir
-from .components.core.upload import get_upload_url as get_upload_url
-from .components.core.upload import selected_files as selected_files
-from .components.core.upload import upload as upload
-from .components.datadisplay.code import code_block as code_block
-from .components.datadisplay.dataeditor import data_editor as data_editor
-from .components.datadisplay.dataeditor import data_editor_theme as data_editor_theme
 from .components.sonner.toast import toast as toast
-from .components.datadisplay.logo import logo as logo
-from .components.gridjs import data_table as data_table
-from .components.moment import MomentDelta as MomentDelta
-from .components.moment import moment as moment
+from .components.suneditor import EditorButtonList as EditorButtonList
+from .components.suneditor import EditorOptions as EditorOptions
+from .components.suneditor import editor as editor
 from .config import Config as Config
 from .config import DBConfig as DBConfig
 from .constants import Env as Env
@@ -165,32 +166,33 @@ 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 remove_session_storage as remove_session_storage
+from .event import scroll_to as scroll_to
 from .event import set_clipboard as set_clipboard
 from .event import set_focus as set_focus
-from .event import scroll_to as scroll_to
 from .event import set_value as set_value
 from .event import stop_propagation as stop_propagation
 from .event import upload_files as upload_files
 from .event import window_alert as window_alert
-from .middleware import middleware as middleware
+from .experimental import _x as _x
 from .middleware import Middleware as Middleware
-from .model import session as session
+from .middleware import middleware as middleware
 from .model import Model as Model
-from .state import var as var
+from .model import session as session
+from .page import page as page
+from .state import ComponentState as ComponentState
 from .state import Cookie as Cookie
 from .state import LocalStorage as LocalStorage
 from .state import SessionStorage as SessionStorage
-from .state import ComponentState as ComponentState
 from .state import State as State
+from .state import var as var
 from .style import Style as Style
 from .style import toggle_color_mode as toggle_color_mode
 from .utils.imports import ImportVar as ImportVar
 from .utils.serializers import serializer as serializer
-from .vars import cached_var as cached_var
 from .vars import Var as Var
-from reflex.utils import lazy_loader
-from .page import page as page
+from .vars import cached_var as cached_var
 
+del compat
 RADIX_THEMES_MAPPING: dict
 RADIX_THEMES_COMPONENTS_MAPPING: dict
 RADIX_THEMES_LAYOUT_MAPPING: dict