https://github.com/donejs/done-component
A plugin for creating <can-component>s
https://github.com/donejs/done-component
Last synced: about 1 month ago
JSON representation
A plugin for creating <can-component>s
- Host: GitHub
- URL: https://github.com/donejs/done-component
- Owner: donejs
- License: mit
- Created: 2015-05-21T15:54:41.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-05-23T12:03:45.000Z (about 5 years ago)
- Last Synced: 2025-04-12T04:33:50.453Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/done-component
- Size: 127 KB
- Stars: 8
- Watchers: 22
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
README
[](https://travis-ci.org/stealjs/done-component)
[](http://badge.fury.io/js/done-component)
# done-component
[](https://greenkeeper.io/)
A [StealJS](http://stealjs.com/) plugin for [CanJS](http://canjs.com/) 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
```mustache
i {
color: red;
}
{{#if visible}}{{message}}{{else}}Click me{{/if}}
export default {
visible: true,
message: "Hello There!"
};
export default {
click: function(){
this.viewModel.attr("visible", !this.viewModel.attr("visible"))
}
};
```
### main.stache
In your template simply import your component and you can start using it:
```mustache
```
## API
### tag
The tag name is specified on the `can-component` element. This corresponds to `tag` when defining a Component in JavaScript.
```html
```
This defines a custom element "foo-bar" when you can use in your templates:
```js
```
### leak-scope
The **leak-scope** attribute is equivalent to setting `leakScope: true` using [can-component](http://canjs.github.io/canjs/doc/can-component.html) directly.
```html
```
Is equivalent to writing:
```js
Component.extend({
tag: "foo-bar",
leakScope: true
});
```
### style
The `` 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:
```html
<style type="text/less">
span {
color: red
}
```
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 `` tag is where you put your Stache template.
### view-model
The `` or `` 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:
```html
<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:
```js
var QUnit = require("steal-qunit");
var HelloVM = require("hello-world.component!").ViewModel;
QUnit.test("view model works", function(){
var map = new HelloVM();
...
});
```
## License
MIT