done-component

A StealJS plugin for CanJS components. done-component allows you to easily define your component completely from a single .component file:

Install

npm install done-component --save

Usage

Define a can.Component in a separate file:

hello.component

<can-component tag="hello-world">
    <style type="text/less">
        i {
            color: red;
        }
    </style>
    <template>
        {{#if visible}}<b>{{message}}</b>{{else}}<i>Click me</i>{{/if}}
    </template>
    <script type="view-model">
        export default {
            visible: true,
            message: "Hello There!"
        };
    </script>
    <script type="events">
        export default {
            click: function(){
                this.viewModel.attr("visible", !this.viewModel.attr("visible"))
            }
        };
    </script>
</can-component>

main.stache

In your template simply import your component and you can start using it:

<can-import from="hello-world.component!"/>
 
<hello-world></hello-world>

API

tag

The tag name is specified on the can-component element. This corresponds to tag when defining a Component in JavaScript.

<can-component tag="foo-bar">
 
</can-component>

This defines a custom element "foo-bar" when you can use in your templates:

<foo-bar></foo-bar>

leak-scope

The leak-scope attribute is equivalent to setting leakScope: true using can-component directly.

<can-component tag="foo-bar" leak-scope>
 
</can-component>

Is equivalent to writing:

Component.extend({
    tag: "foo-bar",
    leakScope: true
});

style

The <style> tag lets you include CSS specific to your component. By default it will use the CSS plugin but you can use preprocessors by specifying:

type

The style type lets you use an alternative to CSS such as Less:

<style type="text/less">
  span {
    color: red
  }
</style> 

Not that when using Less your style is automatically wrapped with the Component's tag name, so that it is scoped to only your component.

template

The <template> tag is where you put your Stache template.

view-model

The <view-model> or <script type="view-model"> is where you put your viewModel. You can use either method, but the <script> method is more compatible with your editor.

events

The <events> or <script type="events"> is where you put your events object.

helpers

The <helpers> or <script type="helpers"> is where you put Stache helpers.

from

Each of the subtags (style, template, view-model, events, and helpers) can optionally take a from= attribute that allows you to define that in a separate module. It's useful if one part is longer and you want to separate that out into it's own file:

<can-component tag="foo">
  <view-model from="foo/view_model"/>
</can-component>

Exported Object

Your .component will export an object that contains properties for Component which is the can.Component constructor, ViewModel which is a can.Map of your exported ViewModel. This is useful for when testing:

var QUnit = require("steal-qunit");
var HelloVM = require("hello-world.component!").ViewModel;
 
QUnit.test("view model works", function(){
  var map = new HelloVM();
  ...
});
 

License

MIT