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);
    });
}

async renderToString(): Promise<string> {
    let { env } = this;

    let builder = this.builder.getBuilder(env);
    let dynamicScope = new DynamicScope();
    let templateIterator: TemplateIterator;
    let self = new UpdatableReference({
      roots: [{id: 1, component: 'Breethe', parent: this.element, nextSibling: null}]
    });

    try {
      templateIterator = await this.loader.getTemplateIterator(this, env, builder, dynamicScope as any, self);
    } catch (err) {
      this._didError(err);
      throw err;
    }

    try {
      this.boot();
      // Begin a new transaction. The transaction stores things like component
      // lifecycle events so they can be flushed once rendering has completed.
      env.begin();
      await this.renderer.render(templateIterator);

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 default class ParticlesBackground extends Component {
  @tracked
  lastParticles: number = 0;

  constructor(options) {
    super(options);
    this.lastParticles = this.args.index;
  }

  @tracked('args')
  get particles() {
    let numParticles = this.args.index;
    let { lastParticles } = this;
    if (numParticles > lastParticles) {
      let extraParticles = Array.from(Array(numParticles - lastParticles).keys());
      let particles = Array.from(Array(lastParticles).keys());
      this.lastParticles = numParticles;
      return {
        particles,
        extraParticles
      };
    } else {
      let particles = Array.from(Array(numParticles).keys());
      this.lastParticles = numParticles;
      return {
        particles

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);
  }
}