@xyd-js/plugin-algolia 0.1.0-xyd.2

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# @xyd-js/plugin-algolia
+
+## 0.1.0-xyd.2
+
+### Patch Changes
+
+- test
+- Updated dependencies
+  - @xyd-js/components@0.1.0-xyd.13
+  - @xyd-js/content@0.1.0-xyd.16
+  - @xyd-js/core@0.1.0-xyd.15
+  - @xyd-js/plugins@0.1.0-xyd.2
+
+## 0.1.0-xyd.1
+
+### Patch Changes
+
+- update packages
+- Updated dependencies
+  - @xyd-js/components@0.1.0-xyd.12
+  - @xyd-js/content@0.1.0-xyd.15
+  - @xyd-js/core@0.1.0-xyd.14
+  - @xyd-js/plugins@0.1.0-xyd.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 xyd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/dist/Search.tsx

@@ -0,0 +1,64 @@
+import React, { useState, lazy, Suspense, useEffect, useCallback } from "react"
+import { createPortal } from 'react-dom'
+
+const DocSearchModal = lazy(() => import('@docsearch/react').then(mod => ({ default: mod.DocSearchModal })));
+
+import { SearchButton as XydSearchButton } from "@xyd-js/components/system"
+
+import '@docsearch/css';
+import { AlgoliaPluginOptions } from "./types";
+
+export function SearchButton() {
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+
+    const handleClick = useCallback(() => {
+        if (isSearchOpen) {
+            return
+        }
+
+        setIsSearchOpen(true)
+    }, [])
+
+    const onModalClosed = useCallback(() => {
+        setIsSearchOpen(false)
+    }, [])
+
+    return <>
+        <XydSearchButton onClick={handleClick} />
+
+        <Suspense>
+            <$DocSearchModalWrapper isSearchOpen={isSearchOpen} onModalClosed={onModalClosed} />
+        </Suspense>
+    </>
+}
+
+function $DocSearchModalWrapper({ isSearchOpen, onModalClosed }: { isSearchOpen: boolean, onModalClosed: () => void }) {
+    const [algoliaConfig, setAlgoliaConfig] = useState<AlgoliaPluginOptions | null>(null)
+
+    async function loadData() {
+        // @ts-ignore
+        const algoliaDataModule = await import('virtual:xyd-plugin-algolia-data')
+
+        setAlgoliaConfig(algoliaDataModule.default.config)
+    }
+
+    useEffect(() => {
+        loadData()
+    }, [])
+
+    if (!algoliaConfig || !isSearchOpen) {
+        return null
+    }
+
+    const docSearchModal = (
+        <DocSearchModal
+            appId={algoliaConfig?.appId || ""}
+            apiKey={algoliaConfig?.apiKey || ""}
+            indexName={algoliaConfig?.indexName || ""}
+            onClose={onModalClosed}
+            initialScrollY={0}
+        />
+    )
+
+    return createPortal(docSearchModal, document.body);
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { Plugin } from '@xyd-js/plugins';
+
+interface AlgoliaPluginOptions {
+    appId: string;
+    apiKey: string;
+    indexName: string;
+}
+
+declare function AlgoliaPlugin(pluginOptions?: AlgoliaPluginOptions): Plugin;
+
+export { AlgoliaPlugin as default };

package/dist/index.js

@@ -0,0 +1,60 @@
+// src/index.ts
+function AlgoliaPlugin(pluginOptions) {
+  return function(settings) {
+    return {
+      name: "plugin-algolia",
+      vite: [
+        vitePlugin(
+          settings,
+          pluginOptions
+        )
+      ]
+    };
+  };
+}
+function vitePlugin(settings, pluginOptions) {
+  const virtualModuleId = "virtual:xyd-plugin-algolia-data";
+  const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+  let resolveConfig = null;
+  return {
+    name: "xyd-plugin-algolia",
+    enforce: "pre",
+    config: () => ({
+      resolve: {
+        alias: {
+          "virtual-component:Search": new URL("./Search.tsx", import.meta.url).pathname
+        }
+      }
+    }),
+    async configResolved(config) {
+      if (resolveConfig) {
+        return;
+      }
+      resolveConfig = config;
+    },
+    async resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    async load(id) {
+      if (id !== resolvedVirtualModuleId) {
+        return;
+      }
+      const config = {
+        appId: pluginOptions?.appId || "",
+        apiKey: pluginOptions?.apiKey || "",
+        indexName: pluginOptions?.indexName || ""
+      };
+      return `
+            const config = ${JSON.stringify(config)};
+
+            export default { config };
+        `;
+    }
+  };
+}
+export {
+  AlgoliaPlugin as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Plugin as VitePlugin, ResolvedConfig } from 'vite'\n\nimport type { Settings } from '@xyd-js/core'\nimport type { Plugin } from '@xyd-js/plugins'\n\nimport type { AlgoliaPluginOptions } from './types'\n\nexport default function AlgoliaPlugin(\n    pluginOptions?: AlgoliaPluginOptions\n): Plugin {\n    return function (settings: Settings) {\n        return {\n            name: \"plugin-algolia\",\n            vite: [\n                vitePlugin(\n                    settings,\n                    pluginOptions,\n                )\n            ]\n        }\n    }\n}\n\nfunction vitePlugin(\n    settings: Settings,\n    pluginOptions?: AlgoliaPluginOptions\n): VitePlugin {\n    const virtualModuleId = 'virtual:xyd-plugin-algolia-data'\n    const resolvedVirtualModuleId = `\\0${virtualModuleId}`\n\n    let resolveConfig: ResolvedConfig | null = null\n\n\n    return {\n        name: 'xyd-plugin-algolia',\n        enforce: 'pre',\n\n        config: () => ({\n            resolve: {\n                alias: {\n                    'virtual-component:Search': new URL('./Search.tsx', import.meta.url).pathname\n                }\n            }\n        }),\n\n        async configResolved(config: ResolvedConfig) {\n            if (resolveConfig) {\n                return\n            }\n\n            resolveConfig = config\n        },\n\n        async resolveId(id) {\n            if (id === virtualModuleId) {\n                return resolvedVirtualModuleId\n            }\n        },\n\n        async load(this, id: string) {\n            if (id !== resolvedVirtualModuleId) {\n                return\n            }\n\n            const config = {\n                appId: pluginOptions?.appId || \"\",\n                apiKey: pluginOptions?.apiKey || \"\",\n                indexName: pluginOptions?.indexName || \"\"\n            }\n\n            return `\n            const config = ${JSON.stringify(config)};\n\n            export default { config };\n        `\n        }\n    }\n}"],"mappings":";AAOe,SAAR,cACH,eACM;AACN,SAAO,SAAU,UAAoB;AACjC,WAAO;AAAA,MACH,MAAM;AAAA,MACN,MAAM;AAAA,QACF;AAAA,UACI;AAAA,UACA;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,SAAS,WACL,UACA,eACU;AACV,QAAM,kBAAkB;AACxB,QAAM,0BAA0B,KAAK,eAAe;AAEpD,MAAI,gBAAuC;AAG3C,SAAO;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA,IAET,QAAQ,OAAO;AAAA,MACX,SAAS;AAAA,QACL,OAAO;AAAA,UACH,4BAA4B,IAAI,IAAI,gBAAgB,YAAY,GAAG,EAAE;AAAA,QACzE;AAAA,MACJ;AAAA,IACJ;AAAA,IAEA,MAAM,eAAe,QAAwB;AACzC,UAAI,eAAe;AACf;AAAA,MACJ;AAEA,sBAAgB;AAAA,IACpB;AAAA,IAEA,MAAM,UAAU,IAAI;AAChB,UAAI,OAAO,iBAAiB;AACxB,eAAO;AAAA,MACX;AAAA,IACJ;AAAA,IAEA,MAAM,KAAW,IAAY;AACzB,UAAI,OAAO,yBAAyB;AAChC;AAAA,MACJ;AAEA,YAAM,SAAS;AAAA,QACX,OAAO,eAAe,SAAS;AAAA,QAC/B,QAAQ,eAAe,UAAU;AAAA,QACjC,WAAW,eAAe,aAAa;AAAA,MAC3C;AAEA,aAAO;AAAA,6BACU,KAAK,UAAU,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,IAI3C;AAAA,EACJ;AACJ;","names":[]}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@xyd-js/plugin-algolia",
+  "version": "0.1.0-xyd.2",
+  "author": "",
+  "description": "",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./Search": {
+      "import": "./dist/Search.tsx"
+    }
+  },
+  "dependencies": {
+    "@docsearch/react": "^3.9.0",
+    "@xyd-js/components": "0.1.0-xyd.13",
+    "@xyd-js/content": "0.1.0-xyd.16",
+    "@xyd-js/core": "0.1.0-xyd.15"
+  },
+  "peerDependencies": {
+    "@xyd-js/plugins": "0.1.0-xyd.2"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^1.6.1",
+    "rimraf": "^3.0.2",
+    "tsup": "^8.4.0",
+    "vite": "^6.1.0",
+    "vitest": "^1.6.1"
+  },
+  "scripts": {
+    "clean": "rimraf build",
+    "prebuild": "pnpm clean",
+    "build": "tsup",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/src/Search.tsx

@@ -0,0 +1,64 @@
+import React, { useState, lazy, Suspense, useEffect, useCallback } from "react"
+import { createPortal } from 'react-dom'
+
+const DocSearchModal = lazy(() => import('@docsearch/react').then(mod => ({ default: mod.DocSearchModal })));
+
+import { SearchButton as XydSearchButton } from "@xyd-js/components/system"
+
+import '@docsearch/css';
+import { AlgoliaPluginOptions } from "./types";
+
+export function SearchButton() {
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+
+    const handleClick = useCallback(() => {
+        if (isSearchOpen) {
+            return
+        }
+
+        setIsSearchOpen(true)
+    }, [])
+
+    const onModalClosed = useCallback(() => {
+        setIsSearchOpen(false)
+    }, [])
+
+    return <>
+        <XydSearchButton onClick={handleClick} />
+
+        <Suspense>
+            <$DocSearchModalWrapper isSearchOpen={isSearchOpen} onModalClosed={onModalClosed} />
+        </Suspense>
+    </>
+}
+
+function $DocSearchModalWrapper({ isSearchOpen, onModalClosed }: { isSearchOpen: boolean, onModalClosed: () => void }) {
+    const [algoliaConfig, setAlgoliaConfig] = useState<AlgoliaPluginOptions | null>(null)
+
+    async function loadData() {
+        // @ts-ignore
+        const algoliaDataModule = await import('virtual:xyd-plugin-algolia-data')
+
+        setAlgoliaConfig(algoliaDataModule.default.config)
+    }
+
+    useEffect(() => {
+        loadData()
+    }, [])
+
+    if (!algoliaConfig || !isSearchOpen) {
+        return null
+    }
+
+    const docSearchModal = (
+        <DocSearchModal
+            appId={algoliaConfig?.appId || ""}
+            apiKey={algoliaConfig?.apiKey || ""}
+            indexName={algoliaConfig?.indexName || ""}
+            onClose={onModalClosed}
+            initialScrollY={0}
+        />
+    )
+
+    return createPortal(docSearchModal, document.body);
+}

package/src/index.ts

@@ -0,0 +1,78 @@
+import type { Plugin as VitePlugin, ResolvedConfig } from 'vite'
+
+import type { Settings } from '@xyd-js/core'
+import type { Plugin } from '@xyd-js/plugins'
+
+import type { AlgoliaPluginOptions } from './types'
+
+export default function AlgoliaPlugin(
+    pluginOptions?: AlgoliaPluginOptions
+): Plugin {
+    return function (settings: Settings) {
+        return {
+            name: "plugin-algolia",
+            vite: [
+                vitePlugin(
+                    settings,
+                    pluginOptions,
+                )
+            ]
+        }
+    }
+}
+
+function vitePlugin(
+    settings: Settings,
+    pluginOptions?: AlgoliaPluginOptions
+): VitePlugin {
+    const virtualModuleId = 'virtual:xyd-plugin-algolia-data'
+    const resolvedVirtualModuleId = `\0${virtualModuleId}`
+
+    let resolveConfig: ResolvedConfig | null = null
+
+
+    return {
+        name: 'xyd-plugin-algolia',
+        enforce: 'pre',
+
+        config: () => ({
+            resolve: {
+                alias: {
+                    'virtual-component:Search': new URL('./Search.tsx', import.meta.url).pathname
+                }
+            }
+        }),
+
+        async configResolved(config: ResolvedConfig) {
+            if (resolveConfig) {
+                return
+            }
+
+            resolveConfig = config
+        },
+
+        async resolveId(id) {
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId
+            }
+        },
+
+        async load(this, id: string) {
+            if (id !== resolvedVirtualModuleId) {
+                return
+            }
+
+            const config = {
+                appId: pluginOptions?.appId || "",
+                apiKey: pluginOptions?.apiKey || "",
+                indexName: pluginOptions?.indexName || ""
+            }
+
+            return `
+            const config = ${JSON.stringify(config)};
+
+            export default { config };
+        `
+        }
+    }
+}

package/src/types.ts

@@ -0,0 +1,7 @@
+export interface AlgoliaPluginOptions {
+    appId: string
+
+    apiKey: string
+    
+    indexName: string
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "target": "esnext",
+    "baseUrl": ".",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [],
+    "strictNullChecks": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,39 @@
+import {copyFile} from 'node:fs/promises';
+import {join} from 'node:path';
+
+import {defineConfig, Options} from 'tsup';
+
+import pkg from './package.json';
+
+const deps = [
+    // ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.devDependencies || {}),
+]
+const config: Options = {
+    entry: {
+        index: 'src/index.ts',
+    },
+    dts: {
+        entry: {
+            index: 'src/index.ts',
+        },
+        resolve: true, // Resolve external types
+    },
+    format: ['esm'],
+    platform: 'node',
+    shims: false,
+    splitting: false,
+    sourcemap: true,
+    clean: true,
+    external: [
+        ...deps,
+    ],
+    onSuccess: async () => {
+        await copyFile(
+            join(process.cwd(), 'src', 'Search.tsx'),
+            join(process.cwd(), 'dist', 'Search.tsx')
+        );
+    }
+}
+
+export default defineConfig(config);