@wix/site-service-interactions 1.0.22 → 1.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/build/definition/index.d.ts +75 -1
- package/cjs/build/definition/index.js.map +1 -1
- package/cjs/build/implementations/coreInteractions.d.ts +1 -1
- package/cjs/build/implementations/coreInteractions.js +10 -4
- package/cjs/build/implementations/coreInteractions.js.map +1 -1
- package/dist/definition/index.d.ts +75 -1
- package/dist/definition/index.js.map +1 -1
- package/dist/implementations/coreInteractions.d.ts +1 -1
- package/dist/implementations/coreInteractions.js +10 -4
- package/dist/implementations/coreInteractions.js.map +1 -1
- package/package.json +6 -6
- package/src/definition/index.ts +75 -1
- package/src/implementations/coreInteractions.ts +13 -4
|
@@ -1,25 +1,99 @@
|
|
|
1
1
|
import type { StaticServiceDefinition } from '@wix/static-service';
|
|
2
2
|
import type { InteractConfig } from '@wix/interact';
|
|
3
3
|
export type { InteractConfig };
|
|
4
|
+
/** CSS rule that a config entry applies to the components inside its `namespace`. */
|
|
4
5
|
export type InteractStyleRule = {
|
|
6
|
+
/** Key of the component the rule applies to. When omitted, the rule applies to the component that the entry's `namespace` names. */
|
|
5
7
|
key?: string;
|
|
8
|
+
/** CSS selector, relative to the component, that narrows the rule to elements inside it. */
|
|
6
9
|
selector?: string;
|
|
10
|
+
/** Media query to wrap the rule in. */
|
|
7
11
|
'@media'?: string;
|
|
12
|
+
/** Container query to wrap the rule in. */
|
|
8
13
|
'@container'?: string;
|
|
14
|
+
/** Feature query to wrap the rule in. */
|
|
9
15
|
'@supports'?: string;
|
|
16
|
+
/** CSS properties and their values. */
|
|
10
17
|
properties: Record<string, string>;
|
|
11
18
|
};
|
|
19
|
+
/** Set of interactions in the host's config, with the CSS rules that go with it. */
|
|
12
20
|
export type InteractConfigEntry = {
|
|
21
|
+
/** Key of the component that scopes the entry's CSS rules. Required when `styles` isn't empty. */
|
|
13
22
|
namespace?: string;
|
|
23
|
+
/** The entry's interactions and effects, in the `@wix/interact` config format. */
|
|
14
24
|
interact: InteractConfig;
|
|
25
|
+
/** CSS rules for components inside the entry's `namespace`. */
|
|
15
26
|
styles?: InteractStyleRule[];
|
|
16
27
|
};
|
|
17
|
-
|
|
28
|
+
/** Values the host supplies when it creates the service, as a single interactions config or several entries. */
|
|
29
|
+
export type IInteractionsServiceConfig = (InteractConfig | {
|
|
18
30
|
entries: InteractConfigEntry[];
|
|
31
|
+
}) & {
|
|
32
|
+
version?: 'v1' | 'v2';
|
|
19
33
|
};
|
|
34
|
+
/**
|
|
35
|
+
* Reports whether a component has interactions. An interaction runs effects on a trigger, such as a
|
|
36
|
+
* click or the component scrolling into view.
|
|
37
|
+
*
|
|
38
|
+
* @beta
|
|
39
|
+
*/
|
|
20
40
|
export interface IInteractionsService {
|
|
41
|
+
/**
|
|
42
|
+
* Checks whether a component has interactions.
|
|
43
|
+
*
|
|
44
|
+
* Use it to render the wrapper that runs a component's interactions, such as `<interact-element>`
|
|
45
|
+
* from `@wix/interact` for components that have interactions.
|
|
46
|
+
*
|
|
47
|
+
* The result for a given path doesn't change for the lifetime of the page.
|
|
48
|
+
*
|
|
49
|
+
* @param path Path of the component, as the host identifies it in the site's interactions. The host
|
|
50
|
+
* determines the format.
|
|
51
|
+
*
|
|
52
|
+
* For example, `c1dmp/comp-lxk2h8f1`, or `c1dmp/comp-r7p4k2wd/[]/comp-lxk2h8f1` for the same component
|
|
53
|
+
* inside a repeater.
|
|
54
|
+
*
|
|
55
|
+
* Case-sensitive, and must match the path the host uses for the component exactly. It isn't a CSS
|
|
56
|
+
* selector. For a component inside a repeater, specify `[]` in place of the repeater item's segment,
|
|
57
|
+
* because some hosts don't match a path that includes the item's ID.
|
|
58
|
+
* @returns `true` when the component is the trigger component or a target component of at least one
|
|
59
|
+
* interaction, and `false` for any other path, including an unknown path or an empty string. It
|
|
60
|
+
* doesn't say what the interactions do.
|
|
61
|
+
*
|
|
62
|
+
* @exampleValue path 'c1dmp/comp-lxk2h8f1'
|
|
63
|
+
* @exampleValue true
|
|
64
|
+
*
|
|
65
|
+
* @example Wrap a component only when it has interactions
|
|
66
|
+
* ```tsx
|
|
67
|
+
* import type { ReactElement } from 'react'
|
|
68
|
+
* import { useService } from '@wix/services-manager-react'
|
|
69
|
+
* import { InteractionsDefinition } from '@wix/site-service-interactions/definition'
|
|
70
|
+
*
|
|
71
|
+
* function WithInteractions({ path, children }: { path: string; children: ReactElement }) {
|
|
72
|
+
* const interactionsService = useService(InteractionsDefinition)
|
|
73
|
+
*
|
|
74
|
+
* if (!interactionsService.hasInteractions(path)) {
|
|
75
|
+
* return children
|
|
76
|
+
* }
|
|
77
|
+
*
|
|
78
|
+
* // The wrapper must contain exactly one child element.
|
|
79
|
+
* return <interact-element data-interact-key={path}>{children}</interact-element>
|
|
80
|
+
* }
|
|
81
|
+
* ```
|
|
82
|
+
*
|
|
83
|
+
* @example Check a component inside a repeater
|
|
84
|
+
* ```ts
|
|
85
|
+
* // Replace the repeater item's segment, such as [item-1], with [].
|
|
86
|
+
* const toTemplatePath = (path: string) => path.replace(/\[[^\]]+\]/g, '[]')
|
|
87
|
+
*
|
|
88
|
+
* // For example, 'c1dmp/comp-r7p4k2wd/[item-1]/comp-lxk2h8f1' checks 'c1dmp/comp-r7p4k2wd/[]/comp-lxk2h8f1'.
|
|
89
|
+
* function hasItemInteractions(itemPath: string): boolean {
|
|
90
|
+
* return interactionsService.hasInteractions(toTemplatePath(itemPath))
|
|
91
|
+
* }
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
21
94
|
hasInteractions: (path: string) => boolean;
|
|
22
95
|
}
|
|
96
|
+
/** @internal Private service. Documented in the code, but left out of the developer docs. */
|
|
23
97
|
export type IInteractionsDefinition = StaticServiceDefinition<IInteractionsService, IInteractionsServiceConfig>;
|
|
24
98
|
export declare const InteractionsDefinition: string & {
|
|
25
99
|
__api: IInteractionsService;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/definition/index.ts"],"names":[],"mappings":";;;AAAA,wDAAyD;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/definition/index.ts"],"names":[],"mappings":";;;AAAA,wDAAyD;AAuG5C,QAAA,sBAAsB,GAAG,IAAA,oCAAmB,EACxD,gCAAgC,CAChC,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ServicesManager } from '@wix/services-manager/types';
|
|
2
2
|
import type { IInteractionsServiceConfig } from '../definition';
|
|
3
|
-
export declare const coreInteractions: (config: IInteractionsServiceConfig, getService: ServicesManager['getService']) => {
|
|
3
|
+
export declare const coreInteractions: ({ version, ...config }: IInteractionsServiceConfig, getService: ServicesManager['getService']) => {
|
|
4
4
|
interactiveComps: Set<string>;
|
|
5
5
|
};
|
|
@@ -22,6 +22,12 @@ const configEntries_1 = require("./configEntries");
|
|
|
22
22
|
/** An entry without interactions contributes CSS only; nothing has to load Interact for it. */
|
|
23
23
|
const getRuntimeConfigs = (entries) => entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0);
|
|
24
24
|
const initInteract = (entries, isReducedMotion) => {
|
|
25
|
+
const runtimeConfigs = getRuntimeConfigs(entries);
|
|
26
|
+
// v1 registers its interact-element on create, and a tag can only be defined once: starting it for
|
|
27
|
+
// an empty config (the editor's disabled config, the site-level config) would lock out a later v2 loader.
|
|
28
|
+
if (!runtimeConfigs.length) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
25
31
|
// Bundled runtime is v1. v2 on the client is the CDN loader.
|
|
26
32
|
interact_v1_1.Interact.forceReducedMotion = isReducedMotion;
|
|
27
33
|
interact_v1_1.Interact.setup({
|
|
@@ -31,8 +37,8 @@ const initInteract = (entries, isReducedMotion) => {
|
|
|
31
37
|
useSafeViewEnter: true,
|
|
32
38
|
},
|
|
33
39
|
});
|
|
34
|
-
for (const
|
|
35
|
-
interact_v1_1.Interact.create(
|
|
40
|
+
for (const config of runtimeConfigs) {
|
|
41
|
+
interact_v1_1.Interact.create(config);
|
|
36
42
|
}
|
|
37
43
|
};
|
|
38
44
|
const getV2HeadContent = (entries) => {
|
|
@@ -72,10 +78,10 @@ const getInteractiveComps = (entries) => {
|
|
|
72
78
|
}
|
|
73
79
|
return keys;
|
|
74
80
|
};
|
|
75
|
-
const coreInteractions = (config, getService) => {
|
|
81
|
+
const coreInteractions = ({ version, ...config }, getService) => {
|
|
76
82
|
const { reducedMotion: isReducedMotion } = getService(definition_1.DeviceInfoDefinition);
|
|
77
83
|
const { isOpen } = getService(definition_2.ExperimentsDefinition);
|
|
78
|
-
const useV2 =
|
|
84
|
+
const useV2 = version === 'v2';
|
|
79
85
|
// The v1 runtime has no preset registration and doesn't understand LEGACY_* names; skip
|
|
80
86
|
// aliasing on those paths so named reaction effects remain resolvable.
|
|
81
87
|
const entries = (0, configEntries_1.resolveInteractKeyConflicts)((useV2 ? configEntries_1.getResolvedConfigEntries : configEntries_1.getInteractConfigEntries)(config));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../../src/implementations/coreInteractions.ts"],"names":[],"mappings":";;;AAAA,kDAA2C;AAE3C,yEAA+E;AAC/E,yEAAgF;AAChF,+FAA+F;AAC/F,+FAA+F;AAC/F,+FAA+F;AAC/F,kFAAkF;AAClF,qEAAsE;AACtE,2EAAmF;AACnF,iEAAuE;AACvE,mGAA+G;AAG/G,2EAA6E;AAC7E,8EAAkF;AAClF,8CAA+C;AAC/C,wEAAyE;AACzE,8EAA8E;AAC9E,wDAA0D;AAC1D,mDAKwB;AAExB,+FAA+F;AAC/F,MAAM,iBAAiB,GAAG,CAAC,OAA8B,EAAoB,EAAE,CAC9E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;AAE9F,MAAM,YAAY,GAAG,CAAC,OAA8B,EAAE,eAAwB,EAAE,EAAE;IACjF,6DAA6D;IAC7D,sBAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;IAC7C,sBAAQ,CAAC,KAAK,CAAC;QACd,mBAAmB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;QAC1E,iBAAiB,EAAE,IAAI;QACvB,SAAS,EAAE;YACV,gBAAgB,EAAE,IAAI;SACtB;KACD,CAAC,CAAA;IACF,KAAK,MAAM,
|
|
1
|
+
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,25 +1,99 @@
|
|
|
1
1
|
import type { StaticServiceDefinition } from '@wix/static-service';
|
|
2
2
|
import type { InteractConfig } from '@wix/interact';
|
|
3
3
|
export type { InteractConfig };
|
|
4
|
+
/** CSS rule that a config entry applies to the components inside its `namespace`. */
|
|
4
5
|
export type InteractStyleRule = {
|
|
6
|
+
/** Key of the component the rule applies to. When omitted, the rule applies to the component that the entry's `namespace` names. */
|
|
5
7
|
key?: string;
|
|
8
|
+
/** CSS selector, relative to the component, that narrows the rule to elements inside it. */
|
|
6
9
|
selector?: string;
|
|
10
|
+
/** Media query to wrap the rule in. */
|
|
7
11
|
'@media'?: string;
|
|
12
|
+
/** Container query to wrap the rule in. */
|
|
8
13
|
'@container'?: string;
|
|
14
|
+
/** Feature query to wrap the rule in. */
|
|
9
15
|
'@supports'?: string;
|
|
16
|
+
/** CSS properties and their values. */
|
|
10
17
|
properties: Record<string, string>;
|
|
11
18
|
};
|
|
19
|
+
/** Set of interactions in the host's config, with the CSS rules that go with it. */
|
|
12
20
|
export type InteractConfigEntry = {
|
|
21
|
+
/** Key of the component that scopes the entry's CSS rules. Required when `styles` isn't empty. */
|
|
13
22
|
namespace?: string;
|
|
23
|
+
/** The entry's interactions and effects, in the `@wix/interact` config format. */
|
|
14
24
|
interact: InteractConfig;
|
|
25
|
+
/** CSS rules for components inside the entry's `namespace`. */
|
|
15
26
|
styles?: InteractStyleRule[];
|
|
16
27
|
};
|
|
17
|
-
|
|
28
|
+
/** Values the host supplies when it creates the service, as a single interactions config or several entries. */
|
|
29
|
+
export type IInteractionsServiceConfig = (InteractConfig | {
|
|
18
30
|
entries: InteractConfigEntry[];
|
|
31
|
+
}) & {
|
|
32
|
+
version?: 'v1' | 'v2';
|
|
19
33
|
};
|
|
34
|
+
/**
|
|
35
|
+
* Reports whether a component has interactions. An interaction runs effects on a trigger, such as a
|
|
36
|
+
* click or the component scrolling into view.
|
|
37
|
+
*
|
|
38
|
+
* @beta
|
|
39
|
+
*/
|
|
20
40
|
export interface IInteractionsService {
|
|
41
|
+
/**
|
|
42
|
+
* Checks whether a component has interactions.
|
|
43
|
+
*
|
|
44
|
+
* Use it to render the wrapper that runs a component's interactions, such as `<interact-element>`
|
|
45
|
+
* from `@wix/interact` for components that have interactions.
|
|
46
|
+
*
|
|
47
|
+
* The result for a given path doesn't change for the lifetime of the page.
|
|
48
|
+
*
|
|
49
|
+
* @param path Path of the component, as the host identifies it in the site's interactions. The host
|
|
50
|
+
* determines the format.
|
|
51
|
+
*
|
|
52
|
+
* For example, `c1dmp/comp-lxk2h8f1`, or `c1dmp/comp-r7p4k2wd/[]/comp-lxk2h8f1` for the same component
|
|
53
|
+
* inside a repeater.
|
|
54
|
+
*
|
|
55
|
+
* Case-sensitive, and must match the path the host uses for the component exactly. It isn't a CSS
|
|
56
|
+
* selector. For a component inside a repeater, specify `[]` in place of the repeater item's segment,
|
|
57
|
+
* because some hosts don't match a path that includes the item's ID.
|
|
58
|
+
* @returns `true` when the component is the trigger component or a target component of at least one
|
|
59
|
+
* interaction, and `false` for any other path, including an unknown path or an empty string. It
|
|
60
|
+
* doesn't say what the interactions do.
|
|
61
|
+
*
|
|
62
|
+
* @exampleValue path 'c1dmp/comp-lxk2h8f1'
|
|
63
|
+
* @exampleValue true
|
|
64
|
+
*
|
|
65
|
+
* @example Wrap a component only when it has interactions
|
|
66
|
+
* ```tsx
|
|
67
|
+
* import type { ReactElement } from 'react'
|
|
68
|
+
* import { useService } from '@wix/services-manager-react'
|
|
69
|
+
* import { InteractionsDefinition } from '@wix/site-service-interactions/definition'
|
|
70
|
+
*
|
|
71
|
+
* function WithInteractions({ path, children }: { path: string; children: ReactElement }) {
|
|
72
|
+
* const interactionsService = useService(InteractionsDefinition)
|
|
73
|
+
*
|
|
74
|
+
* if (!interactionsService.hasInteractions(path)) {
|
|
75
|
+
* return children
|
|
76
|
+
* }
|
|
77
|
+
*
|
|
78
|
+
* // The wrapper must contain exactly one child element.
|
|
79
|
+
* return <interact-element data-interact-key={path}>{children}</interact-element>
|
|
80
|
+
* }
|
|
81
|
+
* ```
|
|
82
|
+
*
|
|
83
|
+
* @example Check a component inside a repeater
|
|
84
|
+
* ```ts
|
|
85
|
+
* // Replace the repeater item's segment, such as [item-1], with [].
|
|
86
|
+
* const toTemplatePath = (path: string) => path.replace(/\[[^\]]+\]/g, '[]')
|
|
87
|
+
*
|
|
88
|
+
* // For example, 'c1dmp/comp-r7p4k2wd/[item-1]/comp-lxk2h8f1' checks 'c1dmp/comp-r7p4k2wd/[]/comp-lxk2h8f1'.
|
|
89
|
+
* function hasItemInteractions(itemPath: string): boolean {
|
|
90
|
+
* return interactionsService.hasInteractions(toTemplatePath(itemPath))
|
|
91
|
+
* }
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
21
94
|
hasInteractions: (path: string) => boolean;
|
|
22
95
|
}
|
|
96
|
+
/** @internal Private service. Documented in the code, but left out of the developer docs. */
|
|
23
97
|
export type IInteractionsDefinition = StaticServiceDefinition<IInteractionsService, IInteractionsServiceConfig>;
|
|
24
98
|
export declare const InteractionsDefinition: string & {
|
|
25
99
|
__api: IInteractionsService;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/definition/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/definition/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAuGzD,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAAmB,CACxD,gCAAgC,CAChC,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ServicesManager } from '@wix/services-manager/types';
|
|
2
2
|
import type { IInteractionsServiceConfig } from '../definition';
|
|
3
|
-
export declare const coreInteractions: (config: IInteractionsServiceConfig, getService: ServicesManager['getService']) => {
|
|
3
|
+
export declare const coreInteractions: ({ version, ...config }: IInteractionsServiceConfig, getService: ServicesManager['getService']) => {
|
|
4
4
|
interactiveComps: Set<string>;
|
|
5
5
|
};
|
|
@@ -19,6 +19,12 @@ import { getInteractConfigEntries, getInteractiveKeys, getResolvedConfigEntries,
|
|
|
19
19
|
/** An entry without interactions contributes CSS only; nothing has to load Interact for it. */
|
|
20
20
|
const getRuntimeConfigs = (entries) => entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0);
|
|
21
21
|
const initInteract = (entries, isReducedMotion) => {
|
|
22
|
+
const runtimeConfigs = getRuntimeConfigs(entries);
|
|
23
|
+
// v1 registers its interact-element on create, and a tag can only be defined once: starting it for
|
|
24
|
+
// an empty config (the editor's disabled config, the site-level config) would lock out a later v2 loader.
|
|
25
|
+
if (!runtimeConfigs.length) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
22
28
|
// Bundled runtime is v1. v2 on the client is the CDN loader.
|
|
23
29
|
Interact.forceReducedMotion = isReducedMotion;
|
|
24
30
|
Interact.setup({
|
|
@@ -28,8 +34,8 @@ const initInteract = (entries, isReducedMotion) => {
|
|
|
28
34
|
useSafeViewEnter: true,
|
|
29
35
|
},
|
|
30
36
|
});
|
|
31
|
-
for (const
|
|
32
|
-
Interact.create(
|
|
37
|
+
for (const config of runtimeConfigs) {
|
|
38
|
+
Interact.create(config);
|
|
33
39
|
}
|
|
34
40
|
};
|
|
35
41
|
const getV2HeadContent = (entries) => {
|
|
@@ -69,10 +75,10 @@ const getInteractiveComps = (entries) => {
|
|
|
69
75
|
}
|
|
70
76
|
return keys;
|
|
71
77
|
};
|
|
72
|
-
export const coreInteractions = (config, getService) => {
|
|
78
|
+
export const coreInteractions = ({ version, ...config }, getService) => {
|
|
73
79
|
const { reducedMotion: isReducedMotion } = getService(DeviceInfoDefinition);
|
|
74
80
|
const { isOpen } = getService(ExperimentsDefinition);
|
|
75
|
-
const useV2 =
|
|
81
|
+
const useV2 = version === 'v2';
|
|
76
82
|
// The v1 runtime has no preset registration and doesn't understand LEGACY_* names; skip
|
|
77
83
|
// aliasing on those paths so named reaction effects remain resolvable.
|
|
78
84
|
const entries = resolveInteractKeyConflicts((useV2 ? getResolvedConfigEntries : getInteractConfigEntries)(config));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAC/E,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAA;AAChF,+FAA+F;AAC/F,+FAA+F;AAC/F,+FAA+F;AAC/F,kFAAkF;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAA;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,iCAAiC,EAAE,MAAM,6DAA6D,CAAA;AAG/G,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAA;AACzE,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAA;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,EACN,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,EACxB,2BAA2B,GAC3B,MAAM,iBAAiB,CAAA;AAExB,+FAA+F;AAC/F,MAAM,iBAAiB,GAAG,CAAC,OAA8B,EAAoB,EAAE,CAC9E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;AAE9F,MAAM,YAAY,GAAG,CAAC,OAA8B,EAAE,eAAwB,EAAE,EAAE;IACjF,6DAA6D;IAC7D,QAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;IAC7C,QAAQ,CAAC,KAAK,CAAC;QACd,mBAAmB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;QAC1E,iBAAiB,EAAE,IAAI;QACvB,SAAS,EAAE;YACV,gBAAgB,EAAE,IAAI;SACtB;KACD,CAAC,CAAA;IACF,KAAK,MAAM,
|
|
1
|
+
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/site-service-interactions",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.24",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -61,10 +61,10 @@
|
|
|
61
61
|
"@wix/motion-presets": "1.0.7",
|
|
62
62
|
"@wix/services-manager": "^0.2.20",
|
|
63
63
|
"@wix/services-manager-react": "^0.1.26",
|
|
64
|
-
"@wix/site-service-device-info": "1.0.
|
|
65
|
-
"@wix/site-service-experiments": "1.0.
|
|
66
|
-
"@wix/site-service-head-appender": "1.0.
|
|
67
|
-
"@wix/site-service-provide-css": "1.0.
|
|
64
|
+
"@wix/site-service-device-info": "1.0.7",
|
|
65
|
+
"@wix/site-service-experiments": "1.0.8",
|
|
66
|
+
"@wix/site-service-head-appender": "1.0.7",
|
|
67
|
+
"@wix/site-service-provide-css": "1.0.7",
|
|
68
68
|
"@wix/static-service": "1.0.22",
|
|
69
69
|
"@wix/viewer-service-pages": "1.0.18",
|
|
70
70
|
"@wix/wix-motion-presets": "1.3.0"
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
]
|
|
98
98
|
}
|
|
99
99
|
},
|
|
100
|
-
"falconPackageHash": "
|
|
100
|
+
"falconPackageHash": "7cd600a17f64e9cea7a79a99d2b2cf945843c9dfd590ea7f10c68f1d"
|
|
101
101
|
}
|
package/src/definition/index.ts
CHANGED
|
@@ -4,27 +4,101 @@ import type { InteractConfig } from '@wix/interact'
|
|
|
4
4
|
|
|
5
5
|
export type { InteractConfig }
|
|
6
6
|
|
|
7
|
+
/** CSS rule that a config entry applies to the components inside its `namespace`. */
|
|
7
8
|
export type InteractStyleRule = {
|
|
9
|
+
/** Key of the component the rule applies to. When omitted, the rule applies to the component that the entry's `namespace` names. */
|
|
8
10
|
key?: string
|
|
11
|
+
/** CSS selector, relative to the component, that narrows the rule to elements inside it. */
|
|
9
12
|
selector?: string
|
|
13
|
+
/** Media query to wrap the rule in. */
|
|
10
14
|
'@media'?: string
|
|
15
|
+
/** Container query to wrap the rule in. */
|
|
11
16
|
'@container'?: string
|
|
17
|
+
/** Feature query to wrap the rule in. */
|
|
12
18
|
'@supports'?: string
|
|
19
|
+
/** CSS properties and their values. */
|
|
13
20
|
properties: Record<string, string>
|
|
14
21
|
}
|
|
15
22
|
|
|
23
|
+
/** Set of interactions in the host's config, with the CSS rules that go with it. */
|
|
16
24
|
export type InteractConfigEntry = {
|
|
25
|
+
/** Key of the component that scopes the entry's CSS rules. Required when `styles` isn't empty. */
|
|
17
26
|
namespace?: string
|
|
27
|
+
/** The entry's interactions and effects, in the `@wix/interact` config format. */
|
|
18
28
|
interact: InteractConfig
|
|
29
|
+
/** CSS rules for components inside the entry's `namespace`. */
|
|
19
30
|
styles?: InteractStyleRule[]
|
|
20
31
|
}
|
|
21
32
|
|
|
22
|
-
|
|
33
|
+
/** Values the host supplies when it creates the service, as a single interactions config or several entries. */
|
|
34
|
+
export type IInteractionsServiceConfig = (InteractConfig | { entries: InteractConfigEntry[] }) & {
|
|
35
|
+
version?: 'v1' | 'v2'
|
|
36
|
+
}
|
|
23
37
|
|
|
38
|
+
/**
|
|
39
|
+
* Reports whether a component has interactions. An interaction runs effects on a trigger, such as a
|
|
40
|
+
* click or the component scrolling into view.
|
|
41
|
+
*
|
|
42
|
+
* @beta
|
|
43
|
+
*/
|
|
24
44
|
export interface IInteractionsService {
|
|
45
|
+
/**
|
|
46
|
+
* Checks whether a component has interactions.
|
|
47
|
+
*
|
|
48
|
+
* Use it to render the wrapper that runs a component's interactions, such as `<interact-element>`
|
|
49
|
+
* from `@wix/interact` for components that have interactions.
|
|
50
|
+
*
|
|
51
|
+
* The result for a given path doesn't change for the lifetime of the page.
|
|
52
|
+
*
|
|
53
|
+
* @param path Path of the component, as the host identifies it in the site's interactions. The host
|
|
54
|
+
* determines the format.
|
|
55
|
+
*
|
|
56
|
+
* For example, `c1dmp/comp-lxk2h8f1`, or `c1dmp/comp-r7p4k2wd/[]/comp-lxk2h8f1` for the same component
|
|
57
|
+
* inside a repeater.
|
|
58
|
+
*
|
|
59
|
+
* Case-sensitive, and must match the path the host uses for the component exactly. It isn't a CSS
|
|
60
|
+
* selector. For a component inside a repeater, specify `[]` in place of the repeater item's segment,
|
|
61
|
+
* because some hosts don't match a path that includes the item's ID.
|
|
62
|
+
* @returns `true` when the component is the trigger component or a target component of at least one
|
|
63
|
+
* interaction, and `false` for any other path, including an unknown path or an empty string. It
|
|
64
|
+
* doesn't say what the interactions do.
|
|
65
|
+
*
|
|
66
|
+
* @exampleValue path 'c1dmp/comp-lxk2h8f1'
|
|
67
|
+
* @exampleValue true
|
|
68
|
+
*
|
|
69
|
+
* @example Wrap a component only when it has interactions
|
|
70
|
+
* ```tsx
|
|
71
|
+
* import type { ReactElement } from 'react'
|
|
72
|
+
* import { useService } from '@wix/services-manager-react'
|
|
73
|
+
* import { InteractionsDefinition } from '@wix/site-service-interactions/definition'
|
|
74
|
+
*
|
|
75
|
+
* function WithInteractions({ path, children }: { path: string; children: ReactElement }) {
|
|
76
|
+
* const interactionsService = useService(InteractionsDefinition)
|
|
77
|
+
*
|
|
78
|
+
* if (!interactionsService.hasInteractions(path)) {
|
|
79
|
+
* return children
|
|
80
|
+
* }
|
|
81
|
+
*
|
|
82
|
+
* // The wrapper must contain exactly one child element.
|
|
83
|
+
* return <interact-element data-interact-key={path}>{children}</interact-element>
|
|
84
|
+
* }
|
|
85
|
+
* ```
|
|
86
|
+
*
|
|
87
|
+
* @example Check a component inside a repeater
|
|
88
|
+
* ```ts
|
|
89
|
+
* // Replace the repeater item's segment, such as [item-1], with [].
|
|
90
|
+
* const toTemplatePath = (path: string) => path.replace(/\[[^\]]+\]/g, '[]')
|
|
91
|
+
*
|
|
92
|
+
* // For example, 'c1dmp/comp-r7p4k2wd/[item-1]/comp-lxk2h8f1' checks 'c1dmp/comp-r7p4k2wd/[]/comp-lxk2h8f1'.
|
|
93
|
+
* function hasItemInteractions(itemPath: string): boolean {
|
|
94
|
+
* return interactionsService.hasInteractions(toTemplatePath(itemPath))
|
|
95
|
+
* }
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
25
98
|
hasInteractions: (path: string) => boolean
|
|
26
99
|
}
|
|
27
100
|
|
|
101
|
+
/** @internal Private service. Documented in the code, but left out of the developer docs. */
|
|
28
102
|
export type IInteractionsDefinition = StaticServiceDefinition<IInteractionsService, IInteractionsServiceConfig>
|
|
29
103
|
|
|
30
104
|
export const InteractionsDefinition = defineStaticService<IInteractionsService, IInteractionsServiceConfig>(
|
|
@@ -30,6 +30,12 @@ const getRuntimeConfigs = (entries: InteractConfigEntry[]): InteractConfig[] =>
|
|
|
30
30
|
entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0)
|
|
31
31
|
|
|
32
32
|
const initInteract = (entries: InteractConfigEntry[], isReducedMotion: boolean) => {
|
|
33
|
+
const runtimeConfigs = getRuntimeConfigs(entries)
|
|
34
|
+
// v1 registers its interact-element on create, and a tag can only be defined once: starting it for
|
|
35
|
+
// an empty config (the editor's disabled config, the site-level config) would lock out a later v2 loader.
|
|
36
|
+
if (!runtimeConfigs.length) {
|
|
37
|
+
return
|
|
38
|
+
}
|
|
33
39
|
// Bundled runtime is v1. v2 on the client is the CDN loader.
|
|
34
40
|
Interact.forceReducedMotion = isReducedMotion
|
|
35
41
|
Interact.setup({
|
|
@@ -39,8 +45,8 @@ const initInteract = (entries: InteractConfigEntry[], isReducedMotion: boolean)
|
|
|
39
45
|
useSafeViewEnter: true,
|
|
40
46
|
},
|
|
41
47
|
})
|
|
42
|
-
for (const
|
|
43
|
-
Interact.create(
|
|
48
|
+
for (const config of runtimeConfigs) {
|
|
49
|
+
Interact.create(config as InteractV1Config)
|
|
44
50
|
}
|
|
45
51
|
}
|
|
46
52
|
|
|
@@ -96,10 +102,13 @@ const getInteractiveComps = (entries: InteractConfigEntry[]): Set<string> => {
|
|
|
96
102
|
return keys
|
|
97
103
|
}
|
|
98
104
|
|
|
99
|
-
export const coreInteractions = (
|
|
105
|
+
export const coreInteractions = (
|
|
106
|
+
{ version, ...config }: IInteractionsServiceConfig,
|
|
107
|
+
getService: ServicesManager['getService']
|
|
108
|
+
) => {
|
|
100
109
|
const { reducedMotion: isReducedMotion } = getService(DeviceInfoDefinition)
|
|
101
110
|
const { isOpen } = getService(ExperimentsDefinition)
|
|
102
|
-
const useV2 =
|
|
111
|
+
const useV2 = version === 'v2'
|
|
103
112
|
// The v1 runtime has no preset registration and doesn't understand LEGACY_* names; skip
|
|
104
113
|
// aliasing on those paths so named reaction effects remain resolvable.
|
|
105
114
|
const entries = resolveInteractKeyConflicts((useV2 ? getResolvedConfigEntries : getInteractConfigEntries)(config))
|