Implement responsive local state management for immediate user feedback

app-examples/gallery/.gitignore

@@ -1,4 +1,5 @@
 *.db
 *.py[cod]
+*.web
 .web
 __pycache__/

nextpy/backend/vars.py

@@ -1473,8 +1473,8 @@ def _var_set_state(self, state: Type[BaseState] | str) -> Any:
         state_name = state if isinstance(state, str) else state.get_full_name()
         new_var_data = VarData(
             state=state_name,
-            hooks={
-                "const {0} = useContext(StateContexts.{0})".format(
+            hooks = {
+                "const {0} = useContext(StateContexts.{0});\nconst dispatchers = useContext(DispatchContext)".format(
                     format.format_state_name(state_name)
                 )
             },

nextpy/frontend/components/component.py

@@ -1590,6 +1590,8 @@ def _get_memoized_event_triggers(
             if isinstance(rendered_chain, str):
                 rendered_chain = rendered_chain.strip("{}")
 
+            rendered_chain = rendered_chain+'}'
+
             # Hash the rendered EventChain to get a deterministic function name.
             chain_hash = md5(str(rendered_chain).encode("utf-8")).hexdigest()
             memo_name = f"{event_trigger}_{chain_hash}"

nextpy/frontend/templates/jinja/web/pages/base_page.js.jinja2

@@ -13,6 +13,7 @@ Purpose:
 {# ==============================
      LIBRARY IMPORTS BLOCK
 ============================== #}
+import { DispatchContext } from 'utils/context'
 {# 
 Purpose:
 - Renders all required library imports for the current page or component.

nextpy/utils/format.py

@@ -349,7 +349,28 @@ def format_prop(
 
             chain = ",".join([format_event(event) for event in prop.events])
             event = f"addEvents([{chain}], {arg_def}, {json_dumps(prop.event_actions)})"
-            prop = f"{arg_def} => {event}"
+
+             if isinstance(event, str):
+                event = event.strip("{}")
+
+            parts = chain.split('.')
+            formatted_chain = f'{parts[0]} . {parts[1]}.{parts[2]}'
+
+            # Extract "_e0.target.value"
+            value_match = re.search(r"value:([^,)}]+)", event)
+            if value_match:
+                value = value_match.group(1)
+
+
+            # Extract "state.state"
+            message_match = re.search(r"addEvents\(\[\S+?\(\"([^.]+?\.[^.]+)", event)
+            if message_match:
+                message = message_match.group(1)
+
+            dispatcher_line = f"const dispatcher = dispatchers['{message}'];\n" \
+                  f"dispatcher({{ message: {value} }});"
+
+            prop = f"{arg_def} =>{{ {dispatcher_line}\n{event} }}"
 
         # Handle other types.
         elif isinstance(prop, str):

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "nextpy"
-version = "0.3.3"
+version = "0.3.5"
 description = "⚡The Pure Python Framework for Web Apps, Meticulously Optimized for 🤖AI agents🤖. World's first AMS🥇"
 license = "Apache-2.0"
 authors = ["Team dotagent <anurag@dotagent.ai>"]