Cleanup

Author: spautz

package.json

@@ -13,7 +13,6 @@
   ],
   "scripts": {
     "build": "rimraf dist/ && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && tsc -p tsconfig.web.json",
-    "build:watch": "tsc -p tsconfig.esm.json --watch",
     "pretest": "npm run build",
     "test": "echo \"It built ok, that'll do for now\"",
     "prepare": "npm run build",

src/index.tsx

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-console.log('React = ', React)
-console.log('ReactDOM = ', ReactDOM)
-
-// These namespaces come from react-dom, which does not export them publicly
-// https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/DOMNamespaces.js#L8-L16
-const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
-const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
+// ReactDOM can handle several different namespaces, but they're not exported publicly
+// https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/DOMNamespaces.js#L8-L10
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
-export const Namespaces = {
-    html: HTML_NAMESPACE,
-    mathml: MATH_NAMESPACE,
-    svg: SVG_NAMESPACE,
-};
 
 type Component<P> = React.Component<P> | React.ComponentType<P>;
 
@@ -22,7 +12,8 @@ type ComponentProps<C extends Component<any>> = C extends Component<infer P> ? P
 type PortalNodeElement = HTMLElement | SVGElement;
 
 export interface PortalNode<C extends Component<any> = Component<any>> {
-    element: PortalNodeElement,
+    // The dom element used for the React portal. Created on portal mount.
+    element: PortalNodeElement | null,
     // Used by the out portal to send props back to the real element
     // Hooked by InPortal to become a state update (and thus rerender)
     setPortalProps(p: ComponentProps<C>): void;
@@ -48,9 +39,7 @@ export const createPortalNode = <C extends Component<any>>(): PortalNode<C> => {
     let lastPlaceholder: Node | undefined;
 
     const portalNode: PortalNode = {
-        // @ts-ignore
         element: null,
-        // element: document.createElement('div'),
         setPortalProps: (props: ComponentProps<C>) => {
             initialProps = props;
         },
@@ -64,31 +53,14 @@ export const createPortalNode = <C extends Component<any>>(): PortalNode<C> => {
             }
             portalNode.unmount();
 
-            console.log('portalNode.mount()', {
-                newParent, newPlaceholder,
-                parent, lastPlaceholder,
-                portalNode,
-            });
-
-            if (!portalNode.element) {
+            // To support SVG and other non-html elements, the portalNode's element needs to created with
+            // the correct namespace.
+            if (!portalNode.element || portalNode.element.tagName !== newParent.tagName) {
                 if (newParent instanceof SVGElement) {
                     portalNode.element = document.createElementNS(SVG_NAMESPACE, newParent.tagName);
                 } else {
                     portalNode.element = document.createElement(newParent.tagName);
                 }
-
-                console.log('CREATED portalNode.element!!!', portalNode.element);
-
-            } else if (newParent.tagName !== portalNode.element.tagName) {
-                const oldElement = portalNode.element;
-
-                if (newParent instanceof SVGElement) {
-                    portalNode.element = document.createElementNS(SVG_NAMESPACE, newParent.tagName);
-                } else {
-                    portalNode.element = document.createElement(newParent.tagName);
-                }
-
-                console.log('REPLACED portalNode.element!!!', oldElement, ' -> ', portalNode.element)
             }
 
             newParent.replaceChild(
@@ -107,18 +79,13 @@ export const createPortalNode = <C extends Component<any>>(): PortalNode<C> => {
             }
 
             if (parent && lastPlaceholder) {
-                if (portalNode.element) {
-                    parent.replaceChild(
-                        lastPlaceholder,
-                        portalNode.element
-                    );
-
-                    parent = undefined;
-                    lastPlaceholder = undefined;
-                } else {
-                    // Panic!
-                    throw new Error('No element available, in portalNode.mount!');
-                }
+                parent.replaceChild(
+                    lastPlaceholder,
+                    portalNode.element as PortalNodeElement
+                );
+
+                parent = undefined;
+                lastPlaceholder = undefined;
             }
         }
     };
@@ -153,20 +120,19 @@ export class InPortal extends React.PureComponent<InPortalProps, { nodeProps: {}
     }
 
     render() {
-        console.log('InPortal.render()', this);
         const { children, node } = this.props;
-        console.log('InPortal.render()...node = ', node);
-        console.log('InPortal.render()...node.element = ', node.element);
-
-        if (!node.element) return null;
-
-        return ReactDOM.createPortal(
-            React.Children.map(children, (child) => {
-                if (!React.isValidElement(child)) return child;
-                return React.cloneElement(child, this.state.nodeProps)
-            }),
-            node.element
-        );
+
+        if (node.element) {
+            return ReactDOM.createPortal(
+                React.Children.map(children, (child) => {
+                    if (!React.isValidElement(child)) return child;
+                    return React.cloneElement(child, this.state.nodeProps)
+                }),
+                node.element
+            );
+        }
+        // Else: the portalNode has not been mounted yet
+        return null;
     }
 }
 
@@ -222,8 +188,6 @@ export class OutPortal<C extends Component<any>> extends React.PureComponent<Out
     }
 
     render() {
-        console.log('OutPortal.render()', this);
-
         // Render a placeholder to the DOM, so we can get a reference into
         // our location in the DOM, and swap it out for the portaled node.
         return <div ref={this.placeholderNode} />;

stories/index.stories.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 
 import { storiesOf } from '@storybook/react';