slack code review

Author: avivkeller

package-lock.json

@@ -70,6 +70,7 @@
     "preact-render-to-string": "^6.5.13",
     "reading-time": "^1.5.0",
     "recma-jsx": "^1.0.0",
+    "rehype-raw": "^7.0.0",
     "rehype-recma": "^1.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.1",

package.json

@@ -30,13 +30,6 @@ export const TAG_TRANSFORMS = {
   blockquote: JSX_IMPORTS.Blockquote.name,
 };
 
-/**
- * @see transformer.mjs's TODO comment
- */
-export const TYPE_TRANSFORMS = {
-  raw: 'text',
-};
-
 /**
  * API lifecycle change labels
  */

src/generators/jsx-ast/constants.mjs

@@ -1,4 +1,3 @@
-import { buildSideBarDocPages } from './utils/buildBarProps.mjs';
 import buildContent from './utils/buildContent.mjs';
 import {
   getCompatibleVersions,
@@ -38,7 +37,10 @@ export default {
       .sort((a, b) => a.heading.data.name.localeCompare(b.heading.data.name));
 
     // Generate table of contents
-    const docPages = buildSideBarDocPages(groupedModules, headNodes);
+    const docPages = headNodes.map(node => [
+      node.heading.data.name,
+      `${node.api}.html`,
+    ]);
 
     // Process each head node and build content
     const results = await Promise.all(
@@ -58,6 +60,7 @@ export default {
             };
           }),
           currentVersion: `v${version.version}`,
+          pathname: `${entry.api}.html`,
           docPages,
         };
 

src/generators/jsx-ast/index.mjs

@@ -2,21 +2,9 @@ import assert from 'node:assert/strict';
 import { describe, it } from 'node:test';
 
 import { SAMPLE } from './utils.mjs';
-import { buildSideBarDocPages, buildMetaBarProps } from '../buildBarProps.mjs';
+import { buildMetaBarProps } from '../buildBarProps.mjs';
 
 describe('buildBarProps utilities', () => {
-  describe('buildSideBarDocPages', () => {
-    it('should return expected format', () => {
-      const grouped = new Map([['sample-api', [SAMPLE]]]);
-      const result = buildSideBarDocPages(grouped, [SAMPLE]);
-
-      assert.equal(result.length, 1);
-      assert.equal(result[0].title, 'SampleFunc');
-      assert.equal(result[0].doc, 'sample-api.html');
-      assert.deepEqual(result[0].headings, [['SampleFunc', 'sample-func']]);
-    });
-  });
-
   describe('buildMetaBarProps', () => {
     it('should include expected fields', () => {
       const result = buildMetaBarProps(SAMPLE, [SAMPLE]);

src/generators/jsx-ast/utils/__tests__/buildBarProps.test.mjs

@@ -3,25 +3,6 @@ import { visit } from 'unist-util-visit';
 
 import { DOC_API_BLOB_EDIT_BASE_URL } from '../../../constants.mjs';
 
-/**
- * Builds sidebar navigation for API documentation pages
- *
- * @param {Map<string, Array<ApiDocMetadataEntry>>} groupedModules - Modules grouped by API
- * @param {Array<ApiDocMetadataEntry>} headNodes - Main entry nodes for each API
- */
-export const buildSideBarDocPages = (groupedModules, headNodes) =>
-  headNodes.map(node => {
-    const moduleEntries = groupedModules.get(node.api);
-
-    return {
-      title: node.heading.data.name,
-      doc: `${node.api}.html`,
-      headings: moduleEntries
-        .filter(entry => entry.heading?.data?.name && entry.heading.depth === 2)
-        .map(entry => [entry.heading.data.name, entry.heading.data.slug]),
-    };
-  });
-
 /**
  * Builds metadata for the sidebar and meta bar
  *
@@ -38,10 +19,14 @@ export const buildMetaBarProps = (head, entries) => {
   }, '');
 
   const headings = entries
-    .filter(entry => entry.heading?.data?.name)
+    .filter(
+      entry => entry.heading?.data?.text && entry.heading?.data?.depth < 3
+    )
     .map(entry => ({
       depth: entry.heading.depth,
-      value: entry.heading.data.name,
+      // TODO(@avivkeller): This should strip the `Type:` prefix,
+      // and maybe also be HTML?
+      value: entry.heading.data.text.replace(/`/g, ''),
       slug: entry.heading.data.slug,
     }));
 

src/generators/jsx-ast/utils/buildBarProps.mjs

@@ -1,19 +1,14 @@
 import { visit } from 'unist-util-visit';
 
-import { TYPE_TRANSFORMS, TAG_TRANSFORMS } from '../constants.mjs';
+import { TAG_TRANSFORMS } from '../constants.mjs';
 
 /**
  * @template {import('unist').Node} T
  * @param {T} tree
  * @returns {T}
  */
 const transformer = tree => {
-  visit(tree, ['raw', 'element'], node => {
-    // TODO(@avivkeller): Our parsers shouldn't return raw nodes
-    // when they mistake "<Type>" for an HTML node, rather, they
-    // should return the string type that it is.
-    node.type =
-      node.type in TYPE_TRANSFORMS ? TYPE_TRANSFORMS[node.type] : node.type;
+  visit(tree, 'element', node => {
     node.tagName =
       node.tagName in TAG_TRANSFORMS
         ? TAG_TRANSFORMS[node.tagName]

src/generators/jsx-ast/utils/transformer.mjs

@@ -50,7 +50,7 @@ export default ({ className, ...props }) => {
       onCopy={handleCopy}
       language={getLanguageDisplayName(language)}
       {...props}
-      copyText={copyText}
+      buttonText={copyText}
     />
   );
 };