@wix/site-service-interactions 1.0.35 → 1.0.36
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/coreInteractions.js +27 -7
- package/cjs/build/implementations/coreInteractions.js.map +1 -1
- package/cjs/build/implementations/v2/BundledInteractions.d.ts +8 -0
- package/cjs/build/implementations/v2/BundledInteractions.js +69 -0
- package/cjs/build/implementations/v2/BundledInteractions.js.map +1 -0
- package/cjs/build/implementations/v2/configCss.d.ts +2 -0
- package/cjs/build/implementations/v2/configCss.js +11 -6
- package/cjs/build/implementations/v2/configCss.js.map +1 -1
- package/dist/implementations/coreInteractions.js +27 -7
- package/dist/implementations/coreInteractions.js.map +1 -1
- package/dist/implementations/v2/BundledInteractions.d.ts +8 -0
- package/dist/implementations/v2/BundledInteractions.js +32 -0
- package/dist/implementations/v2/BundledInteractions.js.map +1 -0
- package/dist/implementations/v2/configCss.d.ts +2 -0
- package/dist/implementations/v2/configCss.js +8 -3
- package/dist/implementations/v2/configCss.js.map +1 -1
- package/package.json +2 -2
- package/src/implementations/coreInteractions.ts +34 -8
- package/src/implementations/v2/BundledInteractions.tsx +36 -0
- package/src/implementations/v2/configCss.ts +9 -3
|
@@ -14,6 +14,7 @@ const types_1 = require("@wix/site-service-head-appender/types");
|
|
|
14
14
|
const provide_component_1 = require("@wix/services-manager-react/core-services/provide-component");
|
|
15
15
|
const InteractionsScriptElement_1 = require("./InteractionsScriptElement");
|
|
16
16
|
const InteractionsScriptElement_2 = require("./v2/InteractionsScriptElement");
|
|
17
|
+
const BundledInteractions_1 = require("./v2/BundledInteractions");
|
|
17
18
|
const configCss_1 = require("./v2/configCss");
|
|
18
19
|
const configStyleHeadContent_1 = require("./v2/configStyleHeadContent");
|
|
19
20
|
const clickTriggerCss_1 = require("./v2/clickTriggerCss");
|
|
@@ -45,13 +46,16 @@ const initInteract = (entries, isReducedMotion) => {
|
|
|
45
46
|
interact_v1_1.Interact.create(config);
|
|
46
47
|
}
|
|
47
48
|
};
|
|
48
|
-
const
|
|
49
|
+
const getV2Css = (entries) => {
|
|
49
50
|
const generatedCss = entries
|
|
50
51
|
.flatMap((entry) => [(0, configCss_1.getV2ConfigCss)(entry.interact), getBackgroundCss(entry)])
|
|
51
52
|
.map((css) => css.trim())
|
|
52
53
|
.filter(Boolean)
|
|
53
54
|
.join('\n');
|
|
54
|
-
|
|
55
|
+
return [(0, authoredStyles_1.getAuthoredStylesCss)(entries).trim(), generatedCss].filter(Boolean).join('\n');
|
|
56
|
+
};
|
|
57
|
+
const getV2HeadContent = (entries) => {
|
|
58
|
+
const css = getV2Css(entries);
|
|
55
59
|
return ((getRuntimeConfigs(entries).length ? (0, interactionsScriptContent_1.getV2ModulePreloadHeadContent)() : '') +
|
|
56
60
|
(css ? (0, configStyleHeadContent_1.getV2ConfigStyleHeadContent)(css) : ''));
|
|
57
61
|
};
|
|
@@ -81,6 +85,14 @@ const initRuntime = (entries, isReducedMotion, getService, useV2) => {
|
|
|
81
85
|
.filter(Boolean);
|
|
82
86
|
addTopComponent((0, InteractionsScriptElement_2.createV2InteractionsScriptElement)(runtimeConfigs, isReducedMotion, pageId, configCss));
|
|
83
87
|
};
|
|
88
|
+
/** In place of `initRuntime`'s loader, on the same pages: the bundled runtime, with the server's head CSS rendered with the page. */
|
|
89
|
+
const initBundledRuntime = (entries, isReducedMotion, getService) => {
|
|
90
|
+
const runtimeConfigs = getRuntimeConfigs(entries);
|
|
91
|
+
if (!runtimeConfigs.length || !getService(definition_3.PagesDefinition).currentPageId()) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
getService(provide_component_1.ProvideComponentServiceDefinition).addTopComponent((0, BundledInteractions_1.createBundledV2Interactions)(runtimeConfigs, isReducedMotion, getV2Css(entries)));
|
|
95
|
+
};
|
|
84
96
|
const getInteractiveComps = (entries) => {
|
|
85
97
|
const keys = new Set();
|
|
86
98
|
for (const entry of entries) {
|
|
@@ -96,10 +108,15 @@ const coreInteractions = ({ version, ...config }, getService) => {
|
|
|
96
108
|
// aliasing on those paths so named reaction effects remain resolvable.
|
|
97
109
|
const entries = (0, configEntries_1.resolveInteractKeyConflicts)((useV2 ? configEntries_1.getResolvedConfigEntries : configEntries_1.getInteractConfigEntries)(config));
|
|
98
110
|
if (useV2) {
|
|
99
|
-
//
|
|
100
|
-
//
|
|
101
|
-
|
|
102
|
-
|
|
111
|
+
// The editor renders pages only in the browser, so it gets no server head: it renders that CSS with the page and
|
|
112
|
+
// runs the runtime it bundles, rather than a loader that imports it from the CDN after the page has painted
|
|
113
|
+
if (process.env.PACKAGE_NAME === 'thunderbolt-ds') {
|
|
114
|
+
initBundledRuntime(entries, isReducedMotion, getService);
|
|
115
|
+
}
|
|
116
|
+
else if (!process.env.browser) {
|
|
117
|
+
// Both belong in the head: the preload links only help while the document is still parsing,
|
|
118
|
+
// and the generated CSS hides elements before their entrance effect, so it has to apply
|
|
119
|
+
// before the body renders.
|
|
103
120
|
const headContent = getV2HeadContent(entries);
|
|
104
121
|
// GENERAL rather than setHead's AFTER_SECURITY default: thunderbolt only reads the
|
|
105
122
|
// after-security bucket on its SEO path, so the default drops this on every normal
|
|
@@ -107,8 +124,11 @@ const coreInteractions = ({ version, ...config }, getService) => {
|
|
|
107
124
|
if (headContent) {
|
|
108
125
|
getService(definition_4.HeadAppenderDefinition).setHead(headContent, types_1.HeadContentType.GENERAL);
|
|
109
126
|
}
|
|
127
|
+
initRuntime(entries, isReducedMotion, getService, true);
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
initRuntime(entries, isReducedMotion, getService, true);
|
|
110
131
|
}
|
|
111
|
-
initRuntime(entries, isReducedMotion, getService, true);
|
|
112
132
|
}
|
|
113
133
|
else if (isOpen('specs.thunderbolt.interactionsInSsr')) {
|
|
114
134
|
// Emits the config and loader scripts. Works in both environments: SSR serves markup the
|
|
@@ -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,0DAAyD;AACzD,kEAAiE;AACjE,8EAA8E;AAC9E,wDAA0D;AAC1D,mDAMwB;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,oGAAoG;AACpG,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAuB,EAAU,EAAE,CACjF,SAAS,KAAK,mCAAmB,CAAC,CAAC,CAAC,IAAA,4CAAsB,EAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AAE1E,MAAM,YAAY,GAAG,CAAC,OAA8B,EAAE,eAAwB,EAAE,EAAE;IACjF,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAA;IACjD,mGAAmG;IACnG,0GAA0G;IAC1G,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;QAC5B,OAAM;IACP,CAAC;IACD,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,MAAM,IAAI,cAAc,EAAE,CAAC;QACrC,sBAAQ,CAAC,MAAM,CAAC,MAA0B,CAAC,CAAA;IAC5C,CAAC;AACF,CAAC,CAAA;AAED,MAAM,
|
|
1
|
+
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
|
2
|
+
import type { InteractConfig } from '../../definition';
|
|
3
|
+
/**
|
|
4
|
+
* The page's interactions with the bundled runtime, for the editor, which renders pages only in the browser: the CSS
|
|
5
|
+
* the server would send in the head renders with the page, so its first paint already animates, and the instances are
|
|
6
|
+
* the page's own.
|
|
7
|
+
*/
|
|
8
|
+
export declare const createBundledV2Interactions: (configs: InteractConfig[], isReducedMotion: boolean, css: string) => FunctionComponent;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.createBundledV2Interactions = void 0;
|
|
37
|
+
const react_1 = __importStar(require("react"));
|
|
38
|
+
const configCss_1 = require("./configCss");
|
|
39
|
+
/**
|
|
40
|
+
* The page's interactions with the bundled runtime, for the editor, which renders pages only in the browser: the CSS
|
|
41
|
+
* the server would send in the head renders with the page, so its first paint already animates, and the instances are
|
|
42
|
+
* the page's own.
|
|
43
|
+
*/
|
|
44
|
+
const createBundledV2Interactions = (configs, isReducedMotion, css) => () => {
|
|
45
|
+
(0, react_1.useEffect)(() => {
|
|
46
|
+
configCss_1.Interact.forceReducedMotion = isReducedMotion;
|
|
47
|
+
configCss_1.Interact.setup({
|
|
48
|
+
scrollOptionsGetter: () => document.getElementById('site-root'),
|
|
49
|
+
allowA11yTriggers: true,
|
|
50
|
+
viewEnter: {
|
|
51
|
+
useSafeViewEnter: true,
|
|
52
|
+
},
|
|
53
|
+
});
|
|
54
|
+
// The editor's config can be mid-edit: a config that fails is skipped rather than taking the page down with it
|
|
55
|
+
const instances = configs.flatMap((config) => {
|
|
56
|
+
try {
|
|
57
|
+
return [configCss_1.Interact.create(config)];
|
|
58
|
+
}
|
|
59
|
+
catch (error) {
|
|
60
|
+
console.error('Failed running an interactions config', error);
|
|
61
|
+
return [];
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
return () => instances.forEach((instance) => instance.destroy());
|
|
65
|
+
}, []);
|
|
66
|
+
return react_1.default.createElement("style", null, css);
|
|
67
|
+
};
|
|
68
|
+
exports.createBundledV2Interactions = createBundledV2Interactions;
|
|
69
|
+
//# sourceMappingURL=BundledInteractions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BundledInteractions.js","sourceRoot":"","sources":["../../../../src/implementations/v2/BundledInteractions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAGxC,2CAAsC;AAEtC;;;;GAIG;AACI,MAAM,2BAA2B,GACvC,CAAC,OAAyB,EAAE,eAAwB,EAAE,GAAW,EAAqB,EAAE,CACxF,GAAG,EAAE;IACJ,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,oBAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;QAC7C,oBAAQ,CAAC,KAAK,CAAC;YACd,mBAAmB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;YAC/D,iBAAiB,EAAE,IAAI;YACvB,SAAS,EAAE;gBACV,gBAAgB,EAAE,IAAI;aACtB;SACD,CAAC,CAAA;QACF,+GAA+G;QAC/G,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;YAC5C,IAAI,CAAC;gBACJ,OAAO,CAAC,oBAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;YACjC,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBAChB,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAA;gBAC7D,OAAO,EAAE,CAAA;YACV,CAAC;QACF,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;IACjE,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,6CAAQ,GAAG,CAAS,CAAA;AAC5B,CAAC,CAAA;AAzBW,QAAA,2BAA2B,GAA3B,2BAA2B,CAyBtC"}
|
|
@@ -33,12 +33,17 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.getV2ConfigCss = exports.motionPresets = void 0;
|
|
36
|
+
exports.getV2ConfigCss = exports.motionPresets = exports.Interact = void 0;
|
|
37
37
|
const allLegacyPresets = __importStar(require("@wix/wix-motion-presets"));
|
|
38
38
|
const allPresets = __importStar(require("@wix/motion-presets"));
|
|
39
|
-
|
|
39
|
+
// Through the namespace: web.js only re-exports the core and installs `Interact.defineInteractElement`, which
|
|
40
|
+
// `Interact.create` needs to run on `<interact-element>`. With named imports, a bundler that trusts the package's
|
|
41
|
+
// `sideEffects: false` links them past web.js to the core and drops it.
|
|
42
|
+
const interactWeb = __importStar(require("@wix/interact/web"));
|
|
40
43
|
const clickTriggerCss_1 = require("./clickTriggerCss");
|
|
41
44
|
const motionPresets_1 = require("./motionPresets");
|
|
45
|
+
const { generate } = interactWeb;
|
|
46
|
+
({ Interact: exports.Interact } = interactWeb);
|
|
42
47
|
const isEffectModule = (value) => typeof value === 'object' && value !== null && 'web' in value && 'getNames' in value;
|
|
43
48
|
const getPresetModules = (namespace, prefix = '') => Object.fromEntries(Object.entries(namespace)
|
|
44
49
|
.filter(([, value]) => isEffectModule(value))
|
|
@@ -51,12 +56,12 @@ exports.motionPresets = {
|
|
|
51
56
|
...getPresetModules(allPresets),
|
|
52
57
|
...getPresetModules(allLegacyPresets, motionPresets_1.LEGACY_PREFIX),
|
|
53
58
|
};
|
|
54
|
-
// Interact's registry is process-global.
|
|
55
|
-
//
|
|
56
|
-
|
|
59
|
+
// Interact's registry is process-global. Only the server's bundle and the editor's pull this module in (`process.env`
|
|
60
|
+
// DCE), so both namespaces are registered once per Node process or document.
|
|
61
|
+
exports.Interact.registerEffects(exports.motionPresets);
|
|
57
62
|
/** Emit animation FOUC CSS and click-trigger cursor rules. */
|
|
58
63
|
const getV2ConfigCss = (config) => {
|
|
59
|
-
const animationCss =
|
|
64
|
+
const animationCss = generate(config, true).trim();
|
|
60
65
|
const clickCss = (0, clickTriggerCss_1.getClickTriggerCss)(config).trim();
|
|
61
66
|
return [animationCss, clickCss].filter(Boolean).join('\n');
|
|
62
67
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"configCss.js","sourceRoot":"","sources":["../../../../src/implementations/v2/configCss.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAY,gBAAgB,oDAA+B;AAC3D,MAAY,UAAU,gDAA2B;AACjD,
|
|
1
|
+
{"version":3,"file":"configCss.js","sourceRoot":"","sources":["../../../../src/implementations/v2/configCss.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAY,gBAAgB,oDAA+B;AAC3D,MAAY,UAAU,gDAA2B;AACjD,8GAA8G;AAC9G,kHAAkH;AAClH,wEAAwE;AACxE,MAAY,WAAW,8CAAyB;AAEhD,uDAAsD;AACtD,mDAA+C;AAE/C,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAA;AAChC,CAAa,EAAE,QAAQ,EAAR,QAAA,QAAQ,EAAE,GAAG,WAAW,EAAA;AAUvC,MAAM,cAAc,GAAG,CAAC,KAAc,EAAyB,EAAE,CAChE,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,UAAU,IAAI,KAAK,CAAA;AAErF,MAAM,gBAAgB,GAAG,CAAC,SAAiB,EAAE,MAAM,GAAW,EAAE,EAAgC,EAAE,CACjG,MAAM,CAAC,WAAW,CACjB,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;KACvB,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;KAC5C,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,EAAE,EAAE,KAAqB,CAAC,CAAC,CACrE,CAAA;AAEF;;;GAGG;AACU,QAAA,aAAa,GAAiC;IAC1D,GAAG,gBAAgB,CAAC,UAAU,CAAC;IAC/B,GAAG,gBAAgB,CAAC,gBAAgB,EAAE,6BAAa,CAAC;CACpD,CAAA;AAED,sHAAsH;AACtH,6EAA6E;AAC7E,QAAA,QAAQ,CAAC,eAAe,CAAC,QAAA,aAA0C,CAAC,CAAA;AAEpE,8DAA8D;AACvD,MAAM,cAAc,GAAG,CAAC,MAAsB,EAAU,EAAE;IAChE,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;IAClD,MAAM,QAAQ,GAAG,IAAA,oCAAkB,EAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAA;IAElD,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC3D,CAAC,CAAA;AALY,QAAA,cAAc,GAAd,cAAc,CAK1B"}
|
|
@@ -11,6 +11,7 @@ import { HeadContentType } from '@wix/site-service-head-appender/types';
|
|
|
11
11
|
import { ProvideComponentServiceDefinition } from '@wix/services-manager-react/core-services/provide-component';
|
|
12
12
|
import { createInteractionsScriptElement } from './InteractionsScriptElement';
|
|
13
13
|
import { createV2InteractionsScriptElement } from './v2/InteractionsScriptElement';
|
|
14
|
+
import { createBundledV2Interactions } from './v2/BundledInteractions';
|
|
14
15
|
import { getV2ConfigCss } from './v2/configCss';
|
|
15
16
|
import { getV2ConfigStyleHeadContent } from './v2/configStyleHeadContent';
|
|
16
17
|
import { getClickTriggerCss } from './v2/clickTriggerCss';
|
|
@@ -42,13 +43,16 @@ const initInteract = (entries, isReducedMotion) => {
|
|
|
42
43
|
Interact.create(config);
|
|
43
44
|
}
|
|
44
45
|
};
|
|
45
|
-
const
|
|
46
|
+
const getV2Css = (entries) => {
|
|
46
47
|
const generatedCss = entries
|
|
47
48
|
.flatMap((entry) => [getV2ConfigCss(entry.interact), getBackgroundCss(entry)])
|
|
48
49
|
.map((css) => css.trim())
|
|
49
50
|
.filter(Boolean)
|
|
50
51
|
.join('\n');
|
|
51
|
-
|
|
52
|
+
return [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n');
|
|
53
|
+
};
|
|
54
|
+
const getV2HeadContent = (entries) => {
|
|
55
|
+
const css = getV2Css(entries);
|
|
52
56
|
return ((getRuntimeConfigs(entries).length ? getV2ModulePreloadHeadContent() : '') +
|
|
53
57
|
(css ? getV2ConfigStyleHeadContent(css) : ''));
|
|
54
58
|
};
|
|
@@ -78,6 +82,14 @@ const initRuntime = (entries, isReducedMotion, getService, useV2) => {
|
|
|
78
82
|
.filter(Boolean);
|
|
79
83
|
addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId, configCss));
|
|
80
84
|
};
|
|
85
|
+
/** In place of `initRuntime`'s loader, on the same pages: the bundled runtime, with the server's head CSS rendered with the page. */
|
|
86
|
+
const initBundledRuntime = (entries, isReducedMotion, getService) => {
|
|
87
|
+
const runtimeConfigs = getRuntimeConfigs(entries);
|
|
88
|
+
if (!runtimeConfigs.length || !getService(PagesDefinition).currentPageId()) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
getService(ProvideComponentServiceDefinition).addTopComponent(createBundledV2Interactions(runtimeConfigs, isReducedMotion, getV2Css(entries)));
|
|
92
|
+
};
|
|
81
93
|
const getInteractiveComps = (entries) => {
|
|
82
94
|
const keys = new Set();
|
|
83
95
|
for (const entry of entries) {
|
|
@@ -93,10 +105,15 @@ export const coreInteractions = ({ version, ...config }, getService) => {
|
|
|
93
105
|
// aliasing on those paths so named reaction effects remain resolvable.
|
|
94
106
|
const entries = resolveInteractKeyConflicts((useV2 ? getResolvedConfigEntries : getInteractConfigEntries)(config));
|
|
95
107
|
if (useV2) {
|
|
96
|
-
//
|
|
97
|
-
//
|
|
98
|
-
|
|
99
|
-
|
|
108
|
+
// The editor renders pages only in the browser, so it gets no server head: it renders that CSS with the page and
|
|
109
|
+
// runs the runtime it bundles, rather than a loader that imports it from the CDN after the page has painted
|
|
110
|
+
if (process.env.PACKAGE_NAME === 'thunderbolt-ds') {
|
|
111
|
+
initBundledRuntime(entries, isReducedMotion, getService);
|
|
112
|
+
}
|
|
113
|
+
else if (!process.env.browser) {
|
|
114
|
+
// Both belong in the head: the preload links only help while the document is still parsing,
|
|
115
|
+
// and the generated CSS hides elements before their entrance effect, so it has to apply
|
|
116
|
+
// before the body renders.
|
|
100
117
|
const headContent = getV2HeadContent(entries);
|
|
101
118
|
// GENERAL rather than setHead's AFTER_SECURITY default: thunderbolt only reads the
|
|
102
119
|
// after-security bucket on its SEO path, so the default drops this on every normal
|
|
@@ -104,8 +121,11 @@ export const coreInteractions = ({ version, ...config }, getService) => {
|
|
|
104
121
|
if (headContent) {
|
|
105
122
|
getService(HeadAppenderDefinition).setHead(headContent, HeadContentType.GENERAL);
|
|
106
123
|
}
|
|
124
|
+
initRuntime(entries, isReducedMotion, getService, true);
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
initRuntime(entries, isReducedMotion, getService, true);
|
|
107
128
|
}
|
|
108
|
-
initRuntime(entries, isReducedMotion, getService, true);
|
|
109
129
|
}
|
|
110
130
|
else if (isOpen('specs.thunderbolt.interactionsInSsr')) {
|
|
111
131
|
// Emits the config and loader scripts. Works in both environments: SSR serves markup the
|
|
@@ -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,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAA;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,EACN,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,EACxB,mBAAmB,EACnB,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,oGAAoG;AACpG,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAuB,EAAU,EAAE,CACjF,SAAS,KAAK,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AAE1E,MAAM,YAAY,GAAG,CAAC,OAA8B,EAAE,eAAwB,EAAE,EAAE;IACjF,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAA;IACjD,mGAAmG;IACnG,0GAA0G;IAC1G,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;QAC5B,OAAM;IACP,CAAC;IACD,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,MAAM,IAAI,cAAc,EAAE,CAAC;QACrC,QAAQ,CAAC,MAAM,CAAC,MAA0B,CAAC,CAAA;IAC5C,CAAC;AACF,CAAC,CAAA;AAED,MAAM,
|
|
1
|
+
{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
|
2
|
+
import type { InteractConfig } from '../../definition';
|
|
3
|
+
/**
|
|
4
|
+
* The page's interactions with the bundled runtime, for the editor, which renders pages only in the browser: the CSS
|
|
5
|
+
* the server would send in the head renders with the page, so its first paint already animates, and the instances are
|
|
6
|
+
* the page's own.
|
|
7
|
+
*/
|
|
8
|
+
export declare const createBundledV2Interactions: (configs: InteractConfig[], isReducedMotion: boolean, css: string) => FunctionComponent;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
|
+
import { Interact } from './configCss';
|
|
3
|
+
/**
|
|
4
|
+
* The page's interactions with the bundled runtime, for the editor, which renders pages only in the browser: the CSS
|
|
5
|
+
* the server would send in the head renders with the page, so its first paint already animates, and the instances are
|
|
6
|
+
* the page's own.
|
|
7
|
+
*/
|
|
8
|
+
export const createBundledV2Interactions = (configs, isReducedMotion, css) => () => {
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
Interact.forceReducedMotion = isReducedMotion;
|
|
11
|
+
Interact.setup({
|
|
12
|
+
scrollOptionsGetter: () => document.getElementById('site-root'),
|
|
13
|
+
allowA11yTriggers: true,
|
|
14
|
+
viewEnter: {
|
|
15
|
+
useSafeViewEnter: true,
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
// The editor's config can be mid-edit: a config that fails is skipped rather than taking the page down with it
|
|
19
|
+
const instances = configs.flatMap((config) => {
|
|
20
|
+
try {
|
|
21
|
+
return [Interact.create(config)];
|
|
22
|
+
}
|
|
23
|
+
catch (error) {
|
|
24
|
+
console.error('Failed running an interactions config', error);
|
|
25
|
+
return [];
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
return () => instances.forEach((instance) => instance.destroy());
|
|
29
|
+
}, []);
|
|
30
|
+
return React.createElement("style", null, css);
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=BundledInteractions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BundledInteractions.js","sourceRoot":"","sources":["../../../src/implementations/v2/BundledInteractions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GACvC,CAAC,OAAyB,EAAE,eAAwB,EAAE,GAAW,EAAqB,EAAE,CACxF,GAAG,EAAE;IACJ,SAAS,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;QAC7C,QAAQ,CAAC,KAAK,CAAC;YACd,mBAAmB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;YAC/D,iBAAiB,EAAE,IAAI;YACvB,SAAS,EAAE;gBACV,gBAAgB,EAAE,IAAI;aACtB;SACD,CAAC,CAAA;QACF,+GAA+G;QAC/G,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;YAC5C,IAAI,CAAC;gBACJ,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;YACjC,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBAChB,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAA;gBAC7D,OAAO,EAAE,CAAA;YACV,CAAC;QACF,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;IACjE,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,mCAAQ,GAAG,CAAS,CAAA;AAC5B,CAAC,CAAA"}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import * as allLegacyPresets from '@wix/wix-motion-presets';
|
|
2
2
|
import * as allPresets from '@wix/motion-presets';
|
|
3
|
-
|
|
3
|
+
// Through the namespace: web.js only re-exports the core and installs `Interact.defineInteractElement`, which
|
|
4
|
+
// `Interact.create` needs to run on `<interact-element>`. With named imports, a bundler that trusts the package's
|
|
5
|
+
// `sideEffects: false` links them past web.js to the core and drops it.
|
|
6
|
+
import * as interactWeb from '@wix/interact/web';
|
|
4
7
|
import { getClickTriggerCss } from './clickTriggerCss';
|
|
5
8
|
import { LEGACY_PREFIX } from './motionPresets';
|
|
9
|
+
const { generate } = interactWeb;
|
|
10
|
+
export const { Interact } = interactWeb;
|
|
6
11
|
const isEffectModule = (value) => typeof value === 'object' && value !== null && 'web' in value && 'getNames' in value;
|
|
7
12
|
const getPresetModules = (namespace, prefix = '') => Object.fromEntries(Object.entries(namespace)
|
|
8
13
|
.filter(([, value]) => isEffectModule(value))
|
|
@@ -15,8 +20,8 @@ export const motionPresets = {
|
|
|
15
20
|
...getPresetModules(allPresets),
|
|
16
21
|
...getPresetModules(allLegacyPresets, LEGACY_PREFIX),
|
|
17
22
|
};
|
|
18
|
-
// Interact's registry is process-global.
|
|
19
|
-
//
|
|
23
|
+
// Interact's registry is process-global. Only the server's bundle and the editor's pull this module in (`process.env`
|
|
24
|
+
// DCE), so both namespaces are registered once per Node process or document.
|
|
20
25
|
Interact.registerEffects(motionPresets);
|
|
21
26
|
/** Emit animation FOUC CSS and click-trigger cursor rules. */
|
|
22
27
|
export const getV2ConfigCss = (config) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"configCss.js","sourceRoot":"","sources":["../../../src/implementations/v2/configCss.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACjD,
|
|
1
|
+
{"version":3,"file":"configCss.js","sourceRoot":"","sources":["../../../src/implementations/v2/configCss.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACjD,8GAA8G;AAC9G,kHAAkH;AAClH,wEAAwE;AACxE,OAAO,KAAK,WAAW,MAAM,mBAAmB,CAAA;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAA;AAChC,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAA;AAUvC,MAAM,cAAc,GAAG,CAAC,KAAc,EAAyB,EAAE,CAChE,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,UAAU,IAAI,KAAK,CAAA;AAErF,MAAM,gBAAgB,GAAG,CAAC,SAAiB,EAAE,MAAM,GAAW,EAAE,EAAgC,EAAE,CACjG,MAAM,CAAC,WAAW,CACjB,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;KACvB,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;KAC5C,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,EAAE,EAAE,KAAqB,CAAC,CAAC,CACrE,CAAA;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC;IAC1D,GAAG,gBAAgB,CAAC,UAAU,CAAC;IAC/B,GAAG,gBAAgB,CAAC,gBAAgB,EAAE,aAAa,CAAC;CACpD,CAAA;AAED,sHAAsH;AACtH,6EAA6E;AAC7E,QAAQ,CAAC,eAAe,CAAC,aAA0C,CAAC,CAAA;AAEpE,8DAA8D;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAsB,EAAU,EAAE;IAChE,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;IAClD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAA;IAElD,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC3D,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.36",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
]
|
|
98
98
|
}
|
|
99
99
|
},
|
|
100
|
-
"falconPackageHash": "
|
|
100
|
+
"falconPackageHash": "44bf1ad483f5a1d88eedcc4d152542211de72016d53130d7a1460b2d"
|
|
101
101
|
}
|
|
@@ -14,6 +14,7 @@ import type { ServicesManager } from '@wix/services-manager/types'
|
|
|
14
14
|
import type { InteractConfig, InteractConfigEntry, IInteractionsServiceConfig } from '../definition'
|
|
15
15
|
import { createInteractionsScriptElement } from './InteractionsScriptElement'
|
|
16
16
|
import { createV2InteractionsScriptElement } from './v2/InteractionsScriptElement'
|
|
17
|
+
import { createBundledV2Interactions } from './v2/BundledInteractions'
|
|
17
18
|
import { getV2ConfigCss } from './v2/configCss'
|
|
18
19
|
import { getV2ConfigStyleHeadContent } from './v2/configStyleHeadContent'
|
|
19
20
|
import { getClickTriggerCss } from './v2/clickTriggerCss'
|
|
@@ -57,13 +58,17 @@ const initInteract = (entries: InteractConfigEntry[], isReducedMotion: boolean)
|
|
|
57
58
|
}
|
|
58
59
|
}
|
|
59
60
|
|
|
60
|
-
const
|
|
61
|
+
const getV2Css = (entries: InteractConfigEntry[]): string => {
|
|
61
62
|
const generatedCss = entries
|
|
62
63
|
.flatMap((entry) => [getV2ConfigCss(entry.interact), getBackgroundCss(entry)])
|
|
63
64
|
.map((css) => css.trim())
|
|
64
65
|
.filter(Boolean)
|
|
65
66
|
.join('\n')
|
|
66
|
-
|
|
67
|
+
return [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n')
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
const getV2HeadContent = (entries: InteractConfigEntry[]): string => {
|
|
71
|
+
const css = getV2Css(entries)
|
|
67
72
|
|
|
68
73
|
return (
|
|
69
74
|
(getRuntimeConfigs(entries).length ? getV2ModulePreloadHeadContent() : '') +
|
|
@@ -107,6 +112,22 @@ const initRuntime = (
|
|
|
107
112
|
addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId, configCss))
|
|
108
113
|
}
|
|
109
114
|
|
|
115
|
+
/** In place of `initRuntime`'s loader, on the same pages: the bundled runtime, with the server's head CSS rendered with the page. */
|
|
116
|
+
const initBundledRuntime = (
|
|
117
|
+
entries: InteractConfigEntry[],
|
|
118
|
+
isReducedMotion: boolean,
|
|
119
|
+
getService: ServicesManager['getService']
|
|
120
|
+
) => {
|
|
121
|
+
const runtimeConfigs = getRuntimeConfigs(entries)
|
|
122
|
+
if (!runtimeConfigs.length || !getService(PagesDefinition).currentPageId()) {
|
|
123
|
+
return
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
getService(ProvideComponentServiceDefinition).addTopComponent(
|
|
127
|
+
createBundledV2Interactions(runtimeConfigs, isReducedMotion, getV2Css(entries))
|
|
128
|
+
)
|
|
129
|
+
}
|
|
130
|
+
|
|
110
131
|
const getInteractiveComps = (entries: InteractConfigEntry[]): Set<string> => {
|
|
111
132
|
const keys = new Set<string>()
|
|
112
133
|
for (const entry of entries) {
|
|
@@ -127,10 +148,14 @@ export const coreInteractions = (
|
|
|
127
148
|
const entries = resolveInteractKeyConflicts((useV2 ? getResolvedConfigEntries : getInteractConfigEntries)(config))
|
|
128
149
|
|
|
129
150
|
if (useV2) {
|
|
130
|
-
//
|
|
131
|
-
//
|
|
132
|
-
|
|
133
|
-
|
|
151
|
+
// The editor renders pages only in the browser, so it gets no server head: it renders that CSS with the page and
|
|
152
|
+
// runs the runtime it bundles, rather than a loader that imports it from the CDN after the page has painted
|
|
153
|
+
if (process.env.PACKAGE_NAME === 'thunderbolt-ds') {
|
|
154
|
+
initBundledRuntime(entries, isReducedMotion, getService)
|
|
155
|
+
} else if (!process.env.browser) {
|
|
156
|
+
// Both belong in the head: the preload links only help while the document is still parsing,
|
|
157
|
+
// and the generated CSS hides elements before their entrance effect, so it has to apply
|
|
158
|
+
// before the body renders.
|
|
134
159
|
const headContent = getV2HeadContent(entries)
|
|
135
160
|
// GENERAL rather than setHead's AFTER_SECURITY default: thunderbolt only reads the
|
|
136
161
|
// after-security bucket on its SEO path, so the default drops this on every normal
|
|
@@ -138,9 +163,10 @@ export const coreInteractions = (
|
|
|
138
163
|
if (headContent) {
|
|
139
164
|
getService(HeadAppenderDefinition).setHead(headContent, HeadContentType.GENERAL)
|
|
140
165
|
}
|
|
166
|
+
initRuntime(entries, isReducedMotion, getService, true)
|
|
167
|
+
} else {
|
|
168
|
+
initRuntime(entries, isReducedMotion, getService, true)
|
|
141
169
|
}
|
|
142
|
-
|
|
143
|
-
initRuntime(entries, isReducedMotion, getService, true)
|
|
144
170
|
} else if (isOpen('specs.thunderbolt.interactionsInSsr')) {
|
|
145
171
|
// Emits the config and loader scripts. Works in both environments: SSR serves markup the
|
|
146
172
|
// parser executes, and on the client the loader's ref revives it into a script that runs —
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React, { useEffect } from 'react'
|
|
2
|
+
import type { FunctionComponent } from 'react'
|
|
3
|
+
import type { InteractConfig } from '../../definition'
|
|
4
|
+
import { Interact } from './configCss'
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* The page's interactions with the bundled runtime, for the editor, which renders pages only in the browser: the CSS
|
|
8
|
+
* the server would send in the head renders with the page, so its first paint already animates, and the instances are
|
|
9
|
+
* the page's own.
|
|
10
|
+
*/
|
|
11
|
+
export const createBundledV2Interactions =
|
|
12
|
+
(configs: InteractConfig[], isReducedMotion: boolean, css: string): FunctionComponent =>
|
|
13
|
+
() => {
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
Interact.forceReducedMotion = isReducedMotion
|
|
16
|
+
Interact.setup({
|
|
17
|
+
scrollOptionsGetter: () => document.getElementById('site-root'),
|
|
18
|
+
allowA11yTriggers: true,
|
|
19
|
+
viewEnter: {
|
|
20
|
+
useSafeViewEnter: true,
|
|
21
|
+
},
|
|
22
|
+
})
|
|
23
|
+
// The editor's config can be mid-edit: a config that fails is skipped rather than taking the page down with it
|
|
24
|
+
const instances = configs.flatMap((config) => {
|
|
25
|
+
try {
|
|
26
|
+
return [Interact.create(config)]
|
|
27
|
+
} catch (error) {
|
|
28
|
+
console.error('Failed running an interactions config', error)
|
|
29
|
+
return []
|
|
30
|
+
}
|
|
31
|
+
})
|
|
32
|
+
return () => instances.forEach((instance) => instance.destroy())
|
|
33
|
+
}, [])
|
|
34
|
+
|
|
35
|
+
return <style>{css}</style>
|
|
36
|
+
}
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import * as allLegacyPresets from '@wix/wix-motion-presets'
|
|
2
2
|
import * as allPresets from '@wix/motion-presets'
|
|
3
|
-
|
|
3
|
+
// Through the namespace: web.js only re-exports the core and installs `Interact.defineInteractElement`, which
|
|
4
|
+
// `Interact.create` needs to run on `<interact-element>`. With named imports, a bundler that trusts the package's
|
|
5
|
+
// `sideEffects: false` links them past web.js to the core and drops it.
|
|
6
|
+
import * as interactWeb from '@wix/interact/web'
|
|
4
7
|
import type { InteractConfig } from '@wix/interact'
|
|
5
8
|
import { getClickTriggerCss } from './clickTriggerCss'
|
|
6
9
|
import { LEGACY_PREFIX } from './motionPresets'
|
|
7
10
|
|
|
11
|
+
const { generate } = interactWeb
|
|
12
|
+
export const { Interact } = interactWeb
|
|
13
|
+
|
|
8
14
|
type PresetRegistry = Parameters<typeof Interact.registerEffects>[0]
|
|
9
15
|
|
|
10
16
|
type EffectModule = {
|
|
@@ -32,8 +38,8 @@ export const motionPresets: Record<string, EffectModule> = {
|
|
|
32
38
|
...getPresetModules(allLegacyPresets, LEGACY_PREFIX),
|
|
33
39
|
}
|
|
34
40
|
|
|
35
|
-
// Interact's registry is process-global.
|
|
36
|
-
//
|
|
41
|
+
// Interact's registry is process-global. Only the server's bundle and the editor's pull this module in (`process.env`
|
|
42
|
+
// DCE), so both namespaces are registered once per Node process or document.
|
|
37
43
|
Interact.registerEffects(motionPresets as unknown as PresetRegistry)
|
|
38
44
|
|
|
39
45
|
/** Emit animation FOUC CSS and click-trigger cursor rules. */
|