WIP - trying to make the deserialize test work for DoNotTranslate com…

…ponent
newrelic · Dec 6, 2021 · ba4c2b6 · ba4c2b6
1 parent f3b8a4d
commit ba4c2b6
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 37 deletions.
diff --git a/scripts/actions/__tests__/__snapshots__/serialize-mdx.test.js.snap b/scripts/actions/__tests__/__snapshots__/serialize-mdx.test.js.snap
@@ -385,6 +385,8 @@ exports[`serializes var to html 1`] = `"<var data-type=\\"component\\"><p>JAVA_A
 
 exports[`test DoNotTranslate 1`] = `
 "
-<div data-type=\\"component\\" data-component=\\"DoNotTranslate\\" data-props=\\"W3sidHlwZSI6InBhcmFncmFwaCIsImNoaWxkcmVuIjpbeyJ0eXBlIjoidGV4dCIsInZhbHVlIjoiTm90IGFsbCB3aG8gd2FuZGVyIGFyZSBsb3N0Li4uIiwicG9zaXRpb24iOnsic3RhcnQiOnsibGluZSI6MywiY29sdW1uIjoxLCJvZmZzZXQiOjIyfSwiZW5kIjp7ImxpbmUiOjQsImNvbHVtbiI6NSwib2Zmc2V0Ijo2M30sImluZGVudCI6WzFdfX1dLCJwb3NpdGlvbiI6eyJzdGFydCI6eyJsaW5lIjozLCJjb2x1bW4iOjEsIm9mZnNldCI6MjJ9LCJlbmQiOnsibGluZSI6NCwiY29sdW1uIjo1LCJvZmZzZXQiOjYzfSwiaW5kZW50IjpbMV19fV0=\\"></div>
+<div data-type=\\"component\\" data-component=\\"DoNotTranslate\\" data-props=\\"eyJuYW1lIjoiRG9Ob3RUcmFuc2xhdGUiLCJhdHRyaWJ1dGVzIjpbXSwiY2hpbGRyZW4iOlt7InR5cGUiOiJwYXJhZ3JhcGgiLCJjaGlsZHJlbiI6W3sidHlwZSI6InRleHQiLCJ2YWx1ZSI6Ik5vdCBhbGwgd2hvIHdhbmRlciBhcmUgbG9zdC4uLiIsInBvc2l0aW9uIjp7InN0YXJ0Ijp7ImxpbmUiOjMsImNvbHVtbiI6MSwib2Zmc2V0IjoyMn0sImVuZCI6eyJsaW5lIjo0LCJjb2x1bW4iOjUsIm9mZnNldCI6NjN9LCJpbmRlbnQiOlsxXX19XSwicG9zaXRpb24iOnsic3RhcnQiOnsibGluZSI6MywiY29sdW1uIjoxLCJvZmZzZXQiOjIyfSwiZW5kIjp7ImxpbmUiOjQsImNvbHVtbiI6NSwib2Zmc2V0Ijo2M30sImluZGVudCI6WzFdfX1dLCJwb3NpdGlvbiI6eyJzdGFydCI6eyJsaW5lIjoyLCJjb2x1bW4iOjEsIm9mZnNldCI6MX0sImVuZCI6eyJsaW5lIjo0LCJjb2x1bW4iOjIyLCJvZmZzZXQiOjgwfSwiaW5kZW50IjpbMSwxXX19\\">
+  <div></div>
+</div>
 "
 `;
diff --git a/scripts/actions/__tests__/deserialize-html.test.js b/scripts/actions/__tests__/deserialize-html.test.js
@@ -4,11 +4,11 @@ import fs from 'fs';
 
 test.only('deserializes DoNotTranslate', async () => {
   const input = `
-  <CodeBlock>
+  <DoNotTranslate>
     <div>
       Not all who wander are lost...
     </div>
-  </CodeBlock>
+  </DoNotTranslate>
 `;
 
   const mdx = await deserializeHTML(await serializeMDX(input));

diff --git a/scripts/actions/__tests__/serialize-mdx.test.js b/scripts/actions/__tests__/serialize-mdx.test.js
@@ -4,9 +4,7 @@ import fs from 'fs';
 test.only('test DoNotTranslate', async () => {
   const html = await serializeMDX(`
     <DoNotTranslate>
-      <div>
-        Not all who wander are lost...
-      </div>
+      Not all who wander are lost...
     </DoNotTranslate>
   `);
 

diff --git a/scripts/actions/utils/deserialization-helpers.js b/scripts/actions/utils/deserialization-helpers.js
@@ -51,7 +51,6 @@ const deserializeComponent = (
   node,
   { type, hasChildrenProp = true } = {}
 ) => {
-  console.log('top');
   const { dataComponent, dataProps } = node.properties;
   const name = dataComponent || node.tagName;
   const props = dataProps ? deserializeJSValue(dataProps) : [];
@@ -98,7 +97,6 @@ const deserializeComponent = (
     childrenNode && hasChildrenProp ? all(h, childrenNode) : []
   );
 
-  console.log('deserialized node', newNode);
   return newNode;
 };
 

diff --git a/scripts/actions/utils/handlers.js b/scripts/actions/utils/handlers.js
@@ -6,18 +6,32 @@ const {
   deserializeComponent,
   deserializeJSValue,
 } = require('./deserialization-helpers');
-const all = require('mdast-util-to-hast/lib/all');
 const yaml = require('js-yaml');
 const u = require('unist-builder');
 const toString = require('mdast-util-to-string');
 const { omit } = require('lodash');
 // const all = require('hast-util-to-mdast/lib/all');
 
 module.exports = {
+  // CodeBlock: {
+  //   serialize: (h, node) =>
+  //     h(
+  //       node,
+  //       'pre',
+  //       {
+  //         'data-type': 'component',
+  //         'data-component': 'CodeBlock',
+  //         'data-props': serializeJSValue(omit(node, ['type'])),
+  //       },
+  //       [h(node, 'code')]
+  //     ),
+  //   deserialize: (h, node) =>
+  //     h(node, 'code', deserializeJSValue(node.properties.dataProps)),
+  // },
   CodeBlock: {
     serialize: (h, node) => {
       console.log('start:', node);
-      h(
+      return h(
         node,
         'pre',
         {
@@ -35,6 +49,7 @@ module.exports = {
         deserializeJSValue(node.properties.dataProps)
       );
       console.log('end:', results);
+      return results;
     },
   },
   import: {
@@ -118,6 +133,33 @@ module.exports = {
     deserialize: deserializeComponent,
     serialize: serializeComponent,
   },
+  DoNotTranslate: {
+    deserialize: (h, node) => {
+      console.dir('serialized node', node);
+      const results = h(
+        node,
+        'code',
+        deserializeJSValue(node.properties.dataProps)
+      );
+      console.dir('deserialized results', results);
+      return results;
+    },
+    serialize: (h, node) => {
+      console.dir('mdx node', node);
+      const results = h(
+        node,
+        'div',
+        {
+          'data-type': 'component',
+          'data-component': 'DoNotTranslate',
+          'data-props': serializeJSValue(omit(node, ['type'])),
+        },
+        [h(node, 'div')]
+      );
+      console.dir('serialized node', results);
+      return results;
+    },
+  },
   ExternalLink: {
     deserialize: deserializeComponent,
     serialize: serializeComponent,
@@ -194,33 +236,6 @@ module.exports = {
     serialize: (h, node) =>
       serializeComponent(h, node, { textAttributes: ['title'] }),
   },
-  DoNotTranslate: {
-    serialize: (h, node) => {
-      console.log('mdx node', node);
-      const results = h(
-        node,
-        'div',
-        {
-          'data-type': 'component',
-          'data-component': 'DoNotTranslate',
-          'data-props': serializeJSValue(omit(node, ['type'])),
-        },
-        [h(node, 'div')]
-      );
-      console.log('serialized node', results);
-      return results;
-    },
-    deserialize: (h, node) => {
-      console.log('serialized node', node);
-      const results = h(
-        node,
-        'div',
-        deserializeJSValue(node.properties.dataProps)
-      );
-      console.log('deserialized results', results);
-      return results;
-    },
-  },
   thead: {
     deserialize: deserializeComponent,
     serialize: (h, node) =>