@wix/site-service-interactions 1.0.6 → 1.0.8
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/implementations/InteractionsScriptElement.js +2 -1
- package/cjs/build/implementations/InteractionsScriptElement.js.map +1 -1
- package/cjs/build/implementations/coreInteractions.js +10 -7
- package/cjs/build/implementations/coreInteractions.js.map +1 -1
- package/cjs/build/implementations/interactionsScriptContent.js +3 -0
- package/cjs/build/implementations/interactionsScriptContent.js.map +1 -1
- package/cjs/build/implementations/reviveScriptElement.d.ts +18 -0
- package/cjs/build/implementations/reviveScriptElement.js +32 -0
- package/cjs/build/implementations/reviveScriptElement.js.map +1 -0
- package/dist/implementations/InteractionsScriptElement.js +2 -1
- package/dist/implementations/InteractionsScriptElement.js.map +1 -1
- package/dist/implementations/coreInteractions.js +10 -7
- package/dist/implementations/coreInteractions.js.map +1 -1
- package/dist/implementations/interactionsScriptContent.js +3 -0
- package/dist/implementations/interactionsScriptContent.js.map +1 -1
- package/dist/implementations/reviveScriptElement.d.ts +18 -0
- package/dist/implementations/reviveScriptElement.js +28 -0
- package/dist/implementations/reviveScriptElement.js.map +1 -0
- package/package.json +2 -2
- package/src/implementations/InteractionsScriptElement.tsx +4 -1
- package/src/implementations/coreInteractions.ts +10 -7
- package/src/implementations/interactionsScriptContent.ts +3 -0
- package/src/implementations/reviveScriptElement.ts +29 -0
|
@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.createInteractionsScriptElement = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const interactionsScriptContent_1 = require("./interactionsScriptContent");
|
|
9
|
+
const reviveScriptElement_1 = require("./reviveScriptElement");
|
|
9
10
|
const createInteractionsScriptElement = (config, isReducedMotion, pageId) => () => {
|
|
10
11
|
const configId = `interactions-config-${pageId}`;
|
|
11
12
|
const interactionsScriptContent = (0, interactionsScriptContent_1.getInteractionsScriptContent)(configId, isReducedMotion);
|
|
12
13
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
13
14
|
react_1.default.createElement("script", { type: "application/json", id: configId }, encodeURIComponent(JSON.stringify(config))),
|
|
14
|
-
react_1.default.createElement("script", { type: "module", id: `interactions-loader-${pageId}
|
|
15
|
+
react_1.default.createElement("script", { type: "module", id: `interactions-loader-${pageId}`, ref: reviveScriptElement_1.reviveScriptElement }, interactionsScriptContent)));
|
|
15
16
|
};
|
|
16
17
|
exports.createInteractionsScriptElement = createInteractionsScriptElement;
|
|
17
18
|
//# sourceMappingURL=InteractionsScriptElement.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../../src/implementations/InteractionsScriptElement.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAGzB,2EAA0E;
|
|
1
|
+
{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../../src/implementations/InteractionsScriptElement.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAGzB,2EAA0E;AAC1E,+DAA2D;AAEpD,MAAM,+BAA+B,GACxC,CAAC,MAAsB,EAAE,eAAwB,EAAE,MAAc,EAAqB,EAAE,CACxF,GAAG,EAAE;IACD,MAAM,QAAQ,GAAG,uBAAuB,MAAM,EAAE,CAAA;IAChD,MAAM,yBAAyB,GAAG,IAAA,wDAA4B,EAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;IAEzF,OAAO,CACH;QACI,0CAAQ,IAAI,EAAC,kBAAkB,EAAC,EAAE,EAAE,QAAQ,IACvC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CACtC;QAGT,0CAAQ,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,uBAAuB,MAAM,EAAE,EAAE,GAAG,EAAE,yCAAmB,IAC9E,yBAAyB,CACrB,CACV,CACN,CAAA;AACL,CAAC,CAAA;AAlBQ,QAAA,+BAA+B,mCAkBvC"}
|
|
@@ -13,6 +13,9 @@ const initInteract = (config, isReducedMotion) => {
|
|
|
13
13
|
interact_1.Interact.setup({
|
|
14
14
|
scrollOptionsGetter: () => globalThis.document.getElementById('site-root'),
|
|
15
15
|
allowA11yTriggers: true,
|
|
16
|
+
viewEnter: {
|
|
17
|
+
useSafeViewEnter: true,
|
|
18
|
+
},
|
|
16
19
|
});
|
|
17
20
|
interact_1.Interact.create(config);
|
|
18
21
|
};
|
|
@@ -45,13 +48,13 @@ const coreInteractions = (config, getService) => {
|
|
|
45
48
|
const { SSR } = getService(definition_3.RenderingContextDefinition);
|
|
46
49
|
const isSSRExperimentOpen = isOpen('specs.thunderbolt.interactionsInSsr');
|
|
47
50
|
if (isSSRExperimentOpen) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
// Emits the config and loader scripts. Works in both environments: SSR serves markup the
|
|
52
|
+
// parser executes, and on the client the loader's ref revives it into a script that runs —
|
|
53
|
+
// which is what pages rendered only on the client (password-protected / members-only,
|
|
54
|
+
// client-side navigation) need, since they never get a server-rendered document.
|
|
55
|
+
const didInitInteractInSsr = tryInitInteractInSsr(config, isReducedMotion, getService);
|
|
56
|
+
// Fall back to direct init on the client if the script element could not be set up
|
|
57
|
+
// (e.g. no pageId or no interactions).
|
|
55
58
|
if (!didInitInteractInSsr && !SSR) {
|
|
56
59
|
initInteract(config, isReducedMotion);
|
|
57
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../../src/implementations/coreInteractions.ts"],"names":[],"mappings":";;;AAAA,4CAAwC;AAExC,yEAA+E;AAC/E,yEAAgF;AAChF,+EAA2F;AAC3F,mEAAoE;AACpE,mGAA+G;AAE/G,2EAA6E;AAE7E,MAAM,YAAY,GAAG,CAAC,MAAsB,EAAE,eAAwB,EAAE,EAAE;IACtE,mBAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;IAC7C,mBAAQ,CAAC,KAAK,CAAC;QACX,mBAAmB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;QAC1E,iBAAiB,EAAE,IAAI;
|
|
1
|
+
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../../src/implementations/coreInteractions.ts"],"names":[],"mappings":";;;AAAA,4CAAwC;AAExC,yEAA+E;AAC/E,yEAAgF;AAChF,+EAA2F;AAC3F,mEAAoE;AACpE,mGAA+G;AAE/G,2EAA6E;AAE7E,MAAM,YAAY,GAAG,CAAC,MAAsB,EAAE,eAAwB,EAAE,EAAE;IACtE,mBAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;IAC7C,mBAAQ,CAAC,KAAK,CAAC;QACX,mBAAmB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;QAC1E,iBAAiB,EAAE,IAAI;QACvB,SAAS,EAAE;YACP,gBAAgB,EAAE,IAAI;SACzB;KACJ,CAAC,CAAA;IACF,mBAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;AAC3B,CAAC,CAAA;AAED,MAAM,oBAAoB,GAAG,CACzB,MAAsB,EACtB,eAAwB,EACxB,UAAyC,EAC3C,EAAE;IACA,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAA;IACvD,IAAI,CAAC,eAAe,EAAE,CAAC;QACnB,OAAO,KAAK,CAAA;IAChB,CAAC;IAED,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,4BAAe,CAAC,CAAA;IACnD,MAAM,MAAM,GAAG,WAAW,EAAE,EAAE,CAAA;IAE9B,IAAI,CAAC,MAAM,EAAE,CAAC;QACV,OAAO,KAAK,CAAA;IAChB,CAAC;IAED,MAAM,EAAE,eAAe,EAAE,GAAG,UAAU,CAAC,qDAAiC,CAAC,CAAA;IACzE,MAAM,gBAAgB,GAAG,IAAA,2DAA+B,EAAC,MAAM,EAAE,eAAe,EAAE,MAAM,CAAC,CAAA;IACzF,eAAe,CAAC,gBAAgB,CAAC,CAAA;IAEjC,OAAO,IAAI,CAAA;AACf,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,YAA4C,EAAE,EAAE,CACzE,YAAY,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1C,mBAAmB;IACnB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACZ,qBAAqB;IACrB,sBAAsB;IACtB,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAI,CAAC,CAAC,CAAA;IAE3C,OAAO,GAAG,CAAA;AACd,CAAC,EAAE,IAAI,GAAG,EAAU,CAAC,CAAA;AAElB,MAAM,gBAAgB,GAAG,CAAC,MAAsB,EAAE,UAAyC,EAAE,EAAE;IAClG,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,UAAU,CAAC,iCAAoB,CAAC,CAAA;IAC3E,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,kCAAqB,CAAC,CAAA;IACpD,MAAM,EAAE,GAAG,EAAE,GAAG,UAAU,CAAC,uCAA0B,CAAC,CAAA;IAEtD,MAAM,mBAAmB,GAAG,MAAM,CAAC,qCAAqC,CAAC,CAAA;IACzE,IAAI,mBAAmB,EAAE,CAAC;QACtB,yFAAyF;QACzF,2FAA2F;QAC3F,sFAAsF;QACtF,iFAAiF;QACjF,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,MAAM,EAAE,eAAe,EAAE,UAAU,CAAC,CAAA;QAEtF,mFAAmF;QACnF,uCAAuC;QACvC,IAAI,CAAC,oBAAoB,IAAI,CAAC,GAAG,EAAE,CAAC;YAChC,YAAY,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;QACzC,CAAC;IACL,CAAC;SAAM,CAAC;QACJ,YAAY,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACzC,CAAC;IAED,OAAO;QACH,gBAAgB,EAAE,mBAAmB,CAAC,MAAM,CAAC,YAAY,CAAC;KAC7D,CAAA;AACL,CAAC,CAAA;AAzBY,QAAA,gBAAgB,oBAyB5B"}
|
|
@@ -16,6 +16,9 @@ const getInteractionsScriptContent = (configId, isReducedMotion) => `
|
|
|
16
16
|
Interact.setup({
|
|
17
17
|
scrollOptionsGetter: function(){ return document.getElementById(\`site-root\`) },
|
|
18
18
|
allowA11yTriggers: true,
|
|
19
|
+
viewEnter: {
|
|
20
|
+
useSafeViewEnter: true,
|
|
21
|
+
},
|
|
19
22
|
});
|
|
20
23
|
|
|
21
24
|
Interact.create(config);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interactionsScriptContent.js","sourceRoot":"","sources":["../../../src/implementations/interactionsScriptContent.ts"],"names":[],"mappings":";;;AAAO,MAAM,4BAA4B,GAAG,CAAC,QAAgB,EAAE,eAAwB,EAAE,EAAE,CAAC;;;sDAGtC,QAAQ;;;;;;;;4CAQlB,eAAe
|
|
1
|
+
{"version":3,"file":"interactionsScriptContent.js","sourceRoot":"","sources":["../../../src/implementations/interactionsScriptContent.ts"],"names":[],"mappings":";;;AAAO,MAAM,4BAA4B,GAAG,CAAC,QAAgB,EAAE,eAAwB,EAAE,EAAE,CAAC;;;sDAGtC,QAAQ;;;;;;;;4CAQlB,eAAe;;;;;;;;;;;;CAY1D,CAAA;AAvBY,QAAA,4BAA4B,gCAuBxC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Replaces a React-created <script> with an equivalent the browser will execute.
|
|
3
|
+
*
|
|
4
|
+
* React DOM creates every script through `div.innerHTML` — deliberately, so that scripts it renders
|
|
5
|
+
* on the client never run (see the `type === 'script'` branch of its `createElement`). That sets the
|
|
6
|
+
* HTML spec's "already started" flag, which is sticky: moving, re-inserting or re-connecting the
|
|
7
|
+
* element changes nothing, and the flag is even copied on `cloneNode`.
|
|
8
|
+
*
|
|
9
|
+
* An element from `document.createElement` has the flag clear and runs as soon as it is connected,
|
|
10
|
+
* so copying the source across is enough. Used as a ref, this runs only on the client — refs are
|
|
11
|
+
* never invoked during `renderToString` — while SSR keeps emitting markup the parser executes.
|
|
12
|
+
* One mechanism, no environment check.
|
|
13
|
+
*
|
|
14
|
+
* On a page that was server-rendered the parser has already run this source, so hydration reviving
|
|
15
|
+
* it runs it a second time. That create is inert: `interact-element` is defined, its elements are
|
|
16
|
+
* connected, and `connect()` returns early for them, so only the first instance serves a key.
|
|
17
|
+
*/
|
|
18
|
+
export declare const reviveScriptElement: (rendered: HTMLScriptElement | null) => void;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.reviveScriptElement = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* Replaces a React-created <script> with an equivalent the browser will execute.
|
|
6
|
+
*
|
|
7
|
+
* React DOM creates every script through `div.innerHTML` — deliberately, so that scripts it renders
|
|
8
|
+
* on the client never run (see the `type === 'script'` branch of its `createElement`). That sets the
|
|
9
|
+
* HTML spec's "already started" flag, which is sticky: moving, re-inserting or re-connecting the
|
|
10
|
+
* element changes nothing, and the flag is even copied on `cloneNode`.
|
|
11
|
+
*
|
|
12
|
+
* An element from `document.createElement` has the flag clear and runs as soon as it is connected,
|
|
13
|
+
* so copying the source across is enough. Used as a ref, this runs only on the client — refs are
|
|
14
|
+
* never invoked during `renderToString` — while SSR keeps emitting markup the parser executes.
|
|
15
|
+
* One mechanism, no environment check.
|
|
16
|
+
*
|
|
17
|
+
* On a page that was server-rendered the parser has already run this source, so hydration reviving
|
|
18
|
+
* it runs it a second time. That create is inert: `interact-element` is defined, its elements are
|
|
19
|
+
* connected, and `connect()` returns early for them, so only the first instance serves a key.
|
|
20
|
+
*/
|
|
21
|
+
const reviveScriptElement = (rendered) => {
|
|
22
|
+
if (!rendered?.isConnected) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
const executable = globalThis.document.createElement('script');
|
|
26
|
+
executable.type = rendered.type;
|
|
27
|
+
executable.id = rendered.id;
|
|
28
|
+
executable.textContent = rendered.textContent;
|
|
29
|
+
rendered.replaceWith(executable);
|
|
30
|
+
};
|
|
31
|
+
exports.reviveScriptElement = reviveScriptElement;
|
|
32
|
+
//# sourceMappingURL=reviveScriptElement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reviveScriptElement.js","sourceRoot":"","sources":["../../../src/implementations/reviveScriptElement.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;GAgBG;AACI,MAAM,mBAAmB,GAAG,CAAC,QAAkC,EAAE,EAAE;IACtE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,CAAC;QACzB,OAAM;IACV,CAAC;IAED,MAAM,UAAU,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC9D,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAA;IAC/B,UAAU,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAA;IAC3B,UAAU,CAAC,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAA;IAE7C,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;AACpC,CAAC,CAAA;AAXY,QAAA,mBAAmB,uBAW/B"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { getInteractionsScriptContent } from './interactionsScriptContent';
|
|
3
|
+
import { reviveScriptElement } from './reviveScriptElement';
|
|
3
4
|
export const createInteractionsScriptElement = (config, isReducedMotion, pageId) => () => {
|
|
4
5
|
const configId = `interactions-config-${pageId}`;
|
|
5
6
|
const interactionsScriptContent = getInteractionsScriptContent(configId, isReducedMotion);
|
|
6
7
|
return (React.createElement(React.Fragment, null,
|
|
7
8
|
React.createElement("script", { type: "application/json", id: configId }, encodeURIComponent(JSON.stringify(config))),
|
|
8
|
-
React.createElement("script", { type: "module", id: `interactions-loader-${pageId}
|
|
9
|
+
React.createElement("script", { type: "module", id: `interactions-loader-${pageId}`, ref: reviveScriptElement }, interactionsScriptContent)));
|
|
9
10
|
};
|
|
10
11
|
//# sourceMappingURL=InteractionsScriptElement.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../src/implementations/InteractionsScriptElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,4BAA4B,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../src/implementations/InteractionsScriptElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,4BAA4B,EAAE,MAAM,6BAA6B,CAAA;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,MAAM,CAAC,MAAM,+BAA+B,GACxC,CAAC,MAAsB,EAAE,eAAwB,EAAE,MAAc,EAAqB,EAAE,CACxF,GAAG,EAAE;IACD,MAAM,QAAQ,GAAG,uBAAuB,MAAM,EAAE,CAAA;IAChD,MAAM,yBAAyB,GAAG,4BAA4B,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;IAEzF,OAAO,CACH;QACI,gCAAQ,IAAI,EAAC,kBAAkB,EAAC,EAAE,EAAE,QAAQ,IACvC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CACtC;QAGT,gCAAQ,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,uBAAuB,MAAM,EAAE,EAAE,GAAG,EAAE,mBAAmB,IAC9E,yBAAyB,CACrB,CACV,CACN,CAAA;AACL,CAAC,CAAA"}
|
|
@@ -10,6 +10,9 @@ const initInteract = (config, isReducedMotion) => {
|
|
|
10
10
|
Interact.setup({
|
|
11
11
|
scrollOptionsGetter: () => globalThis.document.getElementById('site-root'),
|
|
12
12
|
allowA11yTriggers: true,
|
|
13
|
+
viewEnter: {
|
|
14
|
+
useSafeViewEnter: true,
|
|
15
|
+
},
|
|
13
16
|
});
|
|
14
17
|
Interact.create(config);
|
|
15
18
|
};
|
|
@@ -42,13 +45,13 @@ export const coreInteractions = (config, getService) => {
|
|
|
42
45
|
const { SSR } = getService(RenderingContextDefinition);
|
|
43
46
|
const isSSRExperimentOpen = isOpen('specs.thunderbolt.interactionsInSsr');
|
|
44
47
|
if (isSSRExperimentOpen) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
// Emits the config and loader scripts. Works in both environments: SSR serves markup the
|
|
49
|
+
// parser executes, and on the client the loader's ref revives it into a script that runs —
|
|
50
|
+
// which is what pages rendered only on the client (password-protected / members-only,
|
|
51
|
+
// client-side navigation) need, since they never get a server-rendered document.
|
|
52
|
+
const didInitInteractInSsr = tryInitInteractInSsr(config, isReducedMotion, getService);
|
|
53
|
+
// Fall back to direct init on the client if the script element could not be set up
|
|
54
|
+
// (e.g. no pageId or no interactions).
|
|
52
55
|
if (!didInitInteractInSsr && !SSR) {
|
|
53
56
|
initInteract(config, isReducedMotion);
|
|
54
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAC/E,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAA;AAChF,OAAO,EAAE,0BAA0B,EAAE,MAAM,gDAAgD,CAAA;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,iCAAiC,EAAE,MAAM,6DAA6D,CAAA;AAE/G,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAE7E,MAAM,YAAY,GAAG,CAAC,MAAsB,EAAE,eAAwB,EAAE,EAAE;IACtE,QAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;IAC7C,QAAQ,CAAC,KAAK,CAAC;QACX,mBAAmB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;QAC1E,iBAAiB,EAAE,IAAI;
|
|
1
|
+
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"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"}
|
|
@@ -13,6 +13,9 @@ export const getInteractionsScriptContent = (configId, isReducedMotion) => `
|
|
|
13
13
|
Interact.setup({
|
|
14
14
|
scrollOptionsGetter: function(){ return document.getElementById(\`site-root\`) },
|
|
15
15
|
allowA11yTriggers: true,
|
|
16
|
+
viewEnter: {
|
|
17
|
+
useSafeViewEnter: true,
|
|
18
|
+
},
|
|
16
19
|
});
|
|
17
20
|
|
|
18
21
|
Interact.create(config);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interactionsScriptContent.js","sourceRoot":"","sources":["../../src/implementations/interactionsScriptContent.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,QAAgB,EAAE,eAAwB,EAAE,EAAE,CAAC;;;sDAGtC,QAAQ;;;;;;;;4CAQlB,eAAe
|
|
1
|
+
{"version":3,"file":"interactionsScriptContent.js","sourceRoot":"","sources":["../../src/implementations/interactionsScriptContent.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,QAAgB,EAAE,eAAwB,EAAE,EAAE,CAAC;;;sDAGtC,QAAQ;;;;;;;;4CAQlB,eAAe;;;;;;;;;;;;CAY1D,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Replaces a React-created <script> with an equivalent the browser will execute.
|
|
3
|
+
*
|
|
4
|
+
* React DOM creates every script through `div.innerHTML` — deliberately, so that scripts it renders
|
|
5
|
+
* on the client never run (see the `type === 'script'` branch of its `createElement`). That sets the
|
|
6
|
+
* HTML spec's "already started" flag, which is sticky: moving, re-inserting or re-connecting the
|
|
7
|
+
* element changes nothing, and the flag is even copied on `cloneNode`.
|
|
8
|
+
*
|
|
9
|
+
* An element from `document.createElement` has the flag clear and runs as soon as it is connected,
|
|
10
|
+
* so copying the source across is enough. Used as a ref, this runs only on the client — refs are
|
|
11
|
+
* never invoked during `renderToString` — while SSR keeps emitting markup the parser executes.
|
|
12
|
+
* One mechanism, no environment check.
|
|
13
|
+
*
|
|
14
|
+
* On a page that was server-rendered the parser has already run this source, so hydration reviving
|
|
15
|
+
* it runs it a second time. That create is inert: `interact-element` is defined, its elements are
|
|
16
|
+
* connected, and `connect()` returns early for them, so only the first instance serves a key.
|
|
17
|
+
*/
|
|
18
|
+
export declare const reviveScriptElement: (rendered: HTMLScriptElement | null) => void;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Replaces a React-created <script> with an equivalent the browser will execute.
|
|
3
|
+
*
|
|
4
|
+
* React DOM creates every script through `div.innerHTML` — deliberately, so that scripts it renders
|
|
5
|
+
* on the client never run (see the `type === 'script'` branch of its `createElement`). That sets the
|
|
6
|
+
* HTML spec's "already started" flag, which is sticky: moving, re-inserting or re-connecting the
|
|
7
|
+
* element changes nothing, and the flag is even copied on `cloneNode`.
|
|
8
|
+
*
|
|
9
|
+
* An element from `document.createElement` has the flag clear and runs as soon as it is connected,
|
|
10
|
+
* so copying the source across is enough. Used as a ref, this runs only on the client — refs are
|
|
11
|
+
* never invoked during `renderToString` — while SSR keeps emitting markup the parser executes.
|
|
12
|
+
* One mechanism, no environment check.
|
|
13
|
+
*
|
|
14
|
+
* On a page that was server-rendered the parser has already run this source, so hydration reviving
|
|
15
|
+
* it runs it a second time. That create is inert: `interact-element` is defined, its elements are
|
|
16
|
+
* connected, and `connect()` returns early for them, so only the first instance serves a key.
|
|
17
|
+
*/
|
|
18
|
+
export const reviveScriptElement = (rendered) => {
|
|
19
|
+
if (!rendered?.isConnected) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
const executable = globalThis.document.createElement('script');
|
|
23
|
+
executable.type = rendered.type;
|
|
24
|
+
executable.id = rendered.id;
|
|
25
|
+
executable.textContent = rendered.textContent;
|
|
26
|
+
rendered.replaceWith(executable);
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=reviveScriptElement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reviveScriptElement.js","sourceRoot":"","sources":["../../src/implementations/reviveScriptElement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAkC,EAAE,EAAE;IACtE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,CAAC;QACzB,OAAM;IACV,CAAC;IAED,MAAM,UAAU,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC9D,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAA;IAC/B,UAAU,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAA;IAC3B,UAAU,CAAC,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAA;IAE7C,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;AACpC,CAAC,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.8",
|
|
4
4
|
"main": "cjs/build/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -90,5 +90,5 @@
|
|
|
90
90
|
]
|
|
91
91
|
}
|
|
92
92
|
},
|
|
93
|
-
"falconPackageHash": "
|
|
93
|
+
"falconPackageHash": "c2e3234ff7fc0c2543973ccbccb7e1ec318e6ae994f5ee0f85b8cc3b"
|
|
94
94
|
}
|
|
@@ -2,6 +2,7 @@ import React from 'react'
|
|
|
2
2
|
import type { FunctionComponent } from 'react'
|
|
3
3
|
import type { InteractConfig } from '@wix/interact'
|
|
4
4
|
import { getInteractionsScriptContent } from './interactionsScriptContent'
|
|
5
|
+
import { reviveScriptElement } from './reviveScriptElement'
|
|
5
6
|
|
|
6
7
|
export const createInteractionsScriptElement =
|
|
7
8
|
(config: InteractConfig, isReducedMotion: boolean, pageId: string): FunctionComponent =>
|
|
@@ -14,7 +15,9 @@ export const createInteractionsScriptElement =
|
|
|
14
15
|
<script type="application/json" id={configId}>
|
|
15
16
|
{encodeURIComponent(JSON.stringify(config))}
|
|
16
17
|
</script>
|
|
17
|
-
|
|
18
|
+
{/* In SSR the parser creates this and runs it. On the client React creates a script
|
|
19
|
+
that can never execute, so the ref swaps in one that can. */}
|
|
20
|
+
<script type="module" id={`interactions-loader-${pageId}`} ref={reviveScriptElement}>
|
|
18
21
|
{interactionsScriptContent}
|
|
19
22
|
</script>
|
|
20
23
|
</>
|
|
@@ -13,6 +13,9 @@ const initInteract = (config: InteractConfig, isReducedMotion: boolean) => {
|
|
|
13
13
|
Interact.setup({
|
|
14
14
|
scrollOptionsGetter: () => globalThis.document.getElementById('site-root'),
|
|
15
15
|
allowA11yTriggers: true,
|
|
16
|
+
viewEnter: {
|
|
17
|
+
useSafeViewEnter: true,
|
|
18
|
+
},
|
|
16
19
|
})
|
|
17
20
|
Interact.create(config)
|
|
18
21
|
}
|
|
@@ -59,14 +62,14 @@ export const coreInteractions = (config: InteractConfig, getService: ServicesMan
|
|
|
59
62
|
|
|
60
63
|
const isSSRExperimentOpen = isOpen('specs.thunderbolt.interactionsInSsr')
|
|
61
64
|
if (isSSRExperimentOpen) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
console.warn('failed initializing Interact in SSR, falling back to client init:', error)
|
|
68
|
-
}
|
|
65
|
+
// Emits the config and loader scripts. Works in both environments: SSR serves markup the
|
|
66
|
+
// parser executes, and on the client the loader's ref revives it into a script that runs —
|
|
67
|
+
// which is what pages rendered only on the client (password-protected / members-only,
|
|
68
|
+
// client-side navigation) need, since they never get a server-rendered document.
|
|
69
|
+
const didInitInteractInSsr = tryInitInteractInSsr(config, isReducedMotion, getService)
|
|
69
70
|
|
|
71
|
+
// Fall back to direct init on the client if the script element could not be set up
|
|
72
|
+
// (e.g. no pageId or no interactions).
|
|
70
73
|
if (!didInitInteractInSsr && !SSR) {
|
|
71
74
|
initInteract(config, isReducedMotion)
|
|
72
75
|
}
|
|
@@ -13,6 +13,9 @@ export const getInteractionsScriptContent = (configId: string, isReducedMotion:
|
|
|
13
13
|
Interact.setup({
|
|
14
14
|
scrollOptionsGetter: function(){ return document.getElementById(\`site-root\`) },
|
|
15
15
|
allowA11yTriggers: true,
|
|
16
|
+
viewEnter: {
|
|
17
|
+
useSafeViewEnter: true,
|
|
18
|
+
},
|
|
16
19
|
});
|
|
17
20
|
|
|
18
21
|
Interact.create(config);
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Replaces a React-created <script> with an equivalent the browser will execute.
|
|
3
|
+
*
|
|
4
|
+
* React DOM creates every script through `div.innerHTML` — deliberately, so that scripts it renders
|
|
5
|
+
* on the client never run (see the `type === 'script'` branch of its `createElement`). That sets the
|
|
6
|
+
* HTML spec's "already started" flag, which is sticky: moving, re-inserting or re-connecting the
|
|
7
|
+
* element changes nothing, and the flag is even copied on `cloneNode`.
|
|
8
|
+
*
|
|
9
|
+
* An element from `document.createElement` has the flag clear and runs as soon as it is connected,
|
|
10
|
+
* so copying the source across is enough. Used as a ref, this runs only on the client — refs are
|
|
11
|
+
* never invoked during `renderToString` — while SSR keeps emitting markup the parser executes.
|
|
12
|
+
* One mechanism, no environment check.
|
|
13
|
+
*
|
|
14
|
+
* On a page that was server-rendered the parser has already run this source, so hydration reviving
|
|
15
|
+
* it runs it a second time. That create is inert: `interact-element` is defined, its elements are
|
|
16
|
+
* connected, and `connect()` returns early for them, so only the first instance serves a key.
|
|
17
|
+
*/
|
|
18
|
+
export const reviveScriptElement = (rendered: HTMLScriptElement | null) => {
|
|
19
|
+
if (!rendered?.isConnected) {
|
|
20
|
+
return
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const executable = globalThis.document.createElement('script')
|
|
24
|
+
executable.type = rendered.type
|
|
25
|
+
executable.id = rendered.id
|
|
26
|
+
executable.textContent = rendered.textContent
|
|
27
|
+
|
|
28
|
+
rendered.replaceWith(executable)
|
|
29
|
+
}
|