API Proposal

[pearmini]

Some proposals for API design.

[pearmini]

const [state] = flow.let("x", 0).on("animate", animate).join();

function animate({state}) {
  state.x = Math.abs(Math.sin(Date.now() / 1000)) * 200;
}

const svg = shape.svg({width: 200, height: 50}, [
  shape.circle({
    cx: $(() => scope.x),
    cy: 25,
    r: 20,
  }),
]);

[pearmini]

Ref.

• https://d3js.org/d3-transition
• https://github.com/veltman/flubber/tree/master

If the child has node attribute, call the method and mount the returned DOM element:

shape.svg([
  cm.transition(
    {
      keyframes: [
        {delay: 100, ease: d3.easeLinear, duration: 750, fill: "green"},
        {fill: "red", duration: 500},
        {fill: "brown", duration: 400},
      ],
      onend: ({target}) => target.remove(),
      tween: {
        fill: (d) => d3.interpolateRgb(d.fill, "black"),
        "style.fill": (d) => d3.interpolateRgb(d.fill, "black"),
        text: (d) => d3.interpolate(d.text, "Bye!"),
      },
    },
    [shape.rect()],
  ),
]);

[pearmini]

Component:

const circle = cm.component((flow) => {
  const [state, use] = flow()
    .let("x", 0)
    .on("loop", () => (state.x = Math.abs(Math.sin(Date.now() / 1000) * 200)))
    .join();

  return svg.svg({width: 200, height: 50}, [
    svg.circle({
      cx: use("x"),
      cy: 25,
      r: 20,
    }),
  ]);
});