# ember-cli-dfinity

> An add-on for using the Internet Computer in your EmberJS app.

Latest version **1.3.0** (published 2024-04-07) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install ember-cli-dfinity
pnpm add ember-cli-dfinity
yarn add ember-cli-dfinity
bun add ember-cli-dfinity
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2024-04-07 |
| First published | 2023-01-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 14.* \|\| 16.* \|\| >= 18 |
| Dependencies | 9 |
| Unpacked size | 40.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | One Hill Technologies, LLC |
| Maintainers | onehilltech |
| Keywords | ember-addon, ember, internet computer, dfinity, dapps, frontend |

## Links

- npm: https://www.npmjs.com/package/ember-cli-dfinity
- Repository: https://github.com/onehilltech/ember-cli-dfinity
- Homepage: https://github.com/onehilltech/ember-cli-dfinity#readme
- Issues: https://github.com/onehilltech/ember-cli-dfinity/issues
- npm.io page: https://npm.io/package/ember-cli-dfinity

## Dependencies (9)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@dfinity/agent](https://npm.io/package/@dfinity/agent.md) ^1.2.0
- [@dfinity/candid](https://npm.io/package/@dfinity/candid.md) ^1.2.0
- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^7.26.11
- [ember-auto-import](https://npm.io/package/ember-auto-import.md) ^2.6.3
- [@dfinity/principal](https://npm.io/package/@dfinity/principal.md) ^1.2.0
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^6.2.0
- [@onehilltech/decorator](https://npm.io/package/@onehilltech/decorator.md) ^2.0.0
- [ember-cli-blueprint-helpers](https://npm.io/package/ember-cli-blueprint-helpers.md) ^0.4.8

## Recent versions

- 1.3.0 (latest) — 2024-04-07
- 1.2.1 — 2024-04-02
- 1.1.1 — 2023-05-11
- 1.0.1 — 2023-05-04
- 1.0.0 — 2023-03-22
- 0.6.0 — 2023-03-21
- 0.5.0 — 2023-03-21
- 0.4.1 — 2023-03-21
- 0.4.0 — 2023-03-21
- 0.3.2 — 2023-03-10
- 0.3.1 — 2023-01-29
- 0.3.0 — 2023-01-29
- 0.2.2 — 2023-01-29
- 0.2.1 — 2023-01-29

## README

# ember-cli-dfinity

An add-on for using the Internet Computer in your EmberJS app.

## Compatibility

* Ember.js v4.4 or above
* Ember CLI v4.4 or above
* Node.js v14 or above


## Installation

```
ember install ember-cli-dfinity
```

### On-chain Dapp

<<<<<<< HEAD
If you are building the app to run on the Internet Computer, then you must install
the [dfx-ember-webpack-plugin](https://github.com/onehilltech/dfx-ember-webpack-plugin)
Webpack plugin into the dfx project so it builds the EmberJS asset canister correctly.


Defining actors
------------------------------------------------------------------------------
=======
## Usage
>>>>>>> 8fa453e (v3.28.6...v4.12.2)

Actors are the primary artifacts (or components) exposed by a canister running
on the Internet Computer. The actor has an interface, which represents the publicly
accessible methods of the canister. When developing your own Dapp, you will have
a candid interface for the actor like the following:

```motoko
// hello.did

service : {
  greet: (text) -> (text);
}
```

We import this interface definition into the EmberJS application to leverage 
it using the following command: 

    ember g dfx:actor hello --declaration

> You must run this command from an EmberJS frontend application that is located
> in `$DFX_ROOT/src`. For example, `$DFX_ROOT/src/hello_frontend`. `$DFX_ROOT` is
> the root project directory of the Dapp, and has the `dfx.json` file.

This command will create a symbolic link to the JavaScript declaration in 
`$ROOT/app/declarations`, and then define the actor `hello` in `$ROOT/app/actors`
where `$ROOT` is the root directory of the EmberJS frontend application.

### Manually defining actors

There will be times you need to manually define an actor's interface. For example,
your frontend needs to reference a canister that is not local to your project. You
can use the `@query` and `@update` decorators to manually define an actor.

```JavaScript
import { Actor, query, update } from 'ember-cli-dfinity';

export default class HelloActor extends Actor {
  @query (['text'], ['text'])  // can also write @query('text, 'text')
  greet;
};
```

Using actors
------------------------------------------------------------------------------

You use defined actors by injecting them into EmberJS an entity (e.g., controller,
router, service, component, etc.) using the `@actor` decorator. For example, the 
code below shows how you can inject the `hello` actor into an EmberJS controller
and call the `greet` method.

```JavaScript
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { actor } from 'ember-cli-dfinity';

export default class IndexController extends Controller {
  @tracked
  name;

  @tracked
  greeting;

  // Bind the hello actor to the hello variable.
  @actor
  hello;

  @action
  async submit(ev) {
    // Prevent the default behavior for the submit button.
    ev.preventDefault();

    // Call the greet() method on the hello actor.
    this.greeting = await this.hello.greet(this.name);
  }
}
```

Configuring your application
------------------------------------------------------------------------------

The `config/environment.js` file is where you configure how the Dapp connects to the
Internet Computer. The configuration is auto-generated for you during the build
process. This allows the add-on to work out-of-the-box with little configuration 
effort on your part. You, however, have the option of overriding the default 
configurations via `config/environment.js`.

```javascript
// config/environment.js

module.exports = function (environment) {
  let ENV = {
    // ...

    dfx: {
      // Set the default canister name used for all actors. The name is either one of the
      // names that appears in canister_ids.json, or in the canisters definition below.
      
      defaultCanister: '',
      
      // Set the default canister id used for all actors. This property takes precedence
      // over defaultCanister when both are defined.
      
      defaultCanisterId: '',
      
      canisters: {
        // Optional. You can define caninsters not defined in canister_ids.json, or
        // override the existing canister ids here.
      },
        
      agents: {
        // An optional list of agents that can be used by the @actor decorator. The
        // add-on will automatically generate this agent list from the networks defined
        // in dfx.json. You can override any auto-generate agent here similar to how
        // we are overriding the agent for the `local` network.
        
        local: { 
          // Define other @dfinity/agent options here.
          host: 'http://127.0.0.1:8000', 
        }, 
      }, 
    }
  }; 
   
  // ...
}
```

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.


## License

This project is licensed under the [Apache-2.0](LICENSE.md).

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