I'm attempting to pass in additional variables when calling

Passing variables to transformChildren() about markdoc HOT 1 CLOSED

markdoc commented on May 17, 2024

Passing variables to transformChildren()

from markdoc.

Comments (1)

johnagan commented on May 17, 2024

I dug through the code and realized that Markdoc.transform() cascades a resolve() call through the tree before calling the tag's custom transform()... which seems strange to me 🤔 Maybe there should be a custom resolver per tag or something.

I ended up having to hack a solution by walking the tree and saving the original children for certain tags

const ast = Markdoc.parse(source);

for (const node of ast.walk()) {
  if (config.tags[node.tag]) {
    node.original = [...node.children];     // save original ast
  }
}

then in my tag I pull that template and use the root transform

const custom = {
  transform(node, config) {
      const variables = { ...config.variables, ...scopedVars };
      return Markdoc.transform(node.original, { ...config, variables });
  }
}

So if folks are looking for a way to loop through an array and render, here's my very hacky solution.

// the array of data to loop through
const lines = [{ text: "hello" }, { text: "world" }];

// the template to use for each iteration of the loop
const source = `
{% each items=$lines %}
{% $text %}
{% /each %}
`;

// the custom tag's transform logic
const each = {
  attributes: {
    items: {
      type: Array,
      required: true,
    },
  },
  transform(node, config) {
    return node.attributes.items.map((item) => {
      const variables = { ...config.variables, ...item };
      return Markdoc.transform(node.original, { ...config, variables });
    });
  },
};

const ast = Markdoc.parse(source);
const config = { tags: { each }, variables: { lines } };

// yuk! hack to save the original ast (before it's resolved)
for (const node of ast.walk()) {
  if (config.tags[node.tag]) {
    node.original = [...node.children];
  }
}

const content = Markdoc.transform(ast, config);

const html = Markdoc.renderers.html(content);