@xyd-js/plugin-docs 0.1.0-xyd.5 → 0.1.0-xyd.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/plugin-docs",
-  "version": "0.1.0-xyd.5",
+  "version": "0.1.0-xyd.86",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -17,33 +17,33 @@
   "dependencies": {
     "codehike": "^1.0.3",
     "@code-hike/lighter": "^1.0.3",
-    "@xyd-js/openapi": "0.1.0-xyd.13",
-    "@xyd-js/gql": "0.1.0-xyd.15",
-    "@xyd-js/sources": "0.1.1-xyd.5",
-    "@xyd-js/uniform": "0.1.0-xyd.17"
+    "@xyd-js/openapi": "0.1.0-xyd.94",
+    "@xyd-js/sources": "0.1.1-xyd.86",
+    "@xyd-js/gql": "0.1.0-xyd.96",
+    "@xyd-js/uniform": "0.1.0-xyd.98"
   },
   "peerDependencies": {
-    "@react-router/dev": "^7.5.0",
-    "@react-router/node": "^7.5.0",
-    "@react-router/serve": "^7.5.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router": "^7.5.0",
-    "@xyd-js/framework": "0.1.0-xyd.34",
-    "@xyd-js/components": "0.1.0-xyd.13",
-    "@xyd-js/composer": "0.1.0-xyd.2",
-    "@xyd-js/themes": "0.1.1-xyd.5",
-    "@xyd-js/content": "0.1.0-xyd.16",
-    "@xyd-js/core": "0.1.0-xyd.15"
+    "@react-router/dev": "^7.6.2",
+    "@react-router/node": "^7.6.2",
+    "@react-router/serve": "^7.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.6.2",
+    "@xyd-js/framework": "0.1.0-xyd.115",
+    "@xyd-js/composer": "0.1.0-xyd.83",
+    "@xyd-js/content": "0.1.0-xyd.97",
+    "@xyd-js/components": "0.1.0-xyd.94",
+    "@xyd-js/themes": "0.1.1-xyd.86",
+    "@xyd-js/core": "0.1.0-xyd.96"
   },
   "devDependencies": {
-    "@types/react-dom": "^19.0.0",
-    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.1.0",
+    "@types/react": "^19.1.0",
     "@vitejs/plugin-react": "^4.3.2",
     "tsup": "^8.3.0",
     "typescript": "^5.6.2",
-    "vite": "^6.1.0",
-    "vite-tsconfig-paths": "^5.0.1",
+    "vite": "^7.0.0",
+    "vite-tsconfig-paths": "^5.1.4",
     "rimraf": "^3.0.2"
   },
   "scripts": {

package/src/declarations.d.ts

@@ -20,4 +20,10 @@ declare module 'virtual:xyd-theme' {
         constructor();
     }
     export default ConcreteTheme;
-}
+}
+declare module 'virtual:xyd-user-components' {
+    const components: any
+    export {
+        components
+    }
+}

package/src/pages/layout.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import {useMemo} from "react";
 import {
     Outlet,
     useLoaderData,
@@ -8,41 +8,49 @@ import {
     useMatches
 } from "react-router";
 
-import { mapSettingsToProps } from "@xyd-js/framework/hydration";
+import {mapSettingsToProps} from "@xyd-js/framework/hydration";
 
-import type { Metadata, MetadataMap, Theme as ThemeSettings } from "@xyd-js/core";
-import type { INavLinks, IBreadcrumb } from "@xyd-js/ui";
-import { Framework, FwLink, useSettings, type FwSidebarGroupProps } from "@xyd-js/framework/react";
-import { ReactContent } from "@xyd-js/components/content";
-import { Atlas, AtlasContext, type VariantToggleConfig } from "@xyd-js/atlas";
+import type {Metadata, MetadataMap, Theme as ThemeSettings} from "@xyd-js/core";
+import type {INavLinks, IBreadcrumb} from "@xyd-js/ui";
+import {Framework, FwLink, useSettings, type FwSidebarGroupProps} from "@xyd-js/framework/react";
+import {ReactContent} from "@xyd-js/components/content";
+import {Atlas, AtlasContext, type VariantToggleConfig} from "@xyd-js/atlas";
 import AtlasXydPlugin from "@xyd-js/atlas/xydPlugin";
 
-import { Surfaces } from "@xyd-js/framework/react";
-import { Composer } from "@xyd-js/composer";
+import {Surfaces} from "@xyd-js/framework";
+import {Composer} from "@xyd-js/composer";
+import {XYDAnalytics} from "@xyd-js/analytics";
 // @ts-ignore
-import { iconSet } from 'virtual:xyd-icon-set';
+import {iconSet} from 'virtual:xyd-icon-set';
 
 // @ts-ignore
 import virtualSettings from "virtual:xyd-settings";
-// @ts-ignore
-const { settings: getSettings } = virtualSettings
+// @ts-ignores
+const {settings: getSettings} = virtualSettings
 // const settings = globalThis.__xydSettings
 import Theme from "virtual:xyd-theme";
+// @ts-ignore
+import {loadProvider} from 'virtual:xyd-analytics-providers'
 
 // @ts-ignore
 import "virtual:xyd-theme/index.css"
 import "virtual:xyd-theme-override/index.css"
 
-import { PageContext } from "./context";
+// @ts-ignore
+import {components as userComponents} from 'virtual:xyd-user-components';
+
+import {PageContext} from "./context";
 import React from "react";
-import { markdownPlugins } from "@xyd-js/content/md";
-import { ContentFS } from "@xyd-js/content";
-import { IconProvider } from "@xyd-js/components/writer";
-import { CoderProvider } from "@xyd-js/components/coder";
+
+import {markdownPlugins} from "@xyd-js/content/md";
+import {ContentFS} from "@xyd-js/content";
+import {IconProvider} from "@xyd-js/components/writer";
+import {CoderProvider} from "@xyd-js/components/coder";
+import {SearchButton} from "@xyd-js/components/system"
 
 globalThis.__xydSettings = getSettings
+globalThis.__xydUserComponents = userComponents // Add user components to global scope TODO: problematic
 
-new Composer() // TODO: better API
 const settings = globalThis.__xydSettings
 
 const surfaces = new Surfaces()
@@ -71,7 +79,8 @@ globalThis.__xydSurfaces = surfaces
 
 const theme = new Theme()
 
-const { Layout: BaseThemeLayout } = theme
+const {Layout: BaseThemeLayout} = theme
+
 
 interface LoaderData {
     sidebarGroups: FwSidebarGroupProps[]
@@ -83,7 +92,9 @@ interface LoaderData {
     bannerContentCode?: string
 }
 
-export async function loader({ request }: { request: any }) {
+export async function loader({request}: { request: any }) {
+    new Composer() // TODO: better API
+    
     const slug = getPathname(request.url || "index") || "index"
 
     const {
@@ -131,12 +142,12 @@ export default function Layout() {
     // TODO: BETTER HANDLE THAT
     if (loaderData.metadata?.openapi) {
         atlasVariantToggles = [
-            { key: "status", defaultValue: "200" },
-            { key: "contentType", defaultValue: "application/json" }
+            {key: "status", defaultValue: "200"},
+            {key: "contentType", defaultValue: "application/json"}
         ];
     } else {
         atlasVariantToggles = [
-            { key: "symbolName", defaultValue: "" }
+            {key: "symbolName", defaultValue: ""}
         ];
     }
 
@@ -147,38 +158,49 @@ export default function Layout() {
         const BannerContent = MemoMDXComponent(content.component)
 
         bannerContent = function () {
-            return <BannerContent components={theme.reactContentComponents()} />
+            return <BannerContent components={theme.reactContentComponents()}/>
         }
     }
 
+    const userComponents = (globalThis.__xydUserComponents || []).reduce((acc, component) => {
+        acc[component.name] = component.component;
+        return acc;
+    }, {});
+
     return <>
-        <IconProvider value={{
-            iconSet: iconSet
-        }}>
-            <Framework
-                settings={settings || globalThis.__xydSettings}
-                sidebarGroups={loaderData.sidebarGroups || []}
-                metadata={loaderData.metadata || {}}
-                surfaces={surfaces}
-                BannerContent={bannerContent}
-            >
-                <AtlasContext
-                    value={{
-                        syntaxHighlight: settings?.theme?.coder?.syntaxHighlight || null,
-                        baseMatch: lastMatchId || "",
-                        variantToggles: atlasVariantToggles
+        <XYDAnalytics settings={settings} loader={loadProvider}>
+            <IconProvider value={{
+                iconSet: iconSet
+            }}>
+                <Framework
+                    settings={settings || globalThis.__xydSettings}
+                    sidebarGroups={loaderData.sidebarGroups || []}
+                    metadata={loaderData.metadata || {}}
+                    surfaces={surfaces}
+                    BannerContent={bannerContent}
+                    components={{
+                        Search: SearchButton,
+                        ...userComponents
                     }}
                 >
-                    <CoderProvider lines={settings?.theme?.coder?.lines} scroll={settings?.theme?.coder?.scroll}>
-                        <BaseThemeLayout>
-                            <PageContext value={{ theme }}>
-                                <Outlet />
-                            </PageContext>
-                        </BaseThemeLayout>
-                    </CoderProvider>
-                </AtlasContext>
-            </Framework>
-        </IconProvider>
+                    <AtlasContext
+                        value={{
+                            syntaxHighlight: settings?.theme?.coder?.syntaxHighlight || null,
+                            baseMatch: lastMatchId || "",
+                            variantToggles: atlasVariantToggles
+                        }}
+                    >
+                        <CoderProvider lines={settings?.theme?.coder?.lines} scroll={settings?.theme?.coder?.scroll}>
+                            <BaseThemeLayout>
+                                <PageContext value={{theme}}>
+                                    <Outlet/>
+                                </PageContext>
+                            </BaseThemeLayout>
+                        </CoderProvider>
+                    </AtlasContext>
+                </Framework>
+            </IconProvider>
+        </XYDAnalytics>
     </>
 }
 
@@ -221,7 +243,7 @@ const createElementWithKeys = (type: any, props: any) => {
         return childrenArray.map((child, index) => {
             // If the child is a React element and doesn't have a key, add one
             if (React.isValidElement(child) && !child.key) {
-                return React.cloneElement(child, { key: `mdx-${index}` });
+                return React.cloneElement(child, {key: `mdx-${index}`});
             }
             // If the child is an array, process it recursively
             if (Array.isArray(child)) {
@@ -239,7 +261,7 @@ const createElementWithKeys = (type: any, props: any) => {
             processedChildren = processChildren(props.children);
         } else if (React.isValidElement(props.children) && !props.children.key) {
             // Single child without key
-            processedChildren = React.cloneElement(props.children, { key: 'mdx-child' });
+            processedChildren = React.cloneElement(props.children, {key: 'mdx-child'});
         } else {
             // Single child with key or non-React element
             processedChildren = props.children;

package/src/pages/page.tsx

@@ -360,4 +360,3 @@ export default function DocsPage({ loaderData }: { loaderData: loaderData }) {
     </FrameworkPage>
 }
 
-

package/src/presets/docs/index.ts

@@ -43,7 +43,7 @@ function preinstall() {
                 name: DEFAULT_THEME
             }
         }
-        
+
         let themeRoutesExists = false
         try {
             await fs.access(path.join(root, THEME_CONFIG_FOLDER, "./routes.ts"))
@@ -68,30 +68,85 @@ function preinstall() {
 }
 
 // TODO: maybe later as a separate plugin?
+// function vitePluginSettings() {
+//     return async function ({ preinstall }): Promise<VitePlugin> {
+//         return {
+//             name: 'virtual:xyd-settings',
+//             resolveId(id) {
+//                 if (id === 'virtual:xyd-settings') {
+//                     return id + '.jsx'; // Return the module with .jsx extension
+//                 }
+//                 return null;
+//             },
+//             async load(id) { // TODO: better cuz we probably dont neeed `get settings()`
+//                 if (id === 'virtual:xyd-settings.jsx') {
+//                     return `
+//                         export default {
+//                             get settings() {
+//                                 return globalThis.__xydSettings || ${typeof preinstall.settings === "string" ? preinstall.settings : JSON.stringify(preinstall.settings)}
+//                             }
+//                         }
+//                     `
+//                 }
+//                 return null;
+//             },
+//         };
+//     }
+// }
+
+
 function vitePluginSettings() {
     return async function ({ preinstall }): Promise<VitePlugin> {
+        const virtualId = 'virtual:xyd-settings';
+        const resolvedId = virtualId + '.jsx';
+
+        let currentSettings = globalThis.__xydSettings
+        if (!currentSettings && preinstall?.settings) {
+            currentSettings = typeof preinstall?.settings === "string" ? preinstall?.settings : JSON.stringify(preinstall?.settings || {})
+        }
+
         return {
-            name: 'virtual:xyd-settings',
+            name: 'xyd:virtual-settings',
+
             resolveId(id) {
-                if (id === 'virtual:xyd-settings') {
-                    return id + '.jsx'; // Return the module with .jsx extension
+                if (id === virtualId) {
+                    return resolvedId;
                 }
                 return null;
             },
+
+
             async load(id) { // TODO: better cuz we probably dont neeed `get settings()`
                 if (id === 'virtual:xyd-settings.jsx') {
                     return `
-                        export default {
-                            get settings() {
-                                return globalThis.__xydSettings || ${typeof preinstall.settings === "string" ? preinstall.settings : JSON.stringify(preinstall.settings)}
+                    export default {
+                        get settings() {
+                             return globalThis.__xydSettings || ${typeof preinstall.settings === "string" ? preinstall.settings : JSON.stringify(preinstall.settings)}
                             }
                         }
                     `
                 }
                 return null;
             },
+
+            async hotUpdate(ctx) {
+                const isPageFileChanged = ctx.file.includes('xyd-plugin-docs/src/pages/layout.tsx')
+                 || ctx.file.includes('xyd-plugin-docs/src/pages/page.tsx')
+
+                if (!isPageFileChanged) {
+                    return
+                }
+
+                const newSettings = await readSettings();
+                if (!newSettings) {
+                    return
+                }
+
+                globalThis.__xydSettings = newSettings;
+            },
         };
     }
+
 }
 
 

package/src/presets/docs/settings.ts

@@ -67,7 +67,7 @@ export async function readSettings() {
 
             return json
         } catch (e) {
-            console.error(e)
+            console.error("⚠️ Error parsing settings file")
 
             return null
         }