fixup! refactor(core): implement ɵɵforeignComponent instruction

Author: leonsenft

packages/core/src/interface/foreign_component.ts

@@ -9,22 +9,16 @@
 /** Symbol used to store and retrieve the render function for a foreign component. */
 export const RENDER: unique symbol = Symbol('RENDER');
 
-/**
- * A function returned by a {@link ForeignRenderFn} to perform cleanup when the
- * component is destroyed.
- */
-export type DisposeFn = () => void;
-
 /**
  * A function used to render a foreign component in an Angular template.
  *
  * The function accepts the component's properties as its only argument. It should return an array
- * of nodes rendered and owned by the foreign component. It may also return a {@link DisposeFn} to
- * be called when the component is destroyed.
+ * of nodes rendered and owned by the foreign component. It may also return a callback to perform
+ * any necessary cleanup when the component is destroyed.
  *
  * @template TProps The properties of the foreign component.
  */
-export type ForeignRenderFn<TProps> = (props: TProps) => [Node[], DisposeFn?];
+export type ForeignRenderFn<TProps> = (props: TProps) => [Node[], VoidFunction?];
 
 /**
  * Represents a component from another framework that Angular can import and render.

packages/core/src/render3/instructions/foreign_component.ts

@@ -12,12 +12,15 @@ import {createForeignView} from '../foreign_view';
 import {TContainerNode, TNodeType} from '../interfaces/node';
 import {HEADER_OFFSET, RENDERER} from '../interfaces/view';
 import {appendChild} from '../node_manipulation';
+import {nativeInsertBefore} from '../dom_node_manipulation';
 import {getLView, getTView, setCurrentTNode, setCurrentTNodeAsNotParent} from '../state';
 import {getOrCreateTNode} from '../tnode_manipulation';
 import {addToEndOfViewTree} from '../view/construction';
 import {createLContainer} from '../view/container';
 import {NodeInjector} from '../di';
 import {runInInjectionContext} from '../../di';
+import {Renderer} from '../interfaces/renderer';
+import {RNode} from '../interfaces/renderer_dom';
 
 /**
  * Creation phase instruction to render a foreign component.
@@ -48,7 +51,7 @@ export function ɵɵforeignComponent(
   }
 
   // 2. Create the anchor node in the DOM
-  const renderer = lView[RENDERER];
+  const renderer = lView[RENDERER] as Renderer;
   const comment = renderer.createComment(ngDevMode ? 'foreign-component' : '');
   appendChild(tView, lView, comment, tNode);
   attachPatchData(comment, lView);
@@ -66,11 +69,11 @@ export function ɵɵforeignComponent(
   const [nodes, dispose] = runInInjectionContext(injector, () => foreignComponent[RENDER](props));
 
   // 6. Insert the returned nodes into the foreign view, between its head and tail comment anchors.
-  const tail = viewRef.tail;
-  const parentNode = tail.parentNode;
-  if (parentNode) {
+  const tail = viewRef.tail as RNode;
+  const parent = tail.parentElement;
+  if (parent) {
     for (let i = 0; i < nodes.length; i++) {
-      parentNode.insertBefore(nodes[i], tail);
+      nativeInsertBefore(renderer, parent, nodes[i], tail, false);
     }
   }