@xyd-js/cli 0.1.0-xyd.3 → 0.1.0-xyd.31

package/.cli/package.json

@@ -0,0 +1,38 @@
+{
+  "private": true,
+  "name": "@xyd-js/documan-host",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "xyd": "bin.js"
+  },
+  "scripts": {},
+  "dependencies": {
+    "@xyd-js/theme-poetry": "0.1.0-xyd.23",
+    "@xyd-js/react-router-dev": "7.1.1-xyd.4",
+    "@readme/oas-to-snippet": "^26.0.1",
+    "@react-router/node": "7.1.1",
+    "@react-router/serve": "7.1.1",
+    "@react-router/dev": "7.1.1",
+    "react-router": "7.1.1",
+    "isbot": "^5",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.0.0",
+    "json-to-graphql-query": "^2.3.0",
+    "remark": "^15.0.1",
+    "unist-builder": "^4.0.0",
+    "oas": "^25.0.3",
+    "openapi-sampler": "^1.5.1",
+    "json-schema-ref-parser": "^9.0.9",
+    "typedoc": "^0.28.1"
+  },
+  "devDependencies": {
+    "@mdx-js/rollup": "^3.1.0",
+    "vite": "^5.4.9",
+    "semver": "^7.6.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47"
+  }
+}

package/.cli/plugins/xyd-plugin-zero/src/pages/api-reference-source.tsx

@@ -0,0 +1,272 @@
+import path from "path";
+import {promises as fs} from "fs";
+
+import React, {} from "react";
+import {redirect} from "react-router";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkMdxFrontmatter from "remark-mdx-frontmatter";
+import remarkGfm from "remark-gfm";
+import {parse} from "codehike";
+import {visit} from "unist-util-visit";
+import {recmaCodeHike, remarkCodeHike} from "codehike/mdx";
+import {compile as mdxCompile} from "@mdx-js/mdx";
+
+import {PageFrontMatter} from "@xyd-js/core";
+import getContentComponents from "@xyd-js/components/content";
+import {mapSettingsToProps} from "@xyd-js/framework/hydration";
+import {Framework, type FwSidebarGroupProps} from "@xyd-js/framework/react";
+import {AtlasIndex} from "@xyd-js/atlas/atlas-index";
+import type {IBreadcrumb, INavLinks} from "@xyd-js/ui";
+
+import Theme from "virtual:xyd-theme" // TODO: for some reasons this cannot be hydrated by react-router
+import settings from 'virtual:xyd-settings';
+
+import "virtual:xyd-theme/index.css"
+import "virtual:xyd-theme-override/index.css"
+
+interface loaderData {
+    sidebarGroups: FwSidebarGroupProps[]
+    breadcrumbs: IBreadcrumb[],
+    navlinks?: INavLinks,
+    toc: PageFrontMatter
+    slug: string
+    code: string
+}
+
+const contentComponents = getContentComponents()
+
+// since unist does not support heading level > 6, we need to normalize them
+function normalizeCustomHeadings() {
+    return (tree: any) => {
+        visit(tree, 'paragraph', (node, index, parent) => {
+            if (!node.children[0].value) {
+                return
+            }
+            const match = node.children[0] && node.children[0].value.match(/^(#+)\s+(.*)/);
+            if (match) {
+                const level = match[1].length;
+                const text = match[2];
+                if (level > 6) {
+                    // Create a new heading node with depth 6
+                    const headingNode = {
+                        type: 'heading',
+                        depth: level,
+                        children: [{type: 'text', value: text}]
+                    };
+                    // Replace the paragraph node with the new heading node
+                    //@ts-ignore
+                    parent.children[index] = headingNode;
+                }
+            }
+        });
+    };
+}
+
+const codeHikeOptions = {
+    lineNumbers: true,
+    showCopyButton: true,
+    autoImport: true,
+    components: {},
+    // syntaxHighlighting: { // TODO: !!! FROM SETTINGS !!! wait for rr7 rsc ??
+    //     theme: "github-dark",
+    // },
+};
+
+const compiledBySlug = {}
+
+// TODO: map every file and merge them or load via client-side ?
+async function compileBySlug(slug: string) {
+    if (compiledBySlug[slug]) {
+        return compiledBySlug[slug]
+    }
+    console.time("api-reference compileBySlug")
+    // TODO: cwd ?
+    let filePath = path.join(process.cwd(), `${slug}.md`)
+
+    try {
+        await fs.access(filePath)
+    } catch (_) {
+        filePath = path.join(process.cwd(), `${slug}.mdx`)
+
+        await fs.access(filePath)
+    }
+
+    console.time("api-reference readFile")
+    const content = await fs.readFile(filePath, "utf-8");
+    console.timeEnd("api-reference readFile")
+
+    console.time("api-reference compile")
+    const resp = await compile(content)
+    console.timeEnd("api-reference compile")
+
+    console.timeEnd("api-reference compileBySlug")
+    compiledBySlug[slug] = resp
+    return resp
+}
+
+async function compile(content: string): Promise<string> {
+    const compiled = await mdxCompile(content, {
+        remarkPlugins: [
+            normalizeCustomHeadings,
+            [
+                remarkCodeHike,
+                codeHikeOptions
+            ],
+            remarkFrontmatter,
+            remarkMdxFrontmatter,
+            remarkGfm
+        ],
+        rehypePlugins: [],
+        recmaPlugins: [
+            [
+                recmaCodeHike,
+                codeHikeOptions
+            ]
+        ],
+        outputFormat: 'function-body',
+        development: false,
+    });
+
+    return String(compiled)
+}
+
+interface loaderData {
+    sidebarGroups: FwSidebarGroupProps[]
+    toc: PageFrontMatter
+    slug: string
+    code: string
+}
+
+function getPathname(url: string) {
+    const parsedUrl = new URL(url);
+    return parsedUrl.pathname.replace(/^\//, '');
+}
+
+// TODO: fix any
+function findFirstUrl(items: any): string {
+    const queue = [...items];
+
+    while (queue.length > 0) {
+        const item = queue.shift();
+
+        if (item.href) {
+            return item.href;
+        }
+
+        if (item.items) {
+            queue.push(...item.items);
+        }
+    }
+
+    return "";
+}
+
+interface data {
+    groups: FwSidebarGroupProps[],
+    breadcrumbs: IBreadcrumb[]
+    navlinks?: INavLinks
+}
+
+const mapSettingsToPropsMap: { [key: string]: data } = {}
+
+// TODO: fix any
+export async function loader({request}: { request: any }) {
+    console.time("api-reference loader")
+    const slug = getPathname(request.url);
+
+    let code = "";
+    let error: any;
+
+    try {
+        code = await compileBySlug(slug);
+    } catch (e) {
+        error = e;
+    }
+    let data: data
+
+    if (!mapSettingsToPropsMap[slug]) {
+        data = await mapSettingsToProps(
+            settings,
+            slug
+        );
+        mapSettingsToPropsMap[slug] = data
+    } else {
+        data = mapSettingsToPropsMap[slug]
+    }
+
+    const {groups: sidebarGroups, breadcrumbs, navlinks} = data;
+
+    if (error) {
+        if (sidebarGroups && error.code === "ENOENT") {
+            const firstItem = findFirstUrl(sidebarGroups?.[0]?.items);
+
+            if (firstItem) {
+                return redirect(firstItem);
+            }
+        }
+
+        console.error(error);
+    }
+
+    console.timeEnd("api-reference loader")
+    return {
+        sidebarGroups,
+        breadcrumbs,
+        navlinks,
+        slug,
+        code,
+    } as loaderData;
+}
+
+function mdxExport(code: string) {
+    const scope = {
+        Fragment: React.Fragment,
+        jsxs: React.createElement,
+        jsx: React.createElement,
+        jsxDEV: React.createElement,
+    }
+    const fn = new Function(...Object.keys(scope), code)
+    return fn(scope)
+}
+
+function MemoMDXComponent(codeComponent: any) {
+    return React.useMemo(
+        () => codeComponent ? codeComponent : null,
+        [codeComponent]
+    )
+}
+
+// // TODO: move to content?
+function mdxContent(code: string) {
+    const content = mdxExport(code) // TODO: fix any
+    if (!mdxExport) {
+        return {}
+    }
+
+    return {
+        component: content?.default,
+    }
+}
+
+// TODO: in the future more smoother loader - first fast server render then move to ideal position of client and then replace and 3 items at start
+export default function APIReference({loaderData}: { loaderData: loaderData }) {
+    const content = mdxContent(loaderData.code)
+    const serverComponent = content ? parse(content.component, {
+        components: contentComponents
+    }) : null
+
+    const memoizedServerComponent = MemoMDXComponent(serverComponent)
+
+    return <Framework
+        settings={settings}
+        sidebarGroups={loaderData.sidebarGroups || []}
+        breadcrumbs={loaderData.breadcrumbs || []}
+        navlinks={loaderData.navlinks}
+    >
+        <Theme>
+            <AtlasIndex
+                data={memoizedServerComponent?.references[0]}
+            />
+        </Theme>
+    </Framework>
+}

package/.cli/plugins/xyd-plugin-zero/src/pages/api-reference.tsx

@@ -1,8 +1,8 @@
 import path from "path";
 import {promises as fs} from "fs";
 
-import React, {useContext} from "react";
-import {redirect, UNSAFE_DataRouterStateContext} from "react-router";
+import React, {} from "react";
+import {redirect} from "react-router";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import remarkGfm from "remark-gfm";
@@ -12,14 +12,12 @@ import {recmaCodeHike, remarkCodeHike} from "codehike/mdx";
 import {compile as mdxCompile} from "@mdx-js/mdx";
 
 import {PageFrontMatter} from "@xyd-js/core";
-import {renderoll} from "@xyd-js/foo/renderoll";
-import {
-    AtlasLazy
-} from "@xyd-js/atlas";
+import {BaseThemeSettings} from "@xyd-js/themes";
 import getContentComponents from "@xyd-js/components/content";
 import {mapSettingsToProps} from "@xyd-js/framework/hydration";
-import {Framework} from "@xyd-js/framework/react";
-import type {FwSidebarGroupProps} from "@xyd-js/framework/react";
+import {Framework, type FwSidebarGroupProps} from "@xyd-js/framework/react";
+import {AtlasLazy} from "@xyd-js/atlas";
+import type {IBreadcrumb, INavLinks} from "@xyd-js/ui";
 
 import Theme from "virtual:xyd-theme" // TODO: for some reasons this cannot be hydrated by react-router
 import settings from 'virtual:xyd-settings';
@@ -27,6 +25,15 @@ import settings from 'virtual:xyd-settings';
 import "virtual:xyd-theme/index.css"
 import "virtual:xyd-theme-override/index.css"
 
+interface loaderData {
+    sidebarGroups: FwSidebarGroupProps[]
+    breadcrumbs: IBreadcrumb[],
+    navlinks?: INavLinks,
+    toc: PageFrontMatter
+    slug: string
+    code: string
+}
+
 const contentComponents = getContentComponents()
 const ComponentContent = contentComponents.Content
 
@@ -67,8 +74,14 @@ const codeHikeOptions = {
     // },
 };
 
+const compiledBySlug = {}
+
 // TODO: map every file and merge them or load via client-side ?
 async function compileBySlug(slug: string) {
+    if (compiledBySlug[slug]) {
+        return compiledBySlug[slug]
+    }
+    console.time("api-reference compileBySlug")
     // TODO: cwd ?
     let filePath = path.join(process.cwd(), `${slug}.md`)
 
@@ -80,23 +93,37 @@ async function compileBySlug(slug: string) {
         await fs.access(filePath)
     }
 
+    console.time("api-reference readFile")
     const content = await fs.readFile(filePath, "utf-8");
+    console.timeEnd("api-reference readFile")
 
-    return await compile(content)
+    console.time("api-reference compile")
+    const resp = await compile(content)
+    console.timeEnd("api-reference compile")
+
+    console.timeEnd("api-reference compileBySlug")
+    compiledBySlug[slug] = resp
+    return resp
 }
 
 async function compile(content: string): Promise<string> {
     const compiled = await mdxCompile(content, {
         remarkPlugins: [
             normalizeCustomHeadings,
-            [remarkCodeHike, codeHikeOptions],
+            [
+                remarkCodeHike,
+                codeHikeOptions
+            ],
             remarkFrontmatter,
             remarkMdxFrontmatter,
             remarkGfm
         ],
         rehypePlugins: [],
         recmaPlugins: [
-            [recmaCodeHike, codeHikeOptions]
+            [
+                recmaCodeHike,
+                codeHikeOptions
+            ]
         ],
         outputFormat: 'function-body',
         development: false,
@@ -136,42 +163,61 @@ function findFirstUrl(items: any): string {
     return "";
 }
 
+interface data {
+    groups: FwSidebarGroupProps[],
+    breadcrumbs: IBreadcrumb[]
+    navlinks?: INavLinks
+}
+
+const mapSettingsToPropsMap: { [key: string]: data } = {}
+
 // TODO: fix any
 export async function loader({request}: { request: any }) {
-    const slug = getPathname(request.url)
+    console.time("api-reference loader")
+    const slug = getPathname(request.url);
 
-    let code = ""
-    let error: any
+    let code = "";
+    let error: any;
 
     try {
-        code = await compileBySlug(slug)
+        code = await compileBySlug(slug);
     } catch (e) {
-        error = e
+        error = e;
+    }
+    let data: data
+
+    if (!mapSettingsToPropsMap[slug]) {
+        data = await mapSettingsToProps(
+            settings,
+            slug
+        );
+        mapSettingsToPropsMap[slug] = data
+    } else {
+        data = mapSettingsToPropsMap[slug]
     }
 
-    const {groups: sidebarGroups} = await mapSettingsToProps(
-        settings,
-        slug
-    )
+    const {groups: sidebarGroups, breadcrumbs, navlinks} = data;
 
-    // TODO: dry with docs.tsx - resolver?
     if (error) {
         if (sidebarGroups && error.code === "ENOENT") {
-            const firstItem = findFirstUrl(sidebarGroups?.[0]?.items)
+            const firstItem = findFirstUrl(sidebarGroups?.[0]?.items);
 
             if (firstItem) {
-                return redirect(firstItem)
+                return redirect(firstItem);
             }
         }
 
-        console.error(error)
+        console.error(error);
     }
 
+    console.timeEnd("api-reference loader")
     return {
         sidebarGroups,
+        breadcrumbs,
+        navlinks,
         slug,
-        code
-    } as loaderData
+        code,
+    } as loaderData;
 }
 
 function mdxExport(code: string) {
@@ -185,157 +231,6 @@ function mdxExport(code: string) {
     return fn(scope)
 }
 
-function renderollAsyncClient(routeId: string, slug: string) {
-    return async () => {
-        let mod;
-        let urlPrefix;
-        let data;
-
-        // TODO: fix any
-        function moduleData(mods: any, id: string) {
-            mod = mods.default[id]
-            if (!mod) {
-                throw new Error(`Unknown openapi id: ${id}`)
-            }
-            urlPrefix = mod.urlPrefix
-            data = mod.data
-        }
-
-        switch (routeId) {
-            case "xyd-plugin-zero/graphql": {
-                // @ts-ignore
-                mod = await import("virtual:xyd-plugin-zero/graphql");
-                urlPrefix = "/docs/api/graphql" // TODO: dynamic urlPreifx
-                data = mod.default.data
-                break;
-            }
-            case "xyd-plugin-zero/openapi": {
-                // @ts-ignore
-                mod = await import("virtual:xyd-plugin-zero/openapi");
-                urlPrefix = "/docs/api/openapi" // TODO: dynamic urlPrefix
-                data = mod.default.data
-                break;
-            }
-            default: {
-                if (routeId.includes("xyd-plugin-zero/openapi")) {
-                    const [_, id] = routeId.split("xyd-plugin-zero/openapi-")
-                    // @ts-ignore
-                    const mods = await import("virtual:xyd-plugin-zero/openapi")
-                    moduleData(mods, id)
-                    break;
-                }
-                if (routeId.includes("xyd-plugin-zero/graphql")) {
-                    const [_, id] = routeId.split("xyd-plugin-zero/graphql-")
-                    // @ts-ignore
-                    const mods = await import("virtual:xyd-plugin-zero/graphql")
-                    moduleData(mods, id)
-                    break;
-                }
-
-                throw new Error(`Unknown routeId: ${routeId}`);
-            }
-        }
-
-        if (!Array.isArray(data)) {
-            console.warn(`mod.default is not an array, current type is: ${typeof mod.default}`)
-
-            return
-        }
-
-        // TODO: in the future custom position
-        const prevRefs = []
-        const nextRefs = []
-        const mdxComponentsPrev: any[] = []
-        const mdxComponentsNext: any[] = []
-
-        let pos = 0;
-
-        for (const chunk of data) {
-            if (!chunk) {
-                continue
-            }
-
-            if (chunk.slug === slug) {
-                pos = 1
-                continue
-            }
-
-            const references = pos === 0 ? prevRefs : nextRefs
-
-            const code = await compile(chunk.content) // TODO: do we need real path?
-            const mdx = mdxExport(code)
-            const Content = mdx.default
-            const content = Content ? parse(Content, {
-                components: contentComponents
-            }) : null
-
-            // TODO: support non-fererence pages
-            if (content.references) {
-                references.push(...(content?.references || []) as [])
-            } else {
-                const mdxComponents = pos === 0 ? mdxComponentsPrev : mdxComponentsNext
-
-                mdxComponents.push(<div data-slug={`/${chunk.slug}`}>
-                    <ComponentContent>
-                        {content}
-                    </ComponentContent>
-                </div>)
-            }
-        }
-
-        return [
-            ({onLoaded}) => <>
-                <ComponentContent>
-                    {mdxComponentsPrev}
-                </ComponentContent>
-
-                {
-                    prevRefs.length ? <div>
-                        <AtlasLazy
-                            references={prevRefs}
-                            urlPrefix={urlPrefix}
-                            slug={slug}
-                            onLoaded={onLoaded}
-                        />
-                    </div> : null
-                }
-            </>,
-
-            ({onLoaded}) => <>
-                <ComponentContent>
-                    {mdxComponentsNext}
-                </ComponentContent>
-
-                {
-                    nextRefs.length ? <div>
-                        <AtlasLazy
-                            references={nextRefs}
-                            urlPrefix={urlPrefix}
-                            slug={slug}
-                            onLoaded={onLoaded}
-                        />
-                    </div> : null
-                }
-            </>
-        ]
-    }
-}
-
-function getRouteId() {
-    const routerState = useContext(UNSAFE_DataRouterStateContext)
-    let routeId: string = ""
-
-    routerState?.matches?.forEach(match => {
-        const loader = routerState?.loaderData[match?.route?.id]
-
-        if (loader) {
-            routeId = match?.route?.id
-        }
-    })
-
-    return routeId
-}
-
 function MemoMDXComponent(codeComponent: any) {
     return React.useMemo(
         () => codeComponent ? codeComponent : null,
@@ -355,6 +250,15 @@ function mdxContent(code: string) {
     }
 }
 
+// TODO: get settings from md files??
+function themeSettings(
+    this: BaseThemeSettings,
+) {
+    return this
+        .layout.size("large")
+        .toc.hide()
+}
+
 // TODO: in the future more smoother loader - first fast server render then move to ideal position of client and then replace and 3 items at start
 export default function APIReference({loaderData}: { loaderData: loaderData }) {
     const content = mdxContent(loaderData.code)
@@ -364,43 +268,18 @@ export default function APIReference({loaderData}: { loaderData: loaderData }) {
 
     const memoizedServerComponent = MemoMDXComponent(serverComponent)
 
-    const serverAtlasOrMDX = memoizedServerComponent?.references ?
-        <AtlasLazy
-            references={memoizedServerComponent?.references || []}
-            slug={loaderData.slug.startsWith("/") ? loaderData.slug : `/${loaderData.slug}`}
-            urlPrefix="/"
-        /> :
-        <ComponentContent>
-            {memoizedServerComponent}
-        </ComponentContent>
-
-    const routeId = getRouteId()
-
-    const RenderollContent = renderoll(
-        renderollAsyncClient(routeId, loaderData.slug),
-        {
-            decorator: ({children}) => <ComponentContent>
-                {children}
-            </ComponentContent>
-        }
-    )
-
     return <Framework
         settings={settings}
-        sidebarGroups={loaderData.sidebarGroups}
+        sidebarGroups={loaderData.sidebarGroups || []}
+        breadcrumbs={loaderData.breadcrumbs || []}
+        navlinks={loaderData.navlinks}
     >
-        <Theme
-            themeSettings={{
-                hideToc: true,
-                bigArticle: true,
-                sidebar: {
-                    clientSideRouting: true
-                }
-            }}
-        >
-            <RenderollContent>
-                {serverAtlasOrMDX}
-            </RenderollContent>
+        <Theme settings={themeSettings}>
+            <AtlasLazy
+                references={memoizedServerComponent?.references || []}
+                slug={loaderData.slug.startsWith("/") ? loaderData.slug : `/${loaderData.slug}`}
+                urlPrefix="/"
+            />
         </Theme>
     </Framework>
 }