How to pass down a function? about hybrids

[smalluban]

It is possible to pass down function to the custom element created by the hybrids. However, I would recommend to stick to the platform and use DOM events instead.

First of all, there are two ways to structure related components - you can render children inside of the parent component - in render property, like this:

const TodoList = {
  render: () => html`
    <todo-item></todo-item>
    <todo-item></todo-item>
  `,
};

Then in your other part of the app you are using <todo-list> where <todo-item> is used behind the scene.

The second way allows composing parent and children using the distribution:

const AppWrapper = {
  render: () => html`
    <todo-list>
      <todo-item></todo-item>
      <todo-item></todo-item>
    </todo-list>
  `,
}

The question is here, where do you want to have logic, which is resposible for processing input items for the list. In the first way, the <todo-item> is just for convience - it could be a <div> with styling, so then you don't have communication between different custom elements. In the second example <todo-list> is rather a UI wrapper with some styling etc, for <todo-item>s.

How you can then use DOM events? If your <todo-item> has delete button - you can attach event listener to click action, and dispatch another custom event for it:

import { dispatch, html } from 'hybrids';

function delete(host) {
  dispatch(host, 'todo-item-delete', { detail: host.data.id });
}

const TodoItem = {
   data: null,
   render: ({ data }) => html`
      <div>${data.msg}</div>
      <button onclick=${delete}>delete item</button>
   `,
};

In above example <todo-item> element dispatches todo-item-delete event when a user clicks delete item button.

You can then listen to that event in your parent component and remove item from your list:

function deleteItem(host, event) {
  const itemId = event.detail;
  host.items = ...
}

const AppWrapper = {
  render: () => html`
    <todo-list>
      <todo-item ontodo-item-delete=${deleteItem}></todo-item>
      <todo-item></todo-item>
    </todo-list>
  `,
}

If you are using the first method you can still use events and add one to your <todo-item> element.

At last, if you really want to pass function you can define your property as a undefined (omit transforming value of the property) and use it on some event:

const TodoItem = {
   deleteCallback: undefined,
   render: ({ data, deleteCallback }) => html`
      <div>${data.msg}</div>
      <button onclick=${deleteCallback}>delete item</button>
   `,
};

And then:

function deleteItem() {...}

const AppWrapper = {
  render: () => html`
    <todo-list>
      <todo-item deleteCallback=${deleteItem}></todo-item>
      <todo-item></todo-item>
    </todo-list>
  `,
}