js-canvas-library v1.0.0

JS Canvas Library []

This is a JS library to create canvas based applications using the Elm Architecture.

Requirements

• macOS
• node (we recommend installing it via fnm)
• yarn

Note: all of the following commands should be run in the project’s folder.

Installation

To install all dependencies run:

yarn add @diesdasdigital/js-canvas-library

Usage

Here is a basic example of rendering a rectangle using the library. Its color will change as soon as the user clicks the button.

An example highlighting subscriptions and fetching data can be found in example.js.

import { canvas } from "./main.js";

function init(flags, meta) {
  const model = {
    color: "red",
    viewport: meta.viewport
  };
  const cmds = [];
  return [model, cmds];
}

const msg = {
  userClickedOnButton: () => ({
    type: "userClickedOnButton"
  })
};

function update(_msg, model) {
  switch (_msg.type) {
    case "userClickedOnButton":
      return [{ ...model, color: "green" }, []];

    default:
      return [model, []];
  }
}

function view(context, model) {
  const SIZE = 20;
  const HALF = 0.5;
  context.fillStyle = model.color;
  context.fillRect(
    model.viewport.width * HALF - SIZE * HALF,
    model.viewport.height * HALF - SIZE * HALF,
    SIZE,
    SIZE
  );
}

function subscriptions() {
  return [];
}

const send = canvas(
  document.querySelector(".canvas"),
  {} // <- flags
)({
  init,
  view,
  update,
  subscriptions
});

document.querySelector(".button").addEventListener("click", () => {
  send(msg.userClickedOnButton());
});

Contributing

Clone the repository and run:

yarn

To open the example page while development you can run:

yarn dev

Linting should run automatically when pushing. To lint your code manually run:

yarn lint

License

Allowed to be used by people at diesdas and its creator.

Publishing as a package

Login as diesdas using the credentials provided in 1Password and run yarn publish or npm publish.