ferrugemjs / library Goto Github PK

Allow to pass a function as parameter to "refresh" method.
eg.

this.refresh( state => ({ inc : state.inc + 1 }) );

support to shouldComponentUpdate like react.

Actualy is not possible to change class name by a controller attibute.
And several css framework broken in this situaction eg.( .nav > .menu ) .
So its necessary a way to change the class name with a controller attribute
eg.

<template class="${'custom-class-css class_' + this.customClass}">
</template>

A emit concept to as a alternative to document.dispatchEvent(new CustomEvent('type:evt', { bubles:true, detail:{} })) with same thing like this :
this.emit('type:evt', {});

Gols to release 1.0:
-Issue #7 (resolved)
-Logo (resolved)
-A basic homepage with API, examples and tutorial (in progress).

support to representation functions/classes (without view) into template.
eg.

 export class DoCalc{
     value1:number;
     value2:number;
     result():number{
             return value1+value2;
     }
}

<require from="./do-calc" type="function">
<do-calc value1="1" value2="2"></do-calc>

Modify module lifecycle name according to customelements nomeclature:

https://developers.google.com/web/fundamentals/architecture/building-components/customelements

changing lifecycle names to:
connectedCallback to attached
disconnectedCallback to detached
shouldUpdateCallback to shouldRefresh or shouldUpdate
attributeChangedCallback to attributeChanged
refresh to update or refresh

Scenario

Currently any component props is passed as class instance attributes, thus there is no way to maintain private attributes protected.

Proposal:
Pass element props to constructor by parameters.
Eg.

<my-component a="123" b="321" />

export class MyComponent {
  constructor({a, b}){
     this.a = a;
     this.c = a + b;
  }
}

or

export function({a, b}) {
     this.a = a;
     this.c = a + b;
}

when refresh event all children is deateched and new ones is put there instead preserved.

support to tag style in template file.

<template args="$controller">
   <style>
       .my-style{
             color:red;
             ....
        }
    </style>
    ....
</template>

Scenario

Currently, the component instance needs to send an update to the render component, with refresh method, to warn it about changes in the state.

Proposal:
Use of proxy approach to avoid this coupling.

Eg. currently code

exampleMethod(){
   this.refresh({a:"A"});// this will warn component render about instance change 
} 

Eg. Proposal

exampleMethod(){
   this.a = "A"; // this will warn component render about instance change 
} 

Add support to promise as parameter of refresh method
eg.

incrementeWithPromise(){
   let prom1 = new Promise(success => {
	setTimeout( _ => {
		success({inc:this.inc + 1000})
	},4000);
   });
  this
	.refresh(prom1)
	.then( rs => console.log(rs));
}

Add a refresh tag.
eg.

  <refresh if="any-condition" prop1="teste" prop2="123" prop3="${this.name}"/>

equivalent to:

<script>
 if(any-condition){
   this.refresh({
    prop1:"teste",
    prop2:"123",
    prop3:this.name
   });
 }
</script>

exemplo:

my-comp.html

<template>
    <span>   <content></content>   </span>
</template>

usando

<my-comp>test</my-comp>

ele não mostra o texto como especificado na documentação.

We need a component with same behavior of React Fragment.

Motivation:
To simplify the user when need to load other ui library. ex:

<ui:progress-bar></ui:progress-bar>

proposal:

<require from="vendor-ui as ui" type="namespace"></require> 

a better way to resolve template attributes
now:

<template class="static or expression">

proposal:

<template>
 <div class="static or expression" data-others-attr="123">
 </div>
</template>

result:

<div is="custom-comp" class="resolved"></div>

Improve detection and log of errors when in:

1. event.trigger, event.delegate events of basic html components.
2. events of custom components.

Support basic transition effects.

Add creation of component with object as class or function
Eg.

export default {
	"desc":"default desc"
	,teste(){
		this.desc = "changed desc";
		this.refresh();
	}
	,connectedCallback(){
		this.desc = "changed by connected!";
	}
}

change attribute no-view-model="true" to simple no-model
eg.

<template no-view-model="true">
...

to

<template no-model>
...

Actually we can do it with below code:
eg.

<input disabled="${(3 > 2 ? 'disable': null )}"/>

suggestion:

<input disabled.if="3 > 2"/>

proposal:

<template view-model="false">
  <h1>Only a template!</h1>
</template>

motivation:
To use template which proposity is more simple for example with init-app.html or when there is only a compose of several others custom tags

eg.

<template view-model="false">
   <compose view="./header-system">
   <compose view="./body-system">
   <compose view="./footer-system">
</template>

other eg.

<template view-model="false">
   <h1>Simple Banner</h1>
    <img src="assets/img/logo.png">
</template>

support content:

   <template>
    .....
        <content></content> //the place of the content
    .....
  </template>

possibility to set/change the viewmodel of a template.
eg.

<template view-model="./other-model-view">
 <h1>Hey</h1>
</template>

removal of @this os script tag as a scope reference.

Add custom directive support with namespace.
eg.

<require from="custom-directive-color2hex as d"  type="directive"/>
...
<span  d:color="red"></span>

result

<span>#ff0000</span>

Using brackets "{", rise console erro.
eg.

<span> ${ this.setAnyThing({ a: 123, b: 32145 })  }  </span>

A way to call js functions into template
Motivation:
Call others functions like jq('.datapicker') or jq('.modal').modal .... from template after a event.
Proposal:

<command
  on-ateached
  on-leave-home.subscribe
  on-open-dor.once
>
    jq('.long.modal').modal('show');
</command>

Wold be equivalent to:

this.onAteached($param => jq('.long.modal').modal('show') );
this.onLeaveHome.subscribe($param => jq('.long.modal').modal('show') );
this.onOpenDor.once($param => jq('.long.modal').modal('show') );

Basic support to composition.
sintaxe:

<compose controller="teste/teste" view="teste/other-file"></compose>