Curvature NPM | npm.io

avatar

Curvature.js

v.0.0.68

Curvature is a lightweight javascript framework with an emphasis on straightforwardness.

This document serves only as an overview. For more in-depth, interactive documentation, see http://curvature.seanmorr.is/.

Getting started

Install with npm:

$ npm install curvature

Creating Views

Create a view class:

import { View } from 'curvature/base/View';

class MyView extends View
{
	constructor()
	{
		super();

		this.template = `<b>Hello, world!</b>`;
	}
}

or an anonymous view:

import { View } from 'curvature/base/View';

const view = View.from(`<b>Hello, world!</b>`);

Render a view directly into an existing tag:

import { View } from 'curvature/base/View';

const view = View.from(`<b>Hello, world!</b>`);
const div  = document.querySelector('div.hello');

view.render(div);

Render a view to the <body> tag as soon as the DOM is ready:

import { View } from 'curvature/base/View';

const view = View.from(`<b>Hello, world!</b>`);

document.addEventListener('DOMContentLoaded', () => {
	const body = document.querySelector('body');
	view.render(body.element);
});

Separating Templates

Writing HTML into a javascript string can be annoying.

Use the rawquire babel macro to import templates directly from html files, and maintin your syntax highlighting.

$ npm install rawquire

my-template.html:

<p>This is my template!</p>

MyView.js:

import { rawquire } from 'rawquire/rawquire.macro';
import { View } from 'curvature/base/View';

class MyView extends View
{
	constructor()
	{
		super();

		this.template = rawquire('./my-template.html');
	}
}

Variable Binding

Use the cv-bind attribute, or [[squarebrackets]] to insert variables from the view.args property into your templates:

my-template.html

<p><span cv-bind = "prefix"></span> [[time]]</p>

MyView.js

import { rawquire } from 'rawquire/rawquire.macro';
import { View } from 'curvature/base/View';

class MyView extends View
{
	constructor()
	{
		super();

		this.args.prefix = 'The time is';

		this.onInterval(1, ()=>{
			this.args.time = Date.now();
		});

		this.template = rawquire('my-template.html');
	}
}

Event Listeners

Use the cv-on attribute to listen for events on your view object:

clickable.html

<button cv-on = "click:click(event)">click me!</button>

Clickable.js

import { rawquire } from 'rawquire/rawquire.macro';
import { View } from 'curvature/base/View';

class Clickable extends View
{
	constructor()
	{
		super();

		this.template = rawquire('./clickable.html');
	}

	click(event)
	{
		alert('button clicked!');
	}
}

Or, for anonymous views:

import { View } from 'curvature/base/View';

const view = View.from(`<button cv-on = "click:click(event)">click me!</button>`);

view.click = (event) => {
	alert('button clicked!');
};

If the event & method names match, you can just specify it once.

import { View } from 'curvature/base/View';

const view = View.from(`<button cv-on = "click(event)">click me!</button>`);

view.click = (event) => {
	alert('button clicked!');
};

Multiple listeners may be provided in a ";" separated list:

import { View } from 'curvature/base/View';

const view = View.from(`<button cv-on = "click(event);hover(event)">click me!</button>`);

view.click = (event) => {
	alert('button clicked!');
};

view.hover = (event) => {
	console.log('button hovered!');
};

@infinitebrahmanuniverse/nolb-cur @everything-registry/sub-chunk-1427 @seanmorris/arctype matrix-api cv2-hyperscroll cv2-doc

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago