implemented a new input component that manage state on the client side

nextpy/interfaces/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/interfaces/web/components/component.py

@@ -1589,6 +1589,9 @@ def _get_memoized_event_triggers(
             rendered_chain = format.format_prop(event)
             if isinstance(rendered_chain, str):
                 rendered_chain = rendered_chain.strip("{}")
+
+            if tag_name.startswith("Input_"):
+                rendered_chain = rendered_chain+'}'
 
             # Hash the rendered EventChain to get a deterministic function name.
             chain_hash = md5(str(rendered_chain).encode("utf-8")).hexdigest()
@@ -1613,7 +1616,8 @@ def _get_memoized_event_triggers(
                 Var.create_safe(memo_name)._replace(
                     _var_type=EventChain, merge_var_data=memo_var_data
                 ),
-                f"const {memo_name} = useCallback({rendered_chain}, [{', '.join(var_deps)}])",
+                # Move the dispatchers line to the right place.
+                f"const dispatchers = useContext(DispatchContext);const {memo_name} = useCallback({rendered_chain}, [{', '.join(var_deps)}])",
             )
         return trigger_memo
 

nextpy/utils/format.py

@@ -311,6 +311,7 @@ def format_match(cond: str | Var, match_cases: List[BaseVar], default: Var) -> s
 
 def format_prop(
     prop: Union[Var, EventChain, ComponentStyle, str],
+    tag_name='',
 ) -> Union[int, float, str]:
     """Format a prop.
 
@@ -349,7 +350,33 @@ 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 tag_name.startswith("Input_"):
+                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.
+            else:
+                # prop = f"{arg_def} =>{{ {dispatcher_line}\n{event} }}"
+                prop = f"{arg_def} => {event}"
 
         # Handle other types.
         elif isinstance(prop, str):