Novice, Practiced, Mastered
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

curium

1.0.5 • Public • Published

Curium

Development moved github.com/AlexanderElias/jenie

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

install

npm i curium

Downloadsweekly downloads

4

version

1.0.5

license

MPL-2.0

repository

githubgithub

last publish

collaborators

  • avatar