What is it ?

data-double-dash is a great front-end solution for MPA applications using templating engines (such as Handlebars, Twig, Jinja, etc) or plain HTML. In that context, it is designed to enable component-based development in a type-safe manner while staying as light as possible (< 7kb minified + gzipped).

Example

The following example shows how to create a simple counter :

ddd({
	name: "counter",
	state: { count: 0 },
	handlers: {
		increment(event, { element, props, state }) {
			state.count += props.step // increment state's count
			element.textContent = state.count.toString() // update UI
		},
	},
})

<button
	data--counter='{ "step": 1 }'
	data--counter--click='{ "handler": "increment" }'
>
	0
</button>

Documentation

For usage documentation, see:

docs/01-getting-started.md

License

See the LICENSE file.