fix attribute deserialization

deserialization-helpers.js was using an older version of unified and
related packages, which was causing it not to recognize `mdxJsx*`
node types. upgrading in that file would've been difficult, because
it would've had to change to an ESM file, as would handlers.js,
and many more files in the dependency chain.
this is a decent workaround — just define the attribute processor in
deserialize-html.mjs, then pass it as an argument through to the
deserialization-helper functions

to get tests working, i had to add `TRANSLATION_TYPE=human` to the test
command, i wasn't able to get mocking the configuration module working

Author: sunnyzanchi

codemods/utils/mdxast-builder.js

@@ -1,7 +1,10 @@
 const u = require('unist-builder');
 
 const mdxAttribute = (name, value) => u('mdxAttribute', { name, value });
+const mdxJsxAttribute = (name, value) => u('mdxJsxAttribute', { name, value });
 const mdxValueExpression = (value) => u('mdxValueExpression', value);
+const mdxJsxAttributeValueExpression = (value) =>
+  u('mdxJsxAttributeValueExpression', value);
 const mdxBlockExpression = (value) => u('mdxBlockExpression', value);
 const mdxSpanExpression = (value) => u('mdxSpanExpression', value);
 
@@ -16,6 +19,8 @@ const mdxImport = (expression, path) =>
 
 module.exports = {
   mdxAttribute,
+  mdxJsxAttribute,
+  mdxJsxAttributeValueExpression,
   mdxBlockElement,
   mdxBlockExpression,
   mdxImport,

package.json

@@ -215,7 +215,7 @@
     "start:full": "NODE_OPTIONS='--max-old-space-size=5120' yarn develop",
     "start": "NODE_OPTIONS='--max-old-space-size=5120' BUILD_LANG=en yarn develop",
     "test": "jest -i",
-    "test:esm": "NODE_OPTIONS=--loader=esmock uvu . __esm-tests__",
+    "test:esm": "TRANSLATION_TYPE=human NODE_OPTIONS=--loader=esmock uvu . __esm-tests__",
     "trigger-i18n-merge": "node scripts/actions/trigger-i18n-merge.js",
     "update-attribute-dictionary-json": "node scripts/actions/update-attribute-dictionary-json.mjs",
     "verify-install-page": "node scripts/verifyInstallPage.js",

scripts/actions/__esm-tests__/deserialize-html.test.mjs

@@ -3,22 +3,12 @@ import path, { dirname } from 'path';
 import { expect } from 'expect';
 import { fileURLToPath } from 'url';
 import { test } from 'uvu';
-// import { mock } from 'node:test';
 
-// import { configuration } from '../configuration.js';
 import deserializeHTML from '../deserialize-html.mjs';
 import serializeMDX from '../serialize-mdx.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-// mock('../configuration', () => ({
-//   configuration: {
-//     TRANSLATION: {
-//       TYPE: 'human',
-//     },
-//   },
-// }));
-
 test('deserializes mdx with DoNotTranslate', async () => {
   const input = `
 <DoNotTranslate>
@@ -101,7 +91,16 @@ test('deserializes components with text props', async () => {
 
 test('deserializes components with text props as JSX expressions', async () => {
   const input = `
-<Collapser title={<><InlineCode>agent.send_custom_event</InlineCode> API</>}>
+<Collapser
+  title={<>
+    <InlineCode>
+      agent.send_custom_event
+    </InlineCode>
+
+    API
+  </>
+  }
+>
   All about that API
 </Collapser>
   `;
@@ -114,7 +113,16 @@ test('deserializes components with text props as JSX expressions', async () => {
 test('deserializes components with children', async () => {
   const input = `
 <CollapserGroup>
-  <Collapser title={<><InlineCode>agent.send_custom_event</InlineCode> API</>}>
+  <Collapser
+    title={<>
+      <InlineCode>
+        agent.send_custom_event
+      </InlineCode>
+
+      API
+    </>
+    }
+  >
     All about that API
   </Collapser>
 </CollapserGroup>

scripts/actions/__tests__/kitchen-sink.mdx

@@ -173,8 +173,19 @@ def handler(event, context):
   </Collapser>
 </CollapserGroup>
 
-<InlineCode>hiii</InlineCode>
-
-<Collapser title={<><InlineCode>agent.send_custom_event</InlineCode> API</>}>
+<InlineCode>
+  hiii
+</InlineCode>
+
+<Collapser
+  title={<>
+    <InlineCode>
+      agent.send_custom_event
+    </InlineCode>
+
+    API
+  </>
+  }
+>
   All about that API
 </Collapser>

scripts/actions/deserialize-html.mjs

@@ -9,6 +9,7 @@ import { defaultHandlers } from 'hast-util-to-mdast9';
 import u from 'unist-builder';
 import last from 'lodash/last.js';
 import yaml from 'js-yaml';
+import { visit } from 'unist-util-visit4';
 import { configuration } from './configuration.js';
 
 /**
@@ -36,7 +37,7 @@ const component = (state, node) => {
     );
   }
 
-  return handler.deserialize(state, node);
+  return handler.deserialize(state, node, undefined, attributeProcessor);
 };
 
 const headingWithCustomId = (state, node) => {
@@ -88,6 +89,28 @@ const stripTranslateFrontmatter = () => {
   return transformer;
 };
 
+const inlineCodeAttribute = () => (tree) => {
+  visit(tree, 'inlineCode', (node) => {
+    node.type = 'mdxJsxSpanElement';
+    node.name = 'InlineCode';
+    node.children = [u('text', node.value)];
+  });
+};
+
+// previously, this processor was defined in `deserialization-helpers`.
+// upgrading unified there would have involved changing a lot of CJS modules to ESM.
+// this is a sort of workaround to avoid doing all that,
+// but still allow attribute deserialization to work with the new node types
+// introduced in newer versions of remarkMDX. (`mdxJsx*` nodes vs `mdx*` nodes.)
+const attributeProcessor = unified()
+  .use(stringify, {
+    bullet: '*',
+    fences: true,
+    listItemIndent: '1',
+  })
+  .use(remarkMdx)
+  .use(inlineCodeAttribute);
+
 const processor = unified()
   .use(parse)
   .use(rehype2remark, {

scripts/actions/utils/deserialization-helpers.js

@@ -1,46 +1,22 @@
-const deserializeJSValue = (value) => JSON.parse(Buffer.from(value, 'base64'));
-const all = require('hast-util-to-mdast/lib/all');
-const remarkMdx = require('remark-mdx');
-const remarkMdxjs = require('remark-mdxjs');
-const stringify = require('remark-stringify');
-const unified = require('unified');
 const {
-  mdxAttribute,
-  mdxValueExpression,
+  mdxJsxAttribute,
+  mdxJsxAttributeValueExpression,
 } = require('../../../codemods/utils/mdxast-builder');
-const visit = require('unist-util-visit');
-const u = require('unist-builder');
 
 const hasChildren = (node) => node.children && node.children.length;
 
-const inlineCodeAttribute = () => (tree) => {
-  visit(tree, 'inlineCode', (node) => {
-    node.type = 'mdxSpanElement';
-    node.name = 'InlineCode';
-    node.children = [u('text', node.value)];
-  });
-};
-
-const attributeProcessor = unified()
-  .use(stringify, {
-    bullet: '*',
-    fences: true,
-    listItemIndent: '1',
-  })
-  .use(remarkMdx)
-  .use(remarkMdxjs)
-  .use(inlineCodeAttribute);
+const deserializeJSValue = (value) => JSON.parse(Buffer.from(value, 'base64'));
 
-const deserializeAttributeValue = (h, node) => {
+const deserializeAttributeValue = (state, node, processor) => {
   if (node.type === 'text') {
     return node.value;
   }
 
   if (node.type === 'element') {
-    const tree = deserializeComponent(h, node, { type: 'mdxJsxTextElement' });
-    const transformedTree = attributeProcessor.runSync(tree);
+    const tree = deserializeComponent(state, node);
+    const transformedTree = processor.runSync(tree);
 
-    return mdxValueExpression(attributeProcessor.stringify(transformedTree));
+    return mdxJsxAttributeValueExpression(processor.stringify(transformedTree));
   }
 
   throw new Error('Unable to deserialize attribute');
@@ -49,7 +25,8 @@ const deserializeAttributeValue = (h, node) => {
 const deserializeComponent = (
   state,
   node,
-  { type, hasChildrenProp = true } = {}
+  { type, hasChildrenProp = true } = {},
+  attributeProcessor
 ) => {
   const { dataComponent, dataProps } = node.properties;
   const name = dataComponent || node.tagName;
@@ -75,14 +52,18 @@ const deserializeComponent = (
 
   const attributes = textProps.reduce((attributes, node) => {
     const { dataProp: name } = node.properties;
-    const value = deserializeAttributeValue(state, node.children[0]);
+    const value = deserializeAttributeValue(
+      state,
+      node.children[0],
+      attributeProcessor
+    );
     const idx = attributes.findIndex((attr) => attr.name === name);
 
     return idx === -1
-      ? [...attributes, mdxAttribute(name, value)]
+      ? [...attributes, mdxJsxAttribute(name, value)]
       : [
           ...attributes.slice(0, idx),
-          mdxAttribute(name, value),
+          mdxJsxAttribute(name, value),
           ...attributes.slice(idx + 1),
         ];
   }, props);