feat!: update @rspress/plugin-algolia to docsearch v4.1.0 (#2620)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: SoonIter <[email protected]>
Co-authored-by: SoonIter <[email protected]>

Author: Copilot

packages/plugin-algolia/package.json

@@ -39,8 +39,8 @@
     "reset": "rimraf ./**/node_modules"
   },
   "dependencies": {
-    "@docsearch/css": "^3.9.0",
-    "@docsearch/react": "^3.9.0"
+    "@docsearch/css": "^4.1.0",
+    "@docsearch/react": "^4.1.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.52.13",

packages/plugin-algolia/src/runtime/Search.css

@@ -2,36 +2,34 @@
   align-self: center;
 }
 
-html:not(.rp-dark) {
-  [class*='DocSearch'] {
-    --docsearch-searchbox-background: var(--rp-c-bg-mute);
-    --docsearch-primary-color: var(--rp-c-brand);
-    --docsearch-highlight-color: var(--docsearch-primary-color);
-    --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
-  }
-}
-
-html.rp-dark [class*='DocSearch'] {
-  --docsearch-searchbox-background: var(--rp-c-bg-mute);
+[class*='DocSearch'] {
   --docsearch-primary-color: var(--rp-c-brand);
-  --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+  --docsearch-text-color: var(--rp-c-text-1);
+  --docsearch-secondary-text-color: var(--rp-c-text-2);
+  --docsearch-muted-color: var(--rp-c-text-2);
+  --docsearch-subtle-color: var(--rp-c-divider);
 
-  --docsearch-searchbox-focus-background: var(--rp-c-bg-mute);
-  --docsearch-modal-shadow: none;
-  --docsearch-footer-shadow: none;
-  --docsearch-logo-color: var(--rp-c-text-2);
-  --docsearch-hit-background: var(--rp-c-dark-light-1);
-  --docsearch-hit-color: var(--rp-c-text-2);
-  --docsearch-hit-shadow: none;
+  --docsearch-container-background: rgba(60, 60, 60, 0.4);
   --docsearch-modal-background: var(--rp-c-bg);
-  --docsearch-footer-background: var(--rp-c-bg);
 
-  --docsearch-key-gradient: var(--rp-c-bg);
-  --docsearch-key-shadow: var(--rp-c-bg-mute);
-  --docsearch-text-color: var(--rp-c-text-2);
-  --docsearch-muted-color: var(--rp-c-text-2);
-  --docsearch-key-pressed-shadow: none;
+  --docsearch-searchbox-background: var(--rp-c-bg-soft);
+  --docsearch-searchbox-focus-background: var(--rp-c-bg);
+  --docsearch-hit-color: var(--rp-c-text-1);
+  --docsearch-hit-active-color: var(--rp-c-text-1);
+  --docsearch-hit-background: var(--rp-c-bg-soft);
+  --docsearch-hit-shadow: var(--rp-shadow-2);
+  --docsearch-footer-background: var(--rp-c-bg-soft);
+
+  --docsearch-key-background: var(--rp-c-bg-mute);
+  --docsearch-key-color: var(--rp-c-text-2);
+  --docsearch-logo-color: var(--rp-c-text-2);
+  --docsearch-highlight-color: var(--rp-c-brand);
+  --docsearch-icon-color: var(--rp-c-text-2);
+  --docsearch-background-color: var(--rp-c-bg);
+}
+
+html.rp-dark [class*='DocSearch'] {
+  --docsearch-container-background: rgba(0, 0, 0, 0.8);
 }
 
 @media (max-width: 768px) {

packages/plugin-algolia/src/runtime/locales.ts

@@ -15,10 +15,10 @@ export const ZH_LOCALES: Locales = {
       },
       modal: {
         searchBox: {
-          resetButtonTitle: '清除查询条件',
-          resetButtonAriaLabel: '清除查询条件',
-          cancelButtonText: '取消',
-          cancelButtonAriaLabel: '取消',
+          clearButtonTitle: '清除查询条件',
+          clearButtonAriaLabel: '清除查询条件',
+          closeButtonText: '取消',
+          closeButtonAriaLabel: '取消',
         },
         startScreen: {
           recentSearchesTitle: '搜索历史',
@@ -36,7 +36,7 @@ export const ZH_LOCALES: Locales = {
           selectText: '选择',
           navigateText: '切换',
           closeText: '关闭',
-          searchByText: '搜索提供者',
+          poweredByText: '搜索提供者',
         },
         noResultsScreen: {
           noResultsText: '无法找到相关结果',

packages/plugin-algolia/tests/locales.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from 'vitest';
+import { ZH_LOCALES } from '../src/runtime/locales';
+
+describe('Docsearch v4 Locales', () => {
+  test('should have correct translation property names for v4', () => {
+    const zhLocale = ZH_LOCALES.zh;
+
+    // Check if the new v4 property names are used
+    expect(
+      zhLocale.translations?.modal?.searchBox?.clearButtonTitle,
+    ).toBeDefined();
+    expect(
+      zhLocale.translations?.modal?.searchBox?.clearButtonAriaLabel,
+    ).toBeDefined();
+    expect(
+      zhLocale.translations?.modal?.searchBox?.closeButtonText,
+    ).toBeDefined();
+    expect(
+      zhLocale.translations?.modal?.searchBox?.closeButtonAriaLabel,
+    ).toBeDefined();
+    expect(zhLocale.translations?.modal?.footer?.poweredByText).toBeDefined();
+
+    // Check the actual values
+    expect(zhLocale.translations?.modal?.searchBox?.clearButtonTitle).toBe(
+      '清除查询条件',
+    );
+    expect(zhLocale.translations?.modal?.footer?.poweredByText).toBe(
+      '搜索提供者',
+    );
+
+    // Ensure old v3 properties are not used
+    expect(
+      (zhLocale.translations?.modal?.searchBox as any)?.resetButtonTitle,
+    ).toBeUndefined();
+    expect(
+      (zhLocale.translations?.modal?.footer as any)?.searchByText,
+    ).toBeUndefined();
+  });
+
+  test('should have placeholder text', () => {
+    const zhLocale = ZH_LOCALES.zh;
+    expect(zhLocale.placeholder).toBe('搜索文档');
+  });
+});