feat: meta width

show-docs · Feb 23, 2024 · f787259 · f787259
1 parent 174f788
commit f787259
Show file tree

Hide file tree

Showing 11 changed files with 1,301 additions and 516 deletions.
diff --git a/README.md b/README.md
@@ -123,6 +123,15 @@ HTTP headers to send to the server for custom authentication.
 
 Alias code language name to treat as kroki code block, meta.type will be ignored.
 
+````
+```kroki type=plantuml
+```
+↓
+
+```plantuml
+```
+````
+
 ### Options.target
 
 - type: string
@@ -165,16 +174,6 @@ Into
 ![abc](data:image/svg+xml;base64,xxxxxxxx)
 ````
 
-### Alias
-
-````
-```kroki type=plantuml
-```
- ↓
-```plantuml
-```
-````
-
 ## Troubleshooting
 
 When you using `inline-svg` with `mdx3` mode, You may get following error:

diff --git a/lib/ast.mjs b/lib/ast.mjs
@@ -1,9 +1,17 @@
+function patch({ data }) {
+  const io = data.estree.body[0].expression.properties[0];
+
+  return `${io.key.name}:${io.value.value}`;
+}
+
 function attrString(attributes = []) {
   return attributes.length > 0
     ? attributes
         .map(
           ({ name, value }) =>
-            ` ${name === 'className' ? 'class' : name}="${value}"`,
+            ` ${name === 'className' ? 'class' : name}="${
+              name === 'style' ? patch(value) : value
+            }"`,
         )
         .join('')
     : '';

diff --git a/lib/transform.mjs b/lib/transform.mjs
@@ -9,6 +9,45 @@ function removeXML(string) {
   return string.replace(/<\?xml.+\?>/, '');
 }
 
+function styleAst(width) {
+  return {
+    type: 'mdxJsxAttributeValueExpression',
+    value: `{ width: '${width}' }`,
+    data: {
+      estree: {
+        type: 'Program',
+        sourceType: 'module',
+        body: [
+          {
+            type: 'ExpressionStatement',
+            expression: {
+              type: 'ObjectExpression',
+              properties: [
+                {
+                  type: 'Property',
+                  method: false,
+                  shorthand: false,
+                  computed: false,
+                  key: {
+                    type: 'Identifier',
+                    name: 'width',
+                  },
+                  value: {
+                    type: 'Literal',
+                    value: width,
+                    raw: `'${width}'`,
+                  },
+                  kind: 'init',
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  };
+}
+
 const modes = {
   'img-base64': ({ diagramType, data, alt }) => {
     return {
@@ -23,7 +62,7 @@ const modes = {
       ],
     };
   },
-  'object-base64': ({ target, diagramType, data, alt }) => {
+  'object-base64': ({ target, diagramType, data, alt, width }) => {
     return create(target, {
       type: 'mdxJsxFlowElement',
       name: 'object',
@@ -44,6 +83,13 @@ const modes = {
           name: 'className',
           value: 'kroki-object',
         },
+        width
+          ? {
+              type: 'mdxJsxAttribute',
+              name: 'style',
+              value: styleAst(width),
+            }
+          : undefined,
         {
           type: 'mdxJsxAttribute',
           name: 'data-type',
@@ -59,10 +105,10 @@ const modes = {
           name: 'data',
           value: toDataURL(data),
         },
-      ],
+      ].filter(Boolean),
     });
   },
-  'img-html-base64': ({ target, diagramType, data, alt }) => {
+  'img-html-base64': ({ target, diagramType, data, alt, width }) => {
     return {
       type: 'paragraph',
       children: [
@@ -75,6 +121,13 @@ const modes = {
               name: 'className',
               value: 'kroki-image',
             },
+            width
+              ? {
+                  type: 'mdxJsxAttribute',
+                  name: 'style',
+                  value: styleAst(width),
+                }
+              : undefined,
             {
               type: 'mdxJsxAttribute',
               name: 'alt',
@@ -135,6 +188,7 @@ export async function transform({ node, server, headers, output, target }) {
 
   const alt = getValue(object.get('alt'));
   const type = getValue(object.get('type'));
+  const width = getValue(object.get('width'));
 
   const diagramType = lang === 'kroki' ? type : lang;
 
@@ -149,5 +203,5 @@ export async function transform({ node, server, headers, output, target }) {
     delete node[key];
   }
 
-  Object.assign(node, modes[output]({ diagramType, data, alt, target }));
+  Object.assign(node, modes[output]({ diagramType, data, alt, target, width }));
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "remark-kroki",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Remark plugin for showing Kroki diagram",
   "license": "MIT",
   "author": {
@@ -56,17 +56,17 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@bring-it/npm": "^0.3.9",
-    "@nice-move/cli": "^0.11.1",
-    "@nice-move/eslint-config-base": "^0.9.24",
-    "@nice-move/prettier-config": "^0.9.8",
-    "ava": "^5.3.1",
-    "eslint": "^8.55.0",
+    "@bring-it/npm": "^0.5.1",
+    "@nice-move/cli": "^0.11.3",
+    "@nice-move/eslint-config-base": "^0.11.1",
+    "@nice-move/prettier-config": "^0.10.0",
+    "ava": "^6.1.1",
+    "eslint": "^8.56.0",
     "eslint-plugin-ava": "^14.0.0",
-    "garou": "^0.6.19",
-    "prettier": "^3.1.0",
+    "garou": "^0.7.0",
+    "prettier": "^3.2.5",
     "remark": "^15.0.1",
-    "remark-mdx": "^3.0.0",
+    "remark-mdx": "^3.0.1",
     "unist-util-remove-position": "^5.0.0"
   },
   "engines": {
@@ -76,7 +76,7 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "packageManager": "pnpm@8.11.0",
+  "packageManager": "pnpm@8.15.3",
   "eslintConfig": {
     "extends": "@nice-move/eslint-config-base"
   },