@wix/site-service-interactions 1.0.9 → 1.0.10

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))
+    }
+}