How to use @glimmer/component - 10 common examples

export default function(_args, vm) {
    // console.log(`in action`);
    let componentRef = vm.getSelf();
    // console.log(`componentRef: ${componentRef}`);
    let args = _args.capture();

    let actionFunc = args.positional.at(0).value() as Function;
    // console.log(actionFunc);
    // if (typeof actionFunc !== 'function') {
    //   throwNoActionError(actionFunc, args.positional.at(0));
    // }

    return new UpdatableReference(function action(...invokedArgs) {
        //   console.log(`in updatable reference`);
        let curriedArgs = args.positional.value();
        //   console.log(`in updatable reference: ${curriedArgs}`);
        // Consume the action function that was already captured above.
        curriedArgs.shift();

        curriedArgs.push(...invokedArgs);

        // Invoke the function with the component as the context, the curried
        // arguments passed to `{{action}}`, and the arguments the bound function
        // was invoked with.
        actionFunc.apply(componentRef && componentRef.value(), curriedArgs);
    });
}

export default function (_args, vm) {
    // console.log(`in action`);
    let componentRef = vm.getSelf();
    // console.log(`componentRef: ${componentRef}`);
    let args = _args.capture();
    let actionFunc = args.positional.at(0).value();
    // console.log(actionFunc);
    // if (typeof actionFunc !== 'function') {
    //   throwNoActionError(actionFunc, args.positional.at(0));
    // }
    return new UpdatableReference(function action(...invokedArgs) {
        //   console.log(`in updatable reference`);
        let curriedArgs = args.positional.value();
        //   console.log(`in updatable reference: ${curriedArgs}`);
        // Consume the action function that was already captured above.
        curriedArgs.shift();
        curriedArgs.push(...invokedArgs);
        // Invoke the function with the component as the context, the curried
        // arguments passed to `{{action}}`, and the arguments the bound function
        // was invoked with.
        actionFunc.apply(componentRef && componentRef.value(), curriedArgs);
    });
}

function markAsDirty(ctx, prop) {
  tagForProperty(ctx,  prop).inner.dirty();
}

import { RootReference } from '@glimmer/component';
import { CONSTANT_TAG } from '@glimmer/reference';
const EMPTY_SELF = new RootReference(null);
const NOOP_DESTROYABLE = { destroy() { } };
const DESTROYING = Symbol('destroying');
const DESTROYED = Symbol('destroyed');
export class Bounds {
    constructor(__bounds) {
        this._bounds = __bounds;
    }
    get firstNode() {
        return this._bounds.firstNode();
    }
    get lastNode() {
        return this._bounds.lastNode();
    }
}
export class ComponentStateBucket {
    constructor(definition, args) {

getSelf(bucket) {
        if (bucket) {
            return new RootReference(bucket.component);
        }
        return EMPTY_SELF;
    }
    didCreateElement() { }

getSelf(bucket: ComponentStateBucket): PathReference {
        if (bucket) {
            return new RootReference(bucket.component) as any;
        }
        return EMPTY_SELF as any;
    }
    didCreateElement() {}

import { ComponentDefinition, RootReference } from '@glimmer/component';
import { DefinitionState } from '@glimmer/component/dist/types/src/component-definition';
import { AotRuntimeResolver, ComponentManager as VMComponentManager, Invocation } from '@glimmer/interfaces';
import { CONSTANT_TAG, PathReference, Tag } from '@glimmer/reference';

const EMPTY_SELF = new RootReference(null);
const NOOP_DESTROYABLE = { destroy() {} };
export const DESTROYING = Symbol('destroying');
export const DESTROYED = Symbol('destroyed');

export class Bounds {
    private _bounds: any;
    constructor(__bounds: any) {
        this._bounds = __bounds;
    }

    get firstNode(): Node {
        return this._bounds.firstNode() as Node;
    }

    get lastNode(): Node {
        return this._bounds.lastNode() as Node;

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

export const ANGLE: number = 30;

export default class SynthVolume extends Component {
  public ticks: number[] = [...Array(11).keys()];

  @tracked('args')
  public get angle(): number {
    const max = ANGLE * (this.ticks.length - 1);
    return Math.min(this.args.volume * ANGLE, max);
  }
}