Tag name and attributes are not taken into account when using Hastscript

[azat-io]

Hello I'm trying to create simple Remark plugin. This plugin should wrap code blocks in a div and add a button next to the code block.

Here is my code:

import type { Transformer, Plugin } from 'unified'
import type { Parent, Node } from 'unist'
import type { Result } from 'hastscript'
import type { Root, Code } from 'mdast'

import { visit } from 'unist-util-visit'
import { h } from 'hastscript'

export let remarkCopyCode: Plugin<[], Root> =
  (): Transformer<Root> => (tree: Node) => {
    visit(tree, 'code', (node: Code, index: number, parent: Parent) => {
      let { lang } = node

      let html = h(
        'div',
        {
          class: 'copy-code-wrapper',
        },
        [
          h(
            'button',
            {
              class: 'copy-code-button',
              'data-lang': lang,
            },
            'Copy',
          ),
          node as unknown as Result,
        ],
      )

      parent.children[index] = html
    })
  }

Everything is rendered correctly. However, after the build the tag name remains div, and all attributes including CSS class names are not applied.

Can you tell me what I'm doing wrong?

[azat-io]

Found a solution by adding helper function:

import type { PhrasingContent, Paragraph, Root, Code } from 'mdast'
import type { Properties, Result } from 'hastscript'
import type { Transformer, Plugin } from 'unified'
import type { Parent, Node } from 'unist'

import { visit } from 'unist-util-visit'
import { h as _h } from 'hastscript'

let h = (
  el: string,
  attrs: Properties = {},
  children: unknown[] = [],
): Paragraph => {
  let { properties, tagName } = _h(el, attrs)
  return {
    data: { hProperties: properties, hName: tagName },
    children: children as PhrasingContent[],
    type: 'paragraph',
  }
}

export let remarkCopyCode: Plugin<[], Root> =
  (): Transformer<Root> => (tree: Node) => {
    visit(tree, 'code', (node: Code, index: number, parent: Parent) => {
      let { lang } = node

      let html = h(
        'div',
        {
          class: 'copy-code-wrapper',
        },
        [
          h(
            'button',
            {
              class: 'copy-code-button',
              'data-lang': lang,
            },
            [
              {
                value: 'Copy',
                type: 'text',
              },
            ],
          ),
          node as unknown as Result,
        ],
      )

      parent.children[index] = html
    })
  }

[ChristianMurphy]

@azat-io an issue I'm seeing, you are mixing the HTML and Markdown syntax tree types.

If you want to work on the HTML, write a Rehype plugin and work with the HTML AST (hast). https://unifiedjs.com/learn/
Also some of the previous community ideas in https://github.com/orgs/mdx-js/discussions/1948

remark plugins should only have markdown constructs (mdast), if you want to specify different HTML types for markdown constructs use node.data.hName as documented in https://github.com/syntax-tree/mdast-util-to-hast#fields-on-nodes
That said, a rehype plugin sound like a better for what you are describing.