1 | import { Component, createElement, options, Fragment } from 'preact';
|
2 | import { assign } from './util';
|
3 |
|
4 | const oldCatchError = options._catchError;
|
5 | options._catchError = function(error, newVNode, oldVNode) {
|
6 | if (error.then) {
|
7 |
|
8 | let component;
|
9 | let vnode = newVNode;
|
10 |
|
11 | for (; (vnode = vnode._parent); ) {
|
12 | if ((component = vnode._component) && component._childDidSuspend) {
|
13 | if (newVNode._dom == null) {
|
14 | newVNode._dom = oldVNode._dom;
|
15 | newVNode._children = oldVNode._children;
|
16 | }
|
17 |
|
18 | return component._childDidSuspend(error, newVNode._component);
|
19 | }
|
20 | }
|
21 | }
|
22 | oldCatchError(error, newVNode, oldVNode);
|
23 | };
|
24 |
|
25 | function detachedClone(vnode) {
|
26 | if (vnode) {
|
27 | if (vnode._component && vnode._component.__hooks) {
|
28 | vnode._component.__hooks._list.forEach(effect => {
|
29 | if (typeof effect._cleanup == 'function') effect._cleanup();
|
30 | });
|
31 |
|
32 | vnode._component.__hooks = null;
|
33 | }
|
34 |
|
35 | vnode = assign({}, vnode);
|
36 | vnode._component = null;
|
37 | vnode._children = vnode._children && vnode._children.map(detachedClone);
|
38 | }
|
39 |
|
40 | return vnode;
|
41 | }
|
42 |
|
43 | function removeOriginal(vnode) {
|
44 | if (vnode) {
|
45 | vnode._original = null;
|
46 | vnode._children = vnode._children && vnode._children.map(removeOriginal);
|
47 | }
|
48 | return vnode;
|
49 | }
|
50 |
|
51 |
|
52 | export function Suspense() {
|
53 |
|
54 | this._pendingSuspensionCount = 0;
|
55 | this._suspenders = null;
|
56 | this._detachOnNextRender = null;
|
57 | }
|
58 |
|
59 |
|
60 |
|
61 |
|
62 | Suspense.prototype = new Component();
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 | Suspense.prototype._childDidSuspend = function(promise, suspendingComponent) {
|
69 |
|
70 | const c = this;
|
71 |
|
72 | if (c._suspenders == null) {
|
73 | c._suspenders = [];
|
74 | }
|
75 | c._suspenders.push(suspendingComponent);
|
76 |
|
77 | const resolve = suspended(c._vnode);
|
78 |
|
79 | let resolved = false;
|
80 | const onResolved = () => {
|
81 | if (resolved) return;
|
82 |
|
83 | resolved = true;
|
84 | suspendingComponent.componentWillUnmount =
|
85 | suspendingComponent._suspendedComponentWillUnmount;
|
86 |
|
87 | if (resolve) {
|
88 | resolve(onSuspensionComplete);
|
89 | } else {
|
90 | onSuspensionComplete();
|
91 | }
|
92 | };
|
93 |
|
94 | suspendingComponent._suspendedComponentWillUnmount =
|
95 | suspendingComponent.componentWillUnmount;
|
96 | suspendingComponent.componentWillUnmount = () => {
|
97 | onResolved();
|
98 |
|
99 | if (suspendingComponent._suspendedComponentWillUnmount) {
|
100 | suspendingComponent._suspendedComponentWillUnmount();
|
101 | }
|
102 | };
|
103 |
|
104 | const onSuspensionComplete = () => {
|
105 | if (!--c._pendingSuspensionCount) {
|
106 | c._vnode._children[0] = removeOriginal(c.state._suspended);
|
107 | c.setState({ _suspended: (c._detachOnNextRender = null) });
|
108 |
|
109 | let suspended;
|
110 | while ((suspended = c._suspenders.pop())) {
|
111 | suspended.forceUpdate();
|
112 | }
|
113 | }
|
114 | };
|
115 |
|
116 | |
117 |
|
118 |
|
119 |
|
120 |
|
121 | const vnode = c._vnode;
|
122 | const wasHydrating = vnode && vnode._hydrating === true;
|
123 | if (!wasHydrating && !c._pendingSuspensionCount++) {
|
124 | c.setState({ _suspended: (c._detachOnNextRender = c._vnode._children[0]) });
|
125 | }
|
126 | promise.then(onResolved, onResolved);
|
127 | };
|
128 |
|
129 | Suspense.prototype.componentWillUnmount = function() {
|
130 | this._suspenders = [];
|
131 | };
|
132 |
|
133 | Suspense.prototype.render = function(props, state) {
|
134 | if (this._detachOnNextRender) {
|
135 |
|
136 |
|
137 |
|
138 | if (this._vnode._children)
|
139 | this._vnode._children[0] = detachedClone(this._detachOnNextRender);
|
140 | this._detachOnNextRender = null;
|
141 | }
|
142 |
|
143 |
|
144 | const fallback =
|
145 | state._suspended && createElement(Fragment, null, props.fallback);
|
146 | if (fallback) fallback._hydrating = null;
|
147 |
|
148 | return [
|
149 | createElement(Fragment, null, state._suspended ? null : props.children),
|
150 | fallback
|
151 | ];
|
152 | };
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 | export function suspended(vnode) {
|
172 | let component = vnode._parent._component;
|
173 | return component && component._suspended && component._suspended(vnode);
|
174 | }
|
175 |
|
176 | export function lazy(loader) {
|
177 | let prom;
|
178 | let component;
|
179 | let error;
|
180 |
|
181 | function Lazy(props) {
|
182 | if (!prom) {
|
183 | prom = loader();
|
184 | prom.then(
|
185 | exports => {
|
186 | component = exports.default || exports;
|
187 | },
|
188 | e => {
|
189 | error = e;
|
190 | }
|
191 | );
|
192 | }
|
193 |
|
194 | if (error) {
|
195 | throw error;
|
196 | }
|
197 |
|
198 | if (!component) {
|
199 | throw prom;
|
200 | }
|
201 |
|
202 | return createElement(component, props);
|
203 | }
|
204 |
|
205 | Lazy.displayName = 'Lazy';
|
206 | Lazy._forwarded = true;
|
207 | return Lazy;
|
208 | }
|