Is there the way to convert remark nodes to amp components?

[illumination-k]

I try to make the SSG site with AMP and Next.js.

I want to convert remark node (e.g., image, math) to amp components (e.g., amp-img, amp-mathml) with custom remark extensions.

I tried to convert the remark node to mdxFlowElement with attributes like the following when compiling MDX, but I got the error SyntaxError: Unexpected token '-'.

const newNode = {
  type: "mdxJsxFlowElement",
  name: "amp-mathml",
  attributes: [
    {type: "mdxJsxAttribute", name: "data-formula", value: `[${node.value}]`}
  ]
}

But compile successed with following MDX

##h2

<amp-img
  src="https://amp.dev/static/inline-examples/images/mountains.webp?width=1750&hash=3ba88bf02bbdf1063bfdefa84c1955060b3a5fa6" 
  width="550" height="368"
/>

So is there a way to convert remark nodes to amp components? and how?

[wooorm]

Yes, you can turn mdast into several things, which includes finally getting AMP out.

Your question does not have enough information. Follow Support

[illumination-k]

Thanks for your fast reply and sorry for the lack of information.

I created codesandbox,

https://codesandbox.io/s/exciting-butterfly-hk3r7?file=/pages/index.js

I would like to convert

## TL;DR
$$\sum$$

to

<h2>TL;DR</h2>
<amp-mathml data-formula=[\sum] />

in serverside and run it in client side.

[wooorm]

There is a math and an inlineMath node. There is an mdxJsxFlowElement and an mdxJsxTextElement. You’re only handling two.

[illumination-k]

Sorry, maybe I can't fully understand your message.

I put the script to check the compile results in gist.

If I use math or inlineMath and mdxJsxFlowElement or mdxJsxTextElement, the compile result from $$\sum$$ is

_jsx(_components.p, {
  children: _jsx(_components["amp-mathml"], {
    "data-formula": "[\sum]"
})

and error occured in runSync(code, runtime) with SyntaxError: Unexpected token '-'.

On the other hand, the compile result from

<amp-img
  src="https://amp.dev/static/inline-examples/images/mountains.webp?width=1750&hash=3ba88bf02bbdf1063bfdefa84c1955060b3a5fa6"
  width="550"
  height="368"
/>

is

_jsx("amp-img", {
  src: "https://amp.dev/static/inline-examples/images/mountains.webp?width=1750&hash=3ba88bf02bbdf1063bfdefa84c1955060b3a5fa6",
  width: "550",
  height: "368"
})

and runSync(code, runtime) works well.

math and img are just the examples. I would like to know how to convert remark node to _jsx("amp-xxx, {...}) or how do I get _jsx(_components["amp-xxx"], {...}) to work well in runSync.

[wooorm]

The syntax error you mentions is already being discussed/worked on/landing in remarkjs/remark-math#72, wooorm/xdm@ddcebdb, and wooorm/xdm#106

[illumination-k]

Awesome! I'm really looking forward to the release. Thanks for your help.