@wix/site-service-interactions 1.0.12 → 1.0.14

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,28 +11,36 @@ 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}\`),`,
-        '  ])',
-        '  Interact.registerEffects(presets)',
-        `  Interact.forceReducedMotion = ${isReducedMotion}`,
-        '  Interact.setup({',
-        '    scrollOptionsGetter: function () {',
-        '      return document.getElementById(`site-root`)',
-        '    },',
-        '    allowA11yTriggers: true,',
-        '    viewEnter: {',
-        '      useSafeViewEnter: true,',
-        '    },',
-        '  })',
-        '  Interact.create(config)',
-        '}',
-    ].join('\n')
+	[
+		`const configElement = document.getElementById(\`${configId}\`)`,
+		'if (configElement) {',
+		'  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}\`),`),
+		'  ])',
+		// 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 () {',
+		'      return document.getElementById(`site-root`)',
+		'    },',
+		'    allowA11yTriggers: true,',
+		'    viewEnter: {',
+		'      useSafeViewEnter: true,',
+		'    },',
+		'  })',
+		'  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'

package/types/package.json

@@ -1,3 +1,3 @@
 {
-  "main": "../cjs/build/types/index.js"
+	"main": "../cjs/build/types/index.js"
 }