@wix/site-service-interactions 1.0.8 → 1.0.10

package/src/implementations/coreInteractions.ts

@@ -1,14 +1,22 @@
-import { Interact } from '@wix/interact'
+import { Interact } from '@wix/interact/web'
 import type { InteractConfig } from '@wix/interact'
 import { DeviceInfoDefinition } from '@wix/site-service-device-info/definition'
 import { ExperimentsDefinition } from '@wix/site-service-experiments/definition'
-import { RenderingContextDefinition } from '@wix/site-service-rendering-context/definition'
 import { PagesDefinition } from '@wix/site-service-pages/definition'
+import { HeadAppenderDefinition } from '@wix/site-service-head-appender/definition'
 import { ProvideComponentServiceDefinition } from '@wix/services-manager-react/core-services/provide-component'
 import type { ServicesManager } from '@wix/services-manager/types'
 import { createInteractionsScriptElement } from './InteractionsScriptElement'
+import { createV2InteractionsScriptElement } from './v2/InteractionsScriptElement'
+import { getV2ConfigCss } from './v2/configCss'
+import { getV2ConfigStyleHeadContent } from './v2/configStyleHeadContent'
+import { getV2ModulePreloadHeadContent } from './v2/interactionsScriptContent'
+import { registerConfigEffects } from './v2/registerConfigEffects'
 
 const initInteract = (config: InteractConfig, isReducedMotion: boolean) => {
+    // The bundled runtime is v2, where named effects come from a separate package the loader
+    // script imports on the SSR path. Here they have to be registered before create().
+    registerConfigEffects(config)
     Interact.forceReducedMotion = isReducedMotion
     Interact.setup({
         scrollOptionsGetter: () => globalThis.document.getElementById('site-root'),
@@ -20,28 +28,37 @@ const initInteract = (config: InteractConfig, isReducedMotion: boolean) => {
     Interact.create(config)
 }
 
-const tryInitInteractInSsr = (
+const initRuntime = (
     config: InteractConfig,
     isReducedMotion: boolean,
-    getService: ServicesManager['getService']
+    getService: ServicesManager['getService'],
+    useV2: boolean
 ) => {
-    const hasInteractions = config.interactions?.length > 0
-    if (!hasInteractions) {
-        return false
+    if (!config.interactions?.length) {
+        return
     }
 
-    const { currentPage } = getService(PagesDefinition)
-    const pageId = currentPage?.id
-
+    const pageId = getService(PagesDefinition).currentPage?.id
     if (!pageId) {
-        return false
+        return
     }
 
     const { addTopComponent } = getService(ProvideComponentServiceDefinition)
-    const ssrScriptElement = createInteractionsScriptElement(config, isReducedMotion, pageId)
-    addTopComponent(ssrScriptElement)
 
-    return true
+    if (!useV2) {
+        addTopComponent(createInteractionsScriptElement(config, isReducedMotion, pageId))
+        return
+    }
+
+    // Both belong in the head: the preload links only help while the document is still parsing,
+    // and the generated CSS hides elements before their entrance effect, so it has to apply
+    // before the body renders.
+    const css = getV2ConfigCss(config).trim()
+    getService(HeadAppenderDefinition).setHead(
+        getV2ModulePreloadHeadContent(config) + (css ? getV2ConfigStyleHeadContent(css) : '')
+    )
+
+    addTopComponent(createV2InteractionsScriptElement(config, isReducedMotion, pageId))
 }
 
 const getInteractiveComps = (interactions: InteractConfig['interactions']) =>
@@ -50,7 +67,7 @@ const getInteractiveComps = (interactions: InteractConfig['interactions']) =>
         acc.add(key)
         // add reaction comps
         // there must be a key
-        effects.forEach(({ key }) => acc.add(key!))
+        effects?.forEach(({ key }) => acc.add(key!))
 
         return acc
     }, new Set<string>())
@@ -58,21 +75,15 @@ const getInteractiveComps = (interactions: InteractConfig['interactions']) =>
 export const coreInteractions = (config: InteractConfig, getService: ServicesManager['getService']) => {
     const { reducedMotion: isReducedMotion } = getService(DeviceInfoDefinition)
     const { isOpen } = getService(ExperimentsDefinition)
-    const { SSR } = getService(RenderingContextDefinition)
 
-    const isSSRExperimentOpen = isOpen('specs.thunderbolt.interactionsInSsr')
-    if (isSSRExperimentOpen) {
+    if (isOpen('specs.thunderbolt.interactionsInSsr')) {
         // Emits the config and loader scripts. Works in both environments: SSR serves markup the
         // parser executes, and on the client the loader's ref revives it into a script that runs —
         // which is what pages rendered only on the client (password-protected / members-only,
         // client-side navigation) need, since they never get a server-rendered document.
-        const didInitInteractInSsr = tryInitInteractInSsr(config, isReducedMotion, getService)
-
-        // Fall back to direct init on the client if the script element could not be set up
-        // (e.g. no pageId or no interactions).
-        if (!didInitInteractInSsr && !SSR) {
-            initInteract(config, isReducedMotion)
-        }
+        // v2 is only reachable from here: it ships as a loader script plus generated CSS, both of
+        // which exist only on this path.
+        initRuntime(config, isReducedMotion, getService, isOpen('specs.thunderbolt.vsm_interactions_v2'))
     } else {
         initInteract(config, isReducedMotion)
     }

package/src/implementations/interactionsScriptContent.ts

@@ -1,24 +1,38 @@
 export const getInteractionsScriptContent = (configId: string, isReducedMotion: boolean) => `
     await import(\`https://static.parastorage.com/services/interact/dist/interact.umd.min.js\`);
 
+    // Wix pages run an AMD loader (RequireJS) whose define wins the interact UMD wrapper, so the
+    // bundle registers itself as a named AMD module instead of assigning window.interact. Read the
+    // global first, and when it is absent pull the module back out of the AMD loader.
+    let interactModule = window.interact;
+    if (!interactModule?.Interact) {
+        if (typeof window.require === \`function\`) {
+            try {
+                interactModule = await new Promise(function (resolve, reject) {
+                    window.require([\`interact\`], resolve, reject);
+                });
+            } catch (error) {
+                console.error(\`Failed loading Interact via the AMD loader\`, error);
+            }
+        }
+    }
+
+    const Interact = interactModule?.Interact;
     const configElement = document.getElementById(\`${configId}\`);
-    if (configElement) {
-        const Interact = window.interact?.Interact;
-        if (!Interact) {
-            console.error(\`Interact library is not loaded\`);
-        } else {
-            const config = JSON.parse(decodeURIComponent(configElement.textContent));
+    if (!Interact) {
+        console.error(\`Interact library is not loaded\`);
+    } else if (configElement) {
+        const config = JSON.parse(decodeURIComponent(configElement.textContent));
 
-            Interact.forceReducedMotion = ${isReducedMotion};
-            Interact.setup({
-                scrollOptionsGetter: function(){ return document.getElementById(\`site-root\`) },
-                allowA11yTriggers: true,
-                viewEnter: {
-                    useSafeViewEnter: true,
-                },
-            });
+        Interact.forceReducedMotion = ${isReducedMotion};
+        Interact.setup({
+            scrollOptionsGetter: function(){ return document.getElementById(\`site-root\`) },
+            allowA11yTriggers: true,
+            viewEnter: {
+                useSafeViewEnter: true,
+            },
+        });
 
-            Interact.create(config);
-        }
+        Interact.create(config);
     }
 `

package/src/implementations/stylesToAdd.ts

@@ -1,5 +1,5 @@
 export const wixInteractElementCss = `
-    wix-interact-element {
+    interact-element {
         display: contents;
     }
     `

package/src/implementations/v2/InteractionsScriptElement.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import type { FunctionComponent } from 'react'
+import type { InteractConfig } from '@wix/interact'
+import { reviveScriptElement } from '../reviveScriptElement'
+import { getV2InteractionsScriptContent } from './interactionsScriptContent'
+
+const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML']
+
+/**
+ * The config is written as raw markup, so a `</script` inside any string value would close the
+ * element early. `\u003c` is valid JSON that `JSON.parse` reads back as `<`.
+ */
+const serializeConfigForScriptElement = (config: InteractConfig): string =>
+    JSON.stringify(config).replace(/</g, '\\u003c')
+
+export const createV2InteractionsScriptElement =
+    (config: InteractConfig, isReducedMotion: boolean, pageId: string): FunctionComponent =>
+    () => {
+        // This ID is also interpolated into raw module-script text. Percent-encoding removes
+        // script delimiters and template-literal syntax while keeping the ID deterministic.
+        const safePageId = encodeURIComponent(pageId)
+        const configId = `interactions-config-${safePageId}`
+        const interactionsScriptContent = getV2InteractionsScriptContent(config, configId, isReducedMotion)
+        const configProps = {
+            [DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: serializeConfigForScriptElement(config) },
+        }
+        const loaderProps = {
+            [DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: interactionsScriptContent },
+        }
+
+        return (
+            <>
+                <script type="application/json" id={configId} {...configProps} />
+                <script
+                    type="module"
+                    id={`interactions-loader-${safePageId}`}
+                    ref={reviveScriptElement}
+                    {...loaderProps}
+                />
+            </>
+        )
+    }

package/src/implementations/v2/cdnUrls.ts

@@ -0,0 +1,4 @@
+export const INTERACT_V2_IMPORT_URL = 'https://cdn.jsdelivr.net/npm/@wix/interact@2/dist/es/web.min.js'
+
+export const WIX_MOTION_PRESETS_IMPORT_URL =
+    'https://static.parastorage.com/services/wix-motion-presets/dist/wix-motion-presets.esm.min.js'

package/src/implementations/v2/clickTriggerCss.ts

@@ -0,0 +1,44 @@
+import type { InteractConfig, Interaction } from '@wix/interact'
+
+const escapeCssAttr = (value: string): string => value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
+
+/**
+ * Mirrors `@wix/interact` `getSelector(interaction, { asCombinator: true, useFirstChild: true })`
+ * plus the `[data-interact-key="…"]` prefix from `CSSRuleToString`.
+ */
+const getInteractionSourceSelector = (
+    interaction: Pick<Interaction, 'key' | 'selector' | 'listContainer' | 'listItemSelector'>
+): string => {
+    const { key, selector, listContainer, listItemSelector } = interaction
+    const attrSelector = `[data-interact-key="${escapeCssAttr(key)}"]`
+
+    if (listContainer) {
+        const itemFilter = listItemSelector ? ` > ${listItemSelector}` : ''
+        const inner = selector ? `${listContainer}${itemFilter} ${selector}` : `${listContainer}${itemFilter || ' > *'}`
+
+        return `${attrSelector} ${inner}`
+    }
+
+    if (selector) {
+        return `${attrSelector} ${selector}`
+    }
+
+    return `${attrSelector} > :first-child`
+}
+
+/** Emits `cursor: pointer` for click interaction triggers (`'activate' || 'click'`), one rule per unique source selector. */
+export const getClickTriggerCss = (config: InteractConfig): string => {
+    const selectors = [
+        ...new Set(
+            config.interactions
+                .filter(({ trigger }) => trigger === 'activate' || trigger === 'click')
+                .map(getInteractionSourceSelector)
+        ),
+    ]
+
+    if (!selectors.length) {
+        return ''
+    }
+
+    return selectors.map(selector => `${selector} {\ncursor: pointer;\n}`).join('\n')
+}

package/src/implementations/v2/configCss.ts

@@ -0,0 +1,13 @@
+import { generate } from '@wix/interact'
+import type { InteractConfig } from '@wix/interact'
+import { getClickTriggerCss } from './clickTriggerCss'
+import { registerConfigEffects } from './registerConfigEffects'
+
+/** Register config-used presets, then emit animation FOUC CSS and click-trigger cursor rules. */
+export const getV2ConfigCss = (config: InteractConfig): string => {
+    registerConfigEffects(config)
+    const animationCss = generate(config, true).trim()
+    const clickCss = getClickTriggerCss(config).trim()
+
+    return [animationCss, clickCss].filter(Boolean).join('\n')
+}

package/src/implementations/v2/configStyleHeadContent.ts

@@ -0,0 +1,12 @@
+/**
+ * Head content is a raw HTML string, so anything tag-like in the generated CSS either closes the
+ * style element early or trips the head appender's script-tag guard, which throws. Nothing in CSS
+ * opens a tag: `<` appears only in media range queries, followed by a space or a digit. Cutting
+ * from the first `<` that could start a tag leaves valid CSS untouched.
+ */
+const sanitizeCssForStyleElement = (css: string): string => {
+    const tagIndex = css.search(/<[a-zA-Z/]/)
+    return tagIndex === -1 ? css : css.slice(0, tagIndex)
+}
+
+export const getV2ConfigStyleHeadContent = (css: string): string => `<style>${sanitizeCssForStyleElement(css)}</style>`

package/src/implementations/v2/interactionsScriptContent.ts

@@ -0,0 +1,61 @@
+import type { InteractConfig } from '@wix/interact'
+import { INTERACT_V2_IMPORT_URL, WIX_MOTION_PRESETS_IMPORT_URL } from './cdnUrls'
+import { collectNamedEffectTypes } from './namedEffectTypes'
+import { filterKnownPresetTypes } from './motionPresets'
+
+const getPresetTypes = (config: InteractConfig): string[] => filterKnownPresetTypes(collectNamedEffectTypes(config))
+
+const getModuleUrls = (presetTypes: string[]): string[] =>
+    presetTypes.length > 0 ? [INTERACT_V2_IMPORT_URL, WIX_MOTION_PRESETS_IMPORT_URL] : [INTERACT_V2_IMPORT_URL]
+
+/**
+ * The loader reaches these modules through dynamic `import()`, which the preload scanner cannot
+ * see, so without the links the fetches only start once the loader runs. No `crossorigin`: a bare
+ * `modulepreload` fetches with the same credentials mode as a bare `import()`, and a mismatch
+ * would download each module twice.
+ */
+export const getV2ModulePreloadHeadContent = (config: InteractConfig): string =>
+    getModuleUrls(getPresetTypes(config))
+        .map(url => `<link rel="modulepreload" href="${url}">`)
+        .join('')
+
+export const getV2InteractionsScriptContent = (
+    config: InteractConfig,
+    configId: string,
+    isReducedMotion: boolean
+): string => {
+    const presetTypes = getPresetTypes(config)
+    const bindings = ['{ Interact }']
+    const imports = getModuleUrls(presetTypes).map(url => `import(\`${url}\`)`)
+
+    if (presetTypes.length > 0) {
+        bindings.push(`{ ${presetTypes.join(', ')} }`)
+    }
+
+    const registerEffects =
+        presetTypes.length > 0 ? `  Interact.registerEffects({ ${presetTypes.join(', ')} })` : undefined
+
+    return [
+        `const configElement = document.getElementById(\`${configId}\`)`,
+        'if (configElement) {',
+        '  const config = JSON.parse(configElement.textContent)',
+        `  const [${bindings.join(', ')}] = await Promise.all([`,
+        ...imports.map(importCall => `    ${importCall},`),
+        '  ])',
+        registerEffects,
+        `  Interact.forceReducedMotion = ${isReducedMotion}`,
+        '  Interact.setup({',
+        '    scrollOptionsGetter: function () {',
+        '      return document.getElementById(`site-root`)',
+        '    },',
+        '    allowA11yTriggers: true,',
+        '    viewEnter: {',
+        '      useSafeViewEnter: true,',
+        '    },',
+        '  })',
+        '  Interact.create(config)',
+        '}',
+    ]
+        .filter((line): line is string => line !== undefined)
+        .join('\n')
+}

package/src/implementations/v2/motionPresets.ts

@@ -0,0 +1,26 @@
+import * as allPresets from '@wix/wix-motion-presets'
+
+type EffectModule = {
+    web: unknown
+    style?: unknown
+    getNames: unknown
+}
+
+export const motionPresets: Record<string, EffectModule> = allPresets as unknown as Record<string, EffectModule>
+
+const knownPresetTypes = new Set(Object.keys(motionPresets))
+
+export const isKnownPresetType = (type: string): boolean => knownPresetTypes.has(type)
+
+/**
+ * Preset names become bare JavaScript identifiers in the client loader. Filtering against the
+ * installed package prevents unknown names from creating invalid source or a failed import.
+ */
+export const filterKnownPresetTypes = (types: string[]): string[] => {
+    const unknown = types.filter(type => !isKnownPresetType(type))
+    if (unknown.length > 0) {
+        console.warn(`Interactions: skipping unknown Wix motion preset type(s): ${unknown.join(', ')}`)
+    }
+
+    return types.filter(isKnownPresetType)
+}

package/src/implementations/v2/namedEffectTypes.ts

@@ -0,0 +1,52 @@
+import type { Effect, EffectRef, InteractConfig } from '@wix/interact'
+
+type InteractionEffect = NonNullable<InteractConfig['interactions'][number]['effects']>[number]
+type SequenceEffect = NonNullable<InteractConfig['sequences']>[string]['effects'][number]
+type ConfigEffect = InteractionEffect | SequenceEffect
+
+/** Prefer the effects map; fall back to an inline named effect when an effect id misses. */
+const resolveEffect = (config: InteractConfig, effect: ConfigEffect): Effect | EffectRef => {
+    if (!effect.effectId) {
+        return effect
+    }
+
+    return config.effects?.[effect.effectId] ?? effect
+}
+
+const readNamedEffectType = (effect: Effect | EffectRef): string | undefined => {
+    if (!('namedEffect' in effect) || !effect.namedEffect) {
+        return undefined
+    }
+
+    const { type } = effect.namedEffect
+    return typeof type === 'string' ? type : undefined
+}
+
+export const collectNamedEffectTypes = (config: InteractConfig): string[] => {
+    const types = new Set<string>()
+
+    const collectFromEffects = (effects: ConfigEffect[]) => {
+        for (const effect of effects) {
+            const type = readNamedEffectType(resolveEffect(config, effect))
+            if (type) {
+                types.add(type)
+            }
+        }
+    }
+
+    for (const interaction of config.interactions) {
+        collectFromEffects(interaction.effects ?? [])
+
+        for (const sequence of interaction.sequences ?? []) {
+            if ('effects' in sequence) {
+                collectFromEffects(sequence.effects)
+                continue
+            }
+
+            const referencedSequence = config.sequences?.[sequence.sequenceId]
+            collectFromEffects(referencedSequence?.effects ?? [])
+        }
+    }
+
+    return [...types].sort()
+}

package/src/implementations/v2/registerConfigEffects.ts

@@ -0,0 +1,31 @@
+import { Interact } from '@wix/interact'
+import type { InteractConfig } from '@wix/interact'
+import { collectNamedEffectTypes } from './namedEffectTypes'
+import { filterKnownPresetTypes, motionPresets } from './motionPresets'
+
+type PresetRegistry = Parameters<typeof Interact.registerEffects>[0]
+type EffectModule = PresetRegistry[string]
+
+// Interact's effect registry is process-global, so mirror it across repeated SSR renders.
+const registeredTypes = new Set<string>()
+
+/**
+ * A named effect only runs once its preset is registered, so every path that reaches
+ * `Interact.create` or `generate` has to register the config's presets first.
+ */
+export const registerConfigEffects = (config: InteractConfig) => {
+    const presetsToRegister: PresetRegistry = {}
+
+    for (const type of filterKnownPresetTypes(collectNamedEffectTypes(config))) {
+        if (registeredTypes.has(type)) {
+            continue
+        }
+
+        presetsToRegister[type] = motionPresets[type] as EffectModule
+    }
+
+    if (Object.keys(presetsToRegister).length > 0) {
+        Interact.registerEffects(presetsToRegister)
+        Object.keys(presetsToRegister).forEach(type => registeredTypes.add(type))
+    }
+}