# done-component

> A DoneJS plugin for creating s

Latest version **2.2.1** (published 2018-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install done-component
pnpm add done-component
yarn add done-component
bun add done-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2018-11-19 |
| First published | 2015-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 36.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bitovi |
| Maintainers | chasen, justinbmeyer, matthewp, phillipskevin |
| Keywords | StealJS, CanJS, DoneJS |

## Links

- npm: https://www.npmjs.com/package/done-component
- Repository: https://github.com/donejs/done-component
- Issues: https://github.com/donejs/done-component/issues
- npm.io page: https://npm.io/package/done-component

## Dependencies (4)

- [can-stache](https://npm.io/package/can-stache.md) ^4.0.0
- [can-component](https://npm.io/package/can-component.md) ^4.0.0
- [can-view-parser](https://npm.io/package/can-view-parser.md) ^4.0.0
- [steal-config-utils](https://npm.io/package/steal-config-utils.md) ^1.0.0

## Recent versions

- 2.2.1 (latest) — 2018-11-19
- 3.0.0-pre.0 (pre) — 2019-10-15
- 2.2.0 — 2018-10-12
- 2.1.0 — 2018-03-01
- 2.0.0 — 2018-02-22
- 2.0.0-pre.1 — 2018-01-02
- 1.0.1 — 2018-01-02
- 2.0.0-pre.0 — 2017-12-12
- 1.0.0 — 2017-03-16
- 0.6.0-pre.5 — 2017-01-10
- 0.6.0-pre.4 — 2017-01-09
- 0.6.0-pre.2 — 2016-08-29
- 0.6.0-pre.1 — 2016-05-23
- 0.6.0-pre.0 — 2016-05-23
- 0.5.0 — 2016-05-12
- … 11 more at https://npm.io/package/done-component/versions

## README

[![Build Status](https://travis-ci.org/donejs/done-component.svg?branch=master)](https://travis-ci.org/stealjs/done-component)
[![npm version](https://badge.fury.io/js/done-component.svg)](http://badge.fury.io/js/done-component)

# done-component

[![Greenkeeper badge](https://badges.greenkeeper.io/donejs/done-component.svg)](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
<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:

```mustache
<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.

```html
<can-component tag="foo-bar">

</can-component>
```

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

```js
<foo-bar></foo-bar>
```

### 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
<can-component tag="foo-bar" leak-scope>

</can-component>
```

Is equivalent to writing:

```js
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:

```html
<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:

```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

---
_Source: https://npm.io/package/done-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._