See: https://elements.polymer-project.org/elements/iron-image

Implement some kind of template engine (eg. Handlebars)

e.g.

data-action="Controller.click" -> data-click="click"

Need later for events/bindings/...

^^

tbd

Implementation and abstraction of the native Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

• Components Decorator
• Components Templates ( #24 )
• Actions (#29)
• Observable Properties
• Computed Properties

If you select a child of your component with native .querySelector and it doesn't exist, but you still "work" with it - you receive an error without explanation "what really happened" and only can find the real cause of that issue with luck - or debugging into the mojito source.

this._innerZone = this._outerZone.fork({
        name: 'mojito',
        properties: {'isMojitoZone': true},
        onInvokeTask: function(delegate, current, target, task, applyThis, applyArgs) {
          try {
            _this._onEnter();
            return delegate.invokeTask(target, task, applyThis, applyArgs);
          } finally {
            _this._onLeave();
          }
        },
        onInvoke: function(delegate, current, target, callback, applyThis, applyArgs, source) {
          try {
            _this._onEnter();
            return delegate.invoke(target, callback, applyThis, applyArgs, source);
          } finally {
            _this._onLeave();
          }
        },
        onHasTask: function(delegate, current, target, hasTaskState) {
          delegate.hasTask(target, hasTaskState);
          if (current == target) {
            if (hasTaskState.change == 'microTask') {
              _this._setMicrotask(hasTaskState.microTask);
            } else if (hasTaskState.change == 'macroTask') {
              _this._setMacrotask(hasTaskState.macroTask);
            }
          }
        },
        onHandleError: function(delegate, current, target, error) {
          delegate.handleError(target, error);
          _this._onError(error); // here the error is reported.
          return false;
        }
      });

Idea:
It should be possible to render html which is defined in the dom or parent document into specific slots in your child component (like multiple outlets in ember).
You can define templates with a slot id inside the html of your component. In your template of the component you can not mark the places where the outer template should be rendered.

<my-component>
    <template slot="content">
        some content
    </template>
</my-component>

@Component({
    selector: 'my-component',
    template: `
        <div>
            <slot ref="content"></slot>
        </div>
    `
})
class MyComponent {}

renderes into:

<my-component>
    <div>
        some content
    </div>
</my-component>

The context inside the template tag has to be discussed. Is it the context of my-component or the parent component.

Slots should be the default behaviour of component templates. Slots/Templates should also be used internally for rendering the components template into the dom.

<my-component></my-component>

@Component({
    selector: 'my-component',
    template: `
        <div>
            some content
        </div>
    `
})
class MyComponent {}

The code above is the same as:

<my-component><slot ref="_body_"></slot></my-component>

@Component({
    selector: 'my-component',
    template: `
        <div>
            some content
        </div>
    `
})
class MyComponent {}

This will give us a powerful functionality for rendering html into different parts of your template

provide functionality for multiple actions on elements

Esp. when used with ES6/Browserify, having it available on NPM as client side dependency should be a must ;-)

Implement generic reusable infinite scroller component
https://developers.google.com/web/updates/2016/07/infinite-scroller

output everything, even if its false

pullapprove.com

• fully support nested/chained keys
• support arrays (needs custom array methods)

For now we are stuck with TypeScript <2.1.
Typescipt in the newer version doesn't return the @Annotation line in the JsDoc comments, so tsickle won't recognize it for custom compilation of decorators.

Related
angular/tsickle#313
angular/tsickle#315
microsoft/TypeScript#7393

^^

rename applyInputBindingsToController to applyInputBindings

rename applyContentBindingsToController to applyContentBindings

only update the content which has changed, don't replace the whole stuff

make own method

tbd

http://jsonapi.org/

Using the data-parameter on a controller binded element like:

data-params='{
    map_headline:locationfinder,
    map_choose_headline_continent:Continent,
    map_choose_headline_country:Country,
    map_choose_headline_category:Category,
    map_choose_headline_brand:Brand,
    map_choose_continent:Choose Continent,
    map_choose_country:Choose Country,
    map_choose_category:Choose Category,
    map_choose_brand:Choose Brand,
    map_category_headquarter:Headquarter,
    map_category_daughter:Daughter,
    map_category_regionalOffice:Regional Office,
    map_category_salesLocation:Saleslocation,
    map_category_production:Production,
    map_modal_to_website:To Website,
    map_modal_email:E-Mail,
    map_modal_phone:Phone
    }'

this, causes Mojito too throw an error like:

Uncaught Please call super(args), in your Controller!
Controller @ controller.js:37
MapController @ MapController.js:8
registerController @ core.js:675
.../../bower_components/mojito/lib/main @ mojitoSetup.js:15s
...

but using it without \n and \r the whole thing works just fine:

data-params='{map_headline:locationfinder,map_choose_headline_continent:Continent,map_choose_headline_country:Country,map_choose_headline_category:Category,map_choose_headline_brand:Brand,map_choose_continent:Choose Continent,map_choose_country:Choose Country,map_choose_category:Choose Category,map_choose_brand:Choose Brand,map_category_headquarter:Headquarter,map_category_daughter:Daughter,map_category_regionalOffice:Regional Office,map_category_salesLocation:Saleslocation,map_category_production:Production,map_modal_to_website:To Website,map_modal_email:E-Mail,map_modal_phone:Phone}'

^^

Build Service for GDI

rename applyClassBindingsToController to applyClassBindings

https://developer.yahoo.com/cocktails/mojito/

^^

rename applyActionsToController to applyActions

Implement simpler version of Angulars Dependency Injection.
Usefull links:

• Guide Dependency Injection
• Hierarchical Dependency Injection
  
• Angular source
• Implement Injector/Provider mechanism
• Implement Injectable decorator
• Implement Inject decorator
• Test them all

^^

^^