The Template Pipeline Continued...

Matias & Alex

Styling in the template pipeline

  • [style.prop]
  • [style]
  • [class.name]
  • [class]

How are the instructions generated?


<div
  [style.width]="myWidth"
  [class.active]=
     "myActiveClass"
  [style]="myStyles"
  [class]="myClasses">
  ...
</div>
if (rf & 1) {
  element(0, 'div');
}
if (rf & 2) {
  styleProp('width',
            ctx.myWidth);
  classProp('active',
            ctx.myActiveClass);
  styleMap(ctx.myStyles);
  classMap(ctx.myClasses);
}
  • Template is parsed into an AST
  • Properties are extracted from the AST
  • Properties are upgraded into style and class bindings

What is going on here?


<div
  [style.width]="myWidth"
  [class.active]=
     "myActiveClass"
  [style]="myStyles"
  [class]="myClasses">
  ...
</div>

// create
ElementNode,  // <div>

// update  
PropertyNode, // style.width
PropertyNode, // class.active
PropertyNode, // style
PropertyName  // class

// [style.width]
property = {
  kind: NodeKind.Property,
  name: 'style.width',
  expression: o.Expression,
}
  • Nodes are useless on their own
  • They need to be converted into ivy instructions
  • Nodes are passed into emitters

Nodes => Ivy Instructions

interface CreateEmitter {    
  emit(node: CreateNode):
    o.Statement|null;
}

interface UpdateEmitter {
  emit(node: UpdateNode):
    o.Statement|null;
}
  • [style], [style.prop], [class] and [class.name] are tread as properties
  • How do we get the pipeline to special case them for styling?

But these are just properties


// [style.width]
property = {
  kind: NodeKind.Property,
  name: 'style.width',
  expression: o.Expression,
}

// [style.width]
property = {
  kind: NodeKind.StyleProp,
  name: 'width',
  expression: o.Expression,
}
  • Stages modify the set of nodes in the update list into different nodes
  • StyleBindingStage
  • ClassBindingStage

Style and Class
Property Stages

export class StyleTransform
  implements Transform {
    
  visit(node: Node, list: List): Node {
    // [style] or [style.prop]
    if (node.kind === NodeKind.Property
        && isStyleProp(node.name)) { 
      node = updateToStyleBinding(node);
    }
    
    return node;
  }
}
function updateToStyleBinding(
  node: PropertyNode) {
    
  if (node.name === 'style') {
    return {...} as StyleMap;
  } else {
    return {...} as StyleProp;
  }
}

property = {
  kind: NodeKind.StyleProp,
  name: 'propName', // width
  expression: o.Expression,
}

property = {
  kind: NodeKind.StyleMap,
  expression: o.Expression,
}
property = {
  kind: NodeKind.ClassProp,
  name: 'className', // activeClass
  expression: o.Expression,
}

property = {
  kind: NodeKind.ClassMap,
  expression: o.Expression,
}

Our Pair Programming Process

Tuesday

  • We always code
  • Pairing together over GVC
  • VSCode + LiveShare
  • Planning and pseudocode'ing
  • High-level discussions over API and usecases

Thursday

TL: Jan

  • Initial discussions
  • High-level talk of data-structures
  • Whiteboarding
  • Element creation and prototyping
  • Plans to get pieces of template.ts into the pipeline

TL: Feb

Positives

  • Great feedback
  • API iteration
  • Simple code structures
  • Knowledge share
  • Difficult to land things into angular/angular in an intermediate state

Negatives

  • Fun experience working on the compiler and spending time designing
  • Pleasure to work with Alex :)

Feedback from Matias

Thank you!

Made with Slides.com