How do I change the value of a node property and save the new tree

[mirhamasala]

I'm converting my blog from WordPress to Next.js

For each article, I want to download the image and change the src to the local path.

This is how far I've gotten with the documentation and my very limited understanding of AST.

const post = await fetchContent();

const tree = unified()
  .use(rehypeParse, { fragment: true })
  .parse(post.content.rendered);

visit(tree, (node) => {
  if (node.tagName === "img") {
    node.properties.src = "/local-path-to-image";
  }
});

Where do I go from here?

How do I permanently change the tree?

🙏🏼

[ChristianMurphy]

Welcome @mirhamasala! 👋
You're on the right track, and from a cursory glance I think the code may already work?
Visit allows for changes to be made directly to the tree in place.
I tried it in the rehype sandbox wrapping it as a plugin: https://codesandbox.io/s/zealous-matan-nf9gec?file=/src/index.js and it appeared to work.

A couple minor suggestions which may further improve the code (both are incorporated in the sandbox above).

1. Consider applying the changes from inside a unified/rehype plugin, this allows for updates to content to be more easily chained.
2. Consider using the test option from unist-util-visit to more quickly filter the tree to find the image elements. Something like { type: 'element', tagName: 'img' }

[mirhamasala]

Hi @ChristianMurphy ☀️

Thank you. Very clear. And so kind of you to create a Sandbox to show it. ❤️