Skip to content
Not A Web Framework
JavaScript HTML Makefile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
examples
README.md added logo Oct 21, 2018
common.js Fixed bugs with forKeys() Dec 25, 2017
dom.js Moved dom prototypes to estl Dec 20, 2017
index.js estl usage Dec 25, 2017
makefile Added the 'store' concept Dec 16, 2017
package-lock.json estl usage Dec 25, 2017
package.json v1.0.8 Dec 25, 2017
text.js Fixed bugs with forKeys() Dec 25, 2017
yarn.lock Fixed bugs with forKeys() Dec 25, 2017

README.md

NAWF

Not A Web Framework - the minimalist's DOM abstraction

What is this?

NAWF lets you generate DOM nodes or HTML text from a JSON-like structure. This enables extremely lightweight pure-javascript abstraction of rendering code.

Obviously, generation of DOM nodes is only supported in the browser, but NAWF can generate HTML text in a Node.js environment, too!

Install

npm install nawf

Usage

var nawf = require("nawf");

var doc = [
	"div",
	{
		style: {backgroundColor: "red"}
	},
	[
		"Hello,", "World!", 
		[
			"button",
			{
				onclick: function() {console.log("Clicked!");}
			},
			"Testing"
		]
	]
];

// convert to text
nawf.text(doc);

// convert to DOM node
nawf.dom(doc);

Abstraction

An element name is a string, or a function that produces an element name.

An attribute is a key-value pair, or a list of attributes, of a function that returns an attribute.

A node is a string, or a list in the form [<element name>, <attribute>, <node>], or a list of nodes, or nothing.

It's very important to note that these definitions are recursive. This makes the following equivalent:

var simple = [
	"div",
	[],
	[
		"input",
		{type: "text", placeholder: "Type here"}
	]
];

// is the same as...

var complex = [
	function() {return "div";},
	[],
	[
		[ "input",
			[[function() {return [{type: "text"}];}],
				function() {return {placeholder: "Type here"};}
			]
		]
	]
];

Obviously, this is contrived, and awful. The second example is useless. Here are some genuine reasons you may want functions or lists in odd places...

  • Changing attributes, element types, or children based on the context of a closure
  • Mapping over data, to produce a view
You can’t perform that action at this time.