sglanzer

import { createClient, Operations } from '<package>/.wundergraph/generated/client'
import { createHooks } from './hooks'

const client = createClient()
const hooks = createHooks<Operations>(client)

export async function foo(): Promise<void> {
  const response = await hooks.query({
    operationName: '<operation>',
  })

sglanzer

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { task } from 'ember-concurrency'

export default class extends Component {
  
  @task * highlight() {
    document.querySelector(this.args.target)?.classList.add('highlight')
    yield new Promise((resolve) => setTimeout(resolve, 1))
    document.querySelector(this.args.target)?.classList.add('transition')

sglanzer

import Controller from '@ember/controller';
import { MyClass } from '../my-class'
import { action } from '@ember/object'

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

	myClass = new MyClass()
  clone = new MyClass(trackedSpread(this.myClass, { a: 'foo' }))

sglanzer

import Controller from '@ember/controller';

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

sglanzer

import Controller from '@ember/controller';

export default Controller.extend({
  
  get routeHeader () {
    return document.getElementById('route-header')
  }
  
});

sglanzer

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

class Foo {
  @tracked thing = false
}

class Bar {
  thing = false
}

sglanzer

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

sglanzer

import Ember from 'ember';

export default Ember.Component.extend({
  
  attributeBindings: ['role'],
  tagName: 'button'
  
});

sglanzer

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  bar: {
    name: 'cached'
  },
  
  proxy: Ember.computed('bar', function () {