Skip to content

Commit 96a3fc6

Browse files
mbassombasso
committed
fix #2 
1 parent 4662efd commit 96a3fc6

File tree

5 files changed

+738
-63
lines changed

5 files changed

+738
-63
lines changed

‎src/Wasm.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// @flow
2+
3+
import React from 'react';
4+
import compileWasm from './compileWasm';
5+
import type { WasmProps, WasmState, WasmParams } from './types';
6+
7+
export default class Wasm extends React.Component<WasmProps, WasmState> {
8+
static defaultProps = {
9+
url: null,
10+
bufferSource: null,
11+
importObject: {}
12+
};
13+
14+
state = {
15+
loading: true,
16+
error: null,
17+
data: null,
18+
// eslint-disable-next-line
19+
prevProps: {
20+
url: null,
21+
bufferSource: null
22+
}
23+
};
24+
25+
static getDerivedStateFromProps(props: WasmProps, state: WasmState) {
26+
const { url, bufferSource } = props;
27+
28+
if (
29+
url && url !== state.prevProps.url ||
30+
!url && bufferSource !== state.prevProps.bufferSource
31+
) {
32+
return {
33+
loading: true,
34+
error: null,
35+
data: null,
36+
prevProps: {
37+
url,
38+
bufferSource
39+
}
40+
};
41+
}
42+
43+
return null;
44+
}
45+
46+
componentDidMount() {
47+
const { url, bufferSource, importObject } = this.props;
48+
49+
this.loadModule({ url, bufferSource, importObject });
50+
}
51+
52+
componentDidUpdate(prevProps: WasmProps) {
53+
const { url, bufferSource, importObject } = this.props;
54+
55+
if (
56+
url && url !== prevProps.url ||
57+
!url && bufferSource !== prevProps.bufferSource
58+
) {
59+
this.loadModule({ url, bufferSource, importObject });
60+
}
61+
}
62+
63+
loadModule = ({
64+
url,
65+
bufferSource,
66+
importObject
67+
}: WasmParams) =>
68+
compileWasm({
69+
url,
70+
bufferSource,
71+
importObject
72+
})
73+
.then(({ module, instance }) => {
74+
this.setState({
75+
loading: false,
76+
error: null,
77+
data: {
78+
module,
79+
instance
80+
}
81+
});
82+
})
83+
.catch(error => {
84+
this.setState({
85+
loading: false,
86+
error,
87+
data: null
88+
});
89+
});
90+
91+
render() {
92+
const { children } = this.props;
93+
const { loading, error, data } = this.state;
94+
95+
return children({ loading, error, data });
96+
}
97+
}

‎src/index.js‎

Lines changed: 2 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,8 @@
11
// @flow
22

3-
import React from 'react';
3+
import Wasm from './Wasm';
44
import withWasmDefinition from './withWasm';
5-
import compileWasm from './compileWasm';
6-
import type { WasmProps, WasmState } from './types';
75

8-
export default class Wasm extends React.Component<WasmProps, WasmState> {
9-
static defaultProps = {
10-
url: null,
11-
bufferSource: null,
12-
importObject: {}
13-
};
14-
15-
state = {
16-
loading: true,
17-
error: null,
18-
data: null
19-
};
20-
21-
componentDidMount() {
22-
const { url, bufferSource, importObject } = this.props;
23-
24-
compileWasm({
25-
url,
26-
bufferSource,
27-
importObject
28-
})
29-
.then(({ module, instance }) => {
30-
this.setState({
31-
loading: false,
32-
error: null,
33-
data: {
34-
module,
35-
instance
36-
}
37-
});
38-
})
39-
.catch(error => {
40-
this.setState({
41-
loading: false,
42-
error,
43-
data: null
44-
});
45-
});
46-
}
47-
48-
render() {
49-
const { children } = this.props;
50-
51-
return children(this.state);
52-
}
53-
}
6+
export default Wasm;
547

558
export const withWasm = withWasmDefinition;

‎src/types.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,10 @@ export type WasmProps = {
2424
children: (RenderProps: RenderProps) => Node
2525
};
2626

27-
export type WasmState = RenderProps;
27+
export type WasmState = {
28+
...$Exact<RenderProps>,
29+
prevProps: {
30+
url?: ?string,
31+
bufferSource?: ?BufferSource,
32+
}
33+
};

‎test/__snapshots__/index.spec.js.snap‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,175 @@ exports[`react-wasm should load module from url with importObject 1`] = `
4848
</div>
4949
`;
5050

51+
exports[`react-wasm should not reinstantiate module if bufferSource changes but url is defined 1`] = `
52+
<div>
53+
loading:
54+
false
55+
error:
56+
null
57+
1 + 2 =
58+
3
59+
20 / 2 =
60+
10
61+
</div>
62+
`;
63+
64+
exports[`react-wasm should not reinstantiate module if bufferSource changes but url is defined 2`] = `
65+
<div>
66+
loading:
67+
false
68+
error:
69+
null
70+
1 + 2 =
71+
3
72+
20 / 2 =
73+
10
74+
</div>
75+
`;
76+
77+
exports[`react-wasm should not reinstantiate module if bufferSource changes but url is defined 3`] = `
78+
<div>
79+
loading:
80+
false
81+
error:
82+
null
83+
1 + 2 =
84+
3
85+
20 / 2 =
86+
10
87+
</div>
88+
`;
89+
90+
exports[`react-wasm should not reinstantiate module if bufferSource doesn't change 1`] = `
91+
<div>
92+
loading:
93+
false
94+
error:
95+
null
96+
1 + 2 =
97+
3
98+
20 / 2 =
99+
10
100+
</div>
101+
`;
102+
103+
exports[`react-wasm should not reinstantiate module if bufferSource doesn't change 2`] = `
104+
<div>
105+
loading:
106+
false
107+
error:
108+
null
109+
1 + 2 =
110+
3
111+
20 / 2 =
112+
10
113+
</div>
114+
`;
115+
116+
exports[`react-wasm should not reinstantiate module if bufferSource doesn't change 3`] = `
117+
<div>
118+
loading:
119+
false
120+
error:
121+
null
122+
1 + 2 =
123+
3
124+
20 / 2 =
125+
10
126+
</div>
127+
`;
128+
129+
exports[`react-wasm should not reinstantiate module if url doesn't change 1`] = `
130+
<div>
131+
loading:
132+
false
133+
error:
134+
null
135+
1 + 2 =
136+
3
137+
20 / 2 =
138+
10
139+
</div>
140+
`;
141+
142+
exports[`react-wasm should not reinstantiate module if url doesn't change 2`] = `
143+
<div>
144+
loading:
145+
false
146+
error:
147+
null
148+
1 + 2 =
149+
3
150+
20 / 2 =
151+
10
152+
</div>
153+
`;
154+
155+
exports[`react-wasm should not reinstantiate module if url doesn't change 3`] = `
156+
<div>
157+
loading:
158+
false
159+
error:
160+
null
161+
1 + 2 =
162+
3
163+
20 / 2 =
164+
10
165+
</div>
166+
`;
167+
168+
exports[`react-wasm should reinstantiate module on bufferSource change 1`] = `
169+
<div>
170+
loading:
171+
false
172+
error:
173+
null
174+
1 + 2 =
175+
3
176+
20 / 2 =
177+
10
178+
</div>
179+
`;
180+
181+
exports[`react-wasm should reinstantiate module on bufferSource change 2`] = `null`;
182+
183+
exports[`react-wasm should reinstantiate module on bufferSource change 3`] = `
184+
<div>
185+
loading:
186+
false
187+
error:
188+
null
189+
1 + 2 =
190+
3
191+
</div>
192+
`;
193+
194+
exports[`react-wasm should reinstantiate module on url change 1`] = `
195+
<div>
196+
loading:
197+
false
198+
error:
199+
null
200+
1 + 2 =
201+
3
202+
20 / 2 =
203+
10
204+
</div>
205+
`;
206+
207+
exports[`react-wasm should reinstantiate module on url change 2`] = `null`;
208+
209+
exports[`react-wasm should reinstantiate module on url change 3`] = `
210+
<div>
211+
loading:
212+
false
213+
error:
214+
null
215+
1 + 2 =
216+
3
217+
</div>
218+
`;
219+
51220
exports[`react-wasm should set error if bufferSource is provided with wrong type 1`] = `"{\\"loading\\":false,\\"error\\":{},\\"data\\":null}"`;
52221

53222
exports[`react-wasm should set error if invalid ArrayBuffer is provided 1`] = `"{\\"loading\\":false,\\"error\\":{},\\"data\\":null}"`;

0 commit comments

Comments
 (0)