[DOCS#2392] convert variablesPlugin to esmodule (#1789)

tigera · Nov 26, 2024 · 7a98e47 · 7a98e47
1 parent 337f0be
commit 7a98e47
Show file tree

Hide file tree

Showing 8 changed files with 1,425 additions and 822 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
diff --git a/package.json b/package.json
@@ -6,9 +6,9 @@
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "start-container": "docusaurus start -h 0.0.0.0",
-    "start-next": "docusaurus start --config scripts/docusaurus.config.with-vnext.js",
+    "start-next": "BUILD_NEXT=true docusaurus start",
     "build": "docusaurus build",
-    "build-next": "docusaurus build --config scripts/docusaurus.config.with-vnext.js",
+    "build-next": "BUILD_NEXT=true docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -28,9 +28,9 @@
     "@chakra-ui/icons": "1.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/react-types": "^2.0.6",
-    "@docusaurus/core": "^3.6.1",
-    "@docusaurus/faster": "^3.6.1",
-    "@docusaurus/preset-classic": "^3.6.1",
+    "@docusaurus/core": "^3.6.3",
+    "@docusaurus/faster": "^3.6.3",
+    "@docusaurus/preset-classic": "^3.6.3",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@jest/globals": "^29.4.1",
@@ -51,8 +51,8 @@
     "swagger-ui-react": "^4.14.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.6.1",
-    "@docusaurus/tsconfig": "^3.6.1",
+    "@docusaurus/module-type-aliases": "^3.6.3",
+    "@docusaurus/tsconfig": "^3.6.3",
     "@playwright/test": "1.47.2",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^29.5.0",

diff --git a/scripts/docusaurus.config.with-vnext.js b/scripts/docusaurus.config.with-vnext.js
diff --git a/src/remark/variablesPlugin.js b/src/remark/variablesPlugin.js
@@ -1,43 +1,46 @@
-const visit = require('unist-util-visit').visit;
-const getVariableByFilePath = require('../utils/getVariableByFilePath');
-const isVarValue = require('../utils/isVarValue');
+import { visit } from 'unist-util-visit';
+import getVariableByFilePath from '../utils/getVariableByFilePath';
+import isVarValue from '../utils/isVarValue';
 
 const varRegex = RegExp(/\$\[[ \t]*([\w.\/-]+)[ \t]*\]/, 'g');
 
-function replaceVariable(value, file) {
-  return value.replaceAll(varRegex, (match, varName) => {
-    const varValue = getVariableByFilePath(file, varName);
+async function replaceTokensWithVariables(value, file) {
+  const variables = {};
+  const matches = Array.from(value.matchAll(varRegex));
 
-    return isVarValue(varValue) ? varValue : match;
-  });
+  for (const [token, varName] of matches) {
+    variables[token] = await getVariableByFilePath(file, varName);
+  }
+
+  return value.replaceAll(varRegex, (match) => (isVarValue(variables[match]) ? variables[match] : match));
 }
 
 function isString(value) {
   return typeof value === 'string';
 }
 
-function replaceJsExpressionVariable(item, property, file) {
+async function replaceJsExpressionVariable(item, property, file) {
   if (item.expression[property]?.type === 'Literal') {
     if (isString(item.expression[property].raw)) {
-      item.expression[property].raw = replaceVariable(item.expression.consequent.raw, file);
+      item.expression[property].raw = await replaceTokensWithVariables(item.expression.consequent.raw, file);
     }
   } else if (item.expression[property]?.type === 'TemplateLiteral') {
-    item.expression[property].quasis.forEach((templateLiteral) => {
+    item.expression[property].quasis.forEach(async (templateLiteral) => {
       if (isString(templateLiteral.value.raw)) {
-        templateLiteral.value.raw = replaceVariable(templateLiteral.value.raw, file);
+        templateLiteral.value.raw = await replaceTokensWithVariables(templateLiteral.value.raw, file);
       }
     });
   }
 }
 
-function evaluateJsExpression(node, file) {
+async function evaluateJsExpression(node, file) {
   const body = node.data.estree.body;
 
   for (const item of body) {
     if (item.type === 'ExpressionStatement' && item.expression?.type === 'ConditionalExpression') {
       const condition = item.expression.test?.left?.raw;
       if (isString(condition)) {
-        item.expression.test.left.raw = replaceVariable(condition, file);
+        item.expression.test.left.raw = await replaceTokensWithVariables(condition, file);
       }
 
       replaceJsExpressionVariable(item, 'consequent', file);
@@ -47,26 +50,26 @@ function evaluateJsExpression(node, file) {
   }
 }
 
-function replaceJsxElementProps(node, file) {
+async function replaceJsxElementProps(node, file) {
   for (const attribute of node.attributes) {
     if (isString(attribute.value)) {
-      attribute.value = replaceVariable(attribute.value, file);
+      attribute.value = await replaceTokensWithVariables(attribute.value, file);
     }
   }
 }
 
 /**
  * This is a remark plugin which runs during the build. It visits all md/mdx files
  * and replaces a token with a variable from the variables.js. For example in
- * calico-cloud_versioned_docs, $(prodname) gets replaced with Calico Cloud,
+ * calico-cloud_versioned_docs, $[prodname] gets replaced with Calico Cloud,
  * from calico-cloud_versioned_docs/version-*.variables.js.
  */
-function variablesPlugin(_options) {
-  async function transformer(tree, file) {
+export default function variablesPlugin(_options) {
+  return function transformer(tree, file) {
     visit(
       tree,
       () => true,
-      (node) => {
+      async (node) => {
         if (node.type === 'mdxFlowExpression' && isString(node.value) && node.value.match(varRegex) !== null) {
           evaluateJsExpression(node, file);
           return;
@@ -86,13 +89,9 @@ function variablesPlugin(_options) {
             continue;
           }
 
-          node[prop] = replaceVariable(node[prop], file);
+          node[prop] = await replaceTokensWithVariables(node[prop], file);
         }
       }
     );
-  }
-
-  return transformer;
+  };
 }
-
-module.exports = variablesPlugin;
diff --git a/src/utils/getVariableByFilePath.js b/src/utils/getVariableByFilePath.js
@@ -1,11 +1,11 @@
-const path = require('path');
-const globalVariables = require(path.resolve('variables'));
-const convertToPosixFriendlyPath = require('./convertToPosixFriendlyPath');
-const objProp = require('./objProp');
-const isVarValue = require('./isVarValue');
+import path from 'path';
+import globalVariables from '../../variables';
+import convertToPosixFriendlyPath from './convertToPosixFriendlyPath';
+import objProp from './objProp';
+import isVarValue from './isVarValue';
 
-module.exports = function getVariableByFilePath(file, varName) {
-  const contextVariables = getContextVariables(file);
+async function getVariableByFilePath(file, varName) {
+  const contextVariables = await getContextVariables(file);
 
   let varValue = objProp(contextVariables, varName);
   if (isVarValue(varValue)) {
@@ -16,21 +16,25 @@ module.exports = function getVariableByFilePath(file, varName) {
   if (isVarValue(varValue)) {
     return varValue;
   }
-};
+}
 
 const rootDir = path.posix.resolve('src', '..');
 
-function getContextVariables(file) {
+async function getContextVariables(file) {
   const posixFriendlyPath = convertToPosixFriendlyPath(file.path);
-  const pathToVersionedDocsRoot = posixFriendlyPath.match(/calico(-(enterprise|cloud))?_versioned_docs\/version-.*?\//g);
+  const pathToVersionedDocsRoot = posixFriendlyPath.match(
+    /calico(-(enterprise|cloud))?_versioned_docs\/version-.*?\//g
+  );
 
   if (pathToVersionedDocsRoot) {
-    return require(path.resolve(`${pathToVersionedDocsRoot[0]}variables.js`));
+    return import(path.resolve(`${pathToVersionedDocsRoot[0]}variables.js`));
   } else if (posixFriendlyPath.includes(`${rootDir}/calico/`)) {
-    return require(path.resolve('calico/variables.js'));
+    return import(path.resolve(`${rootDir}/calico/variables.js`));
   } else if (posixFriendlyPath.includes(`${rootDir}/calico-cloud/`)) {
-    return require(path.resolve('calico-cloud/variables.js'));
+    return import(path.resolve(`${rootDir}/calico-cloud/variables.js`));
   } else if (posixFriendlyPath.includes(`${rootDir}/calico-enterprise/`)) {
-    return require(path.resolve('calico-enterprise/variables.js'));
+    return import(path.resolve(`${rootDir}/calico-enterprise/variables.js`));
   }
 }
+
+export default getVariableByFilePath;
diff --git a/src/utils/isVarValue.js b/src/utils/isVarValue.js
@@ -1,5 +1,5 @@
 const falsyValuesThatCouldBeVarValues = ['', 0];
 
-module.exports = function isVarValue(varValue) {
+export default function isVarValue(varValue) {
   return !!varValue || falsyValuesThatCouldBeVarValues.includes(varValue);
-};
+}
diff --git a/src/utils/objProp.js b/src/utils/objProp.js
@@ -4,13 +4,13 @@
  * @param {string} path - The path of the property to get.
  */
 function objProp(obj, path) {
-	return path.split('.').reduce((p, prop) => {
-		if (!p) {
-			return;
-		}
+  return path.split('.').reduce((p, prop) => {
+    if (!p) {
+      return;
+    }
 
-		return p[prop];
-	}, obj);
+    return p[prop];
+  }, obj);
 }
 
-module.exports = objProp;
+export default objProp;