Skip to main content

getCanvasSequenceSourceLocation()v4.0.529

Returns where the JSX element of a timeline track was written, if the bundler recorded it. Use it to look up the source node of a mounted sequence, for example with getJsxNodes() from @remotion/codemods, and pass the result to controller.setSequenceNodePaths().

warning

Experimental API: This package is not stable. Its public API may change without a major version bump.

resolve-node-paths.ts
import {getCanvasSequenceSourceLocation} from '@remotion/canvas';
import {getJsxNodes} from '@remotion/codemods';
import type {SequencePropsSubscriptionKey} from 'remotion';

export const resolveNodePaths = () => {
  const nodePaths: Record<string, SequencePropsSubscriptionKey> = {};
  for (const track of controller.timeline.getSnapshot()) {
    const overrideId = track.sequence.controls?.overrideId;
    const location = getCanvasSequenceSourceLocation(track);
    if (!overrideId || !location) {
      continue;
    }

    const node = getJsxNodes({project, filePath: location.fileName}).find(
      (candidate) =>
        candidate.location?.line === location.line &&
        candidate.location.column === location.column,
    );
    if (node) {
      nodePaths[overrideId] = {
        absolutePath: node.filePath,
        nodePath: node.nodePath,
        sequenceKeys: [],
        effectKeys: [],
        videoConfigValues: track.sequence.controls?.videoConfigValues ?? null,
      };
    }
  }

  controller.setSequenceNodePaths(nodePaths);
};

Source locations are available for projects compiled with createBrowserBundler() using enableFastRefresh and executed with createBrowserBundleRuntime(). Other bundlers do not record them, and the function returns null.

The function reads the mounted sequence's current location. After applying a Fast Refresh update that moved elements, call it again instead of caching the result.

Parameter​

track​

A TimelineTrackData from controller.timeline.

Return value​

A CanvasSequenceSourceLocation, or null if the location is unknown.

fileName​

The path of the file the JSX element was compiled from, as seen by the bundler. For a virtual project, this is the project-relative path with a leading slash, such as /src/Video.tsx.

line​

The 1-based line of the JSX element.

column​

The 0-based column of the JSX element. This matches the location of getJsxNodes().

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​