tomdale

import Component, { tracked, action } from '@glimmer/component';

export default class extends Component {
  @tracked count = 0;

  @action increment() {
    this.count++;
  }
}

tomdale

{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore":"none"
}

tomdale

import Component, { gbs } from '@glimmer/component';

export default class extends Component {
  static template = gbs`
    <h1>Hello {{this.world}}</h1>
  `
}

tomdale

Forwarding Named Blocks in Glimmer

Use Case

A component that "forwards" passed blocks to a child component. For example, imagine we have a component called MiniCard that accepts a named block called header. It is invoked like this:

<MiniCard>
  <:header>
 My Card

tomdale

Component Lifecycle Hooks Survey

Most Ember developers are familiar with component lifecycle hooks, like didInsertElement, willDestroy, etc.

As we think about future APIs for Glimmer components that improve on lifecycle hooks, we want to make sure that we're providing abstractions that are simple, performant, and ergonomic, while nudging users towards good patterns and away from potential footguns.

tomdale

import Timer from 'simple-timer';
import Component from '@glimmer/component';
import {  } from '@glimmer/tracking';

export default class TimerComponent extends Component {
  constructor() {
    // Mark the timer as "untracked" (i.e., we're asserting
    // that timer contains no interior tracked properties at all).
    // This function gives us back the timer as well as a callback
    // function to call when any interior mutation may have occurred.

tomdale

import Ember from 'ember';

export default Ember.Component.extend({
  componentName: "inner-component",
  actions:  {
  	handleComponentChange() {
    	this.set('componentName', "second-component");
    }
  }
});

tomdale

/* Fixed Opcode  */  /*   Operand?   */  /*   Operand?   */  /*   Operand?    */
[0bIIIIIIIILLRRRRRR, 0bAAAAAAAAAAAAAAAA, 0bAAAAAAAAAAAAAAAA, 0bAAAAAAAAAAAAAAAA]

/*
  I = instruction (opcode) type
  L = operand length
  R = reserved
  A = operand value
*/

tomdale

APPEND_OPCODES.add(Op.OpenElement, (vm, { op1: tag }) => {
  vm.elements().openElement(vm.constants.getString(tag));
});

tomdale

const Program = [25, 1, 0, 0, 22, 2, 0, 0, 32, 0, 0, 0];