xeaone / curium

Curium - Web Component Library/Framework

Development moved github.com/AlexanderElias/oxe

Curium

Curium is a custom web component library/framework. Curium has two main flavors Curium and Curium + Swathe. Curium is your main custom elements library similar to X-tag and Skate. Curium + Swathe is your custom components library plus fancy data binding features in which case it is more like Polymer but more performant and way way smaller.

Swathe Link: github.com/AlexanderElias/swathe

Minified Sizes

• Curium: 2.04 KB
• Curium + Swathe: 3.39 KB
• X-tag: 13.7 KB
• Skate: 13.7 KB
• Polymer: varies on version but HUGE

Browser Support

• Chrome
• Firefox
• IE 11+/Edge (IE 10 has flaky Mutation Observer)
• Safari 7+
• Safari (iOS 7.1)
• Chrome (Android)

Usage

• Curium With Pollyfill - curium.polly.min.js. This version bundles [webcomponents-lite.js ]

API

Curium

Returns an instance of the Curium object.

Properties

• components: Object
• component: Function
• query: Function
• script: Function
• document: Function

Curium.components

Returns an object with all the custom components by there custom tag name. Helps keep the global scope clean.

Properties

• tag
  • Curium.component

Curium.component()

Returns a custom component object. Accepts an options object.

Properties

• template
• element
• attribute
• controller (If using Swathe it is a special Swathe controller otherwise it is just an object)
• model (If using Swathe it is a special Swathe model otherwise it is just an object)

Required Options

• tag: String required (Note must be of format start-end)

Template Options

• template: HTMLElement DOM element
• template: String string containing html (Note must begin with a html tag <ANY-TAG> even an html comment will work)
• template: String path to template using XHR (Note must begin with ./ , /, or http)
• template: Function multiline comment inside function function () {/* <template>I can span multiple lines</template> */}
• template: String querySelector on the current script (Note will not work if Curium.component(options) is wrapped by function such as event listener)

Methods Options

• created: Function callback fired when custom element is created. Parameter is it's self.
• attached: Function callback fired when custom element is created. Parameter is it's self.
• detached: Function callback fired when custom element is created. Parameter is it's self.
• attributed: Function callback fired when custom element is created. Parameter is it's self.

Curium.query()

Query selector on the current scripts document. Essentially a wrapper for document._currentScript.ownerDocument.querySelector(query) but in the current html document.

Curium.script()

Convenience and compatibility document._currentScript.

Curium.document()

Convenience and compatibility document._currentScript.ownerDocument.

Examples

Basic

Curium.component({ tag: 'c-tag' });

Life Cycle

Curium.component({
	tag: 'c-tag',
	created: function (self) {
		console.log('created');
		// manipulate self.template
	},
	attached: function (self) {
		console.log('attached');
		// if using XHR templates attached is fired before created other wise it is fired after created
	},
	detached: function (self) {
		console.log('detached');
		// fired when element is removed from DOM
	},
	attributed: function (self, name, oldValue, newValue) {
		console.log('attributed');
		// fired any time attribute changes
		// self.attribute an object that can set or get the target elements attributes
	}
});

JS File

var templateString = '<template><p>templateString</p></template>';

var templateMultiline = function () {/*

	<template>
		<p>templateMultiline</p>
	</template>

*/};

Curium.component({
	tag: 'c-tag',
	template: './template.html', // path to template.html file
	template: templateString,
	template: templateMultiline,
});

HTML File

<template>
	<p>templateQuery</p>
</template>

<script>
var templateElement = Curium.query('template');

Curium.component({
	tag: 'c-tag',
	template: 'template',
	template: templateElement,
});
</script>

License

Licensed Under MPL 2.0

Copyright 2016 Alexander Elias