@wix/site-service-interactions 1.0.23 → 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.
|
@@ -1,31 +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
|
-
/**
|
|
18
|
-
* `version` is the dialect the config was emitted in (Thunderbolt's `InteractionsPageConfig.version`). It is
|
|
19
|
-
* the only input that picks the interact runtime; absent means v1.
|
|
20
|
-
*/
|
|
28
|
+
/** Values the host supplies when it creates the service, as a single interactions config or several entries. */
|
|
21
29
|
export type IInteractionsServiceConfig = (InteractConfig | {
|
|
22
30
|
entries: InteractConfigEntry[];
|
|
23
31
|
}) & {
|
|
24
32
|
version?: 'v1' | 'v2';
|
|
25
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
|
+
*/
|
|
26
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
|
+
*/
|
|
27
94
|
hasInteractions: (path: string) => boolean;
|
|
28
95
|
}
|
|
96
|
+
/** @internal Private service. Documented in the code, but left out of the developer docs. */
|
|
29
97
|
export type IInteractionsDefinition = StaticServiceDefinition<IInteractionsService, IInteractionsServiceConfig>;
|
|
30
98
|
export declare const InteractionsDefinition: string & {
|
|
31
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,31 +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
|
-
/**
|
|
18
|
-
* `version` is the dialect the config was emitted in (Thunderbolt's `InteractionsPageConfig.version`). It is
|
|
19
|
-
* the only input that picks the interact runtime; absent means v1.
|
|
20
|
-
*/
|
|
28
|
+
/** Values the host supplies when it creates the service, as a single interactions config or several entries. */
|
|
21
29
|
export type IInteractionsServiceConfig = (InteractConfig | {
|
|
22
30
|
entries: InteractConfigEntry[];
|
|
23
31
|
}) & {
|
|
24
32
|
version?: 'v1' | 'v2';
|
|
25
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
|
+
*/
|
|
26
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
|
+
*/
|
|
27
94
|
hasInteractions: (path: string) => boolean;
|
|
28
95
|
}
|
|
96
|
+
/** @internal Private service. Documented in the code, but left out of the developer docs. */
|
|
29
97
|
export type IInteractionsDefinition = StaticServiceDefinition<IInteractionsService, IInteractionsServiceConfig>;
|
|
30
98
|
export declare const InteractionsDefinition: string & {
|
|
31
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"}
|
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,33 +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
|
-
/**
|
|
23
|
-
* `version` is the dialect the config was emitted in (Thunderbolt's `InteractionsPageConfig.version`). It is
|
|
24
|
-
* the only input that picks the interact runtime; absent means v1.
|
|
25
|
-
*/
|
|
33
|
+
/** Values the host supplies when it creates the service, as a single interactions config or several entries. */
|
|
26
34
|
export type IInteractionsServiceConfig = (InteractConfig | { entries: InteractConfigEntry[] }) & {
|
|
27
35
|
version?: 'v1' | 'v2'
|
|
28
36
|
}
|
|
29
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
|
+
*/
|
|
30
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
|
+
*/
|
|
31
98
|
hasInteractions: (path: string) => boolean
|
|
32
99
|
}
|
|
33
100
|
|
|
101
|
+
/** @internal Private service. Documented in the code, but left out of the developer docs. */
|
|
34
102
|
export type IInteractionsDefinition = StaticServiceDefinition<IInteractionsService, IInteractionsServiceConfig>
|
|
35
103
|
|
|
36
104
|
export const InteractionsDefinition = defineStaticService<IInteractionsService, IInteractionsServiceConfig>(
|