📗
declarativas
  • What is Declarativas?
  • Why Declarativas?
  • Getting Started
    • Installing Declarativas in Your Application
    • Declarativas API
  • Boilerplates
    • Vanilla HTML/JS
    • With Ferp
Powered by GitBook
On this page
  1. Getting Started

Installing Declarativas in Your Application

PreviousWhy Declarativas?NextDeclarativas API

Last updated 1 year ago

Was this helpful?

CtrlK

Was this helpful?

Installing

You can use nodejs and npm to grab the latest copy of declarativas to get going in seconds.

With npm or yarn

Open up your terminal, and do the usual:

$ npm install --save declarativas
# OR
$ yarn add declarativas

And bring it in your code:

index.js
import { render, createElement as c, ClearCanvas, Properties, StrokeRect } from 'declarativas';

// Get your canvas from an HTML file.
const canvas = document.querySelector('canvas');

render(
  [
    c(ClearCanvas),
    c(Properties, { strokeStyle: 'black' }),
    c(StrokeRect, {
      x: 100,
      y: 100,
      w: 20,
      h: 20,
    })
  ]),
  canvas.getContext('2d'),
);

With a CDN

index.html
<!doctype html>
<html>
<body>
  <canvas></canvas>
  <!-- CDN Import -->
  <script type="javascript" src="https://unpkg.com/declarativas"></script>
  
  <!-- Code -->
  <script type="javascript">
    const { render, createElement as c, ClearCanvas, Properties, StrokeRect } = window.declarativas;
    const canvas = document.querySelector('canvas');

    render(
      [
        c(ClearCanvas),
        c(Properties, { strokeStyle: 'black' }),
        c(StrokeRect, {
          x: 100,
          y: 100,
          w: 20,
          h: 20,
        })
      ]),
      canvas.getContext('2d'),
    );
    
  </script>
</body>
</html>