@xyd-js/cli 0.1.0-xyd.18 → 0.1.0-xyd.2

package/.cli/host/node_modules/.vite/deps/unist-util-visit.js

@@ -0,0 +1,14 @@
+import {
+  CONTINUE,
+  EXIT,
+  SKIP,
+  visit
+} from "./chunk-OUN4SSIE.js";
+import "./chunk-2TUXWMP5.js";
+export {
+  CONTINUE,
+  EXIT,
+  SKIP,
+  visit
+};
+//# sourceMappingURL=unist-util-visit.js.map

package/.cli/host/node_modules/.vite/deps/unist-util-visit.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/.cli/host/node_modules/.vite/deps/vfile.js

@@ -0,0 +1,8 @@
+import {
+  VFile
+} from "./chunk-TKNG6GUJ.js";
+import "./chunk-2TUXWMP5.js";
+export {
+  VFile
+};
+//# sourceMappingURL=vfile.js.map

package/.cli/host/node_modules/.vite/deps/vfile.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/.cli/host/package.json

@@ -0,0 +1,43 @@
+{
+  "private": true,
+  "name": "@xyd-js/documan-host",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "@xyd-js/atlas": "workspace:*",
+    "@xyd-js/core": "workspace:*",
+    "@xyd-js/content": "workspace:*",
+    "@xyd-js/framework": "workspace:*",
+    "@xyd-js/gql": "workspace:*",
+    "@xyd-js/openapi": "workspace:*",
+    "@xyd-js/uniform": "workspace:*",
+    "@xyd-js/theme-gusto": "workspace:*",
+    "@react-router/node": "^7.1.1",
+    "@react-router/serve": "^7.1.1",
+    "codehike": "^1.0.3",
+    "express": "^4.21.1",
+    "isbot": "^5.1.17",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^7.1.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-mdx-frontmatter": "^5.0.0",
+    "typescript": "^5.6.3",
+    "vfile": "^6.0.3",
+    "yaml": "^2.6.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.5",
+    "@types/react-dom": "^18.3.1",
+    "@mdx-js/rollup": "^3.1.0",
+    "@types/react": "^18.3.9",
+    "@vitejs/plugin-react": "^4.3.2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.9",
+    "vite-tsconfig-paths": "^5.0.1"
+  }
+}

package/.cli/host/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        autoprefixer: {},
+    },
+}

package/.cli/host/react-router.config.ts

@@ -0,0 +1,8 @@
+import type {Config} from "@react-router/dev/config";
+
+export default {
+    // return a list of URLs to prerender at build time
+    async prerender() {
+        return ["/example"];
+    },
+} satisfies Config;

package/.cli/host/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx"
+  }
+}

package/.cli/host/vite.config.ts

@@ -0,0 +1,9 @@
+import {defineConfig} from 'vite';
+
+// DO NOT DELETE
+// This file is needed for host `vite` to run
+export default defineConfig(async () => {
+    return {
+        plugins: [],
+    };
+});

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

@@ -0,0 +1,406 @@
+import path from "path";
+import {promises as fs} from "fs";
+
+import React, {useContext} from "react";
+import {redirect, UNSAFE_DataRouterStateContext} 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 {renderoll} from "@xyd-js/foo/renderoll";
+import {
+    AtlasLazy
+} from "@xyd-js/atlas";
+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 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"
+
+const contentComponents = getContentComponents()
+const ComponentContent = contentComponents.Content
+
+// 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",
+    // },
+};
+
+// TODO: map every file and merge them or load via client-side ?
+async function compileBySlug(slug: string) {
+    // 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)
+    }
+
+    const content = await fs.readFile(filePath, "utf-8");
+
+    return await compile(content)
+}
+
+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 "";
+}
+
+// TODO: fix any
+export async function loader({request}: { request: any }) {
+    const slug = getPathname(request.url)
+
+    let code = ""
+    let error: any
+
+    try {
+        code = await compileBySlug(slug)
+    } catch (e) {
+        error = e
+    }
+
+    const {groups: sidebarGroups} = await mapSettingsToProps(
+        settings,
+        slug
+    )
+
+    // TODO: dry with docs.tsx - resolver?
+    if (error) {
+        if (sidebarGroups && error.code === "ENOENT") {
+            const firstItem = findFirstUrl(sidebarGroups?.[0]?.items)
+
+            if (firstItem) {
+                return redirect(firstItem)
+            }
+        }
+
+        console.error(error)
+    }
+
+    return {
+        sidebarGroups,
+        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 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,
+        [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)
+
+    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}
+    >
+        <Theme
+            themeSettings={{
+                hideToc: true,
+                bigArticle: true,
+                sidebar: {
+                    clientSideRouting: true
+                }
+            }}
+        >
+            <RenderollContent>
+                {serverAtlasOrMDX}
+            </RenderollContent>
+        </Theme>
+    </Framework>
+}

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

@@ -0,0 +1,166 @@
+import path from "node:path";
+
+import React from "react";
+import {redirect} from "react-router";
+
+import {PageFrontMatter} from "@xyd-js/core"
+import {compileBySlug} from "@xyd-js/content"
+import getContentComponents from "@xyd-js/components/content";
+import {HomePage} from "@xyd-js/components/pages";
+import type {IBreadcrumb, INavLinks} from "@xyd-js/ui";
+import {mapSettingsToProps} from "@xyd-js/framework/hydration";
+import {Framework, FwNav} from "@xyd-js/framework/react";
+import type {FwSidebarGroupProps} from "@xyd-js/framework/react";
+
+import settings from 'virtual:xyd-settings';
+import Theme from "virtual:xyd-theme";
+
+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 supportedExtensions = {
+    ".mdx": true,
+    ".md": true,
+    "": true,
+}
+
+function getPathname(url: string) {
+    const parsedUrl = new URL(url);
+    return parsedUrl.pathname.replace(/^\//, '');
+}
+
+export async function loader({request}: { request: any }) {
+    const slug = getPathname(request.url || "index") || "index"
+    const ext = path.extname(slug)
+
+    if (!supportedExtensions[ext]) {
+        return {}
+    }
+
+    let code = ""
+    let error: any
+
+    try {
+        code = await compileBySlug(slug, true)
+    } catch (e) {
+        error = e
+    }
+
+    if (error?.code === "ENOENT") {
+        try {
+            // TODO: better index algorithm
+            code = await compileBySlug(slug + "/index", true)
+        } catch (e) {
+            error = e
+        }
+    }
+
+    const {
+        groups: sidebarGroups,
+        breadcrumbs,
+        navlinks,
+    } = await mapSettingsToProps(
+        settings,
+        slug
+    )
+
+    if (error) {
+        if (sidebarGroups && error.code === "ENOENT") {
+            const firstItem = sidebarGroups?.[0]?.items?.[0]
+
+            if (firstItem) {
+                return redirect(firstItem.href)
+            }
+        }
+
+        console.error(error)
+    }
+
+    return {
+        sidebarGroups,
+        breadcrumbs,
+        navlinks,
+        slug,
+        code,
+    } as loaderData
+}
+
+// TODO: move to content?
+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)
+}
+
+// // TODO: move to content?
+function mdxContent(code: string) {
+    const content = mdxExport(code) // TODO: fix any
+    if (!mdxExport) {
+        return {}
+    }
+
+    return {
+        component: content?.default,
+        toc: content?.toc,
+        frontmatter: content?.frontmatter,
+        themeSettings: content?.themeSettings || {},
+        page: content?.page || false,
+    }
+}
+
+export function MemoMDXComponent(codeComponent: any) {
+    return React.useMemo(
+        () => codeComponent ? codeComponent : null,
+        [codeComponent]
+    )
+}
+
+export default function CustomPage({loaderData, ...rest}: { loaderData: loaderData }) {
+    const content = mdxContent(loaderData.code)
+    const Component = MemoMDXComponent(content.component)
+
+    return <Framework
+        settings={settings}
+        sidebarGroups={loaderData.sidebarGroups || []}
+        toc={content.toc || []}
+        breadcrumbs={loaderData.breadcrumbs || []}
+        navlinks={loaderData.navlinks}
+    >
+        {content?.page ? <Component components={{
+            ...contentComponents,
+            // TODO: another page components
+            HomePage: (props) => <HomePage
+                {...props}
+                // TODO: get props from theme about nav (middle etc)
+                // TODO: footer
+                // TODO: style
+                header={<div style={{marginLeft: "var(--xyd-global-page-gutter)"}}>
+                    <FwNav kind="middle"/>
+                </div>}
+
+            >
+                {props.children}
+            </HomePage>,
+        }}/> : <Theme
+            themeSettings={content.themeSettings}
+        >
+            {Component ? <Component components={contentComponents}/> : <></>}
+        </Theme>}
+    </Framework>
+}