feat(site-components): upgrade hybrids 9.1.23

packages/site-components/.env

@@ -1,2 +1,4 @@
 VITE_SITE_NOTICE_URL = https://tdesign-site-services.surge.sh/notice.json
 VITE_SLIDER_NOTICE_URL = https://tdesign-site-services.surge.sh/components-notice.json
+VITE_CONTRIBUTORS_API_URL = https://service-edbzjd6y-1257786608.hk.apigw.tencentcs.com/release/github-contributors/list
+VITE_NPM_VERSIONS_API_URL = https://service-edbzjd6y-1257786608.hk.apigw.tencentcs.com/release/npm/latest-versions

packages/site-components/index.html

@@ -25,15 +25,14 @@
 
         <td-code-block panel="js">
           <pre slot="js" lang="js">
-          // 关于语言切换功能，需在引入时全局注册事件，cb 可传可不传，不传则用默认事件
-          import { registerLocaleChange } from '@tdesign/site-components';
-          registerLocaleChange(cb);
-        </pre
-          >
+            // 关于语言切换功能，需在引入时全局注册事件，cb 可传可不传，不传则用默认事件
+            import { registerLocaleChange } from '@tdesign/site-components';
+            registerLocaleChange(cb);
+          </pre>
 
           <pre slot="html" lang="html">
-          <span slot="js">tdesign</span>
-        </pre>
+            <span slot="js">tdesign</span>
+          </pre>
         </td-code-block>
 
         <td-doc-usage code="<div>这里是组件渲染区域</div>">

packages/site-components/package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",
-    "hybrids": "8.2.2",
+    "hybrids": "^9.1.23",
     "nprogress": "^0.2.0",
     "prismjs": "^1.29.0",
     "qrcode": "^1.5.1",

packages/site-components/src/components/td-aegis/index.js

@@ -1,11 +1,11 @@
+/* global Aegis */
 import { html, define } from 'hybrids';
 
 export default define({
   tag: 'td-aegis',
   aegisId: 'rDISNMyXgKnpdSRvul',
   stats: {
-    get: (_host, lastValue) => lastValue || undefined,
-    set: (_host, value) => value,
+    value: (_host, v) => v || undefined,
     connect: (host) => {
       function registerStats() {
         if (document.getElementById('__td_aegis__')) return;
@@ -22,15 +22,20 @@ export default define({
             reportApiSpeed: true, // 接口测速
             spa: true, // spa 页面需要开启，页面切换的时候上报pv
           });
-        }
+        };
         document.body.appendChild(script);
       }
-      window.addEventListener('DOMContentLoaded', registerStats)
+      window.addEventListener('DOMContentLoaded', registerStats);
 
       return () => {
-        window.removeEventListener('DOMContentLoaded', registerStats)
+        window.removeEventListener('DOMContentLoaded', registerStats);
       };
     },
   },
-  render: () => html`<style>:host { display: none; }</style>`,
+  render: () =>
+    html`<style>
+      :host {
+        display: none;
+      }
+    </style>`,
 });

packages/site-components/src/components/td-backtop/index.js

@@ -9,8 +9,7 @@ function handleBacktop() {
 export default define({
   tag: 'td-backtop',
   backtopShow: {
-    get: (_host, lastValue) => lastValue || false,
-    set: (_host, value) => value,
+    value: (_host, v) => v || false,
     connect: (host, key, invalidate) => {
       function toggleVisible() {
         const { scrollTop } = document.documentElement;

packages/site-components/src/components/td-code-block/index.js

@@ -41,8 +41,7 @@ function extractSlots(host) {
 export default define({
   tag: 'td-code-block',
   panel: {
-    get: (host, lastValue) => lastValue || '',
-    set: (host, value) => value,
+    value: (host, v) => v || '',
     observe: (host) => {
       if (!host.shadowRoot) return;
 

packages/site-components/src/components/td-contributors/index.js

@@ -1,7 +1,7 @@
 import { html, define } from 'hybrids';
 import style from './style.less?inline';
 
-const apiUrl = 'https://service-edbzjd6y-1257786608.hk.apigw.tencentcs.com/release/github-contributors/list';
+const apiUrl = import.meta.env.VITE_CONTRIBUTORS_API_URL;
 
 function renderContributors(list) {
   if (!list.length) return html``;
@@ -62,8 +62,7 @@ export default define({
   framework: '',
   componentName: '',
   contributorsData: {
-    get: (host, lastValue) => lastValue || {},
-    set: (host, value) => value,
+    value: (host, v) => v || {},
     connect: (host, key, invalidate) => {
       const cache = sessionStorage.getItem('__tdesign_contributors__');
 

packages/site-components/src/components/td-doc-aside/index.js

@@ -98,18 +98,15 @@ function toggleCollapseAside(host) {
 export default define({
   tag: 'td-doc-aside',
   routerList: {
-    get: (_host, lastValue) => lastValue || [],
-    set: (_host, value) => value,
+    value: (_host, v) => v || [],
   },
   title: '',
   patchDom: {
-    get: (_host, lastValue) => lastValue || false,
-    set: (_host, value) => value,
+    value: (_host, v) => v || false,
     connect: patchShadowDomIntoDom,
   },
   updateNotice: {
-    get: (_host, lastValue) => lastValue || {},
-    set: (_host, value) => value,
+    value: (_host, v) => v || {},
     connect: (host) => {
       fetch(import.meta.env.VITE_SLIDER_NOTICE_URL)
         .then((res) => res.json())
@@ -120,8 +117,7 @@ export default define({
     },
   },
   asideStyle: {
-    get: (_host, lastValue) => lastValue || undefined,
-    set: (_host, value) => value,
+    value: (_host, v) => v || undefined,
     connect: (host) => {
       function setFixed() {
         if (!host.shadowRoot) return;

packages/site-components/src/components/td-doc-changelog/index.js

@@ -167,8 +167,7 @@ function replaceSpecialTags(html) {
 export default define({
   tag: 'td-doc-changelog',
   changelogEn: {
-    get: (_host, lastValue) => parseBoolean(lastValue, false),
-    set: (_host, value) => value,
+    value: (_host, v) => parseBoolean(v, false),
   },
   visible: {
     value: false,

packages/site-components/src/components/td-doc-content/index.js

@@ -47,8 +47,7 @@ export default define({
   pageStatus: 'show',
   mobileBodyStyle,
   fixedAnchor: {
-    get: (_host, lastValue) => lastValue || undefined,
-    set: (_host, value) => value,
+    value: (_host, v) => v || undefined,
     connect: () => {
       let demoLoadObserver;
 

packages/site-components/src/components/td-doc-demo/index.js

@@ -16,10 +16,8 @@ export default define({
   mode: 'auto', // auto open
   currentLangIndex: 0,
   languages: undefined, // multiple languages display
-  currentRenderCode: '',
   theme: {
-    get: (host, lastValue) => lastValue || localStorage.getItem('--tdesign-theme') || 'light',
-    set: (host, value) => value,
+    value: (host, v) => v || localStorage.getItem('--tdesign-theme') || 'light',
     connect(host, key, invalidate) {
       function themeChange() {
         const theme = localStorage.getItem('--tdesign-theme');
@@ -33,8 +31,7 @@ export default define({
     },
   },
   activeStyleMap: {
-    get: (_host, lastValue) => lastValue || undefined,
-    set: (_host, value) => value,
+    value: (_host, v) => v || undefined,
     connect: (host, key) => {
       function handleResize() {
         if (!host.shadowRoot) {
@@ -79,7 +76,6 @@ export default define({
     const currentLang = languageArr[currentLangIndex] || '';
     const currentCode = host.dataset?.[currentLang] || host.dataset?.[currentLang.toLocaleLowerCase()] || code;
     const highlightCode = Prism.highlight(currentCode, Prism.languages[language], language);
-    host.currentRenderCode = currentCode;
     const activeStyle = activeStyleMap && languageArr.length ? activeStyleMap[languageArr[currentLangIndex]] : {};
     const showCodeStyle = {
       transitionDuration: '.2s',

packages/site-components/src/components/td-doc-footer/index.js

@@ -38,8 +38,7 @@ export default define({
   platform: 'web',
   displayQrCode: '',
   patchDom: {
-    get: (_host, lastValue) => lastValue || false,
-    set: (_host, value) => value,
+    value: (_host, v) => v || false,
     connect: patchShadowDomIntoDom,
   },
   render: (host) => {

packages/site-components/src/components/td-doc-header/index.js

@@ -58,8 +58,7 @@ function iframeOnload(host) {
 export default define({
   tag: 'td-doc-header',
   spline: {
-    get: (_host, lastValue) => lastValue || '',
-    set: (_host, value) => value,
+    value: (_host, v) => v || '',
     connect: (host) => {
       const observer = watchHtmlMode((themeMode) => handleModeChange(themeMode, host));
 
@@ -75,21 +74,17 @@ export default define({
   },
   platform: 'web',
   changelog: {
-    get: (_host, lastValue) => parseBoolean(lastValue, true),
-    set: (_host, value) => parseBoolean(value, true),
+    value: (_host, v) => parseBoolean(v, true),
   },
   changelogEn: {
-    get: (_host, lastValue) => parseBoolean(lastValue, true),
-    set: (_host, value) => parseBoolean(value, true),
+    value: (_host, v) => parseBoolean(v, true),
   },
   mobileBodyStyle,
   shouldShowPopup: {
-    get: (_host, lastValue) => lastValue || false,
-    set: (_host, value) => value,
+    value: (_host, v) => v || false,
   },
   docInfo: {
-    get: (_host, lastValue) => lastValue || undefined,
-    set: (_host, value) => value,
+    value: (_host, v) => v || undefined,
     observe: (host, value) => {
       if (document.getElementById('__td_doc_title__') || !value) return;
 
@@ -103,8 +98,7 @@ export default define({
     },
   },
   fixedTitle: {
-    get: (_host, lastValue) => lastValue || undefined,
-    set: (_host, value) => value,
+    value: (_host, v) => v || undefined,
     connect: (host) => {
       const mediaQuery = window.matchMedia('(max-width: 1200px)');
       let lastWidth = window.innerWidth;
@@ -204,8 +198,7 @@ export default define({
     },
   },
   showIssue: {
-    get: (_host, lastValue) => parseBoolean(lastValue, true),
-    set: (_host, value) => parseBoolean(value, true),
+    value: (_host, v) => parseBoolean(v, true),
   },
 
   render: (host) => {

packages/site-components/src/components/td-doc-header/td-doc-issue/index.js

@@ -105,17 +105,15 @@ function fetchGithubIssueNum(host, name, state = 'open', framework) {
 export default define({
   tag: 'td-doc-issue',
   openNum: {
-    get: (_host, lastValue) => lastValue || '',
-    set: (_host, value) => value,
+    value: (_host, v) => v || '',
     connect: (host) => {
       const [, framework, componentName] = parseUrl();
       if (!componentName) return;
       fetchGithubIssueNum(host, componentName, 'open', framework);
     },
   },
   closedNum: {
-    get: (_host, lastValue) => lastValue || '',
-    set: (_host, value) => value,
+    value: (_host, v) => v || '',
     connect: (host) => {
       const [, framework, componentName] = parseUrl();
       if (!componentName) return;

packages/site-components/src/components/td-doc-layout/index.js

@@ -5,8 +5,7 @@ import style from './style.less?inline';
 export default define({
   tag: 'td-doc-layout',
   loaded: {
-    get: (_host, lastValue) => lastValue || false,
-    set: (_host, value) => value,
+    value: (_host, v) => v || false,
     connect: (host, key) => {
       function onLoad() {
         Object.assign(host, { [key]: true });

packages/site-components/src/components/td-doc-phone/index.js

@@ -25,8 +25,7 @@ export default define({
   QRCode: () => QRCode,
   qrCanvas: ({ render }) => render().querySelector('#qrcode'),
   qrcodeUrl: {
-    get: (host, lastValue) => lastValue,
-    set: (host, value) => value,
+    value: (host, v) => v,
     connect: (host) => {
       requestAnimationFrame(() => {
         const qrcodeSlot = host.querySelector('[slot="qrcode"]');
@@ -42,8 +41,7 @@ export default define({
     },
   },
   fixedStyle: {
-    get: (host, lastValue) => lastValue || {},
-    set: (host, value) => value,
+    value: (host, v) => v || {},
     connect: (host, key) => {
       function handleScroll() {
         const isMobileResponse = window.innerWidth < 960;

packages/site-components/src/components/td-doc-popup/index.js

@@ -29,12 +29,10 @@ export default define({
   placement: 'bottom-end',
   triggerType: 'hover',
   equalWidth: {
-    get: (_host, lastValue) => parseBoolean(lastValue, false),
-    set: (_host, value) => parseBoolean(value, false),
+    value: (_host, v) => parseBoolean(v, false),
   },
   visible: {
-    get: (host, lastValue) => lastValue || false,
-    set: (host, value) => value,
+    value: (host, v) => v || false,
     connect: (host) => {
       const { reference, placement } = host;
       let resizeObserver;

packages/site-components/src/components/td-doc-search/index.js

@@ -178,8 +178,7 @@ const HANDLERS = {
  * @param {string} defaultValue 未显式设置 attribute 时返回的默认值
  */
 const stringProp = (defaultValue) => ({
-  get: (_h, v) => v || defaultValue,
-  set: (_h, v) => v,
+  value: (_h, v) => v || defaultValue,
 });
 
 /* ------------------------------------------------------------------ *
@@ -199,10 +198,9 @@ export default define({
   apiKey: stringProp(DEFAULT_API_KEY),
   indexName: stringProp(DEFAULT_INDEX_NAME),
   // urlFilter 特殊：显式传空串 "" 应被视为"关闭过滤"，所以用 == null 判空而非 || 短路
-  urlFilter: { get: (_h, v) => (v == null ? getDefaultUrlFilter() : v), set: (_h, v) => v },
+  urlFilter: { value: (_h, v) => (v == null ? getDefaultUrlFilter() : v) },
   hitsPerPage: {
-    get: (_h, v) => (v != null && v !== '' ? Number(v) : DEFAULT_HITS_PER_PAGE),
-    set: (_h, v) => v,
+    value: (_h, v) => (v != null && v !== '' ? Number(v) : DEFAULT_HITS_PER_PAGE),
   },
 
   // ---------- 2) 文案 ----------
@@ -220,28 +218,26 @@ export default define({
   resultLabel: stringProp('结果'),
 
   // ---------- 3) 内部状态 ----------
-  _query: { get: (_h, v) => v || '', set: (_h, v) => v },
-  _loading: { get: (_h, v) => Boolean(v), set: (_h, v) => Boolean(v) },
-  _groups: { get: (_h, v) => v || [], set: (_h, v) => v || [] },
-  _activeKey: { get: (_h, v) => (v == null ? null : v), set: (_h, v) => v },
-  _flatHits: { get: (_h, v) => v || [], set: (_h, v) => v || [] },
+  _query: { value: (_h, v) => v || '' },
+  _loading: { value: (_h, v) => Boolean(v) },
+  _groups: { value: (_h, v) => v || [] },
+  _activeKey: { value: (_h, v) => (v == null ? null : v) },
+  _flatHits: { value: (_h, v) => v || [] },
   _currentIndex: {
-    get: (_h, v) => (Number.isFinite(v) ? v : 0),
-    set: (_h, v) => {
+    value: (_h, v) => {
       const n = Number(v);
       return Number.isFinite(n) ? n : 0;
     },
   },
-  _recent: { get: (_h, v) => v || [], set: (_h, v) => v || [] },
+  _recent: { value: (_h, v) => v || [] },
 
   // ---------- open 属性 + 生命周期 ----------
   /**
    * open 既是对外 property，也挂载组件生命周期（注册/注销快捷键、点击外部关闭）。
    * observe 里还兼做"每次打开时刷新最近搜索"。
    */
   open: {
-    get: (_host, lastValue) => Boolean(lastValue),
-    set: (_host, value) => Boolean(value),
+    value: (_host, v) => Boolean(v),
     connect: (host) => {
       // 初始最近搜索填充
       host._recent = listRecent();