I’m trying to do something similar, so I want to be able to use it as a plugin, but is that even possible? I tried googling using emberJS addons, but it seems like an addon is kind of like a starting template to which that you want to put in additional functionality, no a plugin that you can use to enhance an already existing project.
I think of addons as a series of conventions and hooks to allow your code to integrate with other projects via ember cli.
You can do almost anything you want with add ons. There are various hooks that let you do different types of work within different parts of the ember cli process.
This will generate a project that looks very similar to an ember cli project but has some conventions for addon development.
Also you can create “in-repo” addons which is just code that lives within a lib folder to you are ember cli project. So you don’t have to worry about publishing if you are experimenting with developing an addon idea custom to your project.
I saw a lot of stuff online about how to create an addon, but what I really want to do is be able to use the ember-sortable addon as a plugin (like a bower component).
So I pretty much want to do something like this:
{{#sortable-group tagName="ul" onChange="reorderItems" as |group|}}
{{#each model.items as |item|}}
{{#sortable-item tagName="li" model=item group=group handle=".handle"}}
{{item.name}}
<span class="handle">↕</span>
{{/sortable-item}}
{{/each}}
{{/sortable-group}}
Addon defines an implementation like a component inside the addon folder of the addon project
// addon/components/my-button.js
import Ember from 'ember';
import layout from '../templates/components/my-button';
export default Ember.Component.extend({
layout: layout
// implementation details ...
});
Then the component is imported and re exported in the normal path where the component would live. So inside the addon project you might see something like this
// app/components/my-button.js
import myButton from 'my-addon-project/components/my-button';
export default myButton;
That means that when you use or install the addon inside your own ember cli project it is as if that component were created inside your project. So you can directly use or extend my-button component component.
So to answer your question about sortable. Yes, I think you could do what you want to do. You could define a component that imports and extends the sortable component.
So in theory that should work. Hope this makes sense.