feat(generator): add jsx generator

Author: avivkeller

.gitignore

@@ -4,3 +4,4 @@ npm-debug.log
 
 # Default Output Directory
 out
+dist

.prettierignore

@@ -1,3 +1,5 @@
 # Tests files
 src/generators/api-links/test/fixtures/
 *.snapshot
+
+dist

declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

eslint.config.mjs

@@ -4,6 +4,7 @@ import jsdoc from 'eslint-plugin-jsdoc';
 import globals from 'globals';
 
 export default [
+  { ignores: ['dist', 'out'] },
   // @see https://eslint.org/docs/latest/use/configure/configuration-files#specifying-files-and-ignores
   {
     files: ['src/**/*.mjs', 'bin/**/*.mjs'],

package-lock.json

@@ -47,6 +47,10 @@
     "hast-util-to-string": "^3.0.1",
     "hastscript": "^9.0.1",
     "html-minifier-terser": "^7.2.0",
+    "recma-build-jsx": "^1.0.0",
+    "recma-jsx": "^1.0.0",
+    "recma-stringify": "^1.0.0",
+    "rehype-recma": "^1.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",

package.json

@@ -11,6 +11,7 @@ import apiLinks from './api-links/index.mjs';
 import oramaDb from './orama-db/index.mjs';
 import astJs from './ast-js/index.mjs';
 import llmsTxt from './llms-txt/index.mjs';
+import jsx from './jsx/index.mjs';
 
 export const publicGenerators = {
   'json-simple': jsonSimple,
@@ -23,6 +24,7 @@ export const publicGenerators = {
   'api-links': apiLinks,
   'orama-db': oramaDb,
   'llms-txt': llmsTxt,
+  jsx,
 };
 
 export const allGenerators = {

src/generators/index.mjs

@@ -0,0 +1,6 @@
+export const STABILITY_LEVELS = [
+  'danger', // Deprecated
+  'warning', // Experimental
+  'success', // Stable
+  'info', // Legacy
+];

src/generators/jsx/constants.mjs

@@ -0,0 +1,36 @@
+import { groupNodesByModule } from '../../utils/generators.mjs';
+import buildContent from './utils/buildContent.mjs';
+import { getRemarkRecma } from '../../utils/remark.mjs';
+
+/**
+ * This generator generates an JSX AST from an input MDAST
+ *
+ * @typedef {Array<ApiDocMetadataEntry>} Input
+ *
+ * @type {GeneratorMetadata<Input, string>}
+ */
+export default {
+  name: 'jsx',
+  version: '1.0.0',
+  description: 'Generates JSX from the input AST',
+  dependsOn: 'ast',
+
+  /**
+   * Generates a JSX AST
+   *
+   * @param {Input} entries
+   * @returns {Promise<string[]>} Array of generated content
+   */
+  async generate(entries) {
+    const remarkRecma = getRemarkRecma();
+
+    const results = await Promise.all(
+      Array.from(groupNodesByModule(entries).values()).map(entry =>
+        buildContent(entry, remarkRecma)
+      )
+    );
+
+    console.log(results);
+    return results;
+  },
+};

src/generators/jsx/index.mjs

@@ -0,0 +1,34 @@
+'use strict';
+
+import { u as createTree } from 'unist-builder';
+
+/**
+ * Creates an MDX JSX element.
+ *
+ * @param {string} name - The name of the JSX element
+ * @param {{
+ * inline?: boolean,
+ * children?: string | import('unist').Node[],
+ * [key: string]: string
+ * }} [options={}] - Options including type, children, and JSX attributes
+ * @returns {import('unist').Node} The created MDX JSX element node
+ */
+export const createJSXElement = (
+  name,
+  { inline = true, children = [], ...attributes } = {}
+) => {
+  const processedChildren =
+    typeof children === 'string'
+      ? [createTree('text', { value: children })]
+      : (children ?? []);
+
+  const attrs = Object.entries(attributes).map(([key, value]) =>
+    createTree('mdxJsxAttribute', { name: key, value: String(value) })
+  );
+
+  return createTree(inline ? 'mdxJsxTextElement' : 'mdxJsxFlowElement', {
+    name,
+    attributes: attrs,
+    children: processedChildren,
+  });
+};