Invoke component action with JS?

[taublast]

I have a case where depending on browser window size I need to render different content, CSS won't help here. So actually I used Alpine, while haven't found some neat way to do it using pure Hydro:

@model App.Components.ExampleComponent

<div class="component mt-5">

 <script>
     function windowWidthHandler() {
         return {
             isNarrow: false,
             checkWidth() {
                 this.isNarrow = window.innerWidth < 830;
                 window.addEventListener('resize', () => {
                     this.isNarrow = window.innerWidth < 830;
                 });
             }
         };
     }
 </script>

        <div x-data="windowWidthHandler()" x-init="checkWidth">
            <div x-show="isNarrow">

                @* LIMITED *@ 
                             
            </div>
            <div x-show="!isNarrow">

                @* FULL *@ 
                
            </div>
        </div>
    ...

Would prefer something more clean.. While we do not have browser events coming from Hydro yet (do we?) could call component action from windowWidthHandler so that it would set some internal component property like bool IsWideScreen {get; set;} and build UI from there..

Looking into hydroAction(el, component, action), any hints?

[taublast]

To update a component from JS, looks dirty but works:

async function updateComponent(findName) {
    let element = document.querySelector('[hydro-name="'+findName+'"]');
        await window.Hydro.hydroAction(element , window.Hydro.findComponent(element), { name: "Mount"});
}

You can replace "Mount" with your action name if you want to trigger a specific code when updating.

Would say we need a simple method for that like window.Hydro.updateByName(), window.Hydro.updateById() etc..

I saw a similar question somewhere, how to update a component from another component when they do not have a parent-child relation and cannot share events.

My latest use case: a data edition dialog would need to refresh the items list after one item was edited-saved, components are completely separate.

[taublast]

@kjeske i was just thinking, with that new ExecuteJS we could now update any component from anywhere in a clean way :) So we could finally add an UpdateState or Update method to HydroComponent and go from there. This method would make sure that a single instance of a system script to update this component would be sent to client et voila :)

[kjeske]

Fixed