reflex 0.7.14a6__tar.gz → 0.8.0a2__tar.gz

{reflex-0.7.14a6 → reflex-0.8.0a2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: reflex
-Version: 0.7.14a6
+Version: 0.8.0a2
 Summary: Web apps in pure Python.
 Project-URL: homepage, https://reflex.dev
 Project-URL: repository, https://github.com/reflex-dev/reflex
@@ -39,8 +39,7 @@ Requires-Dist: wrapt<2.0,>=1.17.0
 Description-Content-Type: text/markdown
 
 <div align="center">
-<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
-<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex.svg" alt="Reflex Logo" width="300px">
 
 <hr>
 
@@ -60,7 +59,12 @@ Description-Content-Type: text/markdown
 
 ---
 
-# Reflex
+> [!NOTE]
+> 🚀 **Try [Reflex Build](https://build.reflex.dev/)** – our AI-powered app builder that generates full-stack Reflex applications in seconds.
+
+---
+
+# Introduction
 
 Reflex is a library to build full-stack web apps in pure Python.
 
@@ -268,7 +272,10 @@ You can create a multi-page app by adding more pages.
 
 Reflex launched in December 2022 with the name Pynecone.
 
-Beginning in 2025, [Reflex Cloud](https://cloud.reflex.dev) has launched to provide the best hosting experience for Reflex apps. We will continue to develop it and implement more features.
+🚀 Introducing [Reflex Build](https://build.reflex.dev/) — Our AI-Powered Builder
+Reflex Build uses AI to generate complete full-stack Python applications. It helps you quickly create, customize, and refine your Reflex apps — from frontend components to backend logic — so you can focus on your ideas instead of boilerplate code. Whether you’re prototyping or scaling, Reflex Build accelerates development by intelligently scaffolding and optimizing your app’s entire stack.
+
+Alongside this, [Reflex Cloud](https://cloud.reflex.dev) launched in 2025 to offer the best hosting experience for your Reflex apps. We’re continuously improving the platform with new features and capabilities.
 
 Reflex has new releases and features coming every week! Make sure to :star: star and :eyes: watch this repository to stay up to date.
 

{reflex-0.7.14a6 → reflex-0.8.0a2}/README.md

@@ -1,6 +1,5 @@
 <div align="center">
-<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
-<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex.svg" alt="Reflex Logo" width="300px">
 
 <hr>
 
@@ -20,7 +19,12 @@
 
 ---
 
-# Reflex
+> [!NOTE]
+> 🚀 **Try [Reflex Build](https://build.reflex.dev/)** – our AI-powered app builder that generates full-stack Reflex applications in seconds.
+
+---
+
+# Introduction
 
 Reflex is a library to build full-stack web apps in pure Python.
 
@@ -228,7 +232,10 @@ You can create a multi-page app by adding more pages.
 
 Reflex launched in December 2022 with the name Pynecone.
 
-Beginning in 2025, [Reflex Cloud](https://cloud.reflex.dev) has launched to provide the best hosting experience for Reflex apps. We will continue to develop it and implement more features.
+🚀 Introducing [Reflex Build](https://build.reflex.dev/) — Our AI-Powered Builder
+Reflex Build uses AI to generate complete full-stack Python applications. It helps you quickly create, customize, and refine your Reflex apps — from frontend components to backend logic — so you can focus on your ideas instead of boilerplate code. Whether you’re prototyping or scaling, Reflex Build accelerates development by intelligently scaffolding and optimizing your app’s entire stack.
+
+Alongside this, [Reflex Cloud](https://cloud.reflex.dev) launched in 2025 to offer the best hosting experience for your Reflex apps. We’re continuously improving the platform with new features and capabilities.
 
 Reflex has new releases and features coming every week! Make sure to :star: star and :eyes: watch this repository to stay up to date.
 

{reflex-0.7.14a6 → reflex-0.8.0a2}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "reflex"
-version = "0.7.14a6"
+version = "0.8.0a2"
 description = "Web apps in pure Python."
 license.text = "Apache-2.0"
 authors = [
@@ -228,7 +228,7 @@ fail_fast = true
 
 [[tool.pre-commit.repos]]
 repo = "https://github.com/astral-sh/ruff-pre-commit"
-rev = "v0.11.12"
+rev = "v0.11.13"
 hooks = [
   { id = "ruff-format", args = [
     "reflex",
@@ -260,7 +260,7 @@ hooks = [
 
 [[tool.pre-commit.repos]]
 repo = "https://github.com/RobertCraigie/pyright-python"
-rev = "v1.1.401"
+rev = "v1.1.402"
 hooks = [{ id = "pyright", args = ["reflex", "tests"], language = "system" }]
 
 [[tool.pre-commit.repos]]

reflex-0.8.0a2/reflex/.templates/jinja/app/rxconfig.py.jinja2

@@ -0,0 +1,9 @@
+import reflex as rx
+
+config = rx.Config(
+    app_name="{{ app_name }}",
+    plugins=[
+        rx.plugins.SitemapPlugin(),
+        rx.plugins.TailwindV4Plugin(),
+    ],
+)

{reflex-0.7.14a6 → reflex-0.8.0a2}/reflex/.templates/jinja/web/package.json.jinja2

@@ -1,9 +1,9 @@
 {
   "name": "reflex",
+  "type": "module",
   "scripts": {
     "dev": "{{ scripts.dev }}",
     "export": "{{ scripts.export }}",
-    "export-sitemap": "{{ scripts.export_sitemap }}",
     "prod": "{{ scripts.prod }}"
   },
   "dependencies": {

{reflex-0.7.14a6 → reflex-0.8.0a2}/reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -6,8 +6,10 @@ import '$/styles/__reflex_global_styles.css'
 {% endblock %}
 
 {% block declaration %}
-import { EventLoopProvider, StateProvider, defaultColorMode } from "$/utils/context.js";
-import { ThemeProvider } from 'next-themes'
+import { EventLoopProvider, StateProvider, defaultColorMode } from "$/utils/context";
+import { ThemeProvider } from '$/utils/react-theme';
+import { Layout as AppLayout } from './_document';
+import { Outlet } from 'react-router';
 {% for library_alias, library_path in  window_libraries %}
 import * as {{library_alias}} from "{{library_path}}";
 {% endfor %}
@@ -26,8 +28,9 @@ function AppWrap({children}) {
   )
 }
 
-export default function MyApp({ Component, pageProps }) {
-  React.useEffect(() => {
+
+export function Layout({children}) {
+    React.useEffect(() => {
     // Make contexts and state objects available globally for dynamic eval'd components
     let windowImports = {
 {% for library_alias, library_path in  window_libraries %}
@@ -36,17 +39,20 @@ export default function MyApp({ Component, pageProps }) {
     };
     window["__reflex"] = windowImports;
   }, []);
-  return (
-    jsx(ThemeProvider, {defaultTheme:defaultColorMode,attribute:"class"},
+
+  return jsx(AppLayout, {},
+    jsx(ThemeProvider, {defaultTheme: defaultColorMode, attribute: "class"},
       jsx(StateProvider, {},
-        jsx(EventLoopProvider, {}, 
-          jsx(AppWrap, {},
-            jsx(Component, pageProps)
-          )
+        jsx(EventLoopProvider, {},
+          jsx(AppWrap, {}, children)
         )
       )
     )
   );
 }
 
+export default function App() {
+  return jsx(Outlet, {});
+}
+
 {% endblock %}

{reflex-0.7.14a6 → reflex-0.8.0a2}/reflex/.templates/jinja/web/pages/_document.js.jinja2

@@ -1,7 +1,7 @@
 {% extends "web/pages/base_page.js.jinja2" %}
 
 {% block export %}
-export default function Document() {
+export function Layout({children}) {
   return (
     {{utils.render(document)}}
   )

{reflex-0.7.14a6 → reflex-0.8.0a2}/reflex/.templates/jinja/web/pages/base_page.js.jinja2

@@ -1,5 +1,4 @@
 {% import 'web/pages/utils.js.jinja2' as utils %}
-/** @jsxImportSource @emotion/react */
 
 {% block early_imports %}
 {% endblock %}

{reflex-0.7.14a6 → reflex-0.8.0a2}/reflex/.templates/jinja/web/pages/stateful_component.js.jinja2

@@ -2,7 +2,11 @@
 {% from 'web/pages/macros.js.jinja2' import renderHooksWithMemo %}
 {% set all_hooks = component._get_all_hooks() %}
 
+{% if export %}
 export function {{tag_name}} () {
+{% else %}
+function {{tag_name}} () {
+{% endif %}
   {{ renderHooksWithMemo(all_hooks, memo_trigger_hooks) }}
   
   return (

{reflex-0.7.14a6 → reflex-0.8.0a2}/reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -1,5 +1,6 @@
-import { createContext, useContext, useMemo, useReducer, useState, createElement } from "react"
-import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "$/utils/state.js"
+import { createContext, useContext, useMemo, useReducer, useState, createElement, useEffect } from "react"
+import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "$/utils/state"
+import { jsx } from "@emotion/react";
 
 {% if initial_state %}
 export const initialState = {{ initial_state|json_dumps }}
@@ -68,8 +69,6 @@ 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 => {
@@ -77,7 +76,21 @@ export function UploadFilesProvider({ children }) {
     delete newFilesById[id]
     return newFilesById
   })
-  return createElement(UploadFilesContext, {value:[filesById, setFilesById]}, children);
+  return createElement(
+    UploadFilesContext.Provider,
+    { value: [filesById, setFilesById] },
+    children
+  );
+}
+
+export function ClientSide(component) {
+  return ({ children, ...props }) => {
+    const [Component, setComponent] = useState(null);
+    useEffect(() => {
+      setComponent(component);
+    }, []);
+    return Component ? jsx(Component, props, children) : null;
+  };
 }
 
 export function EventLoopProvider({ children }) {
@@ -87,7 +100,11 @@ export function EventLoopProvider({ children }) {
     initialEvents,
     clientStorage,
   )
-  return createElement(EventLoopContext, {value:[addEvents, connectErrors]}, children);
+  return createElement(
+    EventLoopContext.Provider,
+    { value: [addEvents, connectErrors] },
+    children
+  );
 }
 
 export function StateProvider({ children }) {
@@ -106,7 +123,7 @@ export function StateProvider({ children }) {
     {% for state_name in initial_state %}
     createElement(StateContexts.{{state_name|var_name}},{value: {{state_name|var_name}}},
     {% endfor %}
-    createElement(DispatchContext.Provider, {value: dispatchers}, children),
-    {% for state_name in initial_state|reverse %}){% endfor %}
+    createElement(DispatchContext, {value: dispatchers}, children)
+    {% for state_name in initial_state %}){% endfor %}
   )
 }

reflex-0.8.0a2/reflex/.templates/web/app/entry.client.js

@@ -0,0 +1,8 @@
+import { startTransition } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+import { createElement } from "react";
+
+startTransition(() => {
+  hydrateRoot(document, createElement(HydratedRouter));
+});

reflex-0.8.0a2/reflex/.templates/web/app/routes.js

@@ -0,0 +1,10 @@
+import { route } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default [
+  route("404", "routes/[404]_._index.jsx", { id: "404" }),
+  ...(await flatRoutes({
+    ignoredRouteFiles: ["routes/\\[404\\]_._index.jsx"],
+  })),
+  route("*", "routes/[404]_._index.jsx"),
+];

reflex-0.8.0a2/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -0,0 +1,35 @@
+import { useTheme } from "$/utils/react-theme";
+import { createElement } from "react";
+import { ColorModeContext, defaultColorMode } from "$/utils/context";
+
+export default function RadixThemesColorModeProvider({ children }) {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
+
+  const setColorMode = (mode) => {
+    const allowedModes = ["light", "dark", "system"];
+    if (!allowedModes.includes(mode)) {
+      console.error(
+        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`,
+      );
+      mode = defaultColorMode;
+    }
+    setTheme(mode);
+  };
+
+  return createElement(
+    ColorModeContext.Provider,
+    {
+      value: {
+        rawColorMode: theme,
+        resolvedColorMode: resolvedTheme,
+        toggleColorMode,
+        setColorMode,
+      },
+    },
+    children,
+  );
+}

{reflex-0.7.14a6 → reflex-0.8.0a2}/reflex/.templates/web/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     "postcss-import": {},
     autoprefixer: {},

reflex-0.8.0a2/reflex/.templates/web/react-router.config.js

@@ -0,0 +1,6 @@
+export default {
+  future: {
+    unstable_optimizeDeps: true,
+  },
+  ssr: false,
+};

reflex-0.8.0a2/reflex/.templates/web/utils/client_side_routing.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+/**
+ * React hook for use in NotFound page to enable client-side routing.
+ *
+ * Uses React Router to redirect to the provided URL when loading
+ * the NotFound page (for example as a fallback in static hosting situations).
+ *
+ * @returns {boolean} routeNotFound - true if the current route is an actual 404
+ */
+export const useClientSideRouting = () => {
+  const [routeNotFound, setRouteNotFound] = useState(false);
+  const didRedirect = useRef(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!didRedirect.current) {
+      // have not tried redirecting yet
+      didRedirect.current = true; // never redirect twice to avoid navigation loops
+
+      // attempt to redirect to the route in the browser address bar once
+      const path = window.location.pathname;
+      const search = window.location.search;
+
+      // Use navigate instead of replace
+      navigate(path + search, { replace: true })
+        .then(() => {
+          // Check if we're still on a NotFound route
+          // Note: This depends on how your routes are set up
+          if (location.pathname === path) {
+            setRouteNotFound(true); // Mark as an actual 404
+          }
+        })
+        .catch(() => {
+          setRouteNotFound(true); // navigation failed, so this is a real 404
+        });
+    }
+  }, [location, navigate]);
+
+  // Return the reactive bool, to avoid flashing 404 page until we know for sure
+  // the route is not found.
+  return routeNotFound;
+};

reflex-0.8.0a2/reflex/.templates/web/utils/react-theme.js

@@ -0,0 +1,92 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  createElement,
+  useRef,
+  useMemo,
+} from "react";
+
+import { isDevMode, defaultColorMode } from "$/utils/context";
+
+const ThemeContext = createContext({
+  theme: defaultColorMode,
+  resolvedTheme: defaultColorMode !== "system" ? defaultColorMode : "light",
+  setTheme: () => {},
+});
+
+export function ThemeProvider({ children, defaultTheme = "system" }) {
+  const [theme, setTheme] = useState(defaultTheme);
+  const [systemTheme, setSystemTheme] = useState(
+    defaultTheme !== "system" ? defaultTheme : "light",
+  );
+
+  const firstRender = useRef(true);
+
+  useEffect(() => {
+    if (!firstRender.current) {
+      return;
+    }
+
+    firstRender.current = false;
+
+    if (isDevMode) {
+      const lastCompiledTheme = localStorage.getItem("last_compiled_theme");
+      if (lastCompiledTheme !== defaultColorMode) {
+        // on app startup, make sure the application color mode is persisted correctly.
+        localStorage.setItem("last_compiled_theme", defaultColorMode);
+        return;
+      }
+    }
+
+    // Load saved theme from localStorage
+    const savedTheme = localStorage.getItem("theme") || defaultTheme;
+    setTheme(savedTheme);
+  });
+
+  const resolvedTheme = useMemo(
+    () => (theme === "system" ? systemTheme : theme),
+    [theme, systemTheme],
+  );
+
+  useEffect(() => {
+    // Set up media query for system preference detection
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    // Listen for system preference changes
+    const handleChange = () => {
+      setSystemTheme(mediaQuery.matches ? "dark" : "light");
+    };
+
+    handleChange();
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  });
+
+  // Save theme to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(resolvedTheme);
+    root.style.colorScheme = resolvedTheme;
+  }, [resolvedTheme]);
+
+  return createElement(
+    ThemeContext.Provider,
+    { value: { theme, resolvedTheme, setTheme } },
+    children,
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}