Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

curvature

Package Overview
Dependencies
Maintainers
1
Versions
99
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

curvature

![avatar](https://avatars3.githubusercontent.com/u/640101?s=80&v=4)

latest
Source
npmnpm
Version
0.0.68-h
Version published
Maintainers
1
Created
Source

avatar

Curvature.js

v.0.0.68

curvature Apache-2.0 Licence Badge Size badge

CircleCI

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!');
};

FAQs

Package last updated on 20 Feb 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

RubyGems Adds Cooldown Feature to Bundler for Newly Published Gems

Security News

RubyGems Adds Cooldown Feature to Bundler for Newly Published Gems

RubyGems and Bundler 4.0.13 introduced an opt-in cooldown feature that delays newly published gems during dependency resolution.

By Sarah Gooding  -  Jun 05, 2026