How to use @aurelia/jit-html - 8 common examples

au.start();
    const outerHtmlAfterStart1 = host.outerHTML;
    assert.strictEqual(getVisibleText(au, host), expected, 'after start #1');
    au.stop();
    const outerHtmlAfterStop1 = host.outerHTML;
    assert.strictEqual(getVisibleText(au, host), '', 'after stop #1');
    au.start();
    const outerHtmlAfterStart2 = host.outerHTML;
    assert.strictEqual(getVisibleText(au, host), expected, 'after start #2');
    au.stop();
    const outerHtmlAfterStop2 = host.outerHTML;
    assert.strictEqual(getVisibleText(au, host), '', 'after stop #2');
    assert.strictEqual(outerHtmlAfterStart1, outerHtmlAfterStart2, 'outerHTML after start #1 / #2');
    assert.strictEqual(outerHtmlAfterStop1, outerHtmlAfterStop2, 'outerHTML after stop #1 / #2');

    console.log(`\n${stringifyTemplateDefinition(description, 0)}`);
    disableTracing();
  }
  it('tag$01 text$01 _', function () {

it('compiles the binding to a TranslationBindBindingInstruction', function () {
    const [sut] = setup();
    const syntax: AttrSyntax = { command: 't.bind', rawName: 't.bind', rawValue: 'obj.key', target: 'bind' };

    const actual = sut.compile({
      command: new AttrBindingCommand(),
      flags: (void 0)!,
      expression: { syntax } as unknown as AnyBindingExpression,
      syntax
    });

    assert.instanceOf(actual, TranslationBindBindingInstruction);
  });
});

it('compiles the binding to a TranslationParametersBindingInstruction', function () {
    const sut = setup();
    const syntax: AttrSyntax = { command: 't-params.bind', rawName: 't-params.bind', rawValue: '{foo: "bar"}', target: '' };
    const plainAttributesymbol: PlainAttributeSymbol = {
      command: new AttrBindingCommand(),
      flags: (void 0)!,
      expression: { syntax } as unknown as AnyBindingExpression,
      syntax
    };

    const actual = sut.compile(plainAttributesymbol);

    assert.instanceOf(actual, TranslationParametersBindingInstruction);
  });
});

it(markup, function () {
      const ctx = TestContext.createHTMLTestContext();
      const { dom, container } = ctx;

      container.register(CustomAttribute.define({ name: 'attr', bindables: ['a', 'b', 'c'] }, class {}));

      const resources = new ResourceModel(container);

      const attrParser = container.get(IAttributeParser);
      const exprParser = container.get(IExpressionParser);
      const transformer = container.get(IAttrSyntaxTransformer);
      const factory = container.get(ITemplateElementFactory);

      const sut = new TemplateBinder(dom, resources, attrParser, exprParser, transformer);

      const template = factory.createTemplate(markup) as HTMLTemplateElement;
      const manifestRoot = sut.bind(template);
      const div = manifestRoot.childNodes[0] as PlainElementSymbol;

      const { customAttributes } = div;
      assert.strictEqual(customAttributes.length, 1, 'customAttributes.length');

      const [{ bindings }] = customAttributes;
      assert.strictEqual(bindings.length, expectedBindings.length, 'bindings.length');

      for (const expectedBinding of expectedBindings) {
        const binding = bindings.find(b => b.target === expectedBinding.target && b.rawValue === expectedBinding.rawValue);
        assert.notStrictEqual(binding, void 0, `${JSON.stringify(bindings.map(({ target, rawValue }) => ({ target, rawValue })))}.find(b => b.target === ${expectedBinding.target} && b.rawValue === ${expectedBinding.rawValue})`);
      }
    });

it.skip(escaped, function () {
      const ctx = TestContext.createHTMLTestContext();
      const parser = new ctx.DOMParser();
      const doc = parser.parseFromString(markup, 'application/xml');
      const fakeSurrogate = { firstChild: doc, attributes: [] };

      const binder = new TemplateBinder(
        ctx.dom,
        new ResourceModel(new RuntimeCompilationResources(ctx.container)),
        ctx.container.get(IAttributeParser),
        ctx.container.get(IExpressionParser),
        ctx.container.get(IAttrSyntaxTransformer)
      );

      const result = binder.bind(fakeSurrogate as any);
      assert.strictEqual(result.physicalNode, fakeSurrogate, `result.physicalNode`);
    });
  }

import { Tracer } from '@aurelia/kernel';
import { About } from './components/about';
import { Board } from './components/board';
import { Cancel } from './components/cancel';
import { Contact } from './components/contact';
import { Contacts } from './components/contacts';
import { Delayed } from './components/delayed';
import { Game } from './components/game';
import { Inventory } from './components/inventory';
import { Lobby } from './components/lobby';
import { enableTracing, TraceWriter } from './tracing';

enableTracing();
Tracer.enableLiveLogging(TraceWriter);

const container = HTMLJitConfiguration.createContainer();
container.register(
  ViewportCustomElement as any,
  NavCustomElement as any,
  App as any,

  Game as any,
  Lobby as any,
  About as any,
  Contacts as any,
  Contact as any,
  Board as any,
  Inventory as any,
  Delayed as any,
  Cancel as any,
);
const component = container.get(CustomElement.keyFrom('app'));

register(container) {
            runtime_html_jsdom_1.RuntimeHtmlJsdomConfiguration
                .register(container)
                .register(...jit_1.DefaultBindingLanguage, ...jit_1.DefaultBindingSyntax, ...jit_1.DefaultComponents, ...jit_html_1.DefaultBindingLanguage, ...jit_html_1.DefaultComponents);
            return container;
        },
        /**

register(container) {
            runtime_html_browser_1.RuntimeHtmlBrowserConfiguration
                .register(container)
                .register(...jit_1.DefaultBindingLanguage, ...jit_1.DefaultBindingSyntax, ...jit_1.DefaultComponents, ...jit_html_1.DefaultBindingLanguage, ...jit_html_1.DefaultComponents);
            return container;
        },
        /**