sc0ttj / component

A tiny library for isomorphic JavaScript components
MIT License
2 stars 1 forks source link

Feature: use `canvas` as view #45

Closed sc0ttj closed 2 years ago

sc0ttj commented 3 years ago

Aside from using the DOM with DOM-diffing (which should include SVG support), Component should handle components which update a canvas.

Example usage would be something like:

// define a new component
const Foo = new Component({ x: 200, y: 100 });

// define a "view", that draws to the components canvas 
Foo.view = (props, ctx) => {
  ctx.moveTo(0, 0);
  ctx.lineTo(props.x, props.y);
  ctx.stroke();
};

// render to a canvas, and attach its context (`ctx`) to our component
Foo.render('.some-canvas', '2d');

// update the canvas
Foo.setState({ x: 201, y: 101 });

// or update the canvas repeatedly, using a fixed-time loop (requires the `onTick` add-on, or similar)
Foo.onTick(props => {
  Foo.setState({ x: props.x + 1, y: props.y + 1 });
});

The logic here is simply this:

sc0ttj commented 2 years ago

Done, closing.