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

tomdale

[
  ["open-element", "h1", []],
  ["text", "Hello World"],
  ["close-element"]
]

tomdale

resolve<U>(handle: number): U {
  return this.table[handle];
}

tomdale

import UserProfile from './src/ui/components/UserProfile/component';
/* ...other component imports */

export let table = [
  /* Component1  */,
  /* Component2  */,
  /* ...         */,
  /* Component41 */,
  UserProfile,
  /* Component43 */,

tomdale

Displaying a List of Items

If you need to enumerate over a list of objects, use Handlebar's {{#each}} helper:

<ul>
  {{#each people}}
    <li>Hello, {{name}}!</li>
  {{/each}}
</ul>

tomdale

// This is the API for constructing a Glimmer.js application with
// precompiled binary bytecode templates and using an async renderer
// (via requestAnimationFrame, requestIdleCallback, etc).

import Application, { DOMBuilder, AsyncRenderer, BytecodeLoader } from '@glimmer/application';

import data from './__compiled__/data';

let bytecode = fetch('./__compiled__/templates.gbx')
  .then(req => req.arrayBuffer());

tomdale

'use strict';

const GlimmerApp = require('@glimmer/application-pipeline').GlimmerApp;

class ModuleApp extends GlimmerApp {
  package(tree) {
    return tree;
  }
}