Logical (writing direction aware) transitions

[ramiroaisen]

Describe the problem

I recently had to translate an app I'm writing to different languages, with different writing directions.
So I had to replace all of my fly transitions to use this logical_fly function instead of the fly transition provided by svelte.

import { fly } from "svelte/transition";

export const logical_fly: typeof fly = (node, params = {}) => {
  let { x, ...rest } = params;
  if(getComputedStyle(node).direction === "rtl") x = -x; 
  return fly(node, {
    ...rest,
    x,
  })
}

This a little example for explanaition only, a better approach could be taken, like handling vertical wiritng modes.

Describe the proposed solution

Extend the transitions with logical parameters that are writing direction aware.

export type FlyParams = {
   /// same old x, y, duration, etc
   /// and the new ones
  inline?: number,
  block?: number
}

This won't be a breaking change because if not provided, the logical parameters could be ignored

Alternatives considered

Do nothing and let this be solved in user code.

Importance

nice to have