From 4ac2cd29224f7b7eeb26cdb9b0ca7db65337200d Mon Sep 17 00:00:00 2001 From: Elijah Date: Mon, 24 Jun 2024 09:58:48 -0700 Subject: [PATCH 1/9] Clear color mode local storage --- reflex/.templates/jinja/web/pages/_app.js.jinja2 | 2 ++ reflex/.templates/web/utils/helpers/color_mode.js | 13 +++++++++++++ 2 files changed, 15 insertions(+) create mode 100644 reflex/.templates/web/utils/helpers/color_mode.js diff --git a/reflex/.templates/jinja/web/pages/_app.js.jinja2 b/reflex/.templates/jinja/web/pages/_app.js.jinja2 index 832bb61fb64..75d842742bd 100644 --- a/reflex/.templates/jinja/web/pages/_app.js.jinja2 +++ b/reflex/.templates/jinja/web/pages/_app.js.jinja2 @@ -6,8 +6,10 @@ import '/styles/styles.css' {% block declaration %} import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js"; +import { clearColorModeLocalStorageOnStartup } from "/utils/helpers/color_mode.js" import { ThemeProvider } from 'next-themes' +clearColorModeLocalStorageOnStartup(); {% for custom_code in custom_codes %} {{custom_code}} diff --git a/reflex/.templates/web/utils/helpers/color_mode.js b/reflex/.templates/web/utils/helpers/color_mode.js new file mode 100644 index 00000000000..148380565ff --- /dev/null +++ b/reflex/.templates/web/utils/helpers/color_mode.js @@ -0,0 +1,13 @@ +import reflex from "/reflex.json"; + + +export function clearColorModeLocalStorageOnStartup () { + if (typeof window !== "undefined") { + const colorModeHash = localStorage.getItem("color_mode_hash") + if (colorModeHash && colorModeHash == reflex.color_mode_hash) { + return + } + localStorage.removeItem('chakra-ui-color-mode'); + localStorage.setItem("color_mode_hash", reflex.color_mode_hash) + } +}; From 3f84576d512daa0439c4b25394b521a1debe3912 Mon Sep 17 00:00:00 2001 From: Elijah Date: Mon, 24 Jun 2024 15:44:03 -0700 Subject: [PATCH 2/9] use the last compiled time logic to determine when to clear local storage --- reflex/.templates/jinja/web/pages/_app.js.jinja2 | 6 ++++-- reflex/.templates/jinja/web/utils/context.js.jinja2 | 2 ++ reflex/.templates/web/utils/helpers/color_mode.js | 11 +++++------ reflex/compiler/compiler.py | 2 ++ 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/reflex/.templates/jinja/web/pages/_app.js.jinja2 b/reflex/.templates/jinja/web/pages/_app.js.jinja2 index 75d842742bd..8af4d519533 100644 --- a/reflex/.templates/jinja/web/pages/_app.js.jinja2 +++ b/reflex/.templates/jinja/web/pages/_app.js.jinja2 @@ -5,11 +5,13 @@ import '/styles/styles.css' {% endblock %} {% block declaration %} -import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js"; +import { EventLoopProvider, StateProvider, defaultColorMode, isDevMode } from "/utils/context.js"; import { clearColorModeLocalStorageOnStartup } from "/utils/helpers/color_mode.js" import { ThemeProvider } from 'next-themes' -clearColorModeLocalStorageOnStartup(); +if (isDevMode){ + clearColorModeLocalStorageOnStartup(); +} {% for custom_code in custom_codes %} {{custom_code}} diff --git a/reflex/.templates/jinja/web/utils/context.js.jinja2 b/reflex/.templates/jinja/web/utils/context.js.jinja2 index 95e9fb3ab01..caee4e0cac1 100644 --- a/reflex/.templates/jinja/web/utils/context.js.jinja2 +++ b/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 => { diff --git a/reflex/.templates/web/utils/helpers/color_mode.js b/reflex/.templates/web/utils/helpers/color_mode.js index 148380565ff..20351cee113 100644 --- a/reflex/.templates/web/utils/helpers/color_mode.js +++ b/reflex/.templates/web/utils/helpers/color_mode.js @@ -1,13 +1,12 @@ -import reflex from "/reflex.json"; - +import {lastCompiledTimeStamp} from "/utils/context.js"; export function clearColorModeLocalStorageOnStartup () { if (typeof window !== "undefined") { - const colorModeHash = localStorage.getItem("color_mode_hash") - if (colorModeHash && colorModeHash == reflex.color_mode_hash) { - return + const lastCompiledTimeInLocalStorage = localStorage.getItem("last_compiled_time") + if (lastCompiledTimeInLocalStorage && lastCompiledTimeInLocalStorage == lastCompiledTimeStamp) { + return } localStorage.removeItem('chakra-ui-color-mode'); - localStorage.setItem("color_mode_hash", reflex.color_mode_hash) + localStorage.setItem("last_compiled_time", lastCompiledTimeStamp) } }; diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index 002c3b75058..cf8f8013c93 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -5,6 +5,7 @@ import os from pathlib import Path from typing import Dict, Iterable, Optional, Type, Union +from datetime import datetime from reflex import constants from reflex.compiler import templates, utils @@ -87,6 +88,7 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None) state_name=state.get_name(), client_storage=utils.compile_client_storage(state), is_dev_mode=not is_prod_mode(), + last_compiled_time=str(datetime.now()), default_color_mode=appearance, ) if state From e1bf68aaa83fb9582a3a885fcddb5d3c569f3d24 Mon Sep 17 00:00:00 2001 From: Elijah Date: Mon, 24 Jun 2024 15:57:09 -0700 Subject: [PATCH 3/9] precommit fix --- reflex/.templates/web/utils/helpers/color_mode.js | 2 +- reflex/compiler/compiler.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/reflex/.templates/web/utils/helpers/color_mode.js b/reflex/.templates/web/utils/helpers/color_mode.js index 20351cee113..a7c2fe5e3cb 100644 --- a/reflex/.templates/web/utils/helpers/color_mode.js +++ b/reflex/.templates/web/utils/helpers/color_mode.js @@ -3,7 +3,7 @@ import {lastCompiledTimeStamp} from "/utils/context.js"; export function clearColorModeLocalStorageOnStartup () { if (typeof window !== "undefined") { const lastCompiledTimeInLocalStorage = localStorage.getItem("last_compiled_time") - if (lastCompiledTimeInLocalStorage && lastCompiledTimeInLocalStorage == lastCompiledTimeStamp) { + if (lastCompiledTimeInLocalStorage && lastCompiledTimeInLocalStorage === lastCompiledTimeStamp) { return } localStorage.removeItem('chakra-ui-color-mode'); diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index cf8f8013c93..3548e06e581 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -3,9 +3,9 @@ from __future__ import annotations import os +from datetime import datetime from pathlib import Path from typing import Dict, Iterable, Optional, Type, Union -from datetime import datetime from reflex import constants from reflex.compiler import templates, utils From f84c25b80f18e8855495705c7e7f4946f6cfb657 Mon Sep 17 00:00:00 2001 From: Elijah Date: Mon, 24 Jun 2024 16:29:44 -0700 Subject: [PATCH 4/9] app harness fix --- integration/test_client_storage.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/integration/test_client_storage.py b/integration/test_client_storage.py index 393ea104410..03dbd168147 100644 --- a/integration/test_client_storage.py +++ b/integration/test_client_storage.py @@ -311,6 +311,7 @@ def set_sub_sub(var: str, value: str): assert not driver.get_cookies() local_storage_items = local_storage.items() local_storage_items.pop("chakra-ui-color-mode", None) + local_storage_items.pop("last_compiled_time", None) assert not local_storage_items # set some cookies and local storage values @@ -426,6 +427,7 @@ def set_sub_sub(var: str, value: str): local_storage_items = local_storage.items() local_storage_items.pop("chakra-ui-color-mode", None) + local_storage_items.pop("last_compiled_time", None) assert ( local_storage_items.pop("state.client_side_state.client_side_sub_state.l1") == "l1 value" From ee747a429f7b1a36fdd8381989c8d841bcdb7fb7 Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Wed, 26 Jun 2024 13:31:23 -0700 Subject: [PATCH 5/9] run prettier on reflex/.templates/web/utils/helpers/color_mode.js --- .../web/utils/helpers/color_mode.js | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/reflex/.templates/web/utils/helpers/color_mode.js b/reflex/.templates/web/utils/helpers/color_mode.js index a7c2fe5e3cb..7086ae5107f 100644 --- a/reflex/.templates/web/utils/helpers/color_mode.js +++ b/reflex/.templates/web/utils/helpers/color_mode.js @@ -1,12 +1,16 @@ -import {lastCompiledTimeStamp} from "/utils/context.js"; +import { lastCompiledTimeStamp } from "/utils/context.js"; -export function clearColorModeLocalStorageOnStartup () { - if (typeof window !== "undefined") { - const lastCompiledTimeInLocalStorage = localStorage.getItem("last_compiled_time") - if (lastCompiledTimeInLocalStorage && lastCompiledTimeInLocalStorage === lastCompiledTimeStamp) { - return - } - localStorage.removeItem('chakra-ui-color-mode'); - localStorage.setItem("last_compiled_time", lastCompiledTimeStamp) - } -}; +export function clearColorModeLocalStorageOnStartup() { + if (typeof window !== "undefined") { + const lastCompiledTimeInLocalStorage = + localStorage.getItem("last_compiled_time"); + if ( + lastCompiledTimeInLocalStorage && + lastCompiledTimeInLocalStorage === lastCompiledTimeStamp + ) { + return; + } + localStorage.removeItem("chakra-ui-color-mode"); + localStorage.setItem("last_compiled_time", lastCompiledTimeStamp); + } +} From 0de3c086e00b8d9c5eab0b26fc47aec483dfe98e Mon Sep 17 00:00:00 2001 From: Elijah Date: Wed, 26 Jun 2024 14:31:18 -0700 Subject: [PATCH 6/9] make sure last_compiled_time is updated for stateless apps as well. --- reflex/compiler/compiler.py | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index 3548e06e581..c55902baf76 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -82,19 +82,22 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None) appearance = getattr(theme, "appearance", None) if appearance is None: appearance = SYSTEM_COLOR_MODE + + last_compiled_time = str(datetime.now()) return ( templates.CONTEXT.render( initial_state=utils.compile_state(state), state_name=state.get_name(), client_storage=utils.compile_client_storage(state), is_dev_mode=not is_prod_mode(), - last_compiled_time=str(datetime.now()), + last_compiled_time=last_compiled_time, default_color_mode=appearance, ) if state else templates.CONTEXT.render( is_dev_mode=not is_prod_mode(), default_color_mode=appearance, + last_compiled_time=last_compiled_time, ) ) From 436a697b8d1d3cbb2de5a91ef0b5f1a55ed34980 Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 27 Jun 2024 17:16:42 -0700 Subject: [PATCH 7/9] set the chkara-ui-color-mode cookie instead of clearing it, so it is integrated in the app's useEffect cycle --- .../.templates/jinja/web/pages/_app.js.jinja2 | 6 +---- .../radix_themes_color_mode_provider.js | 22 +++++++++++++++++-- .../web/utils/helpers/color_mode.js | 16 -------------- reflex/compiler/compiler.py | 2 +- 4 files changed, 22 insertions(+), 24 deletions(-) delete mode 100644 reflex/.templates/web/utils/helpers/color_mode.js diff --git a/reflex/.templates/jinja/web/pages/_app.js.jinja2 b/reflex/.templates/jinja/web/pages/_app.js.jinja2 index 8af4d519533..ec799e77291 100644 --- a/reflex/.templates/jinja/web/pages/_app.js.jinja2 +++ b/reflex/.templates/jinja/web/pages/_app.js.jinja2 @@ -5,14 +5,10 @@ import '/styles/styles.css' {% endblock %} {% block declaration %} -import { EventLoopProvider, StateProvider, defaultColorMode, isDevMode } from "/utils/context.js"; +import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js"; import { clearColorModeLocalStorageOnStartup } from "/utils/helpers/color_mode.js" import { ThemeProvider } from 'next-themes' -if (isDevMode){ - clearColorModeLocalStorageOnStartup(); -} - {% for custom_code in custom_codes %} {{custom_code}} {% endfor %} diff --git a/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js b/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js index 1756c9101d9..d16e4e30ad8 100644 --- a/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js +++ b/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, +} from "/utils/context.js"; +import { 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; } diff --git a/reflex/.templates/web/utils/helpers/color_mode.js b/reflex/.templates/web/utils/helpers/color_mode.js deleted file mode 100644 index 7086ae5107f..00000000000 --- a/reflex/.templates/web/utils/helpers/color_mode.js +++ /dev/null @@ -1,16 +0,0 @@ -import { lastCompiledTimeStamp } from "/utils/context.js"; - -export function clearColorModeLocalStorageOnStartup() { - if (typeof window !== "undefined") { - const lastCompiledTimeInLocalStorage = - localStorage.getItem("last_compiled_time"); - if ( - lastCompiledTimeInLocalStorage && - lastCompiledTimeInLocalStorage === lastCompiledTimeStamp - ) { - return; - } - localStorage.removeItem("chakra-ui-color-mode"); - localStorage.setItem("last_compiled_time", lastCompiledTimeStamp); - } -} diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index c55902baf76..4345e244ff4 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -80,7 +80,7 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None) The compiled context file. """ appearance = getattr(theme, "appearance", None) - if appearance is None: + if appearance is None or Var.create_safe(appearance)._var_name == "inherit": appearance = SYSTEM_COLOR_MODE last_compiled_time = str(datetime.now()) From a6cc8ec9526e2143def89535659ebc7d511224ea Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 27 Jun 2024 17:28:06 -0700 Subject: [PATCH 8/9] fix CI --- reflex/.templates/jinja/web/pages/_app.js.jinja2 | 1 - 1 file changed, 1 deletion(-) diff --git a/reflex/.templates/jinja/web/pages/_app.js.jinja2 b/reflex/.templates/jinja/web/pages/_app.js.jinja2 index ec799e77291..d4322b171e2 100644 --- a/reflex/.templates/jinja/web/pages/_app.js.jinja2 +++ b/reflex/.templates/jinja/web/pages/_app.js.jinja2 @@ -6,7 +6,6 @@ import '/styles/styles.css' {% block declaration %} import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js"; -import { clearColorModeLocalStorageOnStartup } from "/utils/helpers/color_mode.js" import { ThemeProvider } from 'next-themes' {% for custom_code in custom_codes %} From 8b041a5a4d48e589a3fe8157e5bf3b067cb6a8f3 Mon Sep 17 00:00:00 2001 From: Elijah Date: Fri, 28 Jun 2024 12:38:59 -0700 Subject: [PATCH 9/9] fix import formatting --- .../web/components/reflex/radix_themes_color_mode_provider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js b/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js index d16e4e30ad8..04df060593d 100644 --- a/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js +++ b/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js @@ -4,8 +4,8 @@ import { ColorModeContext, defaultColorMode, isDevMode, + lastCompiledTimeStamp } from "/utils/context.js"; -import { lastCompiledTimeStamp } from "/utils/context.js"; export default function RadixThemesColorModeProvider({ children }) { const { theme, resolvedTheme, setTheme } = useTheme();