feat: options.target

lib/ast.mjs

@@ -1,16 +1,30 @@
 function attrString(attr) {
  return attr
  ? Object.entries(attr)
- .map(([name, value]) => `${name}="${value}"`)
- .join(' ')
+ .map(([name, value]) => ` ${name}="${value}"`)
+ .join('')
  : '';
 }
 
 export function create(target, { tag, attr, child }) {
+ if (target === 'mdx3') {
+ return {
+ type: 'mdxJsxFlowElement',
+ name: tag,
+ attributes: [
+ {
+ type: 'mdxJsxAttribute',
+ name: 'label',
+ value: 'label',
+ },
+ ],
+ };
+ }
+
  return {
  type: target,
  value: child
- ? [`<${tag} ${attrString(attr)}>`, child, `</${tag}>`].join('')
- : `<${tag} ${attrString(attr)} />`,
+ ? [`<${tag}${attrString(attr)}>`, child, `</${tag}>`].join('')
+ : `<${tag}${attrString(attr)} />`,
  };
 }

lib/transform.mjs

@@ -38,8 +38,8 @@ const modes = {
  );
  },
  'img-html-base64': ({ target, node, diagramType, data, alt }) => {
- Object.assign(
-  node,
+ node.type = 'paragraph';
+ node.children = [
  create(target, {
  tag: 'img',
  attr: {
@@ -49,13 +49,13 @@ const modes = {
  src: toDataURL(data),
  },
  }),
- );
+ ];
  },
  'inline-svg': ({ target, node, diagramType, data, alt }) => {
  Object.assign(
  node,
  create(target, {
- tag: 'div',
+ tag: 'p',
  attr: {
  class: 'kroki-inline-svg',
  'data-type': diagramType,
@@ -89,6 +89,7 @@ export async function transform({ node, server, headers, output, target }) {
  delete node.lang;
  delete node.value;
  delete node.meta;
+ delete node.type;
 
  modes[output]({ node, diagramType, data, alt, target });
 }

lib/validate.mjs

@@ -4,7 +4,7 @@ import isPlainObject from 'is-plain-obj';
 
 import { outputType } from './transform.mjs';
 
-const targets = ['html', 'raw', 'mdx1', 'mdx2+'];
+const targets = ['html', 'mdx3'];
 
 export function validate({ server, headers, alias, output, target }) {
  try {

package.json

@@ -66,6 +66,7 @@
  "garou": "^0.6.19",
  "prettier": "^3.1.0",
  "remark": "^15.0.1",
+ "remark-mdx": "^3.0.0",
  "unist-util-remove-position": "^5.0.0"
  },
  "engines": {