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

    Last publish

    Collaborators

    • vokeio