chriskrycho

Memory Allocation Profiling for Ember + TS Builds

To get the info we need, you'll be building the app two different ways: the normal way you would with ember-cli-typescript installed, and then with it removed, doing a transpile-only (no type checking) build with Babel.

For the Babel-only build:

• Remove ember-cli-typescript from your package.json and reinstall your dependencies.
• Update your ember-cli-build.js following the instructions here.

Then run this test procedure for each of those:

chriskrycho

import Controller from '@ember/controller';
import { inject } from '@ember/service';

export default class ApplicationController extends Controller {
  @inject router;
  
  get currentRoute() {
    return this.router.currentRouteName;
  }
}

chriskrycho

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

function getAndClearFieldNamed(name, elements) {
  const field = elements.namedItem(name);
  if (!field) {
    throw 'wat';
  }

  const value = field.value;

chriskrycho

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @action submit(event) {
    event.preventDefault();
    const name = event.target.elements.namedItem('name').value;
		alert(`Your name is ${name}`);
    // do `fetch()` or something here!
  }

chriskrycho

{{#if this.hasBadge}}
	<p>Count is: {{this.totalBadgeCount}}</p>
{{/if}}

chriskrycho

<label style={{if @isFocused "background: green; color: white;"}}>
	{{@name}}
	<input id={{@name}} {{on "focus" @onFocusIn}}>
</label>

chriskrycho

<button {{on "click" this.innerClick}} ...attributes>click it</button>

chriskrycho

{{yield}}

chriskrycho

<button {{on "click" this.tryToSetAnArg}}>
  Try to set an arg
</button>

chriskrycho

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}