fix: new line issue in DoNotTranslate tags

package.json

@@ -99,6 +99,7 @@
     "eslint-plugin-react-hooks": "^4.1.0",
     "form-data": "^3.0.0",
     "gatsby-plugin-typegen": "^2.2.4",
+    "hast-util-to-mdast9": "npm:[email protected]",
     "hast-util-to-string": "^1.0.4",
     "hastscript": "^6.0.0",
     "he": "^1.2.0",
@@ -123,8 +124,11 @@
     "pg": "^8.11.3",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "2.0.5",
+    "rehype-parse9": "npm:[email protected]",
+    "rehype-remark10": "npm:[email protected]",
     "rehype-stringify": "^8.0.0",
     "remark-frontmatter": "^2.0.0",
+    "remark-frontmatter5": "npm:[email protected]",
     "remark-mdx": "2.0.0-next.8",
     "remark-mdx-remove-exports": "^1.6.22",
     "remark-mdx-remove-imports": "^1.6.22",
@@ -133,6 +137,7 @@
     "remark-parse": "8.0.3",
     "remark-parse10": "npm:remark-parse@^10.0.1",
     "remark-stringify": "^8.1.1",
+    "remark-stringify10": "npm:[email protected]",
     "selenium-webdriver": "^4.12.0",
     "simple-git": "^3.16.0",
     "source-map-loader": "^3.0.1",
@@ -144,6 +149,7 @@
     "typescript": "^4.5.5",
     "unified": "^9.2.0",
     "unified10": "npm:unified@^10.1.2",
+    "unified11": "npm:unified@^11.0.4",
     "unist-builder": "^2.0.3",
     "unist-util-is": "^4.0.2",
     "unist-util-select": "^3.0.1",
@@ -182,7 +188,7 @@
     "db:clean": "./scripts/actions/translation_workflow/testing/cleanup.sh",
     "db:start": "docker-compose --file scripts/actions/translation_workflow/testing/docker-compose.yml up --build",
     "debug": "yarn develop --inspect-brk",
-    "deserialize": "./scripts/serde.js deserialize",
+    "deserialize": "./scripts/serde.mjs deserialize",
     "develop": "gatsby develop",
     "docs-freshness": "./scripts/docsAndLastDateEdited.mjs",
     "extract-i18n": "i18next",
@@ -201,7 +207,7 @@
     "prepare": "husky install",
     "reboot": "rm -rf node_modules && yarn && yarn clean && yarn start",
     "remove-unused-images": " node scripts/removeUnusedImages.js",
-    "serialize": "./scripts/serde.js serialize",
+    "serialize": "./scripts/serde.mjs serialize",
     "serve": "gatsby serve",
     "start:full": "NODE_OPTIONS='--max-old-space-size=5120' yarn develop",
     "start": "NODE_OPTIONS='--max-old-space-size=5120' BUILD_LANG=en yarn develop",

scripts/actions/__tests__/deserialize-html.test.js

@@ -1,4 +1,4 @@
-import deserializeHTML from '../deserialize-html';
+import deserializeHTML from '../deserialize-html.mjs';
 import serializeMDX from '../serialize-mdx';
 import fs from 'fs';
 

scripts/actions/__tests__/serialize-mdx.test.js

@@ -1,6 +1,6 @@
 import serializeMDX from '../serialize-mdx';
 import fs from 'fs';
-import deserializeHTML from '../deserialize-html';
+import deserializeHTML from '../deserialize-html.mjs';
 
 test('serializes DoNotTranslate wrapping a Collapser', async () => {
   const html = await serializeMDX(`

scripts/actions/deserialize-html.js → scripts/actions/deserialize-html.mjs

@@ -1,17 +1,16 @@
-const unified = require('unified');
-const parse = require('rehype-parse');
-const rehype2remark = require('rehype-remark');
-const stringify = require('remark-stringify');
-const frontmatter = require('remark-frontmatter');
-const remarkMdx = require('remark-mdx');
-const remarkMdxjs = require('remark-mdxjs');
-const handlers = require('./utils/handlers');
-const defaultHandlers = require('hast-util-to-mdast/lib/handlers');
-const heading = require('hast-util-to-mdast/lib/handlers/heading');
-const u = require('unist-builder');
-const { last } = require('lodash');
-const yaml = require('js-yaml');
-const { configuration } = require('./configuration');
+import { unified } from 'unified11';
+import parse from 'rehype-parse9';
+import rehype2remark from 'rehype-remark10';
+import stringify from 'remark-stringify10';
+import frontmatter from 'remark-frontmatter5';
+import remarkMdx from 'remark-mdx2.3';
+import remarkMdxjs from 'remark-mdxjs';
+import handlers from './utils/handlers.js';
+import { defaultHandlers } from 'hast-util-to-mdast9';
+import u from 'unist-builder';
+import last from 'lodash/last.js';
+import yaml from 'js-yaml';
+import { configuration } from './configuration.js';
 
 const component = (h, node) => {
   if (!node.properties || !node.properties.dataType) {
@@ -38,8 +37,8 @@ const component = (h, node) => {
   return handler.deserialize(h, node);
 };
 
-const headingWithCustomId = (h, node) => {
-  const result = heading(h, node);
+const headingWithCustomId = (state, node) => {
+  const result = defaultHandlers.h1(state, node);
   const { id } = node.properties || {};
 
   if (!id) {
@@ -117,14 +116,14 @@ const processor = unified()
     listItemIndent: '1',
   })
   .use(remarkMdx)
-  .use(remarkMdxjs)
-  .use(frontmatter, ['yaml'])
-  .use(stripTranslateFrontmatter);
+  // .use(remarkMdxjs)
+  .use(frontmatter, ['yaml']);
+// .use(stripTranslateFrontmatter);
 
 const deserializeHTML = async (html) => {
-  const { contents } = await processor.process(html);
+  const vfile = await processor.process(html);
 
-  return contents.trim();
+  return vfile.toString().trim();
 };
 
-module.exports = deserializeHTML;
+export default deserializeHTML;

scripts/actions/fetch-and-deserialize.js

@@ -6,7 +6,7 @@ const { writeSync } = require('to-vfile');
 const path = require('path');
 const fetch = require('node-fetch');
 
-const deserializedHtml = require('./deserialize-html');
+const deserializedHtml = require('./deserialize-html.mjs');
 const createDirectories = require('./utils/create-directories');
 const { getAccessToken } = require('./utils/vendor-request');
 const { LOCALE_IDS } = require('./utils/constants');

scripts/actions/utils/deserialization-helpers.js

@@ -47,15 +47,15 @@ const deserializeAttributeValue = (h, node) => {
 };
 
 const deserializeComponent = (
-  h,
+  state,
   node,
   { type, hasChildrenProp = true } = {}
 ) => {
   const { dataComponent, dataProps } = node.properties;
   const name = dataComponent || node.tagName;
   const props = dataProps ? deserializeJSValue(dataProps) : [];
   const inferredType =
-    node.tagName === 'span' ? 'mdxSpanElement' : 'mdxBlockElement';
+    node.tagName === 'span' ? 'mdxJsxTextElement' : 'mdxJsxFlowElement';
 
   const hasWrappedChildren = hasChildren(node)
     ? node.children.some(
@@ -87,15 +87,12 @@ const deserializeComponent = (
         ];
   }, props);
 
-  const newNode = h(
-    node,
-    type || inferredType,
-    {
-      name: name === 'React.Fragment' ? null : name,
-      attributes,
-    },
-    childrenNode && hasChildrenProp ? all(h, childrenNode) : []
-  );
+  const newNode = {
+    type: type || inferredType,
+    name: name === 'React.Fragment' ? null : name,
+    attributes,
+    children: childrenNode && hasChildrenProp ? state.all(childrenNode) : [],
+  };
 
   return newNode;
 };

scripts/actions/utils/handlers.js

@@ -20,8 +20,10 @@ module.exports = {
         'data-component': 'CodeBlock',
         'data-props': serializeJSValue(omit(node, ['type'])),
       }),
-    deserialize: (h, node) =>
-      h(node, 'code', deserializeJSValue(node.properties.dataProps)),
+    deserialize: (state, node) => ({
+      type: 'code',
+      children: state.all(deserializeJSValue(node.properties.dataProps)),
+    }),
   },
   import: {
     deserialize: (h, node) => {
@@ -36,21 +38,20 @@ module.exports = {
       }),
   },
   frontmatter: {
-    deserialize: (h, node) => {
+    deserialize: (state, node) => {
       const data = deserializeJSValue(node.properties.dataValue);
       const frontMatterAtt = node.children.reduce((acc, child) => {
         const key = child.properties.dataKey;
         const value = child.children[0].value;
         return { ...acc, [key]: value };
       }, {});
 
-      return h(
-        node,
-        'yaml',
-        yaml
+      return {
+        type: 'yaml',
+        value: yaml
           .safeDump({ ...data, ...frontMatterAtt }, { lineWidth: Infinity })
-          .trim()
-      );
+          .trim(),
+      };
     },
     serialize: (h, node) => {
       const data = yaml.safeLoad(node.value);

scripts/serde.js → scripts/serde.mjs

@@ -1,10 +1,10 @@
 #! /usr/bin/env node
 
-const fs = require('fs/promises');
-const { program } = require('commander');
+import fs from 'fs/promises';
+import { program } from 'commander';
 
-const serializeMDX = require('./actions/serialize-mdx');
-const deserializeHTML = require('./actions/deserialize-html');
+import serializeMDX from './actions/serialize-mdx.js';
+import deserializeHTML from './actions/deserialize-html.mjs';
 
 const cantOpenPath = (path) => () => {
   console.error(`😵 unable to open path ${path}`);