WIP: try to replicate serialization of CodeBlock for DoNotTranslate b…

…lock
newrelic · Dec 3, 2021 · f3b8a4d · f3b8a4d
1 parent d5f3183
commit f3b8a4d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 44 deletions.
diff --git a/scripts/actions/__tests__/deserialize-html.test.js b/scripts/actions/__tests__/deserialize-html.test.js
@@ -4,9 +4,11 @@ import fs from 'fs';
 
 test.only('deserializes DoNotTranslate', async () => {
   const input = `
-  <DoNotTranslate className="notranslate">
-    Not all who wander are lost...
-  </DoNotTranslate>
+  <CodeBlock>
+    <div>
+      Not all who wander are lost...
+    </div>
+  </CodeBlock>
 `;
 
   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,7 +4,9 @@ import fs from 'fs';
 test.only('test DoNotTranslate', async () => {
   const html = await serializeMDX(`
     <DoNotTranslate>
-      Not all who wander are lost...
+      <div>
+        Not all who wander are lost...
+      </div>
     </DoNotTranslate>
   `);
 

diff --git a/scripts/actions/utils/handlers.js b/scripts/actions/utils/handlers.js
@@ -1,7 +1,6 @@
 const {
   serializeComponent,
   serializeJSValue,
-  serializeProps,
 } = require('./serialization-helpers');
 const {
   deserializeComponent,
@@ -16,7 +15,8 @@ const { omit } = require('lodash');
 
 module.exports = {
   CodeBlock: {
-    serialize: (h, node) =>
+    serialize: (h, node) => {
+      console.log('start:', node);
       h(
         node,
         'pre',
@@ -26,9 +26,16 @@ module.exports = {
           'data-props': serializeJSValue(omit(node, ['type'])),
         },
         [h(node, 'code')]
-      ),
-    deserialize: (h, node) =>
-      h(node, 'code', deserializeJSValue(node.properties.dataProps)),
+      );
+    },
+    deserialize: (h, node) => {
+      const results = h(
+        node,
+        'code',
+        deserializeJSValue(node.properties.dataProps)
+      );
+      console.log('end:', results);
+    },
   },
   import: {
     deserialize: (h, node) => {
@@ -188,34 +195,31 @@ module.exports = {
       serializeComponent(h, node, { textAttributes: ['title'] }),
   },
   DoNotTranslate: {
-    deserialize: (h, node) => deserializeComponent(h, node),
-    // deserialize: (h, node) => {
-    //   const { dataProps, dataComponent } = node.properties;
-    //   const children = deserializeJSValue(dataProps); // reusing code
-
-    //   const newNode = h(
-    //     node,
-    //     'mdxBlockElement',
-    //     { name: dataComponent, attributes: [] },
-    //     children
-    //   );
-    //   console.log('deserialized node', newNode);
-
-    //   return newNode;
-    // },
     serialize: (h, node) => {
-      serializeComponent(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;
     },
-    // serialize: (h, node) => {
-    //   console.log('preserialized node', node);
-    //   const result = h(node, 'div', {
-    //     'data-type': 'component',
-    //     'data-component': 'DoNotTranslate',
-    //     'data-props': serializeProps(node),
-    //   });
-    //   console.log('serialized node', result);
-    //   return result;
-    // },
   },
   thead: {
     deserialize: deserializeComponent,

diff --git a/scripts/actions/utils/serialization-helpers.js b/scripts/actions/utils/serialization-helpers.js
@@ -38,8 +38,6 @@ const serializeAttributeValue = (h, attribute) => {
 const serializeTextProp = (h, node, propName) => {
   const attribute = findAttribute(propName, node);
 
-  console.log('serailizeTextProp: ', attribute);
-
   if (!attribute) {
     return;
   }
@@ -51,20 +49,15 @@ const serializeTextProp = (h, node, propName) => {
     [serializeAttributeValue(h, attribute)]
   );
 
-  console.log('serailizeTextProp Result:', result);
-
   return result;
 };
 
 const serializeJSValue = (value) => {
-  console.log('seralizeJSValue', value);
   return Buffer.from(JSON.stringify(value)).toString('base64');
 };
 
 const serializeProps = (node) => {
-  console.log('serializeProps');
   if (node.attributes.length === 0) {
-    console.log('serializeProps - no attributes');
     return null;
   }
 
@@ -112,12 +105,10 @@ const serializeComponent = (
       .filter(Boolean)
   );
 
-  console.log('serializeComponent result:', result);
   return result;
 };
 
 const getComponentName = (node) => {
-  console.log('getComponent:', node);
   return node.name === null ? 'React.Fragment' : node.name;
 };