Skip to main content

wrapNode()v4.0.530

Wraps an existing node in an element created with createElement(). The wrapped element becomes the only child of the wrapper, and the wrapper's imports are added.

warning

Draft API: This API is experimental and may change.

wrap-node.ts
import {createElement, getNodes, wrapNode, type CodemodProject} from '@remotion/codemods';

declare const project: CodemodProject;

const node = getNodes({project, filePath: 'src/Video.tsx'}).find((candidate) => candidate.tagName === 'div');

if (node) {
  const result = wrapNode({
    project,
    node,
    wrapper: createElement({
      component: 'Sequence',
      importPath: 'remotion',
      props: {from: 30, durationInFrames: 60},
    }),
  });
  console.log(result.changes);
}

The wrapped element keeps its source formatting.

Options​

project​

An in-memory CodemodProject. The input project is not mutated.

node​

The reference of the node to wrap. See node references.

wrapper​

The wrapper element, created with createElement(). It must not have children. Wrapping in <HtmlInCanvas> or <HtmlInCanvasMotionBlur> requires positive integer width and height props and is rejected inside or around another canvas wrapper, whether the wrapper is imported by the element or already in scope.

Return value​

An object with the following properties.

changes​

An array of {filePath, previousContents, nextContents} file changes.

nodePathRemappings​

An array of {filePath, oldNodePath, newNodePath} mappings. The wrapped element and its descendants receive new paths, and the wrapper is listed with a null old path. See node references.

logLine​

The one-based line of the wrapped element's opening tag in the input source.

Errors​

Throws when the node cannot be found, cannot be wrapped, or the wrapper is invalid. Failed edits leave the input project unchanged.

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​