robwormald

const helloWorld = (props) => ngHtml`<h1>Hello ${props.name}</h1>`

const TodoItemTemplate = props => ngHtml`<li>${props.$index} - ${props.name}</li>`

function TodoAppComponent(){
  const todoService = inject(TodoService);
  
  return ngHtml`
     <h3>Todos</h3>
     <ul>${ngRepeat(todoService.todos, TodoItemTemplate)}</ul>`

robwormald

customElements.define('app-shell', class extends HTMLElement {
  constructor(){
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <h1>App</h1>
      <slot></slot>
    `
  }
});

robwormald

import node from 'rollup-plugin-node-resolve'
import buildOptimizer from '@angular-devkit/build-optimizer/src/build-optimizer/rollup-plugin'
import terser from 'rollup-plugin-terser'

export default {
	input: {
		app: './lib/app.js'
	},
	output: {
		dir: 'public'

robwormald

Thinking about tagged template literals and HTML templating.

(Disclaimer: I work on the Angular team, but this isn't something the Angular team is considering (yet). This is simply me capturing some thoughts...)

ES2015 added Template Literals to JavaScript (Template Literals is the current term, they were known as "Template Strings" in the first edition)

They're useful for all kinds of things, the most obvious of which is interpolating values in a much more concise way than concatting strings together:

robwormald

@Component({
  selector: 'wt-greeting',
  template: (ctx: WtGreeting) => ngHtml`<h1>Hello ${uppercase(ctx.name)}</h1>`
})
class WtGreeting {
  @Input() name: string;
}


@Component({

robwormald

function toResponseActions(successSelector, errorSelector){
  return (requests$) => requests$.pipe(
    catchError(err, => errorSelector(err)),
    map(res => successSelector(res))
  )
}

const buttonClicks = fromEvent('button', 'click');

const requests = buttonClicks.pipe(switchMap(() => http.get('foo.json')));

robwormald

/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
	typeof define === 'function' && define.amd ? define(factory) :

robwormald

//existing proposal

@Component({
  selector: 'foo'
})
export class MyComponent {
  render(){}
}

//new proposal

robwormald

@Component({
  selector: 'app-device-detail',
  templateUrl: './device-detail.component.html',
  styleUrls: ['./device-detail.component.css']
})
export class DeviceDetailComponent {
  constructor(private route: ActivatedRoute, private deviceService: DeviceService) { }
  device$ = this.route.params.pipe(this.deviceService.toDevice);
  deviceState$ = this.device$.pipe(this.deviceService.toDeviceState);

robwormald

export class DeviceDetailComponent {
  constructor(private route: ActivatedRoute, private deviceService: DeviceService) { }
  device$ = this.route.params.pipe(this.deviceService.toDevice);
  deviceState$ = this.device$.pipe(this.deviceService.toDeviceState);
  deviceMeasurements$ = this.device$.pipe(this.deviceService.toMeasurements);
  trackMeasurement = (id, rec) => (`${rec.timestamp.seconds}${rec.timestamp.nanoseconds}`);
}