locks

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  app = {hello: 'Ember Twiddle'};
}

locks

0 verbose cli [
0 verbose cli   '/Users/ricardo/.volta/tools/image/node/14.18.1/bin/node',
0 verbose cli   '/Users/ricardo/.volta/tools/image/npm/7.15.1/bin/npm-cli.js',
0 verbose cli   'install',
0 verbose cli   '--loglevel error'
0 verbose cli ]
1 info using npm@7.15.1
2 info using node@v14.18.1
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 2ms

locks

import Component from '@glimmer/component';

export default class extends Component {
}

locks

import Controller from '@ember/controller';
import data from "../utils/some-data";

export default class ApplicationController extends Controller {
  appName = data.name;
}

locks

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { later } from '@ember/runloop';

export default class extends Component {
  @tracked startTime = 5;
  @tracked isCounting = false;

  @action

locks

import Component from '@glimmer/component';

export default class extends Component {
}

locks

import Controller from '@ember/controller';

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

locks

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
  "foo-bar" = "foo hyphen bar"
}

locks

Converting partials to template-only components

Why partials?

For quite some time, partials were a popular way to share a chunk of HTML as all the developer had to do was to extract the HTML into a file, and then call {{partial}} where they want it to be included. No need to fuss about with passing arguments and callbacks.

However, this very fact also makes partials a liability for your codebase. The more you use partials, especially if nested, the harder it is to inspect your templates and data-flow just by reading your templates. Changes are hard to make because you are never sure if a property might be used somewhere in the partial.

locks

import Component from '@glimmer/component';

export default class extends Component {
}