Declarativas API

Declarativas exposes two simple methods to get you going.

Methods

Creating virtual canvas nodes

import { c } from 'declarativas';

c('fillStyle', { value: 'blue' });
c('fillRect', { x: 0, y: 0, width: 10, height: 10 });
c(MyComponentMethod, { propA: true });

The c method is what allows you to tell declarativas what to do when it interprets a given node.

You can also get fancy, and use JSX with the following configuration:

/**
 * @jsx c
 * @jsxFrag Fragment
 */

import { c } from 'declarativas';

const Fragment = (_, children) => <g>{children}</g> // jsxFrag and this method are optional

<fillStyle value="blue" />
<fillRect x={0} y={0} width={10} height={10} />
<MyComponentMethod propA={true} />

To use JSX, you'll need to use acorn or babel to transpile JSX to regular javascript.

Single render

import { render, c } from 'declarativas';

render(
  document.querySelector('canvas').getContext('2d'),
  [
    c('fillStyle', { value: '#f0f' }),
    c('fillRect', { x: 0, y: 0, width: 100, height: 100 }),
  ],
);

Calling the render method will draw whatever virtual canvas nodes you have created onto the canvas you specified. If you want to update the canvas, just call render again. There is no extra state/updating mechanism built in, but there is nothing stopping any developer from integrating declarativas into a state management library.