@xyd-js/plugin-docs 0.0.0-build

package/src/presets/docs/index.ts

@@ -0,0 +1,317 @@
+import { promises as fs } from 'fs';
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { createServer, Plugin as VitePlugin } from "vite";
+import { route } from "@react-router/dev/routes";
+
+import { Settings } from "@xyd-js/core";
+
+import { Preset, PresetData } from "../../types";
+import { readSettings } from "./settings";
+import { DEFAULT_THEME, THEME_CONFIG_FOLDER } from "../../const";
+import { getDocsPluginBasePath, getHostPath } from "../../utils";
+
+interface docsPluginOptions {
+    urlPrefix?: string
+    onUpdate?: (callback: (settings: Settings) => void) => void
+    appInit: any
+}
+
+// TODO: find better solution - maybe something what rr7 use?
+async function loadModule(filePath: string) {
+    const server = await createServer({
+        optimizeDeps: {
+            include: ["react/jsx-runtime"],
+        },
+    });
+
+    try {
+        const module = await server.ssrLoadModule(filePath);
+        return module.default;
+    } finally {
+        await server.close();
+    }
+}
+
+function preinstall() {
+    return async function docsPluginInner(_, data: PresetData) {
+        // TODO: configurable root?
+        const root = process.cwd()
+
+        const settings = await readSettings()
+        if (settings && !settings.theme) {
+            settings.theme = {
+                name: DEFAULT_THEME
+            }
+        }
+
+        let themeRoutesExists = false
+        try {
+            await fs.access(path.join(root, THEME_CONFIG_FOLDER, "./routes.ts"))
+            themeRoutesExists = true
+        } catch (_) {
+        }
+
+        if (themeRoutesExists) {
+            const routeMod = await loadModule(path.join(root, THEME_CONFIG_FOLDER, "./routes.ts"))
+
+            const routes = routeMod((routePath, routeFile, routeOptions) => {
+                return route(routePath, path.join(root, THEME_CONFIG_FOLDER, routeFile), routeOptions)
+            })
+
+            data.routes.push(...routes)
+        }
+
+        return {
+            settings
+        }
+    }
+}
+
+function vitePluginSettings(options: docsPluginOptions) {
+    return function () {
+        return async function ({ preinstall }): Promise<VitePlugin> {
+            const virtualId = 'virtual:xyd-settings';
+            const resolvedId = virtualId + '.jsx';
+
+            let currentSettings = globalThis.__xydSettings
+            let settingsClone = {}
+            if (!currentSettings && preinstall?.settings) {
+                currentSettings = typeof preinstall?.settings === "string" ? preinstall?.settings : JSON.stringify(preinstall?.settings || {})
+            }
+
+            let currentUserPreferences = globalThis.__xydUserPreferences
+            if (!currentUserPreferences) {
+                currentUserPreferences = {}
+            }
+
+            let firstInit = false
+
+            if (options.onUpdate) {
+                options.onUpdate((settings: Settings) => {
+                    currentSettings = settings
+                    settingsClone = JSON.parse(JSON.stringify(currentSettings))
+                    currentUserPreferences = globalThis.__xydUserPreferences
+                })
+            }
+
+            return {
+                name: 'xyd:virtual-settings',
+
+                resolveId(id) {
+                    if (id === virtualId) {
+                        return resolvedId;
+                    }
+                    return null;
+                },
+
+                async load(id) {
+                    if (id === 'virtual:xyd-settings.jsx') {
+                        // console.log("load xyd-settings.jsx")
+
+                        if (!firstInit && globalThis.__xydSettings) {
+                            currentSettings = globalThis.__xydSettings
+                            settingsClone = JSON.parse(JSON.stringify(currentSettings))
+                            currentUserPreferences = globalThis.__xydUserPreferences
+                        }
+                        firstInit = true
+
+                        return `
+                        // Always get the latest settings from globalThis
+                        const getCurrentSettings = () => {
+                            return globalThis.__xydSettings || ${typeof currentSettings === "string" ? currentSettings : JSON.stringify(currentSettings)}
+                        };
+
+                        const getCurrentUserPreferences = () => {
+                            return globalThis.__xydUserPreferences || ${typeof currentUserPreferences === "string" ? currentUserPreferences : JSON.stringify(currentUserPreferences)}
+                        }
+                        
+                        export default {
+                            get settings() {
+                                return getCurrentSettings();
+                            },
+                            get settingsClone() {
+                                return ${typeof settingsClone === "string" ? settingsClone : JSON.stringify(settingsClone)}
+                            },
+                            get userPreferences() {
+                                return getCurrentUserPreferences()
+                            }
+                        }
+                        `
+                    }
+                    return null;
+                },
+
+                // async hotUpdate(ctx) {
+                //     console.log("hot update")
+                    
+                //     const isConfigfileUpdated = ctx.file.includes('react-router.config.ts')
+                //     if (isConfigfileUpdated) {
+                //         return
+                //     }
+
+                //     const newSettings = await readSettings();
+                //     if (!newSettings) {
+                //         console.log('⚠️ Failed to read new settings');
+                //         return
+                //     }
+
+                //     if (options.appInit) {
+                //         // TODO: better way to handle that - we need this cuz otherwise its inifiite reloads
+                //         if (newSettings.engine?.uniform?.store) {
+                //             await options.appInit({
+                //                 disableFSWrite: true,
+                //             })
+                //         } else {
+                //             await options.appInit() // TODO: !!! IN THE FUTURE MORE EFFICIENT WAY !!!
+                //         }
+                //     }
+
+                //     currentSettings = globalThis.__xydSettings
+                //     settingsClone = JSON.parse(JSON.stringify(currentSettings))
+                //     currentUserPreferences = globalThis.__xydUserPreferences
+                //     // globalThis.__xydSettingsClone = JSON.parse(JSON.stringify(globalThis.__xydSettings))
+
+                //     return
+                // },
+            };
+        }
+    }
+}
+
+export function vitePluginThemeCSS() {
+    return async function ({
+        preinstall
+    }: {
+        preinstall: {
+            settings: Settings
+        }
+    }): Promise<VitePlugin> {
+        return {
+            name: 'virtual:xyd-theme/index.css',
+
+            resolveId(source) {
+                if (source === 'virtual:xyd-theme/index.css') {
+                    const __filename = fileURLToPath(import.meta.url);
+                    const __dirname = path.dirname(__filename);
+
+                    const themeName = preinstall.settings.theme?.name || DEFAULT_THEME
+                    let themePath = ""
+
+                    if (process.env.XYD_CLI) {
+                        themePath = path.join(getHostPath(), `node_modules/@xyd-js/theme-${themeName}/dist`)
+                    } else {
+                        themePath = path.join(path.resolve(__dirname, "../../"), `xyd-theme-${themeName}/dist`)
+                    }
+
+                    return path.join(themePath, "index.css")
+                }
+
+                return null;
+            }
+        };
+    }
+}
+
+export function vitePluginThemeOverrideCSS() {
+    return async function ({ preinstall }: { preinstall: { settings: Settings } }): Promise<VitePlugin> {
+        return {
+            name: 'virtual:xyd-theme-override-css',
+
+            async resolveId(id) {
+                if (id === 'virtual:xyd-theme-override/index.css') {
+                    const root = process.cwd();
+                    const filePath = path.join(root, THEME_CONFIG_FOLDER, "./index.css");
+
+                    try {
+                        await fs.access(filePath);
+                        return filePath;
+                    } catch {
+                        // File does not exist, omit it
+                        return 'virtual:xyd-theme-override/empty.css';
+                    }
+                }
+                return null;
+            },
+
+            async load(id) {
+                if (id === 'virtual:xyd-theme-override/empty.css') {
+                    // Return an empty module
+                    return '';
+                }
+                return null;
+            },
+        };
+    };
+}
+
+export function vitePluginTheme() {
+    return async function ({
+        preinstall
+    }: {
+        preinstall: {
+            settings: Settings
+        }
+    }): Promise<VitePlugin> {
+        return {
+            name: 'virtual:xyd-theme',
+            resolveId(id) {
+                if (id === 'virtual:xyd-theme') {
+                    return id;
+                }
+                return null;
+            },
+            async load(id) {
+                if (id === 'virtual:xyd-theme') {
+                    // return ''
+                    const __filename = fileURLToPath(import.meta.url);
+                    const __dirname = path.dirname(__filename);
+
+                    const themeName = preinstall.settings.theme?.name || DEFAULT_THEME
+                    let themePath = ""
+
+                    if (process.env.XYD_CLI) {
+                        themePath = `@xyd-js/theme-${themeName}`
+                    } else {
+                        themePath = path.join(path.resolve(__dirname, "../../"), `xyd-theme-${themeName}/src`)
+                    }
+
+                    // Return a module that imports the theme from the local workspace
+                    return `
+                        import Theme from '${themePath}';
+                        
+                        export default Theme;
+                    `;
+                }
+                return null;
+            }
+        };
+    }
+}
+
+function preset(settings: Settings, options: docsPluginOptions) {
+    const basePath = getDocsPluginBasePath()
+
+    return {
+        preinstall: [
+            preinstall,
+        ],
+        routes: [
+            route("", path.join(basePath, "src/pages/docs.tsx")),
+            // TODO: custom routes
+            route(options.urlPrefix ? `${options.urlPrefix}/*` : "*", path.join(basePath, "src/pages/docs.tsx"), {
+                id: "xyd-plugin-docs/docs",
+            }),
+        ],
+        vitePlugins: [
+            vitePluginSettings(options),
+            vitePluginTheme,
+            vitePluginThemeCSS,
+            vitePluginThemeOverrideCSS
+        ],
+        basePath
+    }
+}
+
+export const docsPreset = preset as Preset<unknown>

package/src/presets/docs/settings.ts

@@ -0,0 +1,262 @@
+import fs from 'fs/promises';
+import path from 'node:path';
+import { URL } from 'node:url';
+
+import { createServer } from 'vite';
+import { config as dotenvConfig } from 'dotenv';
+
+import { Settings } from "@xyd-js/core";
+import { getThemeColors } from '@code-hike/lighter';
+
+const extensions = ['tsx', 'ts', 'json'];
+
+/**
+ * Reads `xyd` settings from the current working directory.
+ * 
+ * This function searches for a file named 'xyd' with one of the supported extensions
+ * (tsx, jsx, js, ts, json) in the current working directory. If found, it loads the
+ * settings from that file.
+ * 
+ * For React-based settings files (tsx, jsx, js, ts), it uses Vite's SSR module loading
+ * to evaluate the file and extract the default export. For JSON files, it simply
+ * parses the JSON content.
+ * 
+ * Environment variables in the format $ENV_VAR will be replaced with actual environment
+ * variable values. Environment variables are loaded from .env files before processing.
+ * 
+ * @returns A Promise that resolves to:
+ *   - The Settings object if a valid settings file was found and loaded
+ *   - A string if the settings file contains a string value
+ *   - null if no settings file was found or an error occurred
+ * 
+ * @throws May throw errors if file reading or parsing fails
+ */
+export async function readSettings() {
+    const dirPath = process.cwd();
+    const baseFileName = 'docs';
+
+    // Load environment variables from .env files first
+    await loadEnvFiles(dirPath);
+
+    let settingsFilePath = '';
+    let reactSettings = false;
+
+    try {
+        const files = await fs.readdir(dirPath);
+        const settingsFile = files.find(file => {
+            const ext = path.extname(file).slice(1);
+            return file.startsWith(baseFileName) && extensions.includes(ext);
+        });
+
+        if (settingsFile) {
+            settingsFilePath = path.join(dirPath, settingsFile);
+            reactSettings = path.extname(settingsFile) !== '.json';
+        } else {
+            console.error(`No settings file found.\nFile must be named 'docs' with one of the following extensions: ${extensions.join(', ')}`);
+            return null;
+        }
+    } catch (error) {
+        console.error(error);
+        return null;
+    }
+
+    if (reactSettings) {
+        const settingsPreview = await createServer({
+            optimizeDeps: {
+                include: ["react/jsx-runtime"],
+            },
+        });
+        const config = await settingsPreview.ssrLoadModule(settingsFilePath);
+        const mod = config.default as Settings;
+
+        // Replace environment variables in the settings
+        const processedSettings = replaceEnvVars(mod);
+        presets(processedSettings)
+
+        return processedSettings
+    } else {
+        const rawJsonSettings = await fs.readFile(settingsFilePath, 'utf-8');
+        try {
+            let json = JSON.parse(rawJsonSettings) as Settings
+
+            // Replace environment variables in the settings
+            const processedSettings = replaceEnvVars(json);
+            presets(processedSettings)
+
+            return processedSettings
+        } catch (e) {
+            console.error("⚠️ Error parsing settings file")
+
+            return null
+        }
+    }
+}
+
+// if (settings?.theme?.coder?.syntaxHighlight) {
+
+// }
+
+function presets(settings: Settings) {
+    if (settings?.theme?.coder?.syntaxHighlight && typeof settings.theme.coder.syntaxHighlight === 'string') {
+        handleSyntaxHighlight(settings.theme.coder.syntaxHighlight, settings);
+    }
+    ensureNavigation(settings)
+
+    if (settings?.theme && !settings?.theme?.head?.length) {
+        settings.theme.head = []
+    }
+}
+
+async function handleSyntaxHighlight(syntaxHighlight: string, settings: Settings) {
+    try {
+        // Ensure theme.coder exists
+        if (!settings.theme) {
+            settings.theme = { name: 'default' } as any;
+        }
+        if (!settings.theme!.coder) {
+            settings.theme!.coder = {};
+        }
+
+        // Check if it's a URL
+        if (isUrl(syntaxHighlight)) {
+            // Fetch from remote URL
+            const response = await fetch(syntaxHighlight);
+            if (!response.ok) {
+                console.error(`⚠️ Failed to fetch syntax highlight from URL: ${syntaxHighlight}`);
+                return;
+            }
+            const json = await response.json();
+            settings.theme!.coder!.syntaxHighlight = json;
+        } else {
+            // Handle local path - but first check if ita's actually a path
+            const localPath = path.resolve(process.cwd(), syntaxHighlight);
+            try {
+                // Check if the file exists before trying to read it
+                await fs.access(localPath);
+                const fileContent = await fs.readFile(localPath, 'utf-8');
+                const json = JSON.parse(fileContent);
+                settings.theme!.coder!.syntaxHighlight = json;
+            } catch (error) {
+            }
+        }
+
+        const syntaxHighlightTheme = settings.theme?.coder?.syntaxHighlight
+        if (syntaxHighlightTheme) {
+            try {
+                const themeColors = await getThemeColors(syntaxHighlightTheme);
+
+                if (themeColors) {
+                    globalThis.__xydUserPreferences = {
+                        themeColors
+                    }
+                }
+            } catch (error) {
+                console.error(`⚠️ Error processing syntax highlight theme colors.`, error);
+            }
+        }
+    } catch (error) {
+        console.error(`⚠️ Error processing syntax highlight: ${syntaxHighlight}`, error);
+    }
+}
+
+
+/**
+ * Loads environment variables from .env files
+ * @param dirPath - The directory path to search for .env files
+ */
+async function loadEnvFiles(dirPath: string) {
+    try {
+        // Define the order of .env files to load (later files override earlier ones)
+        const envFiles = [
+            '.env',
+            '.env.local',
+            '.env.development',
+            '.env.production'
+        ];
+
+        for (const envFile of envFiles) {
+            const envPath = path.join(dirPath, envFile);
+
+            try {
+                await fs.access(envPath);
+                const result = dotenvConfig({ 
+                    path: envPath,
+                    override: true // Ensure variables are overridden
+                });
+
+                if (result.parsed && Object.keys(result.parsed).length > 0) {
+                    console.debug(`📄 Loaded environment variables.`);
+                }
+            } catch (error) {
+                // File doesn't exist, which is fine - continue to next file
+            }
+        }
+    } catch (error) {
+        console.warn('⚠️ Error loading .env files:', error);
+    }
+}
+
+/**
+ * Recursively replaces environment variable placeholders in an object
+ * @param obj - The object to process
+ * @returns The object with environment variables replaced
+ */
+function replaceEnvVars(obj: any): any {
+    if (obj === null || obj === undefined) {
+        return obj;
+    }
+
+    if (typeof obj === 'string') {
+        // Check if the string contains environment variable placeholders
+        if (obj.includes('$')) {
+            return obj.replace(/\$([A-Z_][A-Z0-9_]*)/g, (match, varName) => {
+                const envValue = process.env[varName];
+                if (envValue === undefined) {
+                    console.warn(`\n⚠️ Environment variable "${varName}" is not set, keeping placeholder: ${match}`);
+                    return match;
+                }
+                return envValue;
+            });
+        }
+        return obj;
+    }
+
+    if (Array.isArray(obj)) {
+        return obj.map(item => replaceEnvVars(item));
+    }
+
+    if (typeof obj === 'object') {
+        const result: any = {};
+        for (const [key, value] of Object.entries(obj)) {
+            result[key] = replaceEnvVars(value);
+        }
+        return result;
+    }
+
+    return obj;
+}
+
+function isUrl(str: string): boolean {
+    try {
+        new URL(str);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+function ensureNavigation(json: Settings) {
+    if (!json?.webeditor) {
+        json.webeditor = {}
+    }
+
+    if (!json?.navigation) {
+        json.navigation = {
+            sidebar: []
+        }
+    }
+
+    if (!json?.navigation?.sidebar) {
+        json.navigation.sidebar = []
+    }
+}

package/src/presets/graphql/index.ts

@@ -0,0 +1,69 @@
+import { Settings } from "@xyd-js/core";
+import { gqlSchemaToReferences } from "@xyd-js/gql";
+import type { Reference } from "@xyd-js/uniform";
+
+import { Preset } from "../../types"
+import { UniformPreset } from "../uniform"
+
+interface graphqlPluginOptions {
+    urlPrefix?: string
+    root?: string
+    disableFSWrite?: boolean
+}
+
+function preset(
+    settings: Settings,
+    options: graphqlPluginOptions
+) {
+    return GraphQLUniformPreset.new(settings, options)
+}
+
+export const graphqlPreset = preset satisfies Preset<unknown>
+
+class GraphQLUniformPreset extends UniformPreset {
+    private constructor(
+        settings: Settings,
+        options: {
+            disableFSWrite?: boolean
+        }
+    ) {
+        super(
+            "graphql",
+            settings.api?.graphql || "",
+            settings?.navigation?.sidebar || [],
+            options.disableFSWrite
+        )
+
+        this.uniformRefResolver = this.uniformRefResolver.bind(this)
+    }
+
+    static new(
+        settings: Settings,
+        options: graphqlPluginOptions
+    ) {
+        return new GraphQLUniformPreset(settings, {
+            disableFSWrite: options.disableFSWrite
+        })
+            .urlPrefix(options.urlPrefix || "")
+            .newUniformPreset()(settings, "graphql")
+    }
+
+    protected override async uniformRefResolver(filePath: string): Promise<Reference[]> {
+        if (!filePath) {
+            return []
+        }
+
+        const resp = await gqlSchemaToReferences(filePath)
+
+        if ("__UNSAFE_route" in resp && typeof resp.__UNSAFE_route === "function") {
+            // If the route is a function, we need to call it to get the actual route
+            const route = resp.__UNSAFE_route();
+            if (route) {
+                this.fileRouting(filePath, route);
+            }
+        }
+
+        return resp
+    }
+}
+