feat: ReactiveContentModule

Author: dherges

src/app/reactive-content/content-host/content-host.component.spec.ts

@@ -0,0 +1,37 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpModule } from '@angular/http';
+
+import { ContentHostComponent } from './content-host.component';
+import { ContentSourceService } from '../content-source.service';
+import { CONTENT_BASE_URL_DEFAULT, CONTENT_MAPPINGS } from '../content';
+
+describe('ContentHostComponent', () => {
+  let component: ContentHostComponent;
+  let fixture: ComponentFixture<ContentHostComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpModule ],
+      providers: [
+        ContentSourceService,
+        CONTENT_BASE_URL_DEFAULT,
+        {
+          provide: CONTENT_MAPPINGS,
+          useValue: {}
+        }
+      ],
+      declarations: [ ContentHostComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentHostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/reactive-content/content-host/content-host.component.ts

@@ -0,0 +1,160 @@
+import {
+  Component,
+  OnChanges,
+  OnInit,
+  ChangeDetectorRef,
+  ComponentFactory,
+  ComponentFactoryResolver,
+  ComponentRef,
+  ElementRef,
+  Inject,
+  Injector,
+  Input,
+  Renderer2,
+  Type,
+  SimpleChange,
+  ViewChild,
+  ViewContainerRef,
+ } from '@angular/core';
+
+import { Http, Response } from '@angular/http';
+
+import { environment } from '../../../environments/environment';
+import { ContentSourceService } from '../content-source.service';
+import { CONTENT_MAPPINGS } from '../content';
+import { ContentOnCreate, ContentEmbeddable, ContentMappingType, ContentDocument } from '../content.interfaces';
+
+const asContentCreate = (component: ComponentRef<any>): ContentOnCreate => {
+  if (component.instance
+      && component.instance['contentOnCreate']
+      && typeof component.instance['contentOnCreate'] === 'function') {
+
+    return component.instance as ContentOnCreate;
+  }
+
+  const componentName = component.instance['constructor'].name;
+  throw new TypeError(`${componentName} needs to implement interface ContentCreate`);
+};
+
+const asContentEmbeddable = (component: ComponentRef<any>): ContentEmbeddable | undefined => {
+  if (component.instance
+      && component.instance['contentEmbeddable']
+      && typeof component.instance['contentEmbeddable'] === 'function') {
+
+    return component.instance as ContentEmbeddable;
+  }
+};
+
+
+@Component({
+  selector: 'rc-content-host',
+  template: `<main><ng-container #container></ng-container></main><pre *ngIf="isDebug"><code>{{ json | json }}</code></pre>`,
+})
+export class ContentHostComponent implements OnInit, OnChanges {
+
+  public isDebug: boolean = !environment.production;
+
+  public json: any;
+
+  @ViewChild('container', {read: ViewContainerRef})
+  public target: ViewContainerRef;
+
+  @Input()
+  public document: ContentDocument;
+
+  constructor(
+    private changeDetector: ChangeDetectorRef,
+    private content: ContentSourceService,
+    @Inject(CONTENT_MAPPINGS) private contentMappings: ContentMappingType,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private elementRef: ElementRef,
+    private injector: Injector,
+    private renderer: Renderer2
+  ) {}
+
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
+
+    if (changes && changes.document && changes.document.currentValue) {
+      this.updateHostedContent(changes.document.currentValue);
+    }
+
+  }
+
+  private updateHostedContent(content: ContentDocument) {
+
+    // clear previous components and views
+    this.target.clear();
+
+    console.info('Cleared previous component instances.');
+
+    // update current values
+    this.json = content;
+
+    this.renderReactiveContent(content, this.target);
+
+    console.info('Rendered new component instances.');
+
+  }
+
+  private renderReactiveContent(content: ContentDocument, container: ViewContainerRef) {
+
+    // resolve content['_type'] to factory
+    const type: Type<any> = this.contentMappings[content._type];
+    if (!type) {
+      throw new ReferenceError(`No content mapping for type=${content._type}`);
+    }
+
+    const componentFactory: ComponentFactory<any> = this.componentFactoryResolver
+      .resolveComponentFactory(type);
+    // XX: renderer.appendChild() inserts INTO dom element. However, use with caution because ViewRef and ViewContainerRef are not set-up properly
+    //const component: ComponentRef<any> = componentFactory.create(this.injector);
+    //this.renderer.appendChild(container.element.nativeElement, component.location.nativeElement);
+    const component = container.createComponent(componentFactory, container.length, this.injector);
+    console.info('Component dynamically created ', component);
+
+    // content lifecycle hook: notify of new values
+    const cmpCreate: ContentOnCreate = asContentCreate(component);
+    cmpCreate.contentOnCreate(content);
+
+    // render embedded content
+    if (content._embedded && Object.keys(content._embedded).length > 0) {
+
+      const cmpEmbeddable: ContentEmbeddable = asContentEmbeddable(component);
+      if (cmpEmbeddable) {
+
+        // render in the target element of ContentEmbeddable
+        const childContainer = cmpEmbeddable.contentEmbeddable();
+
+        Object.keys(content._embedded).forEach((key: string) => {
+          const value = content._embedded[key];
+
+          // XX: recursive rendering
+          if (value instanceof Array) {
+            value.forEach((v: ContentDocument) => {
+              this.renderReactiveContent(v, childContainer);
+            });
+          } else {
+            this.renderReactiveContent(value, childContainer);
+          }
+        });
+
+      } else {
+
+        // fatal: embedded content must be hosted by ContentEmbeddable
+        const cmpName = component.instance['constructor'].name;
+        throw new TypeError([`Trying to render embedded content.`,
+          `${cmpName} must implement interface ContentEmbeddable`].join(' '));
+
+      }
+
+    }
+
+    component.hostView.detectChanges();
+
+  }
+
+}

src/app/reactive-content/content-links/content-links.component.html

@@ -0,0 +1,8 @@
+<nav *ngIf="links && links.length > 0">
+
+  <button *ngFor="let link of links"
+          (click)="selected.emit(link)"
+          type="button"
+          class="button button-clear">{{ link.rel }}</button>
+
+</nav>

src/app/reactive-content/content-links/content-links.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentLinksComponent } from './content-links.component';
+
+describe('ContentLinksComponent', () => {
+  let component: ContentLinksComponent;
+  let fixture: ComponentFixture<ContentLinksComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContentLinksComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentLinksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/reactive-content/content-links/content-links.component.ts

@@ -0,0 +1,47 @@
+import { Component, EventEmitter, OnChanges, OnInit, Input, Output, SimpleChange } from '@angular/core';
+import { ContentDocument } from '../content.interfaces';
+
+export interface LinkWithRel {
+  rel: string;
+  href: string;
+}
+
+@Component({
+  selector: 'rc-content-links',
+  templateUrl: './content-links.component.html'
+})
+export class ContentLinksComponent implements OnChanges, OnInit {
+
+  public links: LinkWithRel[] = [];
+
+  @Input()
+  public document: ContentDocument;
+
+  @Output()
+  public selected: EventEmitter<LinkWithRel> = new EventEmitter<LinkWithRel>();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
+
+    if (changes && changes.document && changes.document.currentValue) {
+      this.prepareLinks(changes.document.currentValue);
+    }
+
+  }
+
+  private prepareLinks(document: ContentDocument) {
+
+    this.links = Object.keys(document._links)
+      .map((rel: string) => {
+        const href = document._links[rel].href;
+
+        return { rel, href };
+      });
+
+  }
+
+}

src/app/reactive-content/content-source.service.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { HttpModule, XHRBackend } from '@angular/http';
+import { MockBackend } from '@angular/http/testing';
+
+import { ContentSourceService } from './content-source.service';
+import { CONTENT_BASE_URL_DEFAULT } from './content';
+
+describe('ContentSourceService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        HttpModule
+      ],
+      providers: [
+        ContentSourceService,
+        MockBackend,
+        { provide: XHRBackend, useExisting: MockBackend },
+        CONTENT_BASE_URL_DEFAULT
+      ]
+    });
+  });
+
+  it('should create an instance', inject([ContentSourceService], (service: ContentSourceService) => {
+    expect(service).toBeTruthy();
+  }));
+
+});

src/app/reactive-content/content-source.service.ts

@@ -0,0 +1,38 @@
+import { Inject, Injectable, InjectionToken, Provider } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+import { CONTENT_BASE_URL } from './content';
+import { ContentDocument } from './content.interfaces';
+
+@Injectable()
+export class ContentSourceService {
+
+  constructor(
+    private http: Http,
+    @Inject(CONTENT_BASE_URL) private baseUrl: string
+  ) {}
+
+  public index(): Observable<ContentDocument> {
+
+    return this.http.get(this.baseUrl)
+      .map((res: Response) => res.json());
+  }
+
+  public fetchLink(document: ContentDocument, rel: string) {
+    const link = document._links[rel];
+
+    if (link) {
+      // TODO: if (link.templated) ...
+
+      return this.http.get(link.href)
+        .map((res: Response) => res.json());
+    }
+
+    const availableRels = Object.keys(document._links).join(', ');
+    throw new Error(`Link rel=${rel} does not exist in given document. Available rels are ${availableRels}`);
+
+  }
+
+}