reflex 0.7.2.dev1__tar.gz → 0.7.3a1__tar.gz

{reflex-0.7.2.dev1 → reflex-0.7.3a1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: reflex
-Version: 0.7.2.dev1
+Version: 0.7.3a1
 Summary: Web apps in pure Python.
 Keywords: web,framework
 Author: Elijah Ahianyo
@@ -42,7 +42,6 @@ Requires-Dist: lazy_loader>=0.4
 Requires-Dist: typing_extensions>=4.6.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">
@@ -50,10 +49,12 @@ Description-Content-Type: text/markdown
 <hr>
 
 ### **✨ Performant, customizable web apps in pure Python. Deploy in seconds. ✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
@@ -67,9 +68,10 @@ Description-Content-Type: text/markdown
 Reflex is a library to build full-stack web apps in pure Python.
 
 Key features:
-* **Pure Python** - Write your app's frontend and backend all in Python, no need to learn Javascript.
-* **Full Flexibility** - Reflex is easy to get started with, but can also scale to complex apps.
-* **Deploy Instantly** - After building, deploy your app with a [single command](https://reflex.dev/docs/hosting/deploy-quick-start/) or host it on your own server.
+
+- **Pure Python** - Write your app's frontend and backend all in Python, no need to learn Javascript.
+- **Full Flexibility** - Reflex is easy to get started with, but can also scale to complex apps.
+- **Deploy Instantly** - After building, deploy your app with a [single command](https://reflex.dev/docs/hosting/deploy-quick-start/) or host it on your own server.
 
 See our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) to learn how Reflex works under the hood.
 
@@ -93,7 +95,7 @@ cd my_app_name
 reflex init
 ```
 
-This command initializes a template app in your new directory. 
+This command initializes a template app in your new directory.
 
 You can run this app in development mode:
 
@@ -105,7 +107,6 @@ You should see your app running at http://localhost:3000.
 
 Now you can modify the source code in `my_app_name/my_app_name.py`. Reflex has fast refreshes so you can see your changes instantly when you save your code.
 
-
 ## 🫧 Example App
 
 Let's go over an example: creating an image generation UI around [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). For simplicity, we just call the [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), but you could replace this with an ML model run locally.
@@ -120,8 +121,6 @@ Let's go over an example: creating an image generation UI around [DALL·E](https
 
 Here is the complete code to create this. This is all done in one Python file!
 
-
-  
 ```python
 import reflex as rx
 import openai
@@ -161,7 +160,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -181,17 +180,12 @@ app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
-
-
-
-
 ## Let's break this down.
 
 <div align="center">
 <img src="docs/images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
 </div>
 
-
 ### **Reflex UI**
 
 Let's start with the UI.
@@ -269,11 +263,10 @@ You can create a multi-page app by adding more pages.
 
 <div align="center">
 
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
 
 </div>
 
-
 ## ✅ Status
 
 Reflex launched in December 2022 with the name Pynecone.
@@ -286,14 +279,14 @@ Reflex has new releases and features coming every other week! Make sure to :star
 
 We welcome contributions of any size! Below are some good ways to get started in the Reflex community.
 
--   **Join Our Discord**: Our [Discord](https://discord.gg/T5WSbC2YtQ) is the best place to get help on your Reflex project and to discuss how you can contribute.
--   **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
--   **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.
+- **Join Our Discord**: Our [Discord](https://discord.gg/T5WSbC2YtQ) is the best place to get help on your Reflex project and to discuss how you can contribute.
+- **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
+- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.
 
 We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
-
 ## All Thanks To Our Contributors:
+
 <a href="https://github.com/reflex-dev/reflex/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
 </a>

{reflex-0.7.2.dev1 → reflex-0.7.3a1}/README.md

@@ -1,4 +1,3 @@
-
 <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">
@@ -6,10 +5,12 @@
 <hr>
 
 ### **✨ Performant, customizable web apps in pure Python. Deploy in seconds. ✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
@@ -23,9 +24,10 @@
 Reflex is a library to build full-stack web apps in pure Python.
 
 Key features:
-* **Pure Python** - Write your app's frontend and backend all in Python, no need to learn Javascript.
-* **Full Flexibility** - Reflex is easy to get started with, but can also scale to complex apps.
-* **Deploy Instantly** - After building, deploy your app with a [single command](https://reflex.dev/docs/hosting/deploy-quick-start/) or host it on your own server.
+
+- **Pure Python** - Write your app's frontend and backend all in Python, no need to learn Javascript.
+- **Full Flexibility** - Reflex is easy to get started with, but can also scale to complex apps.
+- **Deploy Instantly** - After building, deploy your app with a [single command](https://reflex.dev/docs/hosting/deploy-quick-start/) or host it on your own server.
 
 See our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) to learn how Reflex works under the hood.
 
@@ -49,7 +51,7 @@ cd my_app_name
 reflex init
 ```
 
-This command initializes a template app in your new directory. 
+This command initializes a template app in your new directory.
 
 You can run this app in development mode:
 
@@ -61,7 +63,6 @@ You should see your app running at http://localhost:3000.
 
 Now you can modify the source code in `my_app_name/my_app_name.py`. Reflex has fast refreshes so you can see your changes instantly when you save your code.
 
-
 ## 🫧 Example App
 
 Let's go over an example: creating an image generation UI around [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). For simplicity, we just call the [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), but you could replace this with an ML model run locally.
@@ -76,8 +77,6 @@ Let's go over an example: creating an image generation UI around [DALL·E](https
 
 Here is the complete code to create this. This is all done in one Python file!
 
-
-  
 ```python
 import reflex as rx
 import openai
@@ -117,7 +116,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -137,17 +136,12 @@ app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
-
-
-
-
 ## Let's break this down.
 
 <div align="center">
 <img src="docs/images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
 </div>
 
-
 ### **Reflex UI**
 
 Let's start with the UI.
@@ -225,11 +219,10 @@ You can create a multi-page app by adding more pages.
 
 <div align="center">
 
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
 
 </div>
 
-
 ## ✅ Status
 
 Reflex launched in December 2022 with the name Pynecone.
@@ -242,14 +235,14 @@ Reflex has new releases and features coming every other week! Make sure to :star
 
 We welcome contributions of any size! Below are some good ways to get started in the Reflex community.
 
--   **Join Our Discord**: Our [Discord](https://discord.gg/T5WSbC2YtQ) is the best place to get help on your Reflex project and to discuss how you can contribute.
--   **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
--   **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.
+- **Join Our Discord**: Our [Discord](https://discord.gg/T5WSbC2YtQ) is the best place to get help on your Reflex project and to discuss how you can contribute.
+- **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
+- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.
 
 We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
-
 ## All Thanks To Our Contributors:
+
 <a href="https://github.com/reflex-dev/reflex/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
 </a>

{reflex-0.7.2.dev1 → reflex-0.7.3a1}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "reflex"
-version = "0.7.2dev1"
+version = "0.7.3a1"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [
@@ -176,23 +176,28 @@ build-backend = "pdm.backend"
 
 [dependency-groups]
 dev = [
-    "asynctest <1.0,>=0.13.0",
-    "darglint <2.0,>=1.8.1",
+    "asynctest >=0.13.0,<1.0",
+    "darglint >=1.8.1,<2.0",
     "dill >=0.3.8",
-    "pandas <3.0,>=2.1.1",
-    "pillow <12.0,>=10.0.0",
+    "pandas >=2.1.1,<3.0",
+    "pillow >=10.0.0,<12.0",
     "playwright >=1.46.0",
-    "plotly <6.0,>=5.13.0",
+    "plotly >=5.13.0,<6.0",
     "pre-commit >=3.2.1",
-    "pyright <1.2,>=1.1.394",
-    "pytest <9.0,>=7.1.2",
+    "pyright >=1.1.394,<1.2",
+    "pytest >=7.1.2,<9.0",
     "pytest-asyncio >=0.24.0",
-    "pytest-mock <4.0,>=3.10.0",
-    "pytest-cov <7.0,>=4.0.0",
-    "pytest-benchmark <6.0,>=4.0.0",
+    "pytest-mock >=3.10.0,<4.0",
+    "pytest-cov >=4.0.0,<7.0",
+    "pytest-benchmark >=4.0.0,<6.0",
     "pytest-playwright >=0.5.1",
-    "pytest-codspeed <4.0.0,>=3.1.2",
+    "pytest-codspeed >=3.1.2,<4.0.0",
     "ruff ==0.9.10",
-    "selenium <5.0,>=4.11.0",
-    "toml <1.0,>=0.10.2",
+    "selenium >=4.11.0,<5.0",
+    "toml >=0.10.2,<1.0",
+    "granian[reload] >= 2.0.0",
+    "psycopg[binary] >=3.2.6,<4.0",
+    "pytest-split >=0.10.0,<1.0",
+    "pytest-retry >=1.7.0,<2.0",
+    "pre-commit >=4.1.0,<5.0",
 ]

{reflex-0.7.2.dev1 → reflex-0.7.3a1}/reflex/.templates/jinja/web/pages/custom_component.js.jinja2

@@ -1,11 +1,14 @@
 {% extends "web/pages/base_page.js.jinja2" %}
 {% from "web/pages/macros.js.jinja2" import renderHooks %}
-{% block export %}
-{% for component in components %}
 
-{% for custom_code in component.custom_code %}
+{% block declaration %}
+{% for custom_code in custom_codes %}
 {{custom_code}}
 {% endfor %}
+{% endblock %}
+
+{% block export %}
+{% for component in components %}
 
 export const {{component.name}} = memo(({ {{-component.props|join(", ")-}} }) => {
     {{ renderHooks(component.hooks) }}

{reflex-0.7.2.dev1 → reflex-0.7.3a1}/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -11,7 +11,7 @@ export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
   const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
   const [resolvedColorMode, setResolvedColorMode] = useState(
-    defaultColorMode === "dark" ? "dark" : "light"
+    defaultColorMode === "dark" ? "dark" : "light",
   );
 
   useEffect(() => {

reflex-0.7.3a1/reflex/.templates/web/components/shiki/code.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { codeToHtml } from "shiki";
+
+/**
+ * Code component that uses Shiki to convert code to HTML and render it.
+ *
+ * @param code - The code to be highlighted.
+ * @param theme - The theme to be used for highlighting.
+ * @param language - The language of the code.
+ * @param transformers - The transformers to be applied to the code.
+ * @param decorations - The decorations to be applied to the code.
+ * @param divProps - Additional properties to be passed to the div element.
+ * @returns The rendered code block.
+ */
+export function Code({
+  code,
+  theme,
+  language,
+  transformers,
+  decorations,
+  ...divProps
+}) {
+  const [codeResult, setCodeResult] = useState("");
+  useEffect(() => {
+    async function fetchCode() {
+      const result = await codeToHtml(code, {
+        lang: language,
+        theme,
+        transformers,
+        decorations,
+      });
+      setCodeResult(result);
+    }
+    fetchCode();
+  }, [code, language, theme, transformers, decorations]);
+  return (
+    <div dangerouslySetInnerHTML={{ __html: codeResult }} {...divProps}></div>
+  );
+}

{reflex-0.7.2.dev1 → reflex-0.7.3a1}/reflex/.templates/web/postcss.config.js

@@ -4,4 +4,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

{reflex-0.7.2.dev1 → reflex-0.7.3a1}/reflex/.templates/web/utils/client_side_routing.js

@@ -10,32 +10,34 @@ import { useRouter } from "next/router";
  * @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 router = useRouter()
+  const [routeNotFound, setRouteNotFound] = useState(false);
+  const didRedirect = useRef(false);
+  const router = useRouter();
   useEffect(() => {
     if (
       router.isReady &&
-      !didRedirect.current  // have not tried redirecting yet
+      !didRedirect.current // have not tried redirecting yet
     ) {
-      didRedirect.current = true  // never redirect twice to avoid "Hard Navigate" error
+      didRedirect.current = true; // never redirect twice to avoid "Hard Navigate" error
       // attempt to redirect to the route in the browser address bar once
-      router.replace({
+      router
+        .replace({
           pathname: window.location.pathname,
           query: window.location.search.slice(1),
-      }).then(()=>{
+        })
+        .then(() => {
           // Check if the current route is /404
-        if (router.pathname === '/404') {
-          setRouteNotFound(true); // Mark as an actual 404
-        }
-    })
-      .catch((e) => {
-        setRouteNotFound(true)  // navigation failed, so this is a real 404
-      })
+          if (router.pathname === "/404") {
+            setRouteNotFound(true); // Mark as an actual 404
+          }
+        })
+        .catch((e) => {
+          setRouteNotFound(true); // navigation failed, so this is a real 404
+        });
     }
   }, [router.isReady]);
 
   // Return the reactive bool, to avoid flashing 404 page until we know for sure
   // the route is not found.
-  return routeNotFound
-}
+  return routeNotFound;
+};

{reflex-0.7.2.dev1 → reflex-0.7.3a1}/reflex/.templates/web/utils/helpers/dataeditor.js

@@ -48,7 +48,7 @@ export function formatCell(value, column) {
       };
     default:
       console.log(
-        "Warning: column.type is undefined for column.title=" + column.title
+        "Warning: column.type is undefined for column.title=" + column.title,
       );
       return {
         kind: GridCellKind.Text,

{reflex-0.7.2.dev1 → reflex-0.7.3a1}/reflex/.templates/web/utils/helpers/range.js

@@ -1,43 +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 {
+    [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: undefined,
-              done: true,
+              value: i,
+              done: false,
             };
-          },
-        };
-      },
-    };
-  }
+          }
+          return {
+            value: undefined,
+            done: true,
+          };
+        },
+      };
+    },
+  };
+}