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

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/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/mdCodeGroup.ts

@@ -1,40 +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) => {
-            // TODO: is `code-group` ok name? -> rename to CodeSample? or use `mdComponentDirective` instead
-            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/mdComponentDirective.ts

@@ -1,141 +0,0 @@
-import {Plugin, unified} from "unified";
-import remarkParse from "remark-parse";
-import remarkMdx from "remark-mdx";
-import {visit} from "unist-util-visit";
-import {Node as UnistNode} from "unist";
-
-function toPascalCase(str: string) {
-    return str
-        .replace(/([a-z])([A-Z])/g, "$1 $2") // Add space before capital letters
-        .replace(/[^a-zA-Z0-9]/g, " ") // Replace special characters with space
-        .split(" ") // Split by space
-        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize first letter
-        .join("");
-}
-
-
-const supportedDirectives: { [key: string]: boolean } = {
-    Details: true,
-    details: true,
-
-    Table: true,
-    table: true,
-
-    Subtitle: true,
-    subtitle: true,
-}
-
-const tableComponents: { [key: string]: boolean } = {
-    Table: true,
-    table: true
-}
-
-const parseMarkdown = (content: string) => {
-    const ast = unified()
-        .use(remarkParse)
-        .use(remarkMdx)
-        .parse(content);
-    return ast.children;
-};
-
-export const remarkDirectiveWithMarkdown: Plugin = () => {
-    return (tree: UnistNode) => {
-        visit(tree, 'containerDirective', (node: any) => {
-            if (!supportedDirectives[node.name]) {
-                return;
-            }
-
-            const isTable = tableComponents[node.name];
-            const attributes = [];
-
-            // TODO: MORE GENERIC CUZ IT HAS IMPL DETAILS OF TABLE
-            if (isTable) {
-                // TODO: support tsx tables like: [<>`Promise<Reference[]>`</>] ?
-                const tableData = JSON.parse(node.children[0].value);
-                const [header, ...rows] = tableData;
-
-                const jsxNode = {
-                    type: 'mdxJsxFlowElement',
-                    name: 'Table',
-                    attributes: [],
-                    children: [
-                        {
-                            type: 'mdxJsxFlowElement',
-                            name: 'Table.Head',
-                            attributes: [],
-                            children: [
-                                {
-                                    type: 'mdxJsxFlowElement',
-                                    name: 'Table.Tr',
-                                    attributes: [],
-                                    children: header.map((cell: string) => ({
-                                        type: 'mdxJsxFlowElement',
-                                        name: 'Table.Th',
-                                        attributes: [],
-                                        children: parseMarkdown(cell)
-                                    }))
-                                }
-                            ]
-                        },
-                        // TODO: Table.Cell ?
-                        ...rows.map((row: string[]) => ({
-                            type: 'mdxJsxFlowElement',
-                            name: 'Table.Tr',
-                            attributes: [],
-                            children: row.map((cell: string) => ({
-                                type: 'mdxJsxFlowElement',
-                                name: 'Table.Td',
-                                attributes: [],
-                                children: parseMarkdown(cell)
-                            }))
-                        }))
-                    ]
-                };
-
-                Object.assign(node, jsxNode);
-                return;
-            }
-
-            if (node.attributes) {
-                const jsxProps = []
-
-                for (let [key, value] of Object.entries(node.attributes)) {
-                    if (typeof value === "string" && !value.startsWith("<")) {
-                        attributes.push({
-                            type: 'mdxJsxAttribute',
-                            name: key,
-                            value: value
-                        });
-                    } else {
-                        jsxProps.push(`${key}={${value}}`)
-
-                    }
-                }
-
-                const mdxString = `<Fragment ${jsxProps.join(" ")}></Fragment>`
-
-                const ast = unified()
-                    .use(remarkParse)
-                    .use(remarkMdx)
-                    .parse(mdxString);
-
-                if (ast && ast.children[0] && ast.children[0].attributes) {
-                    for (const attr of ast.children[0].attributes) {
-                        // TODO: support markdown also e.g Hello `World` - currently it mus be: Hello <code>World</code>
-                        attributes.push(attr);
-                    }
-                }
-            }
-
-            const jsxNode = {
-                type: 'mdxJsxFlowElement',
-                name: toPascalCase(node.name),
-                attributes: attributes,
-                children: node.children
-            };
-
-            Object.assign(node, jsxNode);
-        });
-    }
-}
-