@xyd-js/content 0.1.0-xyd.13 → 0.1.0-xyd.16

package/packages/md/plugins/mdToc.ts

@@ -1,13 +1,17 @@
-import {Root, Heading} from "mdast";
-import {MdxjsEsm} from "mdast-util-mdx";
-import {Plugin} from "unified"; // TODO: use Plugin type
-import {MdxJsxFlowElement, MdxJsxAttribute} from "mdast-util-mdx-jsx";
+import { Root, Heading } from "mdast";
+import { MdxjsEsm } from "mdast-util-mdx";
+import { Plugin } from "unified";
+import { MdxJsxFlowElement, MdxJsxAttribute } from "mdast-util-mdx-jsx";
+
+import { mdParameters } from './utils/mdParameters';
 
 export type TocEntry = {
     depth: number,
+    id: string,
     value: string,
     attributes: { [key: string]: string },
-    children: TocEntry[]
+    children: TocEntry[],
+    maxTocDepth?: number
 };
 
 export type CustomTag = {
@@ -18,15 +22,21 @@ export type CustomTag = {
 export interface RemarkMdxTocOptions {
     name?: string,
     customTags?: CustomTag[],
+    maxDepth?: number,
     minDepth?: number
 }
 
 // TODO: fix any
 export const remarkMdxToc = (options: RemarkMdxTocOptions): Plugin => () => async (ast: any) => {
-    const {visit} = await import("unist-util-visit");
-    const {toString} = await import("mdast-util-to-string");
-    const {valueToEstree} = await import('estree-util-value-to-estree')
-    const {name: isIdentifierName} = await import('estree-util-is-identifier-name');
+    if (!options?.minDepth) {
+        options.minDepth = 2
+    }
+
+    console.time('plugin:remarkMdxToc');
+    const { visit } = await import("unist-util-visit");
+    const { toString } = await import("mdast-util-to-string");
+    const { valueToEstree } = await import('estree-util-value-to-estree')
+    const { name: isIdentifierName } = await import('estree-util-is-identifier-name');
 
     const mdast = ast as Root;
     const name = options.name ?? "toc";
@@ -36,7 +46,9 @@ export const remarkMdxToc = (options: RemarkMdxTocOptions): Plugin => () => asyn
 
     const toc: TocEntry[] = [];
     const flatToc: TocEntry[] = [];
-    const createEntry = (node: Heading | MdxJsxFlowElement, depth: number): TocEntry => {
+    const nodesToRemove: number[] = [];
+
+    const createEntry = (node: Heading | MdxJsxFlowElement, depth: number, index: number): TocEntry | null => {
         let attributes = (node.data || {}) as TocEntry['attributes'];
         if (node.type === "mdxJsxFlowElement") {
             attributes = Object.fromEntries(
@@ -45,15 +57,54 @@ export const remarkMdxToc = (options: RemarkMdxTocOptions): Plugin => () => asyn
                     .map(attribute => [(attribute as MdxJsxAttribute).name, attribute.value])
             ) as TocEntry['attributes'];
         }
+
+        let value = toString(node, { includeImageAlt: false });
+        const { attributes: parsedAttributes, sanitizedText } = mdParameters(value);
+
+        // Merge parsed attributes with existing ones
+        attributes = { ...attributes, ...parsedAttributes };
+
+        // Handle toc attribute
+        if (attributes.toc === 'false') {
+            return null; // Skip this entry
+        }
+
+        // If toc attribute is present, update the node's content to remove the [toc] part
+        if (attributes.toc === 'true' && node.type === "heading") {
+            // Keep the heading but remove the [toc] text and hide it
+            (node as any).data = {
+                ...(node as any).data,
+                hProperties: {
+                    ...(node as any).data?.hProperties,
+                    hideHeading: true
+                }
+            };
+            node.children = node.children.map(child => {
+                if (child.type === "text") {
+                    return {
+                        ...child,
+                        value: ""
+                    };
+                }
+                return child;
+            });
+        }
+
+        // Use toc value if provided, otherwise use clean text
+        const tocValue = attributes.toc === 'true' ? sanitizedText : (attributes.toc || sanitizedText);
+
         return {
             depth,
-            value: toString(node, {includeImageAlt: false}),
+            id: (node.data as any)?.hProperties?.id,
+            value: tocValue,
             attributes,
-            children: []
-        }
+            children: [],
+            maxTocDepth: attributes.maxTocDepth ? parseInt(attributes.maxTocDepth) : undefined
+        };
     };
 
-    visit(mdast, ["heading", "mdxJsxFlowElement"], node => {
+    visit(mdast, ["heading", "mdxJsxFlowElement"], (node, index) => {
+        // @ts-ignore
         let depth = 0;
         if (node.type === "mdxJsxFlowElement") {
             let valid = false;
@@ -79,11 +130,45 @@ export const remarkMdxToc = (options: RemarkMdxTocOptions): Plugin => () => asyn
             return;
         }
 
-        if (depth && (options?.minDepth && options.minDepth > depth)) {
-            return
+        const entry = createEntry(node, depth, index as number);
+        if (!entry) return;
+
+        // If toc attribute is explicitly set to true or +toc is present, include it regardless of depth
+        if (entry.attributes.toc === 'true' || entry.attributes["+toc"] === 'true') {
+            flatToc.push(entry);
+            let parent: TocEntry[] = toc;
+            for (let i = flatToc.length - 1; i >= 0; --i) {
+                const current = flatToc[i];
+                if (current.depth < entry.depth) {
+                    parent = current.children;
+                    break;
+                }
+            }
+            parent.push(entry);
+            return;
+        }
+
+        // First check if this entry should be included based on parent's maxTocDepth
+        let parentMaxDepth = options.maxDepth;
+        for (let i = flatToc.length - 1; i >= 0; --i) {
+            const parent = flatToc[i];
+            if (parent.depth < entry.depth) {
+                if (parent.maxTocDepth !== undefined) {
+                    parentMaxDepth = parent.maxTocDepth;
+                }
+                break;
+            }
+        }
+
+        // Now check against the effective max depth (either global or parent's maxTocDepth)
+        if (depth && parentMaxDepth && depth > parentMaxDepth) {
+            return;
+        }
+
+        if (depth && (options?.minDepth && depth < options.minDepth)) {
+            return;
         }
 
-        const entry = createEntry(node, depth);
         flatToc.push(entry);
 
         let parent: TocEntry[] = toc;
@@ -97,6 +182,11 @@ export const remarkMdxToc = (options: RemarkMdxTocOptions): Plugin => () => asyn
         parent.push(entry);
     });
 
+    // Remove nodes marked for removal
+    nodesToRemove.sort((a, b) => b - a).forEach(index => {
+        mdast.children.splice(index, 1);
+    });
+
     const tocExport: MdxjsEsm = {
         type: "mdxjsEsm",
         value: "",
@@ -130,4 +220,5 @@ export const remarkMdxToc = (options: RemarkMdxTocOptions): Plugin => () => asyn
         }
     };
     mdast.children.unshift(tocExport);
+    console.timeEnd('plugin:remarkMdxToc');
 };

package/packages/md/plugins/meta/index.ts

@@ -0,0 +1 @@
+export { mdMeta } from "./mdMeta";

package/packages/md/plugins/meta/mdMeta.ts

@@ -0,0 +1,189 @@
+import { Root } from 'mdast';
+import { matter } from 'vfile-matter';
+
+
+import { Metadata, Settings, Theme } from '@xyd-js/core';
+import { getMetaComponent } from '@xyd-js/context';
+import { Reference, TypeDocReferenceContext } from '@xyd-js/uniform';
+import { uniformToMiniUniform } from '@xyd-js/sources/ts';
+
+import { FunctionName } from '../functions/types';
+import { parseFunctionCall, parseImportPath } from '../functions/utils';
+import { processUniformFunctionCall } from '../functions/uniformProcessor';
+import { componentLike } from '../utils';
+import { SymbolxVfile } from '../types';
+
+export interface MdMetaOptions {
+  resolveFrom?: string
+}
+
+// TODO: IT SHOULD BE PART OF COMPOSER
+
+export function mdMeta(settings?: Settings, options?: MdMetaOptions) {
+  return function() {
+    return async (tree: Root, file: SymbolxVfile<any>) => {
+      console.time('plugin:mdMeta:total');
+      console.time('plugin:mdMeta:frontmatter');
+      // Parse frontmatter and expose it at file.data.matter
+      matter(file as any);
+      console.timeEnd('plugin:mdMeta:frontmatter');
+
+      if (!file.data.matter) {
+        console.timeEnd('plugin:mdMeta:total');
+        return
+      }
+
+      console.time('plugin:mdMeta:metaProcessing');
+      const meta = file.data.matter as Metadata<Record<string, any>>
+      if (!meta) {
+        console.timeEnd('plugin:mdMeta:metaProcessing');
+        console.timeEnd('plugin:mdMeta:total');
+        return
+      }
+
+      if (meta?.uniform || meta?.openapi || meta?.graphql) {
+        if (meta.graphql) {
+          meta.uniform = meta.graphql
+        } else if (meta.openapi) {
+          meta.uniform = meta.openapi
+        }
+        meta.component = "atlas"
+
+        if (typeof meta.uniform === "string") {
+          meta.componentProps = {
+            references: `@uniform('${meta.uniform}')`
+          }
+        } else if (typeof meta.uniform === "object") {
+          const uniformArgs = {}
+          
+          if (meta.uniform.eager) {
+            // TODO: support eager line ranges?
+            const { filePath, regions } = parseImportPath(meta.uniform.path)
+
+            if (regions.length > 1) {
+              console.warn("Eager uniform with multiple regions is not supported")
+            }
+            
+            if (regions.length) {
+              uniformArgs["eager"] = regions[0].name
+            }
+            
+            meta.uniform.path = filePath
+          }
+
+          meta.componentProps = {
+            references: `@uniform('${meta.uniform.path}', ${JSON.stringify(uniformArgs)})`
+          }
+        }
+      }
+
+      if (!meta || !meta.component) {
+        console.timeEnd('plugin:mdMeta:metaProcessing');
+        console.timeEnd('plugin:mdMeta:total');
+        return
+      }
+
+      const metaComponent = getMetaComponent(meta.component)
+
+      if (!metaComponent) {
+        console.timeEnd('plugin:mdMeta:metaProcessing');
+        console.timeEnd('plugin:mdMeta:total');
+        return
+      }
+      console.timeEnd('plugin:mdMeta:metaProcessing');
+
+      console.time('plugin:mdMeta:propsProcessing');
+      const promises: Promise<void>[] = []
+
+      let resolvedProps: Record<string, any> = {}
+      if (meta.componentProps && typeof meta.componentProps === "object") {
+        for (const key in meta.componentProps) { // TODO: support nested props
+          const value = meta.componentProps[key]
+
+          const result = parseFunctionCall({
+            children: [
+              {
+                type: "text",
+                value: value
+              }
+            ]
+          }, FunctionName.Uniform);
+
+          if (!result) {
+            resolvedProps[key] = value
+            continue
+          }
+
+          const importPath = result[0]
+          const importArgs = result[1];
+
+          if (!importPath) {
+            continue
+          }
+
+          const promise = (async () => {
+            let references = await processUniformFunctionCall(
+              importPath,
+              file,
+              options?.resolveFrom,
+              settings,
+            );
+
+
+            if (importArgs?.eager && references) { // TODO: move to `processUniformFunctionCall`
+              // TODO: rename uniformToMiniUniform eager
+              // TODO: support multile regions
+              references = uniformToMiniUniform(importArgs.eager, references as Reference<TypeDocReferenceContext>[]);
+            }
+
+            resolvedProps[key] = references
+          })()
+
+          promises.push(promise)
+        }
+      }
+
+      await Promise.all(promises)
+      console.timeEnd('plugin:mdMeta:propsProcessing');
+
+      console.time('plugin:mdMeta:transform');
+      const resolvedComponentProps = await metaComponent.transform(
+        (settings?.theme || {}) as Theme,
+        resolvedProps,
+        file.data.outputVars,
+        Object.freeze(tree.children) as any
+      )
+      console.timeEnd('plugin:mdMeta:transform');
+
+      console.time('plugin:mdMeta:componentCreation');
+      const exportNode = componentLike(
+        metaComponent.componentName,
+        resolvedComponentProps,
+        []
+      )
+
+      tree.children = [
+        ...treeSanitize(tree),
+        ...exportNode.children
+      ]
+      console.timeEnd('plugin:mdMeta:componentCreation');
+      console.timeEnd('plugin:mdMeta:total');
+    }
+  }
+}
+
+// TODO: add more / BETTER SOLUTION FOR CLEARIN
+const allowedNodes = [
+  "mdxjsEsm",
+  // "outputVars", // TODO: !!! cuz some issues with outputvars + containerDirective !!!
+]
+
+function treeSanitize(tree: Root) {
+  return tree.children.filter((child) => {
+    if (allowedNodes.includes(child.type)) {
+      return true
+    }
+
+    return false
+  })
+}

package/packages/md/plugins/output-variables/__fixtures__/1.simple/input.md

@@ -0,0 +1,22 @@
+# Heading 1
+
+
+<<<example
+  ```bash npm
+  npm i -g xyd-js
+  ```
+
+  ```bash yarn
+  yarn global add xyd-js
+  ```
+
+  ```bash pnpm
+  pnpm add -g xyd-js
+  ```
+<<<
+
+## Heading 2
+
+Lorem ipsum
+
+

package/packages/md/plugins/output-variables/__fixtures__/1.simple/output.json

@@ -0,0 +1,191 @@
+{
+    "type": "root",
+    "children": [
+        {
+            "type": "heading",
+            "depth": 1,
+            "children": [
+                {
+                    "type": "text",
+                    "value": "Heading 1",
+                    "position": {
+                        "start": {
+                            "line": 1,
+                            "column": 3,
+                            "offset": 2
+                        },
+                        "end": {
+                            "line": 1,
+                            "column": 12,
+                            "offset": 11
+                        }
+                    }
+                }
+            ],
+            "position": {
+                "start": {
+                    "line": 1,
+                    "column": 1,
+                    "offset": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 12,
+                    "offset": 11
+                }
+            }
+        },
+        {
+            "type": "outputVars",
+            "name": "example",
+            "attributes": {},
+            "children": [
+                {
+                    "type": "code",
+                    "lang": "bash",
+                    "meta": "npm",
+                    "value": "npm i -g xyd-js",
+                    "position": {
+                        "start": {
+                            "line": 5,
+                            "column": 3,
+                            "offset": 27
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 6,
+                            "offset": 62
+                        }
+                    }
+                },
+                {
+                    "type": "code",
+                    "lang": "bash",
+                    "meta": "yarn",
+                    "value": "yarn global add xyd-js",
+                    "position": {
+                        "start": {
+                            "line": 9,
+                            "column": 3,
+                            "offset": 66
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 6,
+                            "offset": 109
+                        }
+                    }
+                },
+                {
+                    "type": "code",
+                    "lang": "bash",
+                    "meta": "pnpm",
+                    "value": "pnpm add -g xyd-js",
+                    "position": {
+                        "start": {
+                            "line": 13,
+                            "column": 3,
+                            "offset": 113
+                        },
+                        "end": {
+                            "line": 15,
+                            "column": 6,
+                            "offset": 152
+                        }
+                    }
+                }
+            ],
+            "position": {
+                "start": {
+                    "line": 4,
+                    "column": 1,
+                    "offset": 14
+                },
+                "end": {
+                    "line": 16,
+                    "column": 4,
+                    "offset": 156
+                }
+            }
+        },
+        {
+            "type": "heading",
+            "depth": 2,
+            "children": [
+                {
+                    "type": "text",
+                    "value": "Heading 2",
+                    "position": {
+                        "start": {
+                            "line": 18,
+                            "column": 4,
+                            "offset": 161
+                        },
+                        "end": {
+                            "line": 18,
+                            "column": 13,
+                            "offset": 170
+                        }
+                    }
+                }
+            ],
+            "position": {
+                "start": {
+                    "line": 18,
+                    "column": 1,
+                    "offset": 158
+                },
+                "end": {
+                    "line": 18,
+                    "column": 13,
+                    "offset": 170
+                }
+            }
+        },
+        {
+            "type": "paragraph",
+            "children": [
+                {
+                    "type": "text",
+                    "value": "Lorem ipsum",
+                    "position": {
+                        "start": {
+                            "line": 20,
+                            "column": 1,
+                            "offset": 172
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 12,
+                            "offset": 183
+                        }
+                    }
+                }
+            ],
+            "position": {
+                "start": {
+                    "line": 20,
+                    "column": 1,
+                    "offset": 172
+                },
+                "end": {
+                    "line": 20,
+                    "column": 12,
+                    "offset": 183
+                }
+            }
+        }
+    ],
+    "position": {
+        "start": {
+            "line": 1,
+            "column": 1,
+            "offset": 0
+        },
+        "end": {
+            "line": 23,
+            "column": 1,
+            "offset": 186
+        }
+    }
+}

package/packages/md/plugins/output-variables/__fixtures__/2.multiple-vars/input.md

@@ -0,0 +1,21 @@
+<<<example
+  ```bash npm
+  npm i -g xyd-js
+  ```
+
+  ```bash yarn
+  yarn global add xyd-js
+  ```
+
+  ```bash pnpm
+  pnpm add -g xyd-js
+  ```
+<<<
+
+<<<example2
+  ```tsx
+  function() {
+    return <div> Hello World </div>
+  }
+  ```
+<<<