feat(dom): allow for container replacement (#428)

Previously Feature Apps could only render into the provided container element but would not be rendered if they replaced it. Now this is possible as well.
feature-hub · Mar 15, 2019 · ea54ddf · ea54ddf
1 parent 6437d6b
commit ea54ddf
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/packages/demos/src/integrator-dom/feature-app.ts b/packages/demos/src/integrator-dom/feature-app.ts
@@ -6,7 +6,7 @@ const featureAppDefinition: FeatureAppDefinition<DomFeatureApp> = {
 
   create: () => ({
     attachTo(element: HTMLElement): void {
-      element.innerHTML = 'Hello, World!';
+      element.replaceWith('Hello, World!');
     }
   })
 };

diff --git a/packages/demos/src/integrator-dom/index.test.ts b/packages/demos/src/integrator-dom/index.test.ts
@@ -33,7 +33,7 @@ describe('integration test: "dom integrator"', () => {
   describe('if the Feature App loads successfully', () => {
     it('renders the Feature App', async () => {
       const handle = await page.evaluateHandle(
-        'document.querySelector("feature-app-loader").shadowRoot.querySelector("feature-app-container").shadowRoot.querySelector("div")'
+        'document.querySelector("feature-app-loader").shadowRoot.querySelector("feature-app-container").shadowRoot'
       );
 
       await expect(handle).toMatch('Hello, World!');

diff --git a/packages/dom/src/feature-app-container.ts b/packages/dom/src/feature-app-container.ts
@@ -82,35 +82,42 @@ export function defineFeatureAppContainer(
     @property({type: Object})
     public instanceConfig?: unknown;
 
+    @property({type: Object, reflect: false})
+    private error?: Error;
+
     private featureAppScope: FeatureAppScope<DomFeatureApp> | undefined;
 
-    public render(): TemplateResult {
-      try {
-        const element = document.createElement('div');
+    private readonly appElement = document.createElement('div');
 
-        if (!this.featureAppDefinition) {
-          return html`
-            ${element}
-          `;
-        }
+    public firstUpdated(): void {
+      if (!this.featureAppDefinition) {
+        return;
+      }
 
+      try {
         this.featureAppScope = featureAppManager.getFeatureAppScope(
           this.featureAppDefinition,
           {idSpecifier: this.idSpecifier, instanceConfig: this.instanceConfig}
         );
 
-        this.featureAppScope.featureApp.attachTo(element);
-
-        return html`
-          ${element}
-        `;
+        this.featureAppScope.featureApp.attachTo(this.appElement);
       } catch (error) {
         logger.error(error);
 
+        this.error = error;
+      }
+    }
+
+    public render(): TemplateResult {
+      if (this.error) {
         return html`
           <slot name="error"></slot>
         `;
       }
+
+      return html`
+        ${this.appElement}
+      `;
     }
 
     public disconnectedCallback(): void {