New custom-elements transform

[manucorporat]

GOAL

• Remove need for proxyInput()
• Remove low-level metadata generation
• Human friendlier output

Emit getter and setters

@Prop() car;

becomes:

get car() {
 return getValue(this, 'car');
}
set car(value) {
 setValue(this, 'car', value);
}

Optional, we could inline the call to the watchers inlined in the setter

Emit observedAttributes static getter

@Prop()str:string;
@Prop() nu: number;

becomes:

static get observedAttributes() {
 return ['str', 'nu'];

Inject super call in connectedCallback and disconnectedCallback

connectedCallback() {
  console.log('hola');
}

becomes:

connectedCallback() {
  super.connectedCallback();
 console.log('hola');
}

Reflected properties??

@Prop({reflect: true}) prop: string;

• We could add this metadata as a aux static getter (like watchers)
• We could transform the render function to render reflected props
• We could deprecate reflect

Emit attributeChangedCallback()

• A custom attributeChangedCallback needs to be emitted to map the attributes with the properties

Metadata for listeners?

• Listeners could be created/removed directly in the generated connectedCallback/disconnectedCallback

Metadata for members

• Could be passed down in setValue

Example

@Component({
tagName: 'my-cmp',
styleUrl: './style.css'
})
export class MyCmp {
  @Element() el: HTMLElement;
  @Prop() prop:  string;
  @Prop({reflect: true}) reflected: number;
  @Event() myEvent;

  @Listen('click')
  onClick() {
    console.log('click');
  }

  connectedCallback() {
    console.log('hello');
  }

  @Watch('prop')
  propDidChange(newValue, oldValue) {
     console.log(newValue, oldValue);
  }

  render() {
    return (
      <Host><p>{this.prop}</p>
   )
 }

becomes:

export class MyCmp extends HTMLElement {
  constructor() {
  super();
    __stencil_registerHost(this);
    this.myEvent = __stencil_createEvent('myEvent', 2);
  }
  get el() {
    return this;
  }
  get prop() {
    return __stencil_getValue(this, 'prop');
  }
  set prop(value) {
    const oldValue = __stencil_setValue(this, 'prop', value, 1 /*string*/);
    if (oldValue) {
      this.propDidChange(value, oldValue);
    }
  } 
  get reflected() {
    return __stencil_getValue(this, 'reflected');
  }
  set reflected(value) {
    __stencil_setValue(this, 'reflected', value, 2 /*number*/);
  } 

  onClick() {
    console.log('click');
  }

  connectedCallback() {
   __stencil_connectedCallback(this);
    registerEvents(this, [['click', 'onClick', 0]]);
    console.log('hello');
  }

  disconnectedCallback() {
   __stencil_disconnectedCallback(this);
  }

  propDidChange(newValue, oldValue) {
     console.log(newValue, oldValue);
  }

  render() {
    return (
      <Host reflected={this.reflected}><p>{this.prop}</p>
   )
 }

[romulocintra]

My concerns are :

• “Inject super call in connectedCallback and disconnectedCallback” this won”t affect current stencil lifecycle ?

• “ observedAttributes” and attrChangesCallback will affect the initial value of newValue being undefined on initial render? i don’t remember actual behaviour in stencil probably is not relevant.

[eriklharper]

Will this proposal eliminate the console warnings when trying to declare a reserved word attribute/property name like title?