Passing functions as props

[adamzerner]

https://fresh.deno.dev/docs/concepts/islands says the following:

Passing props to islands is supported, but only if the props are JSON serializable. This means that you can only pass primitive types, plain objects, and arrays. It is currently not possible to pass complex objects like Date, custom classes, or functions. This means that it is not possible to pass children to an island, as children are VNodes, which are not serializable.

It is also not supported to nest islands within other islands.

In playing around, those claims don't actually appear to be true. Are they outdated?

Using children with an island works:

// index.tsx
<Counter start={3}>test</Counter>


// Counter.tsx
import { useState } from "preact/hooks";
import { Button } from "../components/Button.tsx";
import MinusOne from "../islands/MinusOne.tsx";

interface CounterProps {
  start: number;
  children: any;
}

export default function Counter(props: CounterProps) {
  const [count, setCount] = useState(props.start);
  return (
    <div>
      <p>{count}</p>
      <MinusOne count={count} setCount={() => alert("test")} />
      <Button onClick={() => setCount(count + 1)}>+1</Button>
      {props.children}
    </div>
  );
}

And so does passing functions. Using the same Counter.tsx from above,

// Counter.tsx
<MinusOne count={count} setCount={() => alert("test")} />


// MinusOne.tsx
import { Button } from "../components/Button.tsx";

export default (
  { count, setCount }: { count: number; setCount: any },
) => {
  return <Button onClick={() => setCount(count - 1)}>-1</Button>;
};

leads to an alert popping up when you click the button. And

<MinusOne count={count} setCount={setCount} />

leads to the counter being successfully decremented.

[JacobWeisenburger]

This is a server side component and you are not passing any functions to the island Counter.

// index.tsx
export default function Home () {
    return <Counter start={3} />
}

---

If you actually pass a funtion from a server side component to an island, it doesn't work.

// index.tsx
export default function Home () {
    return <Counter fn={() => { }} />
}

// islands/Counter.tsx
export default function Counter ( props: { fn: () => void } ) {
    props.fn() // TypeError: props.fn is not a function
    return <div></div>
}