@wix/site-service-interactions 1.0.12 → 1.0.13

package/src/implementations/v2/configCss.ts

@@ -1,18 +1,17 @@
 import { generate, Interact } from '@wix/interact-v2'
-import type { InteractConfig } from '@wix/interact'
-import type { InteractConfig as InteractV2Config } from '@wix/interact-v2'
-import * as motionPresets from '@wix/wix-motion-presets'
+import type { InteractConfig } from '@wix/interact-v2'
 import { getClickTriggerCss } from './clickTriggerCss'
+import { motionPresets } from './motionPresets'
 
 type PresetRegistry = Parameters<typeof Interact.registerEffects>[0]
 
 // Interact's registry is process-global. This module is only pulled into the server bundle
-// (`process.env.browser` DCE), so the namespace is registered once per Node process.
+// (`process.env.browser` DCE), so both namespaces are registered once per Node process.
 Interact.registerEffects(motionPresets as unknown as PresetRegistry)
 
 /** Emit animation FOUC CSS and click-trigger cursor rules. */
 export const getV2ConfigCss = (config: InteractConfig): string => {
-    const animationCss = generate(config as InteractV2Config, true).trim()
+    const animationCss = generate(config, true).trim()
     const clickCss = getClickTriggerCss(config).trim()
 
     return [animationCss, clickCss].filter(Boolean).join('\n')

package/src/implementations/v2/configStyleHeadContent.ts

@@ -1,12 +1,15 @@
 /**
- * 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.
+ * Head content is a raw HTML string. CSS values may contain tag-like text, but an actual closing
+ * style tag still terminates the raw-text element, and HeadAppender rejects `<script` substrings.
+ * Keep other CSS intact: drop content after a closing style tag and break script-like sequences.
  */
+const STYLE_END_TAG = /<\/style(?=[\t\n\f\r />])/i
+const SCRIPT_LIKE = /<script/gi
+
 const sanitizeCssForStyleElement = (css: string): string => {
-    const tagIndex = css.search(/<[a-zA-Z/]/)
-    return tagIndex === -1 ? css : css.slice(0, tagIndex)
+    const styleEndTagIndex = css.search(STYLE_END_TAG)
+    const withoutStyleBreakout = styleEndTagIndex === -1 ? css : css.slice(0, styleEndTagIndex)
+    return withoutStyleBreakout.replace(SCRIPT_LIKE, '\\3c script')
 }
 
 export const getV2ConfigStyleHeadContent = (css: string): string => `<style>${sanitizeCssForStyleElement(css)}</style>`

package/src/implementations/v2/interactionsScriptContent.ts

@@ -1,4 +1,8 @@
-import { INTERACT_V2_IMPORT_URL, WIX_MOTION_PRESETS_IMPORT_URL } from './cdnUrls'
+import { INTERACT_V2_IMPORT_URL, LEGACY_WIX_MOTION_PRESETS_IMPORT_URL, MOTION_PRESETS_IMPORT_URL } from './cdnUrls'
+import { LEGACY_PREFIX } from './motionPresets'
+
+/** The loader destructures `Promise.all` in this order. */
+const MODULE_IMPORT_URLS = [INTERACT_V2_IMPORT_URL, LEGACY_WIX_MOTION_PRESETS_IMPORT_URL, MOTION_PRESETS_IMPORT_URL]
 
 /**
  * The loader reaches these modules through dynamic `import()`, which the preload scanner cannot
@@ -7,18 +11,24 @@ import { INTERACT_V2_IMPORT_URL, WIX_MOTION_PRESETS_IMPORT_URL } from './cdnUrls
  * would download each module twice.
  */
 export const getV2ModulePreloadHeadContent = (): string =>
-    `<link rel="modulepreload" href="${INTERACT_V2_IMPORT_URL}"><link rel="modulepreload" href="${WIX_MOTION_PRESETS_IMPORT_URL}">`
+    MODULE_IMPORT_URLS.map(url => `<link rel="modulepreload" href="${url}">`).join('')
 
 export const getV2InteractionsScriptContent = (configId: string, isReducedMotion: boolean): string =>
     [
         `const configElement = document.getElementById(\`${configId}\`)`,
         'if (configElement) {',
-        '  const config = JSON.parse(configElement.textContent)',
-        '  const [{ Interact }, presets] = await Promise.all([',
-        `    import(\`${INTERACT_V2_IMPORT_URL}\`),`,
-        `    import(\`${WIX_MOTION_PRESETS_IMPORT_URL}\`),`,
+        '  const parsedConfig = JSON.parse(configElement.textContent)',
+        '  const configs = Array.isArray(parsedConfig) ? parsedConfig : [parsedConfig]',
+        '  const [{ Interact }, legacyPresets, presets] = await Promise.all([',
+        ...MODULE_IMPORT_URLS.map(url => `    import(\`${url}\`),`),
         '  ])',
-        '  Interact.registerEffects(presets)',
+        // Reactions configs carry the prefix on their named effect types, so the two packages can
+        // both export a preset under the same name without one shadowing the other.
+        '  const aliasedLegacyPresets = {}',
+        '  for (const name of Object.keys(legacyPresets)) {',
+        `    aliasedLegacyPresets[\`${LEGACY_PREFIX}\` + name] = legacyPresets[name]`,
+        '  }',
+        '  Interact.registerEffects({ ...presets, ...aliasedLegacyPresets })',
         `  Interact.forceReducedMotion = ${isReducedMotion}`,
         '  Interact.setup({',
         '    scrollOptionsGetter: function () {',
@@ -29,6 +39,8 @@ export const getV2InteractionsScriptContent = (configId: string, isReducedMotion
         '      useSafeViewEnter: true,',
         '    },',
         '  })',
-        '  Interact.create(config)',
+        '  for (const config of configs) {',
+        '    Interact.create(config)',
+        '  }',
         '}',
     ].join('\n')

package/src/implementations/v2/motionPresets.ts

@@ -0,0 +1,60 @@
+import * as allLegacyPresets from '@wix/wix-motion-presets'
+import * as allPresets from '@wix/motion-presets'
+import type { Effect, EffectRef, InteractConfig } from '@wix/interact-v2'
+
+type EffectModule = {
+    web: unknown
+    style?: unknown
+    getNames: unknown
+}
+
+type NamedEffect = { type: string } & Record<string, unknown>
+
+export const LEGACY_PREFIX = 'LEGACY_'
+
+const isEffectModule = (value: unknown): value is EffectModule =>
+    typeof value === 'object' && value !== null && 'web' in value && 'getNames' in value
+
+const getPresetModules = (namespace: object, prefix: string = ''): Record<string, EffectModule> =>
+    Object.fromEntries(
+        Object.entries(namespace)
+            .filter(([, value]) => isEffectModule(value))
+            .map(([name, value]) => [`${prefix}${name}`, value as EffectModule])
+    )
+
+/**
+ * Both preset packages under one registry, mirroring what the client loader registers. The legacy
+ * names carry the prefix so a preset published by both packages doesn't shadow its counterpart.
+ */
+export const motionPresets: Record<string, EffectModule> = {
+    ...getPresetModules(allPresets),
+    ...getPresetModules(allLegacyPresets, LEGACY_PREFIX),
+}
+
+const aliasEffect = <T extends object>(effect: T): T => {
+    const { namedEffect } = effect as { namedEffect?: NamedEffect }
+    if (!namedEffect?.type) {
+        return effect
+    }
+    return { ...effect, namedEffect: { ...namedEffect, type: `${LEGACY_PREFIX}${namedEffect.type}` } }
+}
+
+const aliasSequence = <T extends object>(sequence: T): T => {
+    const { effects } = sequence as { effects?: (Effect | EffectRef)[] }
+    return effects ? { ...sequence, effects: effects.map(aliasEffect) } : sequence
+}
+
+const mapRecord = <T>(record: Record<string, T>, map: (value: T) => T): Record<string, T> =>
+    Object.fromEntries(Object.entries(record).map(([key, value]) => [key, map(value)]))
+
+// TODO(ameerf): make this implementation simpler without so many copies of the config object. The current implementation is a direct translation of the v1 code, which was written to avoid mutating the config object.
+export const aliasLegacyNamedEffects = (interact: InteractConfig): InteractConfig => ({
+    ...interact,
+    ...(interact.effects && { effects: mapRecord(interact.effects, aliasEffect) }),
+    ...(interact.sequences && { sequences: mapRecord(interact.sequences, aliasSequence) }),
+    interactions: interact.interactions.map(interaction => ({
+        ...interaction,
+        ...(interaction.effects && { effects: interaction.effects.map(aliasEffect) }),
+        ...(interaction.sequences && { sequences: interaction.sequences.map(aliasSequence) }),
+    })),
+})

package/src/types/index.ts

@@ -1,2 +1,2 @@
 export type { IInteractionsService, IInteractionsServiceConfig, IInteractionsDefinition } from '../definition'
-export type { InteractConfig } from '@wix/interact'
+export type { InteractConfig } from '@wix/interact-v2'