ferrugemjs / library Goto Github PK

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

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

support to tag style in template file.

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

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') );

support content:

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

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> 

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

support to shouldComponentUpdate like react.

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

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>

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>

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

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

Modify module lifecycle name according to customelements nomeclature:

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

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

Improve detection and log of errors when in:

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

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

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

to

<template no-model>
...

We need a component with same behavior of React Fragment.

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.

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', {});

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

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

Actually we can do it with below code:
eg.

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

suggestion:

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

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 
} 

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>

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;
}

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>

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!";
	}
}

Basic support to composition.
sintaxe:

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

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));
}

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>

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>

Support basic transition effects.