done-component

    2.2.1 • Public • Published

    Build Status npm version

    done-component

    Greenkeeper badge

    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

    Install

    npm i done-component

    DownloadsWeekly Downloads

    160

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    38.2 MB

    Total Files

    3062

    Last publish

    Collaborators

    • chasen
    • justinbmeyer
    • matthewp
    • mjstahl
    • phillipskevin