refactor: ast -> html

lib/ast.mjs

@@ -0,0 +1,20 @@
+function attrString(attributes = []) {
+ return attributes.length > 0
+ ? attributes.map(({ name, value }) => ` ${name}="${value}"`).join('')
+ : '';
+}
+
+export function create(target, ast) {
+ if (target === 'mdx3') {
+ return ast;
+ }
+
+ const { name, attributes, children: [{ value: child } = {}] = [] } = ast;
+
+ return {
+ type: target,
+ value: child
+ ? [`<${name}${attrString(attributes)}>`, child, `</${name}>`].join('')
+ : `<${name}${attrString(attributes)} />`,
+ };
+}

lib/fetch.mjs

@@ -0,0 +1,18 @@
+import nodeFetch from 'node-fetch';
+
+export function httpPost({ url, body, headers }) {
+ return nodeFetch(url, {
+ method: 'POST',
+ body,
+ headers: {
+ ...headers,
+ 'Content-Type': 'text/plain',
+ },
+ }).then(async (response) => {
+ if (!response.ok) {
+ throw new Error(await response.text());
+ }
+
+ return response.arrayBuffer();
+ });
+}

lib/index.mjs

@@ -9,16 +9,17 @@ export function remarkKroki({
  headers = {},
  alias = [],
  output = outputType[0],
+ target = 'html',
 } = {}) {
- validate({ server, headers, alias, output });
+ validate({ server, headers, alias, output, target });
 
  const condition = isKroki(alias);
 
  return async (tree) => {
  const temp = [];
 
  visit(tree, condition, (node) => {
- temp.push(transform({ node, server, headers, output }));
+ temp.push(transform({ node, server, headers, output, target }));
  });
 
  // eslint-disable-next-line no-empty

lib/transform.mjs

@@ -1,5 +1,6 @@
 import { getValue, parse } from 'markdown-code-block-meta';
 
+import { create } from './ast.mjs';
 import { fetchData, mime, toDataURL } from './utils.mjs';
 
 /* eslint-disable no-param-reassign */
@@ -9,39 +10,125 @@ function removeXML(string) {
 }
 
 const modes = {
- 'img-base64': ({ node, diagramType, data, alt }) => {
- node.type = 'paragraph';
- node.children = [
- {
- type: 'image',
- alt: alt || diagramType,
- url: toDataURL(data),
- },
- ];
+ 'img-base64': ({ diagramType, data, alt }) => {
+ return {
+ type: 'paragraph',
+ children: [
+ {
+ type: 'image',
+ _meta: { kroki: true, type: diagramType },
+ alt: alt || diagramType,
+ url: toDataURL(data),
+ },
+ ],
+ };
  },
- 'object-base64': ({ node, diagramType, data, alt }) => {
- node.type = 'html';
- node.value = `<object type="${mime}" class="kroki-object" data-type="${diagramType}" title="${
- alt || diagramType
- }" data="${toDataURL(data)}">Load SVG fail...</object>`;
+ 'object-base64': ({ target, diagramType, data, alt }) => {
+ return create(target, {
+ type: 'mdxJsxFlowElement',
+ name: 'object',
+ children: [
+ {
+ type: 'text',
+ value: 'Load SVG fail...',
+ },
+ ],
+ attributes: [
+ {
+ type: 'mdxJsxAttribute',
+ name: 'type',
+ value: mime,
+ },
+ {
+ type: 'mdxJsxAttribute',
+ name: 'class',
+ value: 'kroki-object',
+ },
+ {
+ type: 'mdxJsxAttribute',
+ name: 'data-type',
+ value: diagramType,
+ },
+ {
+ type: 'mdxJsxAttribute',
+ name: 'title',
+ value: alt || diagramType,
+ },
+ {
+ type: 'mdxJsxAttribute',
+ name: 'data',
+ value: toDataURL(data),
+ },
+ ],
+ });
  },
- 'img-html-base64': ({ node, diagramType, data, alt }) => {
- node.type = 'html';
- node.value = `<img class="kroki-image" alt="${
- alt || diagramType
- }" src="${toDataURL(data)}" />`;
+ 'img-html-base64': ({ target, diagramType, data, alt }) => {
+ return {
+ type: 'paragraph',
+ children: [
+ create(target, {
+ type: 'mdxJsxTextElement',
+ name: 'img',
+ attributes: [
+ {
+ type: 'mdxJsxAttribute',
+ name: 'class',
+ value: 'kroki-image',
+ },
+ {
+ type: 'mdxJsxAttribute',
+ name: 'alt',
+ value: alt || diagramType,
+ },
+ {
+ type: 'mdxJsxAttribute',
+ name: 'data-type',
+ value: diagramType,
+ },
+ {
+ type: 'mdxJsxAttribute',
+ name: 'src',
+ value: toDataURL(data),
+ },
+ ],
+ }),
+ ],
+ };
  },
- 'inline-svg': ({ node, diagramType, data, alt }) => {
- node.type = 'html';
- node.value = `<div class="kroki-inline-svg" data-type="${diagramType}" data-alt="${
- alt || diagramType
- }">${removeXML(data.toString())}</div>`;
+ 'inline-svg': ({ target, diagramType, data, alt }) => {
+ return create(target, {
+ type: 'mdxJsxFlowElement',
+ name: 'p',
+ attributes: [
+ {
+ type: 'mdxJsxAttribute',
+ name: 'class',
+ value: 'kroki-inline-svg',
+ },
+ {
+ type: 'mdxJsxAttribute',
+ name: 'data-type',
+ value: diagramType,
+ },
+ {
+ type: 'mdxJsxAttribute',
+ name: 'data-alt',
+ value: alt || diagramType,
+ },
+ ],
+ children: [
+ {
+ type: 'html',
+ value: removeXML(data.toString()),
+ },
+ ],
+ });
  },
 };
 
 export const outputType = Object.keys(modes);
 
-export async function transform({ node, server, headers, output }) {
+export async function transform({ node, server, headers, output, target }) {
  const { meta, value, lang } = node;
 
  const object = parse(meta);
@@ -58,9 +145,9 @@ export async function transform({ node, server, headers, output }) {
  value,
  });
 
- delete node.lang;
- delete node.value;
- delete node.meta;
+ for (const key of Object.keys(node)) {
+  delete node[key];
+ }
 
- modes[output]({ node, diagramType, data, alt });
+ Object.assign(node, modes[output]({ diagramType, data, alt, target }));
 }

lib/utils.mjs

@@ -1,9 +1,10 @@
 import { readFileSync } from 'node:fs';
 
 import { parse } from 'markdown-code-block-meta';
-import nodeFetch from 'node-fetch';
 import pMemoize from 'p-memoize';
 
+import { httpPost } from './fetch.mjs';
+
 export function isKroki(alias = []) {
  return ({ type, lang, meta, value }) => {
  return (
@@ -16,52 +17,31 @@ export function isKroki(alias = []) {
  };
 }
 
-const fail = readFileSync(new URL('fail.svg', import.meta.url), 'utf8');
+const failImage = new URL('fail.svg', import.meta.url);
 
-function createFailImageBuffer(message) {
- return Buffer.from(fail.replace('======', message.slice(0, 500)));
+function createFailImage(message) {
+ return readFileSync(failImage, 'utf8').replace(
+ '======',
+ message.slice(0, 500),
+ );
 }
 
-function Fetch({ server, headers = {}, type, value }) {
- return nodeFetch(`${server}/${type}/svg`, {
- method: 'POST',
+function Fetch({ server, headers, type, value }) {
+ return httpPost({
+ url: `${server}/${type}/svg`,
  body: value,
- headers: {
- ...headers,
- 'Content-Type': 'text/plain',
- },
+ headers,
  })
- .then(
- (response) => {
- if (!response.ok || response.statusCode >= 400) {
- if (response.statusCode === 404) {
- return 'Error: 404';
- }
-
- return response.text();
- }
-
- return response.arrayBuffer();
- },
- (error) => `Error: ${error.message}`,
- )
- .then((data) =>
- typeof data === 'string'
- ? createFailImageBuffer(data)
- : Buffer.from(data),
- );
+ .catch((error) => createFailImage(error.message))
+ .then((data) => Buffer.from(data));
 }
 
 export const mime = 'image/svg+xml';
 
-function base64Url(base64) {
- return `data:${mime};base64,${base64}`;
-}
-
 export function toDataURL(buffer) {
  const base64 = buffer.toString('base64');
 
- return base64Url(base64);
+ return `data:${mime};base64,${base64}`;
 }
 
 export const fetchData = pMemoize(Fetch, {

lib/validate.mjs

@@ -4,7 +4,9 @@ import isPlainObject from 'is-plain-obj';
 
 import { outputType } from './transform.mjs';
 
-export function validate({ server, headers, alias, output }) {
+const targets = ['html', 'mdx3'];
+
+export function validate({ server, headers, alias, output, target }) {
  try {
  assert(
  typeof server === 'string',
@@ -43,13 +45,13 @@ export function validate({ server, headers, alias, output }) {
  );
 
  assert(
- typeof output === 'string',
- new TypeError('`output` should be string'),
+ outputType.includes(output),
+ new TypeError(`\`output\` should be one of \`${outputType.join('/')}\``),
  );
 
  assert(
- outputType.includes(output),
- new TypeError(`\`output\` should be one of \`${outputType.join('/')}\``),
+ targets.includes(target),
+ new TypeError(`\`target\` should be one of \`${targets.join('/')}\``),
  );
  } catch (error) {
  throw error.actual || error;

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": {
@@ -75,7 +76,7 @@
  "access": "public",
  "registry": "https://registry.npmjs.org/"
  },
- "packageManager": "pnpm@8.10.5",
+ "packageManager": "pnpm@8.11.0",
  "eslintConfig": {
  "extends": "@nice-move/eslint-config-base"
  },