@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.91

package/js/wiring/wires.factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"wires.factory.js","sources":["../../../src/wiring/wires.factory.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { RootXStoreState } from '../store/store.types';\nimport { MonadicFunction, NiladicFunction, SubObject } from '../utils/index';\nimport {\n  AnyWire,\n  PayloadFactoryData,\n  Wire,\n  WireParams,\n  WirePayload,\n  WireService,\n  WireServiceWithoutPayload\n} from './wiring.types';\n\n/**\n * Creates a wire that executes the function passed. This function will receive a\n * {@link WireParams} object.\n *\n * @param fn - The function to execute whenever a new value is emitted to the observable.\n * @returns The Wire function.\n * @public\n */\nexport function createWireFromFunction<Payload>(\n  fn: (parameters: WireParams<Payload>) => void\n): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(({ metadata, eventPayload }) => {\n      fn({ eventPayload, store, metadata });\n    });\n}\n\n/**\n * Creates a wire that commits a mutation to the store. This wire receives a function. This function\n * is used to get the actual payload value passed to mutation.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @param payloadFactory - A function that receives a {@link PayloadFactoryData | object}\n * with the Store state, getters, payload and metadata as parameter.\n * @returns A {@link AnyWire} wire that commits the mutation with the payload returned by the\n * payloadFactory.\n * @public\n */\nexport function wireCommit<Payload>(\n  mutation: string,\n  payloadFactory: (params: PayloadFactoryData<Payload>) => any\n): AnyWire;\n/**\n * Creates a wire that commits a mutation to the store. This wire can receive any value as payload.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @param staticPayload - A static payload to pass to the mutation.\n * @returns {@link AnyWire} A wire that commits the mutation with the staticPayload payload.\n * @public\n */\nexport function wireCommit(mutation: string, staticPayload: any): AnyWire;\n/**\n * Creates a wire that commits a mutation to the store. This wire will commit to the store the\n * payload that it receives in the observable.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @typeParam Payload - The type of the payload that this wire will receive\n * @returns {@link Wire} A wire that commits the mutation with the payload that it receives\n * in the observable.\n * @public\n */\nexport function wireCommit<Payload>(mutation: string): Wire<Payload>;\n// eslint-disable-next-line jsdoc/require-jsdoc\nexport function wireCommit<Payload>(mutation: string, payload?: Payload): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(createSubscriptionCallback(store, 'commit', mutation, payload));\n}\n\n/**\n * Creates a wire that commits a mutation to the store, but without any payload. This wire can\n * be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @returns {@link AnyWire} A wire that commits the mutation without any payload.\n * @public\n */\nexport function wireCommitWithoutPayload(mutation: string): AnyWire {\n  return (observable, store) => observable.subscribe(() => store.commit(mutation));\n}\n\n/**\n * Creates a wire that dispatch an action to the store. This wire receives a function. This function\n * is used to get the actual payload value passed to action.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @param payloadFactory - A function that receives a {@link PayloadFactoryData | object}\n * with the Store state, getters, payload and metadata as parameter.\n * @returns A {@link AnyWire} wire that dispatches the action with the payload returned by the\n * payloadFactory.\n * @public\n */\nexport function wireDispatch<Payload>(\n  action: string,\n  payloadFactory: (params: PayloadFactoryData<Payload>) => any\n): AnyWire;\n/**\n * Creates a wire that dispatches an action to the store. This wire can be used in every event,\n * as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @param staticPayload - A static payload to pass to the action which will be dispatched.\n * @returns {@link AnyWire} A wire that dispatches the action with the staticPayload payload.\n * @public\n */\nexport function wireDispatch(action: string, staticPayload: any): AnyWire;\n/**\n * Creates a wire that dispatches an action to the store. This wire will pass the payload\n * received in the observable to the action.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @typeParam Payload - The type of the payload that this wire will receive\n * @returns {@link Wire} A wire that dispatches the action with the payload that it receives\n * in the observable.\n * @public\n */\nexport function wireDispatch<Payload>(action: string): Wire<Payload>;\n// eslint-disable-next-line jsdoc/require-jsdoc\nexport function wireDispatch<Payload>(action: string, payload?: Payload): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(createSubscriptionCallback(store, 'dispatch', action, payload));\n}\n\n/**\n * Creates a wire that dispatches an action to the store, but without any payload. This wire can\n * be used in every event, as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @returns {@link AnyWire} A wire that dispatches the action without any payload.\n * @public\n */\nexport function wireDispatchWithoutPayload(action: string): AnyWire {\n  return (observable, store) => observable.subscribe(() => store.dispatch(action));\n}\n\n/**\n * Creates a wires factory that can create wires that will invoke the service methods.\n *\n * @param service - The service to invoke its methods.\n * @returns A factory to create wires that invoke the service methods.\n * @public\n */\nexport function wireService<SomeService>(\n  service: SomeService & SubObject<SomeService, MonadicFunction>\n): WireService<SubObject<SomeService, MonadicFunction>> {\n  return (method, payload?) => {\n    return observable =>\n      observable.subscribe(\n        payload !== undefined\n          ? () => service[method](payload)\n          : observablePayload => service[method](observablePayload.eventPayload)\n      );\n  };\n}\n\n/**\n * Creates a wires factory that can create wires that will invoke the service methods but\n * without payload.\n *\n * @param service - The service to invoke its methods.\n * @returns A factory to create wires that invoke the service methods without payload.\n * @public\n */\nexport function wireServiceWithoutPayload<SomeService>(\n  service: SomeService & SubObject<SomeService, NiladicFunction>\n): WireServiceWithoutPayload<SubObject<SomeService, NiladicFunction>> {\n  return method => {\n    return observable => observable.subscribe(() => service[method]());\n  };\n}\n\n/**\n * Creates the callback function for the {@link wireCommit} and {@link wireDispatch}\n * subscriptions. It can be based on the payload as function which retrieves the observable\n * payload from the store, a static payload or the event value from the observable.\n *\n * @param store - The {@link RootXStoreState} store.\n * @param commitOrDispatch - The executor over store. It can be `commit` or `dispatch`.\n * @param mutationOrAction - The mutation or action to commit or dispatch respectively.\n * @param payload - The payload for the store executor. It can be a function which retrieves the\n * payload from the store, a static payload or the event value from the observable.\n * @typeParam Payload - The type of the payload to get the observable event value type.\n * @returns A function to commit or dispatch a payload value over store.\n * @internal\n */\nfunction createSubscriptionCallback<Payload>(\n  store: Store<RootXStoreState>,\n  commitOrDispatch: 'commit' | 'dispatch',\n  mutationOrAction: string,\n  payload?: Payload\n): (observableValue: WirePayload<Payload>) => void {\n  const storeExecutor = store[commitOrDispatch];\n  return typeof payload === 'function'\n    ? wirePayload => {\n        return storeExecutor(\n          mutationOrAction,\n          payload({\n            state: store.state,\n            getters: store.getters,\n            ...wirePayload\n          })\n        );\n      }\n    : payload !== undefined\n    ? () => {\n        storeExecutor(mutationOrAction, payload);\n      }\n    : observableValue => {\n        storeExecutor(mutationOrAction, observableValue.eventPayload);\n      };\n}\n"],"names":[],"mappings":"AAaA;;;;;;;AAOG;AACG,SAAU,sBAAsB,CACpC,EAA6C,EAAA;AAE7C,IAAA,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAI;QAClD,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;AACxC,KAAC,CAAC,CAAC;AACP,CAAC;AAuCD;AACgB,SAAA,UAAU,CAAU,QAAgB,EAAE,OAAiB,EAAA;IACrE,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AACzF,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,wBAAwB,CAAC,QAAgB,EAAA;IACvD,OAAO,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AACnF,CAAC;AAuCD;AACgB,SAAA,YAAY,CAAU,MAAc,EAAE,OAAiB,EAAA;IACrE,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AACzF,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,0BAA0B,CAAC,MAAc,EAAA;IACvD,OAAO,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;AACnF,CAAC;AAED;;;;;;AAMG;AACG,SAAU,WAAW,CACzB,OAA8D,EAAA;AAE9D,IAAA,OAAO,CAAC,MAAM,EAAE,OAAQ,KAAI;QAC1B,OAAO,UAAU,IACf,UAAU,CAAC,SAAS,CAClB,OAAO,KAAK,SAAS;cACjB,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;AAChC,cAAE,iBAAiB,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC,CACzE,CAAC;AACN,KAAC,CAAC;AACJ,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,yBAAyB,CACvC,OAA8D,EAAA;IAE9D,OAAO,MAAM,IAAG;AACd,QAAA,OAAO,UAAU,IAAI,UAAU,CAAC,SAAS,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AACrE,KAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;AAaG;AACH,SAAS,0BAA0B,CACjC,KAA6B,EAC7B,gBAAuC,EACvC,gBAAwB,EACxB,OAAiB,EAAA;AAEjB,IAAA,MAAM,aAAa,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,OAAO,OAAO,KAAK,UAAU;UAChC,WAAW,IAAG;AACZ,YAAA,OAAO,aAAa,CAClB,gBAAgB,EAChB,OAAO,CAAC;gBACN,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;AACtB,gBAAA,GAAG,WAAW;AACf,aAAA,CAAC,CACH,CAAC;SACH;UACD,OAAO,KAAK,SAAS;cACrB,MAAK;AACH,gBAAA,aAAa,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;aAC1C;cACD,eAAe,IAAG;AAChB,gBAAA,aAAa,CAAC,gBAAgB,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;AAChE,aAAC,CAAC;AACR;;;;"}
+{"version":3,"file":"wires.factory.js","sources":["../../../src/wiring/wires.factory.ts"],"sourcesContent":["import type { Store } from 'vuex'\nimport type { RootXStoreState } from '../store/store.types'\nimport type { MonadicFunction, NiladicFunction, SubObject } from '../utils/index'\nimport type {\n  AnyWire,\n  PayloadFactoryData,\n  Wire,\n  WireParams,\n  WirePayload,\n  WireService,\n  WireServiceWithoutPayload,\n} from './wiring.types'\n\n/**\n * Creates a wire that executes the function passed. This function will receive a\n * {@link WireParams} object.\n *\n * @param fn - The function to execute whenever a new value is emitted to the observable.\n * @returns The Wire function.\n * @public\n */\nexport function createWireFromFunction<Payload>(\n  fn: (parameters: WireParams<Payload>) => void,\n): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(({ metadata, eventPayload }) => {\n      fn({ eventPayload, store, metadata })\n    })\n}\n\n/**\n * Creates a wire that commits a mutation to the store. This wire receives a function. This function\n * is used to get the actual payload value passed to mutation.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @param payloadFactory - A function that receives a {@link PayloadFactoryData | object}\n * with the Store state, getters, payload and metadata as parameter.\n * @returns A {@link AnyWire} wire that commits the mutation with the payload returned by the\n * payloadFactory.\n * @public\n */\nexport function wireCommit<Payload>(\n  mutation: string,\n  payloadFactory: (params: PayloadFactoryData<Payload>) => any,\n): AnyWire\n/**\n * Creates a wire that commits a mutation to the store. This wire can receive any value as payload.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @param staticPayload - A static payload to pass to the mutation.\n * @returns {@link AnyWire} A wire that commits the mutation with the staticPayload payload.\n * @public\n */\nexport function wireCommit(mutation: string, staticPayload: any): AnyWire\n/**\n * Creates a wire that commits a mutation to the store. This wire will commit to the store the\n * payload that it receives in the observable.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @typeParam Payload - The type of the payload that this wire will receive\n * @returns {@link Wire} A wire that commits the mutation with the payload that it receives\n * in the observable.\n * @public\n */\nexport function wireCommit<Payload>(mutation: string): Wire<Payload>\n\nexport function wireCommit<Payload>(mutation: string, payload?: Payload): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(createSubscriptionCallback(store, 'commit', mutation, payload))\n}\n\n/**\n * Creates a wire that commits a mutation to the store, but without any payload. This wire can\n * be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @returns {@link AnyWire} A wire that commits the mutation without any payload.\n * @public\n */\nexport function wireCommitWithoutPayload(mutation: string): AnyWire {\n  return (observable, store) => observable.subscribe(() => store.commit(mutation))\n}\n\n/**\n * Creates a wire that dispatch an action to the store. This wire receives a function. This function\n * is used to get the actual payload value passed to action.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @param payloadFactory - A function that receives a {@link PayloadFactoryData | object}\n * with the Store state, getters, payload and metadata as parameter.\n * @returns A {@link AnyWire} wire that dispatches the action with the payload returned by the\n * payloadFactory.\n * @public\n */\nexport function wireDispatch<Payload>(\n  action: string,\n  payloadFactory: (params: PayloadFactoryData<Payload>) => any,\n): AnyWire\n/**\n * Creates a wire that dispatches an action to the store. This wire can be used in every event,\n * as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @param staticPayload - A static payload to pass to the action which will be dispatched.\n * @returns {@link AnyWire} A wire that dispatches the action with the staticPayload payload.\n * @public\n */\nexport function wireDispatch(action: string, staticPayload: any): AnyWire\n/**\n * Creates a wire that dispatches an action to the store. This wire will pass the payload\n * received in the observable to the action.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @typeParam Payload - The type of the payload that this wire will receive\n * @returns {@link Wire} A wire that dispatches the action with the payload that it receives\n * in the observable.\n * @public\n */\nexport function wireDispatch<Payload>(action: string): Wire<Payload>\n\nexport function wireDispatch<Payload>(action: string, payload?: Payload): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(createSubscriptionCallback(store, 'dispatch', action, payload))\n}\n\n/**\n * Creates a wire that dispatches an action to the store, but without any payload. This wire can\n * be used in every event, as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @returns {@link AnyWire} A wire that dispatches the action without any payload.\n * @public\n */\nexport function wireDispatchWithoutPayload(action: string): AnyWire {\n  // eslint-disable-next-line ts/no-unsafe-return,ts/no-misused-promises\n  return (observable, store) => observable.subscribe(async () => store.dispatch(action))\n}\n\n/**\n * Creates a wires factory that can create wires that will invoke the service methods.\n *\n * @param service - The service to invoke its methods.\n * @returns A factory to create wires that invoke the service methods.\n * @public\n */\nexport function wireService<SomeService>(\n  service: SomeService & SubObject<SomeService, MonadicFunction>,\n): WireService<SubObject<SomeService, MonadicFunction>> {\n  return (method, payload?) => {\n    return observable =>\n      observable.subscribe(\n        payload !== undefined\n          ? // eslint-disable-next-line ts/no-unsafe-return\n            () => service[method](payload)\n          : // eslint-disable-next-line ts/no-unsafe-return\n            observablePayload => service[method](observablePayload.eventPayload),\n      )\n  }\n}\n\n/**\n * Creates a wires factory that can create wires that will invoke the service methods but\n * without payload.\n *\n * @param service - The service to invoke its methods.\n * @returns A factory to create wires that invoke the service methods without payload.\n * @public\n */\nexport function wireServiceWithoutPayload<SomeService>(\n  service: SomeService & SubObject<SomeService, NiladicFunction>,\n): WireServiceWithoutPayload<SubObject<SomeService, NiladicFunction>> {\n  return method => {\n    // eslint-disable-next-line ts/no-unsafe-return\n    return observable => observable.subscribe(() => service[method]())\n  }\n}\n\n/**\n * Creates the callback function for the {@link wireCommit} and {@link wireDispatch}\n * subscriptions. It can be based on the payload as function which retrieves the observable\n * payload from the store, a static payload or the event value from the observable.\n *\n * @param store - The {@link RootXStoreState} store.\n * @param commitOrDispatch - The executor over store. It can be `commit` or `dispatch`.\n * @param mutationOrAction - The mutation or action to commit or dispatch respectively.\n * @param payload - The payload for the store executor. It can be a function which retrieves the\n * payload from the store, a static payload or the event value from the observable.\n * @typeParam Payload - The type of the payload to get the observable event value type.\n * @returns A function to commit or dispatch a payload value over store.\n * @internal\n */\nfunction createSubscriptionCallback<Payload>(\n  store: Store<RootXStoreState>,\n  commitOrDispatch: 'commit' | 'dispatch',\n  mutationOrAction: string,\n  payload?: Payload,\n): (observableValue: WirePayload<Payload>) => void {\n  const storeExecutor = store[commitOrDispatch]\n  return typeof payload === 'function'\n    ? async wirePayload => {\n        // eslint-disable-next-line ts/no-unsafe-return\n        return storeExecutor(\n          mutationOrAction,\n          // eslint-disable-next-line ts/no-unsafe-call\n          payload({\n            state: store.state,\n            // eslint-disable-next-line ts/no-unsafe-assignment\n            getters: store.getters,\n            ...wirePayload,\n          }),\n        )\n      }\n    : payload !== undefined\n      ? () => {\n          void storeExecutor(mutationOrAction, payload)\n        }\n      : observableValue => {\n          void storeExecutor(mutationOrAction, observableValue.eventPayload)\n        }\n}\n"],"names":[],"mappings":"AAaA;;;;;;;AAOG;AACG,SAAU,sBAAsB,CACpC,EAA6C,EAAA;AAE7C,IAAA,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAI;QAClD,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAA;AACvC,KAAC,CAAC,CAAA;AACN,CAAC;AAwCe,SAAA,UAAU,CAAU,QAAgB,EAAE,OAAiB,EAAA;IACrE,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;AACxF,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,wBAAwB,CAAC,QAAgB,EAAA;IACvD,OAAO,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;AAClF,CAAC;AAwCe,SAAA,YAAY,CAAU,MAAc,EAAE,OAAiB,EAAA;IACrE,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AACxF,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,0BAA0B,CAAC,MAAc,EAAA;;IAEvD,OAAO,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS,CAAC,YAAY,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAA;AACxF,CAAC;AAED;;;;;;AAMG;AACG,SAAU,WAAW,CACzB,OAA8D,EAAA;AAE9D,IAAA,OAAO,CAAC,MAAM,EAAE,OAAQ,KAAI;QAC1B,OAAO,UAAU,IACf,UAAU,CAAC,SAAS,CAClB,OAAO,KAAK,SAAS;AACnB;gBACE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;AAChC;AACE;AAAA,gBAAA,iBAAiB,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC,CACzE,CAAA;AACL,KAAC,CAAA;AACH,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,yBAAyB,CACvC,OAA8D,EAAA;IAE9D,OAAO,MAAM,IAAG;;AAEd,QAAA,OAAO,UAAU,IAAI,UAAU,CAAC,SAAS,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AACpE,KAAC,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;AAaG;AACH,SAAS,0BAA0B,CACjC,KAA6B,EAC7B,gBAAuC,EACvC,gBAAwB,EACxB,OAAiB,EAAA;AAEjB,IAAA,MAAM,aAAa,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAA;IAC7C,OAAO,OAAO,OAAO,KAAK,UAAU;AAClC,UAAE,OAAM,WAAW,KAAG;;YAElB,OAAO,aAAa,CAClB,gBAAgB;;AAEhB,YAAA,OAAO,CAAC;gBACN,KAAK,EAAE,KAAK,CAAC,KAAK;;gBAElB,OAAO,EAAE,KAAK,CAAC,OAAO;AACtB,gBAAA,GAAG,WAAW;AACf,aAAA,CAAC,CACH,CAAA;SACF;UACD,OAAO,KAAK,SAAS;cACnB,MAAK;AACH,gBAAA,KAAK,aAAa,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAA;aAC9C;cACD,eAAe,IAAG;gBAChB,KAAK,aAAa,CAAC,gBAAgB,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;AACpE,aAAC,CAAA;AACT;;;;"}

package/js/wiring/wires.operators.js

@@ -101,7 +101,7 @@ function throttle(wire, timeInMs, options = {}) {
     return (observable, store, on) => {
         return wire(observable.pipe(throttle$1(() => createTimer(normalizeTime(timeInMs, store), options, on), {
             leading: true,
-            trailing: true
+            trailing: true,
         })), store, on);
     };
 }
@@ -119,7 +119,7 @@ function throttle(wire, timeInMs, options = {}) {
 function mapWire(toWire, mapFn) {
     return (observable, ...restWireParams) => toWire(observable.pipe(map(({ eventPayload, ...restWirePayload }) => ({
         eventPayload: mapFn(eventPayload),
-        ...restWirePayload
+        ...restWirePayload,
     }))), ...restWireParams);
 }
 

package/js/wiring/wires.operators.js.map

@@ -1 +1 @@
-{"version":3,"file":"wires.operators.js","sources":["../../../src/wiring/wires.operators.ts"],"sourcesContent":["import {\n  debounce as debounceRx,\n  filter as filterRx,\n  map,\n  throttle as throttleRx\n} from 'rxjs/operators';\nimport { XModuleName } from '../x-modules/x-modules.types';\nimport { createTimer, normalizeTime } from './wires-operators.utils';\nimport { TimedWireOperatorOptions, TimeSelector, Wire, WireParams } from './wiring.types';\n\n/**\n * Creates a {@link Wire} that is only executed whenever the condition in the filterFn is true.\n *\n * @param wire - The wire to filter.\n * @param filterFn - A function which must return a boolean and that will be executed every time\n * the wire is called.\n * @returns The Wire function filter.\n *\n * @public\n */\nexport function filter<Payload>(\n  wire: Wire<Payload>,\n  filterFn: (parameters: WireParams<Payload>) => boolean\n): Wire<Payload> {\n  return (observable, store, on) =>\n    wire(observable.pipe(filterRx(wirePayload => filterFn({ ...wirePayload, store }))), store, on);\n}\n\n/**\n * Creates a {@link Wire} that is only executed when the payload is truthy. A truthy value is\n * whatever is not a {@link https://developer.mozilla.org/en-US/docs/Glossary/Falsy | falsy value}.\n *\n * @param wire - The wire to avoid executing when the payload is falsy.\n * @returns The Wire function falsy filter.\n *\n * @public\n */\nexport function filterFalsyPayload<Payload>(\n  wire: Wire<Exclude<Payload, null | undefined | false | 0 | ''>>\n): Wire<Payload> {\n  return filter(wire, ({ eventPayload }) => !!eventPayload) as Wire<Payload>;\n}\n\n/**\n * Creates a {@link Wire} that is only executed when the payload is a\n * {@link https://developer.mozilla.org/en-US/docs/Glossary/Falsy | falsy value}.\n *\n * @param wire - The wire to avoid executing when the payload is truthy.\n * @returns The Wire function truthy filter.\n *\n * @public\n */\nexport function filterTruthyPayload<Payload>(wire: Wire<Payload>): Wire<Payload> {\n  return filter(wire, ({ eventPayload }) => !eventPayload);\n}\n\n/**\n * Creates a {@link Wire} that is only executed if the event is emitted from a {@link XModule}\n * that is included\n * in the `whitelist` array passed as parameter.\n *\n * @param wire - The wire to filter using the whitelist.\n * @param whitelist - An array of {@link XModuleName} or null.\n * @returns The Wire function with whitelisted modules filter.\n *\n * @public\n */\nexport function filterWhitelistedModules<Payload>(\n  wire: Wire<Payload>,\n  whitelist: Array<XModuleName | null>\n): Wire<Payload> {\n  const whitelistSet = new Set(whitelist);\n  return filter(wire, ({ metadata }) => whitelistSet.has(metadata.moduleName));\n}\n\n/**\n * Creates a {@link Wire} that is only executed if the event is emitted from a {@link XModule}\n * that is NOT included\n * in the `blacklist` array passed as parameter.\n *\n * @param wire - The wire to filter using the whitelist.\n * @param blacklist - An array of {@link XModuleName} or null.\n * @returns The Wire function with blacklisted modules filter.\n *\n * @public\n */\nexport function filterBlacklistedModules<Payload>(\n  wire: Wire<Payload>,\n  blacklist: Array<XModuleName | null>\n): Wire<Payload> {\n  const blacklistSet = new Set(blacklist);\n  return filter(wire, ({ metadata }) => !blacklistSet.has(metadata.moduleName));\n}\n\n/**\n * Creates a debounced {@link Wire}. Being debounced means that it will only be executed after\n * the time given by `timeInMs` has passed without invoking it.\n *\n * @param wire - The wire to debounce.\n * @param timeInMs - The time in milliseconds to debounce the wire execution or a function to\n * retrieve it from the store.\n * @param options - Options to configure this wire with, like an event to force it or cancel it.\n * @returns The Wire function with a debounced timing.\n *\n * @public\n */\nexport function debounce<Payload>(\n  wire: Wire<Payload>,\n  timeInMs: TimeSelector | number,\n  options: TimedWireOperatorOptions = {}\n): Wire<Payload> {\n  return (observable, store, on) => {\n    return wire(\n      observable.pipe(debounceRx(() => createTimer(normalizeTime(timeInMs, store), options, on))),\n      store,\n      on\n    );\n  };\n}\n\n/**\n * Creates a throttled {@link Wire}. Being throttled means that it will only be executed once\n * every couple of milliseconds given by the `timeInMs` parameter.\n *\n * @param wire - The wire to throttle.\n * @param timeInMs - The time in milliseconds to throttle the wire execution or a function to\n * retrieve it from the store.\n * @param options - Options to configure this wire with, like an event to force it or cancel it.\n * @returns The Wire function with a throttle timing.\n *\n * @public\n */\nexport function throttle<Payload>(\n  wire: Wire<Payload>,\n  timeInMs: TimeSelector | number,\n  options: TimedWireOperatorOptions = {}\n): Wire<Payload> {\n  return (observable, store, on) => {\n    return wire(\n      observable.pipe(\n        throttleRx(() => createTimer(normalizeTime(timeInMs, store), options, on), {\n          leading: true,\n          trailing: true\n        })\n      ),\n      store,\n      on\n    );\n  };\n}\n\n/**\n * Creates a {@link Wire} from other `toWire` wire. It uses `mapFn` to transform the\n * `FromPayload` received to `ToPayload` which `toWire` requires. This is\n * useful to reuse wires in different Events where the payload doesn't fit exactly.\n *\n * @param toWire - The wire which the new Wire is created from.\n * @param mapFn - Function to map the payload from `FromPayload` to `ToPayload`.\n * @returns A new {@link Wire}.\n *\n * @public\n */\nexport function mapWire<FromPayload, ToPayload>(\n  toWire: Wire<ToPayload>,\n  mapFn: (payload: FromPayload) => ToPayload\n): Wire<FromPayload> {\n  return (observable, ...restWireParams) =>\n    toWire(\n      observable.pipe(\n        map(({ eventPayload, ...restWirePayload }) => ({\n          eventPayload: mapFn(eventPayload),\n          ...restWirePayload\n        }))\n      ),\n      ...restWireParams\n    );\n}\n"],"names":["filterRx","debounceRx","throttleRx"],"mappings":"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"}
+{"version":3,"file":"wires.operators.js","sources":["../../../src/wiring/wires.operators.ts"],"sourcesContent":["import type { XModuleName } from '../x-modules/x-modules.types'\nimport type { TimedWireOperatorOptions, TimeSelector, Wire, WireParams } from './wiring.types'\nimport {\n  debounce as debounceRx,\n  filter as filterRx,\n  map,\n  throttle as throttleRx,\n} from 'rxjs/operators'\nimport { createTimer, normalizeTime } from './wires-operators.utils'\n\n/**\n * Creates a {@link Wire} that is only executed whenever the condition in the filterFn is true.\n *\n * @param wire - The wire to filter.\n * @param filterFn - A function which must return a boolean and that will be executed every time\n * the wire is called.\n * @returns The Wire function filter.\n *\n * @public\n */\nexport function filter<Payload>(\n  wire: Wire<Payload>,\n  filterFn: (parameters: WireParams<Payload>) => boolean,\n): Wire<Payload> {\n  return (observable, store, on) =>\n    wire(observable.pipe(filterRx(wirePayload => filterFn({ ...wirePayload, store }))), store, on)\n}\n\n/**\n * Creates a {@link Wire} that is only executed when the payload is truthy. A truthy value is\n * whatever is not a {@link https://developer.mozilla.org/en-US/docs/Glossary/Falsy | falsy value}.\n *\n * @param wire - The wire to avoid executing when the payload is falsy.\n * @returns The Wire function falsy filter.\n *\n * @public\n */\nexport function filterFalsyPayload<Payload>(\n  wire: Wire<Exclude<Payload, null | undefined | false | 0 | ''>>,\n): Wire<Payload> {\n  return filter(wire, ({ eventPayload }) => !!eventPayload) as Wire<Payload>\n}\n\n/**\n * Creates a {@link Wire} that is only executed when the payload is a\n * {@link https://developer.mozilla.org/en-US/docs/Glossary/Falsy | falsy value}.\n *\n * @param wire - The wire to avoid executing when the payload is truthy.\n * @returns The Wire function truthy filter.\n *\n * @public\n */\nexport function filterTruthyPayload<Payload>(wire: Wire<Payload>): Wire<Payload> {\n  return filter(wire, ({ eventPayload }) => !eventPayload)\n}\n\n/**\n * Creates a {@link Wire} that is only executed if the event is emitted from a {@link XModule}\n * that is included\n * in the `whitelist` array passed as parameter.\n *\n * @param wire - The wire to filter using the whitelist.\n * @param whitelist - An array of {@link XModuleName} or null.\n * @returns The Wire function with whitelisted modules filter.\n *\n * @public\n */\nexport function filterWhitelistedModules<Payload>(\n  wire: Wire<Payload>,\n  whitelist: Array<XModuleName | null>,\n): Wire<Payload> {\n  const whitelistSet = new Set(whitelist)\n  return filter(wire, ({ metadata }) => whitelistSet.has(metadata.moduleName))\n}\n\n/**\n * Creates a {@link Wire} that is only executed if the event is emitted from a {@link XModule}\n * that is NOT included\n * in the `blacklist` array passed as parameter.\n *\n * @param wire - The wire to filter using the whitelist.\n * @param blacklist - An array of {@link XModuleName} or null.\n * @returns The Wire function with blacklisted modules filter.\n *\n * @public\n */\nexport function filterBlacklistedModules<Payload>(\n  wire: Wire<Payload>,\n  blacklist: Array<XModuleName | null>,\n): Wire<Payload> {\n  const blacklistSet = new Set(blacklist)\n  return filter(wire, ({ metadata }) => !blacklistSet.has(metadata.moduleName))\n}\n\n/**\n * Creates a debounced {@link Wire}. Being debounced means that it will only be executed after\n * the time given by `timeInMs` has passed without invoking it.\n *\n * @param wire - The wire to debounce.\n * @param timeInMs - The time in milliseconds to debounce the wire execution or a function to\n * retrieve it from the store.\n * @param options - Options to configure this wire with, like an event to force it or cancel it.\n * @returns The Wire function with a debounced timing.\n *\n * @public\n */\nexport function debounce<Payload>(\n  wire: Wire<Payload>,\n  timeInMs: TimeSelector | number,\n  options: TimedWireOperatorOptions = {},\n): Wire<Payload> {\n  return (observable, store, on) => {\n    return wire(\n      observable.pipe(debounceRx(() => createTimer(normalizeTime(timeInMs, store), options, on))),\n      store,\n      on,\n    )\n  }\n}\n\n/**\n * Creates a throttled {@link Wire}. Being throttled means that it will only be executed once\n * every couple of milliseconds given by the `timeInMs` parameter.\n *\n * @param wire - The wire to throttle.\n * @param timeInMs - The time in milliseconds to throttle the wire execution or a function to\n * retrieve it from the store.\n * @param options - Options to configure this wire with, like an event to force it or cancel it.\n * @returns The Wire function with a throttle timing.\n *\n * @public\n */\nexport function throttle<Payload>(\n  wire: Wire<Payload>,\n  timeInMs: TimeSelector | number,\n  options: TimedWireOperatorOptions = {},\n): Wire<Payload> {\n  return (observable, store, on) => {\n    return wire(\n      observable.pipe(\n        throttleRx(() => createTimer(normalizeTime(timeInMs, store), options, on), {\n          leading: true,\n          trailing: true,\n        }),\n      ),\n      store,\n      on,\n    )\n  }\n}\n\n/**\n * Creates a {@link Wire} from other `toWire` wire. It uses `mapFn` to transform the\n * `FromPayload` received to `ToPayload` which `toWire` requires. This is\n * useful to reuse wires in different Events where the payload doesn't fit exactly.\n *\n * @param toWire - The wire which the new Wire is created from.\n * @param mapFn - Function to map the payload from `FromPayload` to `ToPayload`.\n * @returns A new {@link Wire}.\n *\n * @public\n */\nexport function mapWire<FromPayload, ToPayload>(\n  toWire: Wire<ToPayload>,\n  mapFn: (payload: FromPayload) => ToPayload,\n): Wire<FromPayload> {\n  return (observable, ...restWireParams) =>\n    toWire(\n      observable.pipe(\n        map(({ eventPayload, ...restWirePayload }) => ({\n          eventPayload: mapFn(eventPayload),\n          ...restWirePayload,\n        })),\n      ),\n      ...restWireParams,\n    )\n}\n"],"names":["filterRx","debounceRx","throttleRx"],"mappings":";;;AAUA;;;;;;;;;AASG;AACa,SAAA,MAAM,CACpB,IAAmB,EACnB,QAAsD,EAAA;AAEtD,IAAA,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAACA,QAAQ,CAAC,WAAW,IAAI,QAAQ,CAAC,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAA;AAClG,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,kBAAkB,CAChC,IAA+D,EAAA;AAE/D,IAAA,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,YAAY,CAAkB,CAAA;AAC5E,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,mBAAmB,CAAU,IAAmB,EAAA;AAC9D,IAAA,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,CAAA;AAC1D,CAAC;AAED;;;;;;;;;;AAUG;AACa,SAAA,wBAAwB,CACtC,IAAmB,EACnB,SAAoC,EAAA;AAEpC,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAA;IACvC,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAA;AAC9E,CAAC;AAED;;;;;;;;;;AAUG;AACa,SAAA,wBAAwB,CACtC,IAAmB,EACnB,SAAoC,EAAA;AAEpC,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAA;IACvC,OAAO,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAA;AAC/E,CAAC;AAED;;;;;;;;;;;AAWG;AACG,SAAU,QAAQ,CACtB,IAAmB,EACnB,QAA+B,EAC/B,UAAoC,EAAE,EAAA;AAEtC,IAAA,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAI;AAC/B,QAAA,OAAO,IAAI,CACT,UAAU,CAAC,IAAI,CAACC,UAAU,CAAC,MAAM,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,EAC3F,KAAK,EACL,EAAE,CACH,CAAA;AACH,KAAC,CAAA;AACH,CAAC;AAED;;;;;;;;;;;AAWG;AACG,SAAU,QAAQ,CACtB,IAAmB,EACnB,QAA+B,EAC/B,UAAoC,EAAE,EAAA;AAEtC,IAAA,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAI;QAC/B,OAAO,IAAI,CACT,UAAU,CAAC,IAAI,CACbC,UAAU,CAAC,MAAM,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE;AACzE,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH,EACD,KAAK,EACL,EAAE,CACH,CAAA;AACH,KAAC,CAAA;AACH,CAAC;AAED;;;;;;;;;;AAUG;AACa,SAAA,OAAO,CACrB,MAAuB,EACvB,KAA0C,EAAA;IAE1C,OAAO,CAAC,UAAU,EAAE,GAAG,cAAc,KACnC,MAAM,CACJ,UAAU,CAAC,IAAI,CACb,GAAG,CAAC,CAAC,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,MAAM;AAC7C,QAAA,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;AACjC,QAAA,GAAG,eAAe;AACnB,KAAA,CAAC,CAAC,CACJ,EACD,GAAG,cAAc,CAClB,CAAA;AACL;;;;"}

package/js/wiring/wiring.utils.js

@@ -27,7 +27,7 @@ function createWiring(wiring) {
 function getStateAndGettersFromModule(state, getters, moduleName) {
     return {
         state: state.x[moduleName],
-        getters: getGettersProxy(getters, moduleName)
+        getters: getGettersProxy(getters, moduleName),
     };
 }
 

package/js/wiring/wiring.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.utils.js","sources":["../../../src/wiring/wiring.utils.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { RootXStoreState, StoreModuleStateAndGetters } from '../store/store.types';\nimport { getGettersProxy } from '../store/utils/getters-proxy.utils';\nimport { ExtractState, XModuleName } from '../x-modules/x-modules.types';\nimport { Wiring } from './wiring.types';\n\n/**\n * Util function to generate type-safe wiring.\n * If TypeScript ever accepts the PR about generic type inference this function can be removed.\n *\n * @param wiring - The wiring to create.\n * @returns Type-safe wiring.\n *\n * @public\n */\nexport function createWiring<T extends Partial<Wiring>>(wiring: T): T {\n  return wiring;\n}\n\n/**\n * Returns an object with the getters and state of a module of store defined by the moduleName\n * parameter.\n *\n * @param state - The Vuex store State.\n * @param getters - The Vuex store Getters.\n * @param moduleName - The {@link XModuleName} of the module.\n * @returns The {@link StoreModuleStateAndGetters} with the Getters and the State of the\n * {@link XStoreModule | Store Module} defined by moduleName.\n *\n * @public\n */\nexport function getStateAndGettersFromModule<ModuleName extends XModuleName>(\n  state: RootXStoreState,\n  getters: Dictionary,\n  moduleName: ModuleName\n): StoreModuleStateAndGetters<ModuleName> {\n  return {\n    state: state.x[moduleName] as unknown as ExtractState<ModuleName>,\n    getters: getGettersProxy(getters, moduleName)\n  };\n}\n"],"names":[],"mappings":";;AAMA;;;;;;;;AAQG;AACG,SAAU,YAAY,CAA4B,MAAS,EAAA;AAC/D,IAAA,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;;;;;;;AAWG;SACa,4BAA4B,CAC1C,KAAsB,EACtB,OAAmB,EACnB,UAAsB,EAAA;IAEtB,OAAO;AACL,QAAA,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAwC;AACjE,QAAA,OAAO,EAAE,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;KAC9C,CAAC;AACJ;;;;"}
+{"version":3,"file":"wiring.utils.js","sources":["../../../src/wiring/wiring.utils.ts"],"sourcesContent":["import type { Dictionary } from '@empathyco/x-utils'\nimport type { RootXStoreState, StoreModuleStateAndGetters } from '../store/store.types'\nimport type { ExtractState, XModuleName } from '../x-modules/x-modules.types'\nimport type { Wiring } from './wiring.types'\nimport { getGettersProxy } from '../store/utils/getters-proxy.utils'\n\n/**\n * Util function to generate type-safe wiring.\n * If TypeScript ever accepts the PR about generic type inference this function can be removed.\n *\n * @param wiring - The wiring to create.\n * @returns Type-safe wiring.\n *\n * @public\n */\nexport function createWiring<T extends Partial<Wiring>>(wiring: T): T {\n  return wiring\n}\n\n/**\n * Returns an object with the getters and state of a module of store defined by the moduleName\n * parameter.\n *\n * @param state - The Vuex store State.\n * @param getters - The Vuex store Getters.\n * @param moduleName - The {@link XModuleName} of the module.\n * @returns The {@link StoreModuleStateAndGetters} with the Getters and the State of the\n * {@link XStoreModule | Store Module} defined by moduleName.\n *\n * @public\n */\nexport function getStateAndGettersFromModule<ModuleName extends XModuleName>(\n  state: RootXStoreState,\n  getters: Dictionary,\n  moduleName: ModuleName,\n): StoreModuleStateAndGetters<ModuleName> {\n  return {\n    state: state.x[moduleName] as unknown as ExtractState<ModuleName>,\n    getters: getGettersProxy(getters, moduleName),\n  }\n}\n"],"names":[],"mappings":";;AAMA;;;;;;;;AAQG;AACG,SAAU,YAAY,CAA4B,MAAS,EAAA;AAC/D,IAAA,OAAO,MAAM,CAAA;AACf,CAAC;AAED;;;;;;;;;;;AAWG;SACa,4BAA4B,CAC1C,KAAsB,EACtB,OAAmB,EACnB,UAAsB,EAAA;IAEtB,OAAO;AACL,QAAA,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAwC;AACjE,QAAA,OAAO,EAAE,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;KAC9C,CAAA;AACH;;;;"}

package/js/x-installer/api/base-api.js

@@ -18,12 +18,12 @@ class BaseXAPI {
      * @param productId - The product id that was added to cart.
      */
     addProductToCart(productId) {
-        this.bus?.emit('UserClickedPDPAddToCart', productId);
+        void this.bus?.emit('UserClickedPDPAddToCart', productId);
     }
     /**
-     * Setter for the {@link @empathyco/x-bus#XBus}.
+     * Setter for the XBus.
      *
-     * @param bus - The {@link @empathyco/x-bus#XBus} received to emit events.
+     * @param bus - The XBus received to emit events.
      *
      * @internal
      */
@@ -77,9 +77,9 @@ class BaseXAPI {
      */
     search(query) {
         if (query) {
-            this.bus?.emit('UserAcceptedAQuery', query);
+            void this.bus?.emit('UserAcceptedAQuery', query);
         }
-        this.bus?.emit('UserClickedOpenX');
+        void this.bus?.emit('UserClickedOpenX', undefined);
     }
     /**
      * Initializes the Application passing the {@link SnippetConfig}.
@@ -96,7 +96,6 @@ class BaseXAPI {
             await this?.initCallback(config);
         }
         else {
-            //eslint-disable-next-line no-console
             console.warn('We know X is awesome, but you only need to initialize it once.');
         }
     }
@@ -106,7 +105,7 @@ class BaseXAPI {
      * @public
      */
     close() {
-        this.bus?.emit('UserClickedCloseX');
+        void this.bus?.emit('UserClickedCloseX', undefined);
     }
 }
 

package/js/x-installer/api/base-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-api.js","sources":["../../../../src/x-installer/api/base-api.ts"],"sourcesContent":["import { XBus } from '@empathyco/x-bus';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api.types';\n\n/**\n * Default implementation for {@link XAPI}.\n *\n * @public\n */\nexport class BaseXAPI implements XAPI {\n  /**\n   * Flag to check if the initialization was already done.\n   *\n   * @internal\n   */\n  protected isXInitialized = false;\n\n  /**\n   * Bus for emitting and listening events.\n   *\n   * @internal\n   */\n  protected bus!: XBus<XEventsTypes, WireMetadata>;\n\n  /**\n   * The callback to call from the init method. The logic of initialization is out of this API\n   * since this API is just a facade.\n   *\n   * @internal\n   */\n  protected initCallback!: (config: SnippetConfig) => any;\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  public getSnippetConfig!: () => SnippetConfig;\n\n  /**\n   * Callback that allows to update the snippet config. The logic of initialization is out of this\n   * API since this API is just a facade.\n   *\n   * @internal\n   */\n  protected snippetCallback!: (config: Partial<SnippetConfig>) => void;\n\n  /**\n   * Tracks that a product was added to cart from PDP.\n   *\n   * @param productId - The product id that was added to cart.\n   */\n  addProductToCart(productId?: string): void {\n    this.bus?.emit('UserClickedPDPAddToCart', productId);\n  }\n\n  /**\n   * Setter for the {@link @empathyco/x-bus#XBus}.\n   *\n   * @param bus - The {@link @empathyco/x-bus#XBus} received to emit events.\n   *\n   * @internal\n   */\n  setBus(bus: XBus<XEventsTypes, WireMetadata>): void {\n    this.bus = bus;\n  }\n\n  /**\n   * Setter for the callback to call in the init method.\n   *\n   * @param initCallback - The callback to call.\n   */\n  setInitCallback(initCallback: (config: SnippetConfig) => any): void {\n    this.initCallback = initCallback;\n  }\n\n  /**\n   * Setter for the callback to modify the snippet config.\n   *\n   * @param snippetCallback - The callback to call.\n   *\n   * @internal\n   */\n  setSnippetConfigCallback(snippetCallback: (config: Partial<SnippetConfig>) => void): void {\n    this.snippetCallback = snippetCallback;\n  }\n\n  /**\n   * Sets or updates the snippet config getter.\n   *\n   * @param snippetConfigGetter - A function that returns the snippet config.\n   *\n   * @internal\n   */\n  setSnippetConfigGetter(snippetConfigGetter: () => NormalisedSnippetConfig): void {\n    this.getSnippetConfig = snippetConfigGetter;\n  }\n\n  /**\n   * Sets or updates the snippet config.\n   *\n   * @param config - A part or all the snippet config.\n   *\n   * @public\n   */\n  setSnippetConfig(config: Partial<SnippetConfig>): void {\n    this?.snippetCallback(config);\n  }\n\n  /**\n   * Searches the query parameter as user query.\n   *\n   * @param query - Query to be searched.\n   *\n   * @public\n   */\n  search(query?: string): void {\n    if (query) {\n      this.bus?.emit('UserAcceptedAQuery', query);\n    }\n    this.bus?.emit('UserClickedOpenX');\n  }\n\n  /**\n   * Initializes the Application passing the {@link SnippetConfig}.\n   *\n   * @param config - The config coming from the customer snippet.\n   *\n   * @returns A promise that will be resolved once x components are initialized.\n   *\n   * @public\n   */\n  async init(config: SnippetConfig): Promise<void> {\n    if (!this.isXInitialized) {\n      this.isXInitialized = true;\n      await this?.initCallback(config);\n    } else {\n      //eslint-disable-next-line no-console\n      console.warn('We know X is awesome, but you only need to initialize it once.');\n    }\n  }\n\n  /**\n   * Closes the Application.\n   *\n   * @public\n   */\n  close(): void {\n    this.bus?.emit('UserClickedCloseX');\n  }\n}\n"],"names":[],"mappings":"AAIA;;;;AAIG;MACU,QAAQ,CAAA;AAArB,IAAA,WAAA,GAAA;AACE;;;;AAIG;QACO,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;KAyIlC;AAvGC;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,SAAkB,EAAA;QACjC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;KACtD;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,GAAqC,EAAA;AAC1C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;KAChB;AAED;;;;AAIG;AACH,IAAA,eAAe,CAAC,YAA4C,EAAA;AAC1D,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;KAClC;AAED;;;;;;AAMG;AACH,IAAA,wBAAwB,CAAC,eAAyD,EAAA;AAChF,QAAA,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;KACxC;AAED;;;;;;AAMG;AACH,IAAA,sBAAsB,CAAC,mBAAkD,EAAA;AACvE,QAAA,IAAI,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;KAC7C;AAED;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,MAA8B,EAAA;AAC7C,QAAA,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;KAC/B;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,KAAc,EAAA;AACnB,QAAA,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;AAC7C,SAAA;AACD,QAAA,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACpC;AAED;;;;;;;;AAQG;IACH,MAAM,IAAI,CAAC,MAAqB,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;AAC3B,YAAA,MAAM,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;AAClC,SAAA;AAAM,aAAA;;AAEL,YAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;AAChF,SAAA;KACF;AAED;;;;AAIG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACrC;AACF;;;;"}
+{"version":3,"file":"base-api.js","sources":["../../../../src/x-installer/api/base-api.ts"],"sourcesContent":["import type { XBus } from '@empathyco/x-bus'\nimport type { WireMetadata, XEventsTypes } from '../../wiring/index'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api.types'\n\n/**\n * Default implementation for {@link XAPI}.\n *\n * @public\n */\nexport class BaseXAPI implements XAPI {\n  /**\n   * Flag to check if the initialization was already done.\n   *\n   * @internal\n   */\n  protected isXInitialized = false\n\n  /**\n   * Bus for emitting and listening events.\n   *\n   * @internal\n   */\n  protected bus!: XBus<XEventsTypes, WireMetadata>\n\n  /**\n   * The callback to call from the init method. The logic of initialization is out of this API\n   * since this API is just a facade.\n   *\n   * @internal\n   */\n  protected initCallback!: (config: SnippetConfig) => any\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  public getSnippetConfig!: () => SnippetConfig\n\n  /**\n   * Callback that allows to update the snippet config. The logic of initialization is out of this\n   * API since this API is just a facade.\n   *\n   * @internal\n   */\n  protected snippetCallback!: (config: Partial<SnippetConfig>) => void\n\n  /**\n   * Tracks that a product was added to cart from PDP.\n   *\n   * @param productId - The product id that was added to cart.\n   */\n  addProductToCart(productId?: string): void {\n    void this.bus?.emit('UserClickedPDPAddToCart', productId)\n  }\n\n  /**\n   * Setter for the XBus.\n   *\n   * @param bus - The XBus received to emit events.\n   *\n   * @internal\n   */\n  setBus(bus: XBus<XEventsTypes, WireMetadata>): void {\n    this.bus = bus\n  }\n\n  /**\n   * Setter for the callback to call in the init method.\n   *\n   * @param initCallback - The callback to call.\n   */\n  setInitCallback(initCallback: (config: SnippetConfig) => any): void {\n    this.initCallback = initCallback\n  }\n\n  /**\n   * Setter for the callback to modify the snippet config.\n   *\n   * @param snippetCallback - The callback to call.\n   *\n   * @internal\n   */\n  setSnippetConfigCallback(snippetCallback: (config: Partial<SnippetConfig>) => void): void {\n    this.snippetCallback = snippetCallback\n  }\n\n  /**\n   * Sets or updates the snippet config getter.\n   *\n   * @param snippetConfigGetter - A function that returns the snippet config.\n   *\n   * @internal\n   */\n  setSnippetConfigGetter(snippetConfigGetter: () => NormalisedSnippetConfig): void {\n    this.getSnippetConfig = snippetConfigGetter\n  }\n\n  /**\n   * Sets or updates the snippet config.\n   *\n   * @param config - A part or all the snippet config.\n   *\n   * @public\n   */\n  setSnippetConfig(config: Partial<SnippetConfig>): void {\n    this?.snippetCallback(config)\n  }\n\n  /**\n   * Searches the query parameter as user query.\n   *\n   * @param query - Query to be searched.\n   *\n   * @public\n   */\n  search(query?: string): void {\n    if (query) {\n      void this.bus?.emit('UserAcceptedAQuery', query)\n    }\n    void this.bus?.emit('UserClickedOpenX', undefined)\n  }\n\n  /**\n   * Initializes the Application passing the {@link SnippetConfig}.\n   *\n   * @param config - The config coming from the customer snippet.\n   *\n   * @returns A promise that will be resolved once x components are initialized.\n   *\n   * @public\n   */\n  async init(config: SnippetConfig): Promise<void> {\n    if (!this.isXInitialized) {\n      this.isXInitialized = true\n      await this?.initCallback(config)\n    } else {\n      console.warn('We know X is awesome, but you only need to initialize it once.')\n    }\n  }\n\n  /**\n   * Closes the Application.\n   *\n   * @public\n   */\n  close(): void {\n    void this.bus?.emit('UserClickedCloseX', undefined)\n  }\n}\n"],"names":[],"mappings":"AAIA;;;;AAIG;MACU,QAAQ,CAAA;AAArB,IAAA,WAAA,GAAA;AACE;;;;AAIG;QACO,IAAc,CAAA,cAAA,GAAG,KAAK,CAAA;KAwIjC;AAtGC;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,SAAkB,EAAA;QACjC,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAA;KAC1D;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,GAAqC,EAAA;AAC1C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;KACf;AAED;;;;AAIG;AACH,IAAA,eAAe,CAAC,YAA4C,EAAA;AAC1D,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;KACjC;AAED;;;;;;AAMG;AACH,IAAA,wBAAwB,CAAC,eAAyD,EAAA;AAChF,QAAA,IAAI,CAAC,eAAe,GAAG,eAAe,CAAA;KACvC;AAED;;;;;;AAMG;AACH,IAAA,sBAAsB,CAAC,mBAAkD,EAAA;AACvE,QAAA,IAAI,CAAC,gBAAgB,GAAG,mBAAmB,CAAA;KAC5C;AAED;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,MAA8B,EAAA;AAC7C,QAAA,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;KAC9B;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,KAAc,EAAA;AACnB,QAAA,IAAI,KAAK,EAAE;YACT,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAA;AACjD,SAAA;QACD,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAA;KACnD;AAED;;;;;;;;AAQG;IACH,MAAM,IAAI,CAAC,MAAqB,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;AAC1B,YAAA,MAAM,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;AACjC,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAA;AAC/E,SAAA;KACF;AAED;;;;AAIG;IACH,KAAK,GAAA;QACH,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAA;KACpD;AACF;;;;"}

package/js/x-installer/x-installer/x-installer.js

@@ -1,8 +1,8 @@
 import { isFunction, forEach } from '@empathyco/x-utils';
 import { reactive, createApp } from 'vue';
+import { bus } from '../../plugins/x-bus.js';
 import { XPlugin } from '../../plugins/x-plugin.js';
 import { BaseXAPI } from '../api/base-api.js';
-import { bus } from '../../plugins/x-bus.js';
 
 /**
  * The purpose of this class is to offer a quick way to initialize the XComponents in a setup
@@ -103,6 +103,7 @@ class XInstaller {
         const { api } = this.options;
         if (api !== false) {
             this.api = api ?? new BaseXAPI();
+            // eslint-disable-next-line ts/no-misused-promises
             this.api.setInitCallback(this.init.bind(this));
             this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));
             this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));
@@ -138,7 +139,7 @@ class XInstaller {
                 api: this.api,
                 app: this.app,
                 bus,
-                plugin
+                plugin,
             };
         }
         return Promise.resolve();
@@ -157,7 +158,7 @@ class XInstaller {
             store,
             xModules,
             initialXModules,
-            __PRIVATE__xModules
+            __PRIVATE__xModules,
         };
     }
     /**
@@ -179,7 +180,7 @@ class XInstaller {
      *
      * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method
      * of the plugin.
-     * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.
+     * @param bus - The XBus to be used to create the XPlugin.
      *
      * @returns Plugin<XPluginOption> - The plugin instance.
      * @internal
@@ -197,7 +198,7 @@ class XInstaller {
      * @returns An empty promise.
      * @internal
      */
-    installExtraPlugins(bus) {
+    async installExtraPlugins(bus) {
         return Promise.resolve(this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig, bus }));
     }
     /**
@@ -234,10 +235,10 @@ class XInstaller {
      * returns an Element or element selector to use.
      * If it is not present, a new <div> Element is created and appended to the body.
      *
-     * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used
-     * to mount the Vue Application.
+     * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function
+     * used to mount the Vue Application.
      *
-     * @returns The Element to use as mounting target for the Vue Application.
+     * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.
      * @internal
      */
     getMountingTarget(domElement) {
@@ -247,7 +248,7 @@ class XInstaller {
         if (typeof domElement === 'string') {
             const target = document.querySelector(domElement);
             if (!target) {
-                throw Error(`XComponents app couldn't be mounted: Element "${domElement}" couldn't be found`);
+                throw new Error(`XComponents app couldn't be mounted: Element "${domElement}" couldn't be found`);
             }
             return target;
         }

package/js/x-installer/x-installer/x-installer.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach, isFunction } from '@empathyco/x-utils';\nimport { App, createApp, reactive, Plugin } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { bus } from '../../plugins/x-bus';\nimport { InitWrapper, InstallXOptions } from './types';\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI;\n    initX?: (() => SnippetConfig) | SnippetConfig;\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private app!: App;\n  private api?: XAPI;\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI();\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options;\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI();\n      this.api.setInitCallback(this.init.bind(this));\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n      this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));\n      window.InterfaceX = this.api;\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX();\n    } else if (typeof window.initX === 'object') {\n      return window.initX;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the {@link @empathyco/x-bus#XBus}, the {@link XPlugin}\n   * and the Vue application instance. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n  init(): Promise<InitWrapper | void>;\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));\n      this.createApp();\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      await this.installExtraPlugins(bus);\n      this.api?.setBus(bus);\n      this.app.mount(this.getMountingTarget(this.options.domElement));\n\n      return {\n        api: this.api,\n        app: this.app,\n        bus,\n        plugin\n      };\n    }\n\n    return Promise.resolve();\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules\n    };\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus<XEventsTypes, WireMetadata> {\n    return this.options.bus ?? bus;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.\n   *\n   * @returns Plugin<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(\n    pluginOptions: XPluginOptions,\n    bus: XBus<XEventsTypes, WireMetadata>\n  ): Plugin<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    this.app.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n   * to allow the user to install more plugins to the App.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns An empty promise.\n   * @internal\n   */\n  protected installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus })\n    );\n  }\n\n  /**\n   * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n   * then a new Vue application is created using that component as root.\n   *\n   * @internal\n   */\n  protected createApp(): void {\n    if (this.options.rootComponent !== undefined) {\n      this.app = createApp(this.options.rootComponent);\n      this.app.provide('snippetConfig', this.snippetConfig);\n      this.options.onCreateApp?.(this.app);\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang;\n    }\n    return snippetConfig;\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n   * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n   * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n   * returns an Element or element selector to use.\n   * If it is not present, a new <div> Element is created and appended to the body.\n   *\n   * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used\n   * to mount the Vue Application.\n   *\n   * @returns The Element to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element {\n    if (isFunction(domElement)) {\n      domElement = domElement(this.snippetConfig!);\n    }\n    if (typeof domElement === 'string') {\n      const target = document.querySelector(domElement);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n        );\n      }\n      return target;\n    }\n    return domElement ?? document.body.appendChild(document.createElement('div'));\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return;\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.snippetConfig![name] = value;\n    });\n  }\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  protected getSnippetConfig(): NormalisedSnippetConfig {\n    return this.snippetConfig!;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import type { XBus } from '@empathyco/x-bus'\nimport type { App, Plugin } from 'vue'\nimport type { XPluginOptions } from '../../plugins/x-plugin.types'\nimport type { WireMetadata, XEventsTypes } from '../../wiring/index'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types'\nimport type { InitWrapper, InstallXOptions } from './types'\nimport { forEach, isFunction } from '@empathyco/x-utils'\nimport { createApp, reactive } from 'vue'\nimport { bus } from '../../plugins/x-bus'\nimport { XPlugin } from '../../plugins/x-plugin'\nimport { BaseXAPI } from '../api/base-api'\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI\n    initX?: (() => SnippetConfig) | SnippetConfig\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private app!: App\n  private api?: XAPI\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI()\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI()\n      // eslint-disable-next-line ts/no-misused-promises\n      this.api.setInitCallback(this.init.bind(this))\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this))\n      this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this))\n      window.InterfaceX = this.api\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX()\n    } else if (typeof window.initX === 'object') {\n      return window.initX\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the XBus, the {@link XPlugin}\n   * and the Vue application instance. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>\n  init(): Promise<InitWrapper | void>\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig))\n      this.createApp()\n      const bus = this.createBus()\n      const pluginOptions = this.getPluginOptions()\n      const plugin = this.installPlugin(pluginOptions, bus)\n      await this.installExtraPlugins(bus)\n      this.api?.setBus(bus)\n      this.app.mount(this.getMountingTarget(this.options.domElement))\n\n      return {\n        api: this.api,\n        app: this.app,\n        bus,\n        plugin,\n      }\n    }\n\n    return Promise.resolve()\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules,\n    }\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus<XEventsTypes, WireMetadata> {\n    return this.options.bus ?? bus\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The XBus to be used to create the XPlugin.\n   *\n   * @returns Plugin<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(\n    pluginOptions: XPluginOptions,\n    bus: XBus<XEventsTypes, WireMetadata>,\n  ): Plugin<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus)\n    this.app.use(plugin, pluginOptions)\n    return plugin\n  }\n\n  /**\n   * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n   * to allow the user to install more plugins to the App.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns An empty promise.\n   * @internal\n   */\n  protected async installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus }),\n    )\n  }\n\n  /**\n   * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n   * then a new Vue application is created using that component as root.\n   *\n   * @internal\n   */\n  protected createApp(): void {\n    if (this.options.rootComponent !== undefined) {\n      this.app = createApp(this.options.rootComponent)\n      this.app.provide('snippetConfig', this.snippetConfig)\n      this.options.onCreateApp?.(this.app)\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>,\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang\n    }\n    return snippetConfig\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n   * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n   * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n   * returns an Element or element selector to use.\n   * If it is not present, a new <div> Element is created and appended to the body.\n   *\n   * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function\n   * used to mount the Vue Application.\n   *\n   * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element | ShadowRoot {\n    if (isFunction(domElement)) {\n      domElement = domElement(this.snippetConfig!)\n    }\n    if (typeof domElement === 'string') {\n      const target = document.querySelector(domElement)\n      if (!target) {\n        throw new Error(\n          `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`,\n        )\n      }\n      return target\n    }\n    return domElement ?? document.body.appendChild(document.createElement('div'))\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.snippetConfig![name] = value\n    })\n  }\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  protected getSnippetConfig(): NormalisedSnippetConfig {\n    return this.snippetConfig!\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/device/components/device-detector.vue.js

@@ -6,8 +6,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_GlobalEvents = resolveComponent("GlobalEvents");
   return !_ctx.force ? (openBlock(), createBlock(_component_GlobalEvents, {
     key: 0,
-    onResize: _ctx.throttledStoreWindowWidth,
-    target: "window"
+    target: "window",
+    onResize: _ctx.throttledStoreWindowWidth
   }, null, 8, ["onResize"])) : createCommentVNode("v-if", true);
 }
 var deviceDetector = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/js/x-modules/device/components/device-detector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'DeviceDetector',\n    xModule: deviceXModule.name,\n    components: { GlobalEvents },\n    props: {\n      /**\n       * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n       * the max width in pixels for that device.\n       *\n       * @public\n       */\n      breakpoints: {\n        type: Object as PropType<Record<Device, MaxWidth>>,\n        default: () => ({})\n      },\n      /**\n       * Forces a device, ignoring the breakpoints prop.\n       *\n       * @public\n       */\n      force: String as PropType<Device>,\n\n      /**\n       * Time in milliseconds to throttle the resize events used to detect the device.\n       *\n       * @public\n       */\n      throttleMs: {\n        type: Number,\n        default: 100\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * The width in pixels of the window where the app is being rendered.\n       *\n       * @internal\n       */\n      const windowWidthPx: Ref<number | null> = ref(null);\n\n      /**\n       * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n       *\n       * @internal\n       */\n      const storeWindowWidth = (): void => {\n        windowWidthPx.value = window.innerWidth;\n      };\n\n      /**\n       * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n       *\n       * @internal\n       */\n      let throttledStoreWindowWidth = storeWindowWidth;\n\n      /**\n       * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n       * max width.\n       *\n       * @returns A list of the breakpoints sorted by its max width in ascending order.\n       *\n       * @internal\n       */\n      const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n        Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth)\n      );\n\n      /**\n       * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @internal\n       */\n      const detectedDevice = computed((): string | null => {\n        if (props.force) {\n          return props.force;\n        } else if (windowWidthPx.value === null) {\n          return null;\n        } else {\n          return (\n            sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n          );\n        }\n      });\n\n      watch(\n        detectedDevice,\n        device => {\n          xBus.emit('DeviceProvided', device);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n       * {@link DeviceDetector.throttleMs}.\n       *\n       * @param throttleMs - The new duration in milliseconds for the throttle.\n       *\n       * @internal\n       */\n      watch(\n        () => props.throttleMs,\n        throttleMs => {\n          throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Initialises the store window width.\n       *\n       * @remarks This is done this way to ensure SSR compatibility.\n       *\n       * @internal\n       */\n      onMounted(() => {\n        storeWindowWidth();\n      });\n\n      return {\n        throttledStoreWindowWidth\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;AAC4B,EAAA,MAAA,uBAAA,GAAAA,gBAAA,CAAA,cAAA,CAAA,CAAA;AAD5B,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAC,SAAA,EACgE,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,GAAA,EAAA,CAAA;AAAA,IAAA,QAAA,EAAA,IAAA,CAAA,yBAAA;AADlE,IAAA,MAAA,EAAA,QAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      device: 'unknown',\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n  methods: {\n    storeDevice(device) {\n      this.device = device\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;AAC4B,EAAA,MAAA,uBAAA,GAAAA,gBAAA,CAAA,cAAA,CAAA,CAAA;AAD5B,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAC,SAAA,EAC6C,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,GAAA,EAAA,CAAA;AAAA,IAAA,MAAA,EAAA,QAAA;AAD/C,IAAA,QAAA,EAAA,IAAA,CAAA,yBAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/device/components/device-detector.vue2.js

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, watch, onMounted } from 'vue';
 import { GlobalEvents } from 'vue-global-events';
+import { useXBus } from '../../../composables/use-x-bus.js';
 import { throttle } from '../../../utils/throttle.js';
 import { deviceXModule } from '../x-module.js';
-import { useXBus } from '../../../composables/use-x-bus.js';
 
 /**
  * This component helps to detect or setting a device, that can be used later to create
@@ -24,7 +24,7 @@ var _sfc_main = defineComponent({
          */
         breakpoints: {
             type: Object,
-            default: () => ({})
+            default: () => ({}),
         },
         /**
          * Forces a device, ignoring the breakpoints prop.
@@ -39,8 +39,8 @@ var _sfc_main = defineComponent({
          */
         throttleMs: {
             type: Number,
-            default: 100
-        }
+            default: 100,
+        },
     },
     setup(props) {
         const xBus = useXBus();
@@ -118,9 +118,9 @@ var _sfc_main = defineComponent({
             storeWindowWidth();
         });
         return {
-            throttledStoreWindowWidth
+            throttledStoreWindowWidth,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/device/components/device-detector.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'DeviceDetector',\n    xModule: deviceXModule.name,\n    components: { GlobalEvents },\n    props: {\n      /**\n       * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n       * the max width in pixels for that device.\n       *\n       * @public\n       */\n      breakpoints: {\n        type: Object as PropType<Record<Device, MaxWidth>>,\n        default: () => ({})\n      },\n      /**\n       * Forces a device, ignoring the breakpoints prop.\n       *\n       * @public\n       */\n      force: String as PropType<Device>,\n\n      /**\n       * Time in milliseconds to throttle the resize events used to detect the device.\n       *\n       * @public\n       */\n      throttleMs: {\n        type: Number,\n        default: 100\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * The width in pixels of the window where the app is being rendered.\n       *\n       * @internal\n       */\n      const windowWidthPx: Ref<number | null> = ref(null);\n\n      /**\n       * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n       *\n       * @internal\n       */\n      const storeWindowWidth = (): void => {\n        windowWidthPx.value = window.innerWidth;\n      };\n\n      /**\n       * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n       *\n       * @internal\n       */\n      let throttledStoreWindowWidth = storeWindowWidth;\n\n      /**\n       * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n       * max width.\n       *\n       * @returns A list of the breakpoints sorted by its max width in ascending order.\n       *\n       * @internal\n       */\n      const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n        Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth)\n      );\n\n      /**\n       * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @internal\n       */\n      const detectedDevice = computed((): string | null => {\n        if (props.force) {\n          return props.force;\n        } else if (windowWidthPx.value === null) {\n          return null;\n        } else {\n          return (\n            sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n          );\n        }\n      });\n\n      watch(\n        detectedDevice,\n        device => {\n          xBus.emit('DeviceProvided', device);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n       * {@link DeviceDetector.throttleMs}.\n       *\n       * @param throttleMs - The new duration in milliseconds for the throttle.\n       *\n       * @internal\n       */\n      watch(\n        () => props.throttleMs,\n        throttleMs => {\n          throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Initialises the store window width.\n       *\n       * @remarks This is done this way to ensure SSR compatibility.\n       *\n       * @internal\n       */\n      onMounted(() => {\n        storeWindowWidth();\n      });\n\n      return {\n        throttledStoreWindowWidth\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAgBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAA4C;AAClD,YAAA,OAAO,EAAE,OAAO,EAAE,CAAA;AACnB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACb,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAC,CAAA;AAEnD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,aAAa,CAAC,KAAM,GAAE,MAAM,CAAC,UAAU,CAAA;AACzC,SAAC,CAAA;AAED;;;;AAIE;QACF,IAAI,yBAAwB,GAAI,gBAAgB,CAAA;AAEhD;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAK,GAAI,MAAM,CAAA,CACnF,CAAA;AAED;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAqB;YACnD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAK,CAAA;AACpB,aAAA;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAM,KAAI,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAI,CAAA;AACX,aAAA;AAAK,iBAAA;AACL,gBAAA,QACE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,aAAa,CAAC,KAAK,IAAK,KAAK,CAAC,GAAG,CAAC,CAAA,IAAK,IAAG,EACvF;AACH,aAAA;AACF,SAAC,CAAC,CAAA;AAEF,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAK;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAA;AACrC,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAW,IAAG;AACZ,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AACpE,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;AAME;QACF,SAAS,CAAC,MAAM;AACd,YAAA,gBAAgB,EAAE,CAAA;AACpB,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      device: 'unknown',\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n  methods: {\n    storeDevice(device) {\n      this.device = device\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAiBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAA4C;AAClD,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAA,CAAA;AAElD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,aAAa,CAAC,KAAM,GAAE,MAAM,CAAC,UAAS,CAAA;AACxC,SAAA,CAAA;AAEA;;;;AAIE;QACF,IAAI,4BAA4B,gBAAe,CAAA;AAE/C;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAO,GAAE,MAAM,CAAC,CACrF,CAAA;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAqB;YACnD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAI,CAAA;AACnB,aAAA;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAM,KAAI,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAG,CAAA;AACV,aAAA;AAAK,iBAAA;AACL,gBAAA,QACE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,aAAa,CAAC,KAAK,IAAK,KAAK,CAAC,GAAG,CAAC,CAAA,IAAK,IAAG,EACxF;AACF,aAAA;AACF,SAAC,CAAA,CAAA;AAED,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAK;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAA,CAAA;AACpC,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;AAEA;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAW,IAAG;AACZ,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAA,CAAA;AACnE,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;AAEA;;;;;;AAME;QACF,SAAS,CAAC,MAAM;AACd,YAAA,gBAAgB,EAAC,CAAA;AACnB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/device/store/emitters.js

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { deviceXStoreModule } from './module.js';
 

package/js/x-modules/device/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { deviceXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the device module.\n *\n * @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store'\nimport { deviceXStoreModule } from './module'\n\n/**\n * {@link StoreEmitters} For the device module.\n *\n * @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {})\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}

package/js/x-modules/device/store/module.js

@@ -5,15 +5,15 @@
  */
 const deviceXStoreModule = {
     state: () => ({
-        name: null
+        name: null,
     }),
     getters: {},
     mutations: {
         setName(state, name) {
             state.name = name;
-        }
+        },
     },
-    actions: {}
+    actions: {},
 };
 
 export { deviceXStoreModule };

package/js/x-modules/device/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/device/store/module.ts"],"sourcesContent":["import { DeviceXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the device module.\n *\n * @internal\n */\nexport const deviceXStoreModule: DeviceXStoreModule = {\n  state: () => ({\n    name: null\n  }),\n  getters: {},\n  mutations: {\n    setName(state, name) {\n      state.name = name;\n    }\n  },\n  actions: {}\n};\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,IAAI;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,OAAO,CAAC,KAAK,EAAE,IAAI,EAAA;AACjB,YAAA,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/device/store/module.ts"],"sourcesContent":["import type { DeviceXStoreModule } from './types'\n\n/**\n * {@link XStoreModule} For the device module.\n *\n * @internal\n */\nexport const deviceXStoreModule: DeviceXStoreModule = {\n  state: () => ({\n    name: null,\n  }),\n  getters: {},\n  mutations: {\n    setName(state, name) {\n      state.name = name\n    },\n  },\n  actions: {},\n}\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,IAAI;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,OAAO,CAAC,KAAK,EAAE,IAAI,EAAA;AACjB,YAAA,KAAK,CAAC,IAAI,GAAG,IAAI,CAAA;SAClB;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}

package/js/x-modules/device/wiring.js

@@ -20,8 +20,8 @@ const setName = wireCommit('setName');
  */
 const deviceWiring = createWiring({
     DeviceProvided: {
-        setName
-    }
+        setName,
+    },
 });
 
 export { deviceWiring, setName };

package/js/x-modules/device/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/device/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * WireCommit for {@link DeviceXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit('device');\n\n/**\n * Sets the device of the {@link DeviceXModule}.\n *\n * @public\n */\nexport const setName = wireCommit('setName');\n\n/**\n * Wiring configuration for the {@link DeviceXModule | device module}.\n *\n * @internal\n */\nexport const deviceWiring = createWiring({\n  DeviceProvided: {\n    setName\n  }\n});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAElD;;;;AAIG;MACU,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE;AAE7C;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,cAAc,EAAE;QACd,OAAO;AACR,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/device/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory'\nimport { createWiring } from '../../wiring/wiring.utils'\n\n/**\n * WireCommit for {@link DeviceXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit('device')\n\n/**\n * Sets the device of the {@link DeviceXModule}.\n *\n * @public\n */\nexport const setName = wireCommit('setName')\n\n/**\n * Wiring configuration for the {@link DeviceXModule | device module}.\n *\n * @internal\n */\nexport const deviceWiring = createWiring({\n  DeviceProvided: {\n    setName,\n  },\n})\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;AAEjD;;;;AAIG;MACU,OAAO,GAAG,UAAU,CAAC,SAAS,EAAC;AAE5C;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,cAAc,EAAE;QACd,OAAO;AACR,KAAA;AACF,CAAA;;;;"}