Reactivity: Modifiers

[kategengler]

No description provided.

[kategengler]

Possibly descoped from Polaris after discussion at 2024 f2f.

[NullVoxPopuli]

I think the design is easy once we ship resources (looking at pure public API perspective)

import { Resource } from '@ember/primitives'; // starbeam? 🤷 

function wiggle(element, howMuch, options = {}) {
  let animate = () => { /* omitted for brevity */ };
  
  return Resource(({ on }) => {
    element.addEventListener('mouseover', animate);
    
    // aka 'on.cleanup'
    on.finalize(() => element.removeEventListener('mouseover', animate);
  });
}

<template>
  <h1 {{wiggle "a lot" color="random"}}>Hello there!</h1>
</template>

which... maybe we abstract to:

import { Modifier } from '@ember/primitives';

const wiggle = Modifier(({ on, element }, howMuch, options = {}) => {
  let animate = () => { /* omitted for brevity */ };
  
  element.addEventListener('mouseover', animate);
  
  on.finalize(() => element.removeEventListener('mouseover', animate);
  // also available (on is from resource, so that whole API)
  // on.sync(() => {})
});

<template>
  <h1 {{wiggle "a lot" color="random"}}>Hello there!</h1>
</template>

@wycats and I will try to get more aggressive at figuring out what we want for an RFC -- and I'll report back here (I through something on his calendar for tomorrow)