TypeScript runtime.CustomElementResource類代碼示例

export function registerComponent(container, ...components) {
  for (const component of components) {
    const name = component.description ? component.description.name : component.name;
    container.register(component);
    Registration.alias(CustomElementResource.keyFrom(name), component).register(container);
  }
}

      it(`bindSpec ${bindSpec.t}, templateSpec ${templateSpec.t}`, function () {
        const { forof, item, expected, initialize } = bindSpec;
        const { createTemplate } = templateSpec;

        const ctx = TestContext.createHTMLTestContext();
        const { container } = ctx;
        container.register(TestConfiguration);

        const markup = createTemplate(forof, item);
        const App = CustomElementResource.define({ name: 'app', template: markup }, class {});

        const host = ctx.createElement('div');
        const component = new App();
        initialize(component);

        const au = new Aurelia(container);
        au.app({ host, component });
        au.start();

        expect(host.textContent).to.equal(expected);

        au.stop();

        expect(host.textContent).to.equal('');
      });

  it(`@containerless yields ContainerlessProjector (with child)`, function () {
    const parent = ctx.createElement('div');
    const host = ctx.createElement('div');
    const child = ctx.createElement('div');
    parent.appendChild(host);
    host.appendChild(child);
    const Foo = CustomElementResource.define(
      {
        name: 'foo',
        containerless: true
      },
      class {}
    ) as ICustomElementType<Node>;
    const component = new Foo();
    const projector = locator.getElementProjector(dom, component, host, Foo.description);

    expect(projector).to.be.instanceof(ContainerlessProjector);
    expect(projector['childNodes'][0]).to.equal(child);
    expect(host.parentNode).to.equal(null);
    expect(parent.firstChild).to.be.instanceof(ctx.Comment);
    expect(parent.firstChild.textContent).to.equal('au-start');
    expect(parent.lastChild).to.be.instanceof(ctx.Comment);
    expect(parent.lastChild.textContent).to.equal('au-end');
    expect(parent.firstChild.nextSibling['$customElement']).to.equal(component);
    expect(projector.provideEncapsulationSource()).not.to.equal(projector['host']);
    expect(projector.provideEncapsulationSource()).to.equal(parent);
  });

export function hydrateCustomElement<T>(Type: Constructable<T>, ctx: HTMLTestContext) {
  const { container, dom } = ctx;
  const ElementType: ICustomElementType = Type as any;
  const parent = ctx.createElement('div');
  const host = ctx.createElement(ElementType.description.name);
  const renderable = new FakeView(ctx);
  const instruction: IHydrateElementInstruction = {
    type: TargetedInstructionType.hydrateElement,
    res: 'au-compose',
    instructions: []
  };

  dom.appendChild(parent, host);

  const renderableProvider = new InstanceProvider();
  const elementProvider = new InstanceProvider();
  const instructionProvider = new InstanceProvider<ITargetedInstruction>();

  renderableProvider.prepare(renderable);
  elementProvider.prepare(host);
  instructionProvider.prepare(instruction);

  container.register(ElementType);
  container.registerResolver(IRenderable, renderableProvider);
  container.registerResolver(ITargetedInstruction, instructionProvider);
  dom.registerElementResolver(container, elementProvider);

  const element = container.get<T & ICustomElement>(
    CustomElementResource.keyFrom(ElementType.description.name)
  ) as T & ICustomElement & InstanceType<typeof Type>;

  element.$hydrate(LF.none, container, host);

  return { element, parent };
}

 public componentType(context: IRenderContext): IRouteableCustomElementType {
   if (this.component !== null) {
     return this.component;
   }
   const container = context.get(IContainer);
   const resolver = container.getResolver(CustomElementResource.keyFrom(this.componentName));
   if (resolver !== null) {
     return resolver.getFactory(container).Type as IRouteableCustomElementType;
   }
   return null;
 }

 public componentInstance(context: IRenderContext): IRouteableCustomElement {
   if (this.content === null) {
     return null;
   }
   // TODO: Remove once "local registration is fixed"
   const component = this.componentName();
   const container = context.get(IContainer);
   if (typeof component !== 'string') {
     return container.get<IRouteableCustomElement>(component);
   } else {
     return container.get<IRouteableCustomElement>(CustomElementResource.keyFrom(component));
   }
 }

      req(depsToLoad, function (): void {
        const templateImport = parseImport(name);
        const templateSource = {
          name: kebabCase(templateImport.basename),
          template: description.template,
          build: {
            required: true,
            compiler: 'default'
          },
          dependencies: Array.prototype.slice.call(arguments, 1)
        };

        onLoad({default: CustomElementResource.define(templateSource, null)});
      });

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(CustomElementResource.keyFrom('app'));

window['au'] = new Aurelia(container)
  .register(DebugConfiguration)
  .app({ host: document.querySelector('app'), component: component })
  .start();

  it('05.', function () {
    let boundCalls = 0;

    @customElement({ name: 'foo1', template: `<template><foo2 value.bind="value" value2.bind="value1"></foo2>\${value}</template>` })
    class Foo1 {
      @bindable()
      public value: any;
      public value1: any;
      public bound(): void {
        expect(this.value).to.equal('w00t', 'Foo1.this.value');
        expect(this.value1).to.equal('w00t1', 'Foo1.this.value1');
        boundCalls++;
      }
      public valueChanged(newValue: any): void {
        this.value1 = `${newValue}1`;
      }
    }

    @customElement({ name: 'foo2', template: `<template><foo3 value.bind="value" value2.bind="value2"></foo3>\${value}</template>` })
    class Foo2 {
      @bindable()
      public value: any;
      public value1: any;
      @bindable()
      public value2: any;
      public bound(): void {
        expect(this.value).to.equal('w00t', 'Foo2.this.value');
        expect(this.value1).to.equal('w00t1', 'Foo2.this.value1');
        expect(this.value2).to.equal('w00t1', 'Foo2.this.value2');
        boundCalls++;
      }
      public valueChanged(newValue: any): void {
        this.value1 = `${newValue}1`;
      }
    }

    @customElement({ name: 'foo3', template: `<template><foo4 value.bind="value" value2.bind="value2"></foo4>\${value}</template>` })
    class Foo3 {
      @bindable()
      public value: any;
      public value1: any;
      @bindable()
      public value2: any;
      public bound(): void {
        expect(this.value).to.equal('w00t', 'Foo3.this.value');
        expect(this.value1).to.equal('w00t1', 'Foo3.this.value1');
        expect(this.value2).to.equal('w00t1', 'Foo3.this.value2');
        boundCalls++;
      }
      public valueChanged(newValue: any): void {
        this.value1 = `${newValue}1`;
      }
    }

    @customElement({ name: 'foo4', template: `<template><foo5 value.bind="value" value2.bind="value2"></foo5>\${value}</template>` })
    class Foo4 {
      @bindable()
      public value: any;
      public value1: any;
      @bindable()
      public value2: any;
      public bound(): void {
        expect(this.value).to.equal('w00t', 'Foo4.this.value');
        expect(this.value1).to.equal('w00t1', 'Foo4.this.value1');
        expect(this.value2).to.equal('w00t1', 'Foo4.this.value2');
        boundCalls++;
      }
      public valueChanged(newValue: any): void {
        this.value1 = `${newValue}1`;
      }
    }

    @customElement({ name: 'foo5', template: `<template>\${value}</template>` })
    class Foo5 {
      @bindable()
      public value: any;
      public value1: any;
      @bindable()
      public value2: any;
      public bound(): void {
        expect(this.value).to.equal('w00t', 'Foo5.this.value');
        expect(this.value1).to.equal('w00t1', 'Foo5.this.value1');
        expect(this.value2).to.equal('w00t1', 'Foo5.this.value2');
        boundCalls++;
      }
      public valueChanged(newValue: any): void {
        this.value1 = `${newValue}1`;
      }
    }

    const customElementCtors: any[] = [Foo1, Foo2, Foo3, Foo4, Foo5];
    const { container, lifecycle } = ctx;
    container.register(...customElementCtors);
    container.register(TestConfiguration);
    const host = ctx.createElement('app');
    const au = new Aurelia(container);
    const App = CustomElementResource.define({ name: 'app', template: '<template><foo1 value.bind="value"></foo1>\${value}</template>' }, null);
    const component = new App();
    component.value = 'w00t';
    au.app({ host, component }).start();
//.........這裏部分代碼省略.........

 () => CustomElementResource.define({ name: 'foo', bindables: { foo: {} } }, class Foo {})

describe('The "compose" custom element', function () {
  // this is not ideal (same instance will be reused for multiple loops) but probably fine
  // need to revisit this later to give this extra dep a clean atomic entry point for the tests
  const subjectPossibilities = [
    {
      description: 'Template Definition',
      create: createTemplateDefinition
    },
    {
      description: 'View Factory',
      create: createViewFactory
    },
    {
      description: 'Potential Renderable',
      create: createPotentialRenderable
    },
    {
      description: 'View',
      create(ctx: HTMLTestContext) {
        return createViewFactory(ctx).create();
      }
    },
    {
      description: 'Custom Element Constructor',
      create(ctx: HTMLTestContext) {
        return CustomElementResource.define(createTemplateDefinition(), class MyCustomElement {});
      }
    }
  ];

  const producerPossibilities = [
    {
      description: 'as a raw value',
      create(subject) { return subject; }
    },
    {
      description: 'via a Promise',
      create(subject) { return Promise.resolve(subject); }
    }
  ];

  for (const subjectPossibility of subjectPossibilities) {
    for (const producerPossibility of producerPossibilities) {
      it(`can compose a ${subjectPossibility.description} ${producerPossibility.description}`, done => {
        const ctx = TestContext.createHTMLTestContext();
        const { element } = hydrateCustomElement(Compose, ctx);
        const value = producerPossibility.create(subjectPossibility.create(ctx));

        waitForCompositionEnd(
          element,
          () => {
            const child = getCurrentView(element);
            expect(child).not.to.equal(undefined);
            expect(child).not.to.equal(null);
          },
          done
        );

        element.subject = value;
      });

      it(`enforces the attach lifecycle of its composed ${subjectPossibility.description} ${producerPossibility.description}`, done => {
        const ctx = TestContext.createHTMLTestContext();
        const { element } = hydrateCustomElement(Compose, ctx);
        const value = producerPossibility.create(subjectPossibility.create(ctx));

        waitForCompositionEnd(
          element,
          () => {
            const child = getCurrentView(element);
            let attachCalled = false;
            child.$attach = function () { attachCalled = true; };

            runAttachLifecycle(ctx, element);

            expect(attachCalled).to.equal(true);
          },
          done
        );

        element.subject = value;
      });

      it(`adds a view at the render location when attaching a ${subjectPossibility.description} ${producerPossibility.description}`, done => {
        const ctx = TestContext.createHTMLTestContext();
        const { element } = hydrateCustomElement(Compose, ctx);
        const value = producerPossibility.create(subjectPossibility.create(ctx));

        waitForCompositionEnd(
          element,
          () => {
            const location = element.$projector.host;

            runAttachLifecycle(ctx, element);

            expect(location.previousSibling)
              .to.be.equal(getCurrentView(element).$nodes.lastChild);
          },
          done
        );
//.........這裏部分代碼省略.........

  it('100', function () {
    const App = CE.define(
      {
        name: 'app',
        template: '${a}<foo b.two-way="a"></foo>',
        dependencies: [
          CE.define(
            {
              name: 'foo',
              template: '${b}',
              bindables: ['b']
            },
            class {
              public b: string;

              public attached(this: this & ICustomElement<Node>): void {
                expect(this.b).to.equal('x');
                expect(this.$host.textContent).to.equal('x');
                this.b = 'y';
              }
            }
          )
        ]
      },
      class {
        public a: string;

        public bound(this: this & ICustomElement<Node>): void {
          expect(this.a).to.equal('x');
        }

        public attached(this: this & ICustomElement<Node>): void {
          expect(this.a).to.equal('y');
          expect(this.$host.textContent).to.equal('xx');
        }
      }
    );

    const host = ctx.createElement('div');
    const component = new App();

    component.a = 'x';

    const au = new Aurelia(ctx.container);
    au.app({ host, component });
    au.start();

    expect(host.textContent).to.equal('xx');

    ctx.lifecycle.processFlushQueue(LF.none);

    expect(component.a).to.equal('y');
    expect(host.textContent).to.equal('yy');
  });