Fix async-loader for Preact X (#1309)

* Fix async-loader for Preact X

I finally (FINALLY) found a solution for #1293, #1308, etc etc. This doesn't use DOM hacks or anything - it just crawls up the tree of VNodes and performs a Depth-First-Search backwards from the position of AsyncComponent in order to find the most recently hydrated DOM element. Essentially, the first populated `vnode._dom` reference it finds is guaranteed to be the previous sibling of the parent element AsyncComponent is about to get rendered into. As long as AsyncComponent isn't being used load a component that renders a Fragment, the nextSibling of that discovered element is the exact node Preact will try to hydrate.

In the case of an AsyncComponent wrapping a Fragment, only the first Fragment child will be hydrated. This means the remaining children will have the flicker effect, but that's pretty reasonable:

```js
// app.js
import Foo from 'async!./foo';
export default () => <div><Foo /></div>

// foo.js
export default () => <Fragment>
    <h1>Hello</h1>
    <p>world!</p>  // will be culled+reinserted during hydration
</Fragment>
```

* Stop searching if we hit an element parent

Co-authored-by: Anup <[email protected]>

Author: developit

packages/async-loader/async.js

@@ -2,8 +2,30 @@ import { h, Component } from 'preact';
 
 const PENDING = {};
 
+// Given a VNode, finds its previous element sibling
+function getPreviousSibling(vnode, inner) {
+	// in an element parent with no preceeding siblings means we're the first child
+	if (typeof vnode.type === 'string') return null;
+	const parent = vnode.__;
+	if (!parent) return;
+	let children = parent.__k;
+	if (children) {
+		if (!Array.isArray(children)) children = [children];
+		// only search previous children
+		let end = children.indexOf(vnode);
+		if (end === -1) end = children.length;
+		for (let i=end; i--; ) {
+			const child = children[i];
+			const dom = child && child.__e || getPreviousSibling(child, true);
+			if (dom) return dom;
+		}
+	}
+	if (!inner) return getPreviousSibling(parent);
+}
+
 export default function async(load) {
 	let component;
+
 	function AsyncComponent() {
 		Component.call(this);
 
@@ -23,7 +45,8 @@ export default function async(load) {
 				return h(component, props);
 			}
 
-			const me = (this.__P || this._parentDom).lastChild;
+			const prev = getPreviousSibling(this.__v);
+			const me = prev && prev.nextSibling || (this.__P || this._parentDom).firstChild;
 
 			return (
 				me &&