You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CHANGELOG.md
+27Lines changed: 27 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,6 +10,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
10
10
11
11
## @wix/splittext
12
12
13
+
### [0.2.0] - unreleased
14
+
15
+
#### Added
16
+
17
+
-`@wix/splittext/plugin` entry point: `splitTextPlugin` (runtime adapter for `Interact.use('splitText', …)`) and its build-time counterpart `splitTextStyle` for `generate()`'s `plugins` option (#275)
18
+
-`SplitTextPluginConfig` type — `{ container, hideUntilReady?, ...SplitTextOptions }` — for declaration-merging `$splitText` into `InteractPluginConfigMap` (#275)
19
+
-`hideUntilReady` opts into SSR FOUC prevention: `splitTextStyle` hides the container until the runtime split sets `data-splittext-ready` (#275)
20
+
13
21
### [0.1.2] - 2026-07-14
14
22
15
23
#### Added
@@ -26,6 +34,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
26
34
27
35
## @wix/interact-validate
28
36
37
+
### [0.2.0] - unreleased
38
+
39
+
#### Added
40
+
41
+
- Plugin fields: `$`-prefixed keys on interactions and effects are accepted with opaque values (validate never inspects plugin config), while every other unknown key is still reported as `SCHEMA_UNRECOGNIZED_KEYS` so typos are still caught (#275)
42
+
29
43
### [0.1.1] - 2026-07-14
30
44
31
45
#### Added
@@ -53,6 +67,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
53
67
54
68
## @wix/interact
55
69
70
+
### [2.6.0] - unreleased
71
+
72
+
#### Added
73
+
74
+
- Generic plugin bridge: `Interact.use(name, plugin)` registers a plugin, and a `$<name>` field on an interaction or effect (e.g. `$splitText`) routes its value to it at connect time, before target resolution. Plugin values are opaque to Interact; a returned cleanup runs on disconnect/teardown (#275)
75
+
-`generate()` accepts a `plugins` option — a map of plugin name → build-time style generator — so plugins can emit SSR CSS (e.g. FOUC prevention for un-split text) without Interact inspecting their config (#275)
76
+
- Plugin types: `InteractPlugin`, `InteractPluginContext`, `InteractPluginCleanup`, `InteractPluginConfigMap` (augment to type `$<name>` fields), `InteractPluginStyleContext`, `InteractPluginStyleGenerator`, `InteractPluginStyles`, and `PluginFields` (#275)
77
+
- Agent rules (`rules/plugins.md`) and docs (`docs/guides/plugins.md`) for registering plugins and their SSR styling (#275)
78
+
79
+
#### Changed
80
+
81
+
-`generate(config, options?)`: the second argument now accepts an options bag — `{ useFirstChild?, plugins? }` — exported as the `GenerateOptions` type. Passing a bare boolean still works and is treated as `useFirstChild`, so `generate(config, true)` is unchanged (#275)
Copy file name to clipboardExpand all lines: packages/interact/README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -430,7 +430,7 @@ Each example is a complete `InteractConfig` — pass it to `Interact.create(conf
430
430
-**Hit-area shift on `hover` / `pointerMove`** — Animating size/position of the hovered element shifts the hit area and causes jitter. Instead, animate a child via `selector` or a different `key`.
431
431
-**`registerEffects()` must run before `Interact.create()`/`generate()`** when using `namedEffect`.
432
432
-**FOUC prevention** — requires injecting the output of `generate(config)` into `<head>`.
433
-
-**`generate(config, useFirstChild)`** — Pass `true` for `<interact-element>` (web), `false` for vanilla and React `<Interaction>`.
433
+
-**`generate(config, options?)`** —`options` is `{ useFirstChild?, plugins? }`, or a bare boolean used as `useFirstChild`. Pass `true` for `<interact-element>` (web), `false` for vanilla and React `<Interaction>`.
434
434
-**`<interact-element>` must wrap exactly one child** — the library targets `:first-child` by default.
Copy file name to clipboardExpand all lines: packages/interact/docs/api/README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ Complete reference documentation for all public APIs in `@wix/interact`.
18
18
-[Error handling](functions.md#error-handling) and [performance considerations](functions.md#performance-considerations)
19
19
-[**remove(path)**](functions.md#remove) - Remove interactions from an element
20
20
-[Cleanup behavior](functions.md#behavior-details) and [advanced usage](functions.md#advanced-usage)
21
-
-[**generate(config, useFirstChild?)**](functions.md#generate) - Generate complete CSS for all animations, transitions, scroll-driven effects, and FOUC prevention
21
+
-[**generate(config, options?)**](functions.md#generate) - Generate complete CSS for all animations, transitions, scroll-driven effects, and FOUC prevention
22
22
-[What it generates](functions.md#what-it-generates), [benefits](functions.md#benefits), and [use cases](functions.md#use-cases)
23
23
-[FOUC prevention](functions.md#fouc-prevention-viewenter), [scroll-driven CSS](functions.md#scroll-driven-css-viewprogress), and [SSR](functions.md#server-side-rendering-ssr)
24
24
-[**addListItems(root, key, listContainer, elements)**](functions.md#addlistitems) - Add interactions to new list items
Copy file name to clipboardExpand all lines: packages/interact/docs/api/functions.md
+10-8Lines changed: 10 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -196,27 +196,29 @@ console.log('Interactions removed for hero');
196
196
197
197
---
198
198
199
-
## `generate(config, useFirstChild?, plugins?)`
199
+
## `generate(config, options?)`
200
200
201
201
Generates a complete CSS string from an `InteractConfig`. The output includes `@keyframes`, animation and transition custom properties, view-timeline declarations, state-selector rules, coordinated-list aggregation, and FOUC-prevention initial rules — everything the browser needs to run the configured animations and transitions natively, without waiting for JavaScript.
202
202
203
203
### Signature
204
204
205
205
```typescript
206
-
function generate(
207
-
config:InteractConfig,
208
-
useFirstChild?:boolean,
209
-
plugins?:InteractPluginStyles,
210
-
):string;
206
+
function generate(config:InteractConfig, options?:boolean|GenerateOptions):string;
207
+
208
+
typeGenerateOptions= {
209
+
useFirstChild?:boolean;
210
+
plugins?:InteractPluginStyles;
211
+
};
211
212
```
212
213
213
214
### Parameters
214
215
215
216
**`config: InteractConfig`** - The full interaction configuration. Every interaction in the config is processed — not just `viewEnter`.
216
217
217
-
**`useFirstChild?: boolean`** - When `true` (the default), generated selectors target the first child of each keyed element (e.g. `[data-interact-key="hero"] > :first-child`). This is the correct mode for `<interact-element>` custom elements. Pass `false` when the keyed element itself is the animation target (vanilla JS or React `<Interaction>`).
218
+
**`options?: boolean | GenerateOptions`** - Either an options object or — for backwards compatibility — a bare boolean used as `useFirstChild` (`generate(config, false)` ≡ `generate(config, { useFirstChild: false })`).
218
219
219
-
**`plugins?: InteractPluginStyles`** - Optional map of plugin name → SSR style generator. For every `$<name>` field in the config, the matching generator is called with the field's (opaque) value and a context, and its returned CSS data is appended to the output. Used to emit build-time styling on a plugin's behalf — e.g. hiding pre-split text for FOUC prevention. Like `create()`/`use()`, `generate()` never inspects the field value. See [Plugins → SSR styling](../guides/plugins.md#ssr-styling-foouc-prevention).
220
+
-**`useFirstChild?: boolean`** - When `true` (the default), generated selectors target the first child of each keyed element (e.g. `[data-interact-key="hero"] > :first-child`). This is the correct mode for `<interact-element>` custom elements. Pass `false` when the keyed element itself is the animation target (vanilla JS or React `<Interaction>`).
221
+
-**`plugins?: InteractPluginStyles`** - Optional map of plugin name → SSR style generator. For every `$<name>` field in the config, the matching generator is called with the field's (opaque) value and a context, and its returned CSS data is appended to the output. Used to emit build-time styling on a plugin's behalf — e.g. hiding pre-split text for FOUC prevention. Like `create()`/`use()`, `generate()` never inspects the field value. See [Plugins → SSR styling](../guides/plugins.md#ssr-styling-foouc-prevention).
Copy file name to clipboardExpand all lines: packages/interact/docs/guides/plugins.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -141,9 +141,9 @@ A `$`-prefixed field can also sit on an individual effect, using that effect's *
141
141
142
142
## SSR styling (FOUC prevention)
143
143
144
-
A plugin often needs initial CSS _before_ it runs — e.g. hiding the un-split text so an entrance animation doesn't flash the raw content. That's a build-time concern, so it lives in [`generate()`](../api/functions.md#generateconfig-usefirstchild-plugins), not in the runtime `use()` callback.
144
+
A plugin often needs initial CSS _before_ it runs — e.g. hiding the un-split text so an entrance animation doesn't flash the raw content. That's a build-time concern, so it lives in [`generate()`](../api/functions.md#generateconfig-options), not in the runtime `use()` callback.
145
145
146
-
Pass a **second, separate callback per plugin**as `generate()`'s third argument. For every `$<name>` field, `generate()` calls the matching generator with the field's (opaque) value and a context, and appends the returned CSS. Like `create()`, `generate()` never looks inside the value — the plugin decides what to emit (and defines its own selectors under `selectorSuffix`).
146
+
Pass a **second, separate callback per plugin**in the `plugins` option of `generate()`'s options bag — `generate(config, { useFirstChild, plugins })`. For every `$<name>` field, `generate()` calls the matching generator with the field's (opaque) value and a context, and appends the returned CSS. Like `create()`, `generate()` never looks inside the value — the plugin decides what to emit (and defines its own selectors under `selectorSuffix`).
Copy file name to clipboardExpand all lines: packages/interact/rules/full-lean.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -716,7 +716,7 @@ Interact can route config to external plugins registered with `Interact.use(name
716
716
- A plugin may return a cleanup function; Interact runs it on disconnect/teardown.
717
717
- A `$<name>` field with no registered plugin is ignored.
718
718
- Plugin fields MUST be `$`-prefixed — anon-prefixed unknown key on an interaction/effect is rejected by `@wix/interact-validate`.
719
-
- **SSR styling:** for FOUC prevention (e.g. hiding un-splittext before an entrance animation), pass a**separate**per-plugin callback as `generate()`'sthird arg: `generate(config, true, { myPlugin: (value, context) => { declarations, selectorSuffix }[] })`. `generate()` does not inspect the value; the callback returns CSS rule(s) data and scopes them under the base selector (`[data-interact-key="<key>"]`). It is NOT the `use()` callback. If the plugin package ships a generator (e.g. `splitTextStyle` from `@wix/splittext/plugin`), pass that instead of writing one.
719
+
- **SSR styling:** for FOUC prevention (e.g. hiding un-splittext before an entrance animation), pass a**separate**per-plugin callback in the `plugins` option of `generate()`'soptions bag: `generate(config, { useFirstChild: true, plugins: { myPlugin: (value, context) => { declarations, selectorSuffix }[] } })`. `generate()` does not inspect the value; the callback returns CSS rule(s) data and scopes them under the base selector (`[data-interact-key="<key>"]`). It is NOT the `use()` callback. If the plugin package ships a generator (e.g. `splitTextStyle` from `@wix/splittext/plugin`), pass that instead of writing one.
720
720
721
721
**Example — split text, then stagger the generated char spans.**Use the adapter shipped from `@wix/splittext/plugin` (`splitTextPlugin` + its SSR counterpart `splitTextStyle`); do NOT hand-roll it:
| `generate(config, useFirstChild?, plugins?)` | Produce complete CSS for all interactions. Call at build/generation time; embed in HTML. `plugins` = per-plugin SSR style generators (see [Plugins](#plugins)). |
758
-
| `Interact.create(config)` | Initialize with a config. Returns the instance. Store the instance to manage its lifecycle. |
759
-
| `Interact.registerEffects(presets)` | Register named effect presets. MUST be called before `generate()` and `create`. |
760
-
| `Interact.destroy()` | Tear down all instances. Call on unmount or route change to prevent memory leaks. |
761
-
| `Interact.forceReducedMotion` | `boolean` (default: `false`) — force reduced-motion behavior regardless of OS setting. |
| `generate(config, options?)` | Produce complete CSS for all interactions. Call at build/generation time; embed in HTML. `options` = `{ useFirstChild?, plugins? }`, or a bare boolean for legacy `useFirstChild`. `plugins` = per-plugin SSR style generators (see [Plugins](#plugins)). |
758
+
| `Interact.create(config)` | Initialize with a config. Returns the instance. Store the instance to manage its lifecycle. |
759
+
| `Interact.registerEffects(presets)` | Register named effect presets. MUST be called before `generate()` and `create`. |
760
+
| `Interact.destroy()` | Tear down all instances. Call on unmount or route change to prevent memory leaks. |
761
+
| `Interact.forceReducedMotion` | `boolean` (default: `false`) — force reduced-motion behavior regardless of OS setting. |
0 commit comments