[docs] generate code paths for webpack raw-loader efficiency

docs/docs-beta/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start -p 3050",
-    "build": "docusaurus build",
+    "start": "yarn generate-code-imports && docusaurus start -p 3050",
+    "build": "yarn generate-code-imports && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -16,7 +16,8 @@
     "vale": "vale ./docs --ext=.md,.mdx",
     "lint": "eslint . --ext=.tsx,.ts,.js,.md,.mdx --fix",
     "lint-and-vale": "yarn run lint && yarn run vale",
-    "sync-api-docs": "/bin/sh scripts/vercel-sync-api-docs.sh"
+    "sync-api-docs": "/bin/sh scripts/vercel-sync-api-docs.sh",
+    "generate-code-imports": "node scripts/generate-code-imports.js"
   },
   "dependencies": {
     "@docusaurus/core": "^3.7.0",

docs/docs-beta/scripts/generate-code-imports.js

@@ -0,0 +1,71 @@
+const fs = require('fs');
+const path = require('path');
+
+const DOCUMENTATION_DIRECTORY = 'docs';
+const VALID_DOCUMENT_EXTENSIONS = ['.md', '.mdx'];
+const CODE_EXAMPLE_PATH_REGEX = /<CodeExample\s+[^>]*path=["']([^"']+)["'][^>]*>/g;
+
+/**
+ * Returns a list of file paths for a given `dir`.
+ */
+function getAllDocuments(dir) {
+  let results = [];
+  const list = fs.readdirSync(dir);
+
+  list.forEach((file) => {
+    file = path.join(dir, file);
+    const stat = fs.statSync(file);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(getAllDocuments(file)); // Recurse into subdirectory
+    } else {
+      if (VALID_DOCUMENT_EXTENSIONS.indexOf(path.extname(file)) !== -1) {
+        results.push(file); // Add file to results
+      }
+    }
+  });
+
+  return results;
+}
+
+/**
+ * Extracts all `regex` group `1` matches found in a list of `files`.
+ */
+function getUniqueRegexMatches(files, regex) {
+  const matches = new Set();
+
+  files.forEach((file) => {
+    const content = fs.readFileSync(file, 'utf-8');
+    let foundMatches;
+    while ((foundMatches = regex.exec(content)) !== null) {
+      matches.add(foundMatches[1]); // Extract group 1
+    }
+  });
+
+  return Array.from(matches);
+}
+
+/**
+ * Helper function to create a `raw-loader` import from a `path`.
+ */
+function pathToImport(path) {
+  return `import('!!raw-loader!/../../examples/${path}')`;
+}
+
+const files = getAllDocuments('docs');
+
+const uniqueMatches = getUniqueRegexMatches(files, CODE_EXAMPLE_PATH_REGEX);
+
+const _module = `
+/// THIS FILE IS AUTOMATICALLY GENERATED BY \`yarn generate-code-imports\` DO NOT MODIFY ///
+    //
+export const CODE_EXAMPLE_PATH_MAPPINGS = \{
+  ${uniqueMatches.map((path) => `  '${path}': () => ${pathToImport(path)},`).join('\n')}
+\};
+
+/// THIS FILE IS AUTOMATICALLY GENERATED BY \`yarn generate-code-imports\` DO NOT MODIFY ///
+`;
+
+fs.writeFile('src/code-examples-content.js', _module, (err) => {
+  if (err) throw err;
+  console.log(`Succesfully generated mappings for ${uniqueMatches.length} references...`);
+});