I'm trying to follow the example from Lucy's website for using an "use reference" in invoke statement. I'm quite new to state machines in general so my terminology and expectations might be incorrect here - feel free to correct me.
Input:
use './utils' { getUsers }
state idle {
invoke(:getUsers) {
done => assign(users)
}
}
Output with @lucy/[email protected]
:
01 | import { createMachine, assign } from 'xstate';
02 | import { getUsers } from './utils';
03 |
04 | export default function({ context = {}, services } = {}) {
05 | return createMachine({
06 | context,
07 | states: {
08 | idle: {
09 | invoke: {
10 | src: 'getUsers',
11 | onDone: {
12 | actions: [
13 | assign({
14 | users: (context, event) => event.data
15 | })
16 | ]
17 | }
18 | }
19 | }
20 | }
21 | }, {
22 | services: {
23 | getUsers: services.getUsers
24 | }
25 | });
26 | }
Note that on the line 2 the imported getUsers
is an unused variable. It is not used on line 23.
I would expected the output to be:
22 | services: {
23 | getUsers,
24 | }
or maybe even
22 | services: {
23 | getUsers,
24 | ...services,
25 | }
Here is my custom webpack loader which applies a temporary work-around
module.exports = function(content) {
const callback = this.async();
import('@lucy/liblucy')
.then(({ ready, compileXstate }) => {
ready
.then(() => {
const { js } = compileXstate(content, this.resourcePath);
callback(undefined, applyFixes(js));
})
.catch(e => {
callback(
`Lucy loader failed to compileXstate: ${e.message}`
);
});
})
.catch(callback);
};
function applyFixes(input) {
const output = input.replace(/services\./gi, '');
console.log('input', input);
console.log('output', output);
return output;
}