@xyd-js/content 0.1.0-xyd.8 → 0.1.0-xyd.97

package/packages/vite/index.ts

@@ -1,14 +1,20 @@
 import type {Plugin} from 'rollup';
 import mdx from '@mdx-js/rollup';
 
-import {RemarkMdxTocOptions, mdOptions} from "../md";
+import {Settings} from "@xyd-js/core";
+
+import {RemarkMdxTocOptions, markdownPlugins} from "../md";
 
 export interface VitePluginInterface {
     toc: RemarkMdxTocOptions
+    settings: Settings
 }
 
 export function vitePlugins(options: VitePluginInterface): Plugin[] {
     return [
-        mdx(mdOptions(options.toc)),
+        mdx(markdownPlugins(
+            options.toc,
+            options.settings
+        )),
     ];
 }

package/src/fs.ts

@@ -1,43 +1,58 @@
-import {promises as fs} from "fs";
-import path from "path";
+import fs from "fs/promises"
 
-import {VFile} from "vfile";
-import {compile as mdxCompile} from "@mdx-js/mdx";
+import { VFile } from "vfile"
+import { PluggableList } from "unified";
+import { compile as mdxCompile } from "@mdx-js/mdx";
 
-import {mdOptions} from "../packages/md";
+import { Settings } from "@xyd-js/core"
 
-export async function compileBySlug(
-    slug: string,
-    mdx: boolean
-): Promise<string> {
-    // TODO: cwd ?
-    const filePath = path.join(process.cwd(), `${slug}.${mdx ? "mdx" : "md"}`)
+export {
+    pageFrontMatters,
+    filterNavigationByLevels
+} from "./navigation"
 
-    await fs.access(filePath)
+export type { VarCode } from "./types"
 
-    const content = await fs.readFile(filePath, "utf-8");
+export class ContentFS {
+    constructor(
+        private readonly settings: Settings,
+        private readonly remarkPlugins: PluggableList,
+        private readonly rehypePlugins: PluggableList,
+    ) { }
 
-    return await compile(content, filePath)
-}
+    public async compile(filePath: string): Promise<string> {
+        await fs.access(filePath)
+
+        const content = await fs.readFile(filePath, "utf-8");
+
+        return await this.compileContent(content, filePath)
+    }
+
+
+    public async compileContent(content: string, filePath?: string): Promise<string> {
+        const vfile = new VFile({
+            path: filePath,
+            value: content,
+            contents: content
+        });
 
-async function compile(content: string, filePath: string): Promise<string> {
-    const vfile = new VFile({
-        path: filePath,
-        value: content,
-        contents: content
-    });
-
-    const opt = mdOptions({
-        minDepth: 2 // TODO: configurable?
-    })
-
-    const compiled = await mdxCompile(vfile, {
-        remarkPlugins: opt.remarkPlugins,
-        rehypePlugins: opt.rehypePlugins,
-        recmaPlugins: [],
-        outputFormat: 'function-body',
-        development: false,
-    });
-
-    return String(compiled)
-}
+        const compiled = await mdxCompile(vfile, {
+            remarkPlugins: this.remarkPlugins,
+            rehypePlugins: this.rehypePlugins,
+            recmaPlugins: [],
+            outputFormat: 'function-body',
+            development: false,
+            jsx: false
+        });
+
+        return String(compiled)
+    }
+
+    public async readRaw(filePath: string) {
+        await fs.access(filePath)
+
+        const content = await fs.readFile(filePath, "utf-8");
+
+        return content
+    }
+}

package/src/index.ts

@@ -1,8 +1,8 @@
-export {
-    compileBySlug
-} from "./fs"
+export { ContentFS } from "./fs"
 
 export {
     pageFrontMatters,
     filterNavigationByLevels
-} from "./navigation"
+} from "./navigation"
+
+export type { VarCode } from "./types"

package/src/navigation.ts

@@ -1,31 +1,33 @@
-import {promises as fs} from 'fs';
-import fs2, {open} from 'fs';
+import { promises as fs } from 'fs';
 import path from 'path';
 
 import React from "react";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
-import matter from 'gray-matter';
-import {VFile} from "vfile";
-import {compile as mdxCompile} from "@mdx-js/mdx";
+import { VFile } from "vfile";
+import { compile as mdxCompile } from "@mdx-js/mdx";
 
-import {FrontMatter, Sidebar, PageFrontMatter, Header} from "@xyd-js/core";
+import { Metadata, Sidebar, MetadataMap, Header, PageURL, VirtualPage } from "@xyd-js/core";
 
 // TODO: better algorithm + data structures - since it's on build time it's not a big deal nevertheless it should be changed in the future
 
 // pageFrontMatters gets frontmatters for given navigation
-export async function pageFrontMatters(navigation: Sidebar[]): Promise<PageFrontMatter> {
-    const frontmatters: PageFrontMatter = {}
+export async function pageFrontMatters(navigation: Sidebar[], pagePathMapping: { [key: string]: string }): Promise<MetadataMap> {
+    const frontmatters: MetadataMap = {}
 
     const promises: Promise<any>[] = []
 
-    function mapPages(page: string | Sidebar) {
+    function mapPages(page: PageURL) {
         if (typeof page !== "string") {
-            page.pages?.forEach(mapPages)
+            if ("virtual" in page) {
+                promises.push(job(page, frontmatters, pagePathMapping))
+            } else if ("pages" in page) {
+                page.pages?.forEach(mapPages)
+            }
             return
         }
 
-        promises.push(job(page, frontmatters))
+        promises.push(job(page, frontmatters, pagePathMapping))
     }
 
     navigation.map(async (nav: Sidebar) => {
@@ -43,7 +45,7 @@ export function filterNavigationByLevels(
     slug: string
 ) {
     const topLevelTabMatcher = headers?.reduce((acc: any, header) => {
-        const tabLevel = header?.url?.split("/")?.length
+        const tabLevel = header?.page?.split("/")?.length
 
         if (!tabLevel) {
             return {
@@ -54,13 +56,13 @@ export function filterNavigationByLevels(
         if (!acc[tabLevel]) {
             return {
                 ...acc,
-                [tabLevel]: new Set().add(header?.url)
+                [tabLevel]: new Set().add(header?.page)
             }
         }
 
         return {
             ...acc,
-            [tabLevel]: acc[tabLevel].add(header?.url)
+            [tabLevel]: acc[tabLevel].add(header?.page)
         }
     }, {}) as { [level: number]: Set<string> }
 
@@ -74,11 +76,20 @@ export function filterNavigationByLevels(
             const level = parseInt(levelStr)
             const findThisSlug = slug.split("/").filter(s => !!s).slice(0, level).join("/")
 
-            function findMatchedPage(page: string | Sidebar) {
+            function findMatchedPage(page: PageURL) {
                 if (typeof page !== "string") {
-                    page.pages?.forEach(findMatchedPage)
+                    if ("virtual" in page && page.virtual) {
+                        return matchPage(page.virtual)
+                    } else if ("pages" in page) {
+                        page.pages?.forEach(findMatchedPage)
+                    }
                     return
                 }
+
+                return matchPage(page)
+            }
+
+            function matchPage(page: string) {
                 const findThisPage = page.split("/").filter(p => !!p).slice(0, level).join("/")
 
                 const set = topLevelTabMatcher[level]
@@ -107,7 +118,7 @@ function mdxExport(code: string) {
     return fn(scope)
 }
 
-async function getFrontmatter(filePath: string): Promise<FrontMatter> {
+async function getFrontmatter(filePath: string): Promise<Metadata> {
     const body = await fs.readFile(filePath, "utf-8");
 
     const vfile = new VFile({
@@ -134,39 +145,40 @@ async function getFrontmatter(filePath: string): Promise<FrontMatter> {
         frontmatter
     } = mdxExport(code)
 
-    const matter: FrontMatter = frontmatter
+    const matter: Metadata = frontmatter
+
+    if (!matter) {
+        throw new Error(`Frontmatter not found in ${filePath}`)
+    }
 
     let title = ""
-    if (typeof matter.title === "string" ) {
+    if (typeof matter.title === "string") {
         title = matter.title
     }
     if (reactFrontmatter) {
-        if (typeof reactFrontmatter?.title === "function") {
-            matter.title = {
-                title,
-                code: reactFrontmatter.title.toString()
-            }
-        }
+        console.error("currently react frontmatter is not supported")
     }
 
     return matter
 }
 
-async function job(page: string, frontmatters: PageFrontMatter) {
-    // TODO: it can be cwd because on build time it has entire path?
-    let filePath = path.join(process.cwd(), `${page}.mdx`) // TODO: support md toos
-    try {
-        await fs.access(filePath)
-    } catch (e) {
-        try {
-            const mdPath = filePath.replace(".mdx", ".md")
-            await fs.access(mdPath)
-            filePath = mdPath
-        } catch (e) {
-        }
+// TODO: indices map to not do like this - search for mdx if not then md
+async function job(page: string | VirtualPage, frontmatters: MetadataMap, pagePathMapping: { [key: string]: string }) {
+    let pageName = ""
+    if (typeof page === "string") {
+        pageName = page
+    } else if (page.page) {
+        pageName = page.page
+    }
+
+    if (!pageName || !pagePathMapping[pageName]) {
+        console.log(`⚠️ "${pageName}" is defined in the docs.json navigation but the file does not exist.`)
+        return
     }
 
+    const filePath = path.join(process.cwd(), pagePathMapping[pageName])
+    
     const matter = await getFrontmatter(filePath)
 
-    frontmatters[page] = matter
+    frontmatters[pageName] = matter
 }

package/src/types.ts

@@ -0,0 +1,8 @@
+import { HighlightedCode } from "codehike/code"
+
+export type VarCode = [
+    [
+        string,
+        ...(HighlightedCode)[]
+    ] | HighlightedCode
+]

package/tsconfig.json

@@ -2,10 +2,24 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/mdx/*": ["src/mdx/*"],
-      "@/navigation/*": ["src/navigation/*"],
-      "@/utils/*": ["src/utils/*"],
-      "@/vite-plugins/*": ["src/vite-plugins/*"]
+      "@/mdx/*": [
+        "src/mdx/*"
+      ],
+      "@/navigation/*": [
+        "src/navigation/*"
+      ],
+      "@/utils/*": [
+        "src/utils/*"
+      ],
+      "@/vite-plugins/*": [
+        "src/vite-plugins/*"
+      ],
+      "@xyd-js/core": [
+        "../xyd-core"
+      ],
+      "@xyd-js/context": [
+        "../xyd-context/src/index.ts"
+      ]
     },
     "target": "ES2020",
     "module": "ESNext",
@@ -15,12 +29,21 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "outDir": "./dist",
-    "types": ["node", "estree", "vite"],
+    "types": [
+      "node",
+      "estree",
+      "vite"
+    ],
     "declaration": true,
     "declarationMap": true,
     "incremental": true,
-    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo",
   },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "dist"]
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }

package/tsup.config.ts

@@ -4,11 +4,13 @@ const config: Options = {
     entry: {
         index: 'src/index.ts',
         vite: 'packages/vite/index.ts',
+        md: 'packages/md/index.ts',
     },
     dts: {
         entry: {
             index: 'src/index.ts',
             vite: 'packages/vite/index.ts',
+            md: 'packages/md/index.ts'
         },
         resolve: true, // Resolve external types
     },

package/vitest.config.ts

@@ -0,0 +1,17 @@
+import {defineConfig} from 'vitest/config'
+
+export default defineConfig({
+    test: {
+        globals: true,
+        environment: 'node',
+        include: [
+            'src/**/*.test.ts',
+            'packages/**/*.test.ts',
+            '**/__tests__/**/*.test.ts'
+        ],
+        coverage: {
+            provider: 'v8',
+            reporter: ['text', 'json', 'html'],
+        },
+    },
+}) 

package/packages/md/plugins/md-code.ts

@@ -1,15 +0,0 @@
-import {visit} from "unist-util-visit";
-
-export function remarkInjectCodeMeta() {
-    return (tree: any) => {
-        visit(tree, 'code', (node) => {
-            if (node.meta) {
-                node.data = node.data || {};
-                node.data.hProperties = {
-                    ...(node.data.hProperties || {}),
-                    meta: node.meta,
-                };
-            }
-        });
-    };
-}

package/packages/md/plugins/md-codegroup.ts

@@ -1,36 +0,0 @@
-import {visit} from 'unist-util-visit';
-
-// This plugin transforms a custom container directive into a JSX node
-// https://github.com/remarkjs/remark-directive is needed to parse the container directive
-
-export function mdCodeGroup() {
-    return (tree: any) => {
-        visit(tree, 'containerDirective', (node) => {
-            if (node.name !== 'code-group') return;
-
-            const description = node.attributes?.title || '';
-            const codeblocks = [];
-
-            for (const child of node.children) {
-                if (child.type === 'code') {
-                    const meta = child.meta || '';
-                    const value = child.value || '';
-                    const lang = child.lang || '';
-
-                    codeblocks.push({value, lang, meta});
-                }
-            }
-
-            // Add metadata to the node
-            node.data = {
-                hName: 'DirectiveCodeSample',
-                hProperties: {
-                    description,
-                    codeblocks: JSON.stringify(codeblocks),
-                },
-            };
-
-            node.children = [];
-        });
-    };
-}

package/packages/md/plugins/md-page.ts

@@ -1,22 +0,0 @@
-import {Plugin} from 'unified';
-import {Node as UnistNode} from 'unist';
-import {visit} from 'unist-util-visit';
-
-declare global {
-    var page: boolean | null | undefined
-}
-
-export const extractPage: Plugin = () => {
-    return (tree: UnistNode) => {
-        visit(tree, 'exportNamedDeclaration', (node: any) => {
-            const declaration = node.declaration;
-            if (declaration && declaration.declarations) {
-                declaration.declarations.forEach((decl: any) => {
-                    if (decl.id.name === 'page') {
-                        global.page = decl.init as boolean;
-                    }
-                });
-            }
-        });
-    };
-};

package/packages/md/plugins/md-toc.ts

@@ -1,133 +0,0 @@
-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";
-
-export type TocEntry = {
-    depth: number,
-    value: string,
-    attributes: { [key: string]: string },
-    children: TocEntry[]
-};
-
-export type CustomTag = {
-    name: RegExp,
-    depth: (name: string) => number
-};
-
-export interface RemarkMdxTocOptions {
-    name?: string,
-    customTags?: CustomTag[],
-    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');
-
-    const mdast = ast as Root;
-    const name = options.name ?? "toc";
-    if (!isIdentifierName(name)) {
-        throw new Error(`Invalid name for an identifier: ${name}`);
-    }
-
-    const toc: TocEntry[] = [];
-    const flatToc: TocEntry[] = [];
-    const createEntry = (node: Heading | MdxJsxFlowElement, depth: number): TocEntry => {
-        let attributes = (node.data || {}) as TocEntry['attributes'];
-        if (node.type === "mdxJsxFlowElement") {
-            attributes = Object.fromEntries(
-                node.attributes
-                    .filter(attribute => attribute.type === 'mdxJsxAttribute' && typeof attribute.value === 'string')
-                    .map(attribute => [(attribute as MdxJsxAttribute).name, attribute.value])
-            ) as TocEntry['attributes'];
-        }
-        return {
-            depth,
-            value: toString(node, {includeImageAlt: false}),
-            attributes,
-            children: []
-        }
-    };
-
-    visit(mdast, ["heading", "mdxJsxFlowElement"], node => {
-        let depth = 0;
-        if (node.type === "mdxJsxFlowElement") {
-            let valid = false;
-            if (/^h[1-6]$/.test(node.name || "")) {
-                valid = true;
-                depth = parseInt(node.name!.substring(1));
-            } else if (options.customTags) {
-                for (const tag of options.customTags) {
-                    if (tag.name.test(node.name || "")) {
-                        valid = true;
-                        depth = tag.depth(node.name || "");
-                        break;
-                    }
-                }
-            }
-
-            if (!valid) {
-                return;
-            }
-        } else if (node.type === "heading") {
-            depth = node.depth;
-        } else {
-            return;
-        }
-
-        if (depth && (options?.minDepth && options.minDepth > depth)) {
-            return
-        }
-
-        const entry = createEntry(node, depth);
-        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);
-    });
-
-    const tocExport: MdxjsEsm = {
-        type: "mdxjsEsm",
-        value: "",
-        data: {
-            estree: {
-                type: "Program",
-                sourceType: "module",
-                body: [
-                    {
-                        type: "ExportNamedDeclaration",
-                        specifiers: [],
-                        attributes: [],
-                        source: null,
-                        declaration: {
-                            type: "VariableDeclaration",
-                            kind: "const",
-                            declarations: [
-                                {
-                                    type: "VariableDeclarator",
-                                    id: {
-                                        type: "Identifier",
-                                        name
-                                    },
-                                    init: valueToEstree(toc)
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
-        }
-    };
-    mdast.children.unshift(tocExport);
-};