@koordinates/xstate-tree 4.6.6 → 4.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/builders.js +10 -2
- package/package.json +1 -1
package/lib/builders.js
CHANGED
|
@@ -180,11 +180,19 @@ exports.viewToMachine = viewToMachine;
|
|
|
180
180
|
* @returns an xstate-tree machine that will render the right machines based on the routing events
|
|
181
181
|
*/
|
|
182
182
|
function buildRoutingMachine(_routes, mappings) {
|
|
183
|
+
/**
|
|
184
|
+
* States in xstate can't contain dots, since the states are named after the routing events
|
|
185
|
+
* if the routing event contains a dot that will make a state with a dot in it
|
|
186
|
+
* this function sanitizes the event name to remove dots and is used for the state names and targets
|
|
187
|
+
*/
|
|
188
|
+
function sanitizeEventName(event) {
|
|
189
|
+
return event.replace(/\.([a-zA-Z])/g, (_, letter) => letter.toUpperCase());
|
|
190
|
+
}
|
|
183
191
|
const contentSlot = (0, slots_1.singleSlot)("Content");
|
|
184
192
|
const mappingsToStates = Object.entries(mappings).reduce((acc, [event, _machine]) => {
|
|
185
193
|
return {
|
|
186
194
|
...acc,
|
|
187
|
-
[event]: {
|
|
195
|
+
[sanitizeEventName(event)]: {
|
|
188
196
|
invoke: {
|
|
189
197
|
src: (_ctx, e) => {
|
|
190
198
|
return mappings[e.type];
|
|
@@ -197,7 +205,7 @@ function buildRoutingMachine(_routes, mappings) {
|
|
|
197
205
|
const mappingsToEvents = Object.keys(mappings).reduce((acc, event) => ({
|
|
198
206
|
...acc,
|
|
199
207
|
[event]: {
|
|
200
|
-
target: `.${event}`,
|
|
208
|
+
target: `.${sanitizeEventName(event)}`,
|
|
201
209
|
},
|
|
202
210
|
}), {});
|
|
203
211
|
const machine = (0, xstate_1.createMachine)({
|
package/package.json
CHANGED