@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/hooks/blocklet.js

@@ -0,0 +1,229 @@
+import { useState, useMemo, useEffect } from 'react';
+import merge from 'lodash/merge';
+import omit from 'lodash/omit';
+import { BlockletEvents, fromBlockletStatus } from '@blocklet/constant';
+import Toast from '@arcblock/ux/lib/Toast';
+import { toSlotDomain, getBlockletUrlParams, getBlockletUrl } from '../util';
+import { fixBlocklet } from '../blocklet/util';
+import { useDomainsAccessibility } from './url-evaluation';
+
+// eslint-disable-next-line import/prefer-default-export
+export function useBlocklet({
+  did,
+  client,
+  useSubscription,
+  getIP,
+  useLocaleContext,
+  disableSubscription
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [loadingRuntimeInfo, setLoadingRuntimeInfo] = useState(false);
+  const [blocklet, setBlocklet] = useState();
+  const [runtimeHistory, setRuntimeHistory] = useState({
+    cpu: [],
+    memory: []
+  });
+  const [domainStatus, setDomainStatus] = useState({});
+  const domainListStr = blocklet?.site?.domainAliases?.length ? JSON.stringify(blocklet.site.domainAliases.map(x => x.value)) : '';
+  const domains = useMemo(() => (blocklet?.site?.domainAliases || []).map(x => x.value), [domainListStr]); // eslint-disable-line
+
+  const {
+    domainsAccessibility,
+    recommendedDomain
+  } = useDomainsAccessibility(domains);
+  const refreshRuntimeInfo = async () => {
+    setLoadingRuntimeInfo(true);
+    try {
+      const {
+        blocklet: data
+      } = await client.getBlocklet({
+        input: {
+          did,
+          attachRuntimeInfo: true
+        }
+      });
+      await fixBlocklet(data, {
+        getIP
+      });
+      setBlocklet(data);
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setLoadingRuntimeInfo(false);
+    }
+  };
+  const getRuntimeHistory = async () => {
+    try {
+      const data = await client.getBlockletRuntimeHistory({
+        input: {
+          did,
+          hours: 6
+        }
+      });
+      if (data) {
+        setRuntimeHistory({
+          cpu: data.history.map(x => ({
+            date: x.date,
+            value: x.cpu
+          })),
+          memory: data.history.map(x => ({
+            date: x.date,
+            value: x.mem
+          }))
+        });
+      }
+    } catch (err) {
+      Toast.error(err.message);
+    }
+  };
+  const refreshBlocklet = async ({
+    showError = true,
+    attachRuntimeInfo = true
+  } = {}) => {
+    if (loading) {
+      return;
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      const {
+        blocklet: data
+      } = await client.getBlocklet({
+        input: {
+          did
+        }
+      });
+      if (data) {
+        setBlocklet(oldBlocklet => {
+          fixBlocklet(data, {
+            fixRuntime: 'merge-old',
+            oldBlocklet
+          });
+          return data;
+        });
+        setLoading(false);
+        if (attachRuntimeInfo) {
+          refreshRuntimeInfo();
+          getRuntimeHistory();
+        }
+      } else {
+        throw new Error(t('blocklet.notFound'));
+      }
+    } catch (err) {
+      setLoading(false);
+      setError(err);
+      if (showError) {
+        Toast.error(err.message);
+      }
+    }
+  };
+  const handleRefresh = data => {
+    if (data?.meta?.did === blocklet.meta.did) {
+      refreshBlocklet({
+        showError: false
+      });
+    }
+  };
+  const handleRefreshWithoutRuntime = data => {
+    if (data?.meta?.did === blocklet.meta.did) {
+      refreshBlocklet({
+        attachRuntimeInfo: false,
+        showError: false
+      });
+    }
+  };
+  const refreshDomainStatus = () => {
+    if (did && domainListStr) {
+      client.checkDomains({
+        input: {
+          did
+        }
+      }).catch(err => {
+        console.error(err);
+      });
+    }
+  };
+  const configNavigations = async value => {
+    const {
+      blocklet: data
+    } = await client.configNavigations({
+      input: {
+        did,
+        navigations: value
+      }
+    });
+    setBlocklet(data);
+  };
+  useEffect(() => {
+    if (domainListStr && !disableSubscription) {
+      refreshDomainStatus();
+    }
+  }, [domainListStr, disableSubscription]); // eslint-disable-line
+
+  useSubscription(BlockletEvents.domainStatus, data => {
+    setDomainStatus(pre => ({
+      ...pre,
+      [data.domain]: {
+        ...pre[data.domain],
+        ...data
+      }
+    }));
+  }, [blocklet?.meta?.did, !disableSubscription]);
+  useSubscription(BlockletEvents.statusChange, data => {
+    if (data?.meta?.did === blocklet.meta.did) {
+      setBlocklet(oldBlocklet => {
+        const newBlocklet = {
+          ...oldBlocklet
+        };
+        newBlocklet.status = fromBlockletStatus(data.status);
+        (newBlocklet.children || []).forEach(x => {
+          const y = data.children.find(z => z.meta?.did === x.meta?.did);
+          if (y) {
+            x.status = fromBlockletStatus(y.status);
+          }
+        });
+        return newBlocklet;
+      });
+      handleRefreshWithoutRuntime(data);
+    }
+  }, [blocklet?.meta?.did, !disableSubscription]); // eslint-disable-line prettier/prettier
+  useSubscription(BlockletEvents.storeChange, handleRefreshWithoutRuntime, [blocklet?.meta?.did, !disableSubscription]);
+  useSubscription(BlockletEvents.installed, handleRefresh, [blocklet?.meta?.did, !disableSubscription]);
+  useSubscription(BlockletEvents.upgraded, handleRefresh, [blocklet?.meta?.did, !disableSubscription]);
+  useSubscription(BlockletEvents.updated, handleRefresh, [blocklet?.meta?.did, !disableSubscription]);
+  const data = blocklet ? merge(blocklet, {
+    site: {
+      domainAliases: blocklet.site.domainAliases.map(x => {
+        const domain = x.value;
+        const key = toSlotDomain(domain);
+        x.domainStatus = omit(domainStatus[key], ['domain', 'meta']);
+        x.accessibility = omit(domainsAccessibility[domain], ['domain']);
+        x.href = getBlockletUrl({
+          blocklet,
+          domain: x,
+          params: getBlockletUrlParams(blocklet, locale)
+        });
+        return x;
+      })
+    }
+  }) : null;
+  return {
+    loading,
+    loadingRuntimeInfo,
+    error,
+    blocklet: data,
+    runtimeHistory,
+    recommendedDomain: recommendedDomain || '',
+    actions: {
+      refreshBlocklet,
+      refreshDomainStatus,
+      setBlocklet,
+      configNavigations
+    }
+  };
+}

package/es/hooks/confirm.js

@@ -0,0 +1,90 @@
+import { useContext, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Confirm } from '@arcblock/ux/lib/Dialog';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const state = useReactive({
+    show: false,
+    title: '',
+    content: '',
+    onConfirm: noop,
+    onCancel: noop
+  });
+  const open = useMemoizedFn((params = {}) => {
+    state.show = true;
+    state.title = params.title;
+    state.content = params.content;
+    state.onConfirm = params.onConfirm || noop;
+    state.onCancel = params.onCancel || noop;
+  });
+  const reset = useMemoizedFn(() => {
+    state.title = '';
+    state.content = '';
+    state.onConfirm = noop;
+    state.onCancel = noop;
+  });
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = useMemoizedFn(() => {
+    close();
+    state?.onCancel();
+  }, []);
+  const onConfirm = useMemoizedFn(() => {
+    state?.onConfirm(close);
+  }, []);
+  useImperativeHandle(ref, () => {
+    return {
+      open,
+      close
+    };
+  }, [open, close]);
+  return /*#__PURE__*/_jsx(Confirm, {
+    open: state.show,
+    title: state.title,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    confirmButton: {
+      text: t('common.confirm'),
+      props: {
+        variant: 'contained',
+        color: 'primary'
+      }
+    },
+    cancelButton: {
+      text: t('common.cancel'),
+      props: {
+        variant: 'outlined',
+        color: 'primary'
+      }
+    },
+    children: state.content
+  });
+});
+export default function useConfirm() {
+  const confirmRef = useRef(null);
+  const open = useMemoizedFn((...args) => {
+    confirmRef.current?.open(...args);
+  });
+  const close = useMemoizedFn((...args) => {
+    confirmRef.current?.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close
+  };
+  return {
+    confirmHolder: /*#__PURE__*/_jsx(ConfirmHolder, {
+      ref: confirmRef
+    }),
+    confirmApi
+  };
+}

package/es/hooks/mobile-width.js

@@ -0,0 +1,11 @@
+import { useTheme } from '@mui/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+function useMobileWidth() {
+  const theme = useTheme();
+  const isBreakpointsDownSm = useMediaQuery(theme.breakpoints.down('md'));
+  const minWidth = isBreakpointsDownSm ? 300 : theme.breakpoints.values.sm;
+  return {
+    minWidth
+  };
+}
+export default useMobileWidth;

package/es/hooks/url-evaluation.js

@@ -0,0 +1,155 @@
+import { useState, useEffect, useMemo, useRef, useContext } from 'react';
+import joinUrl from 'url-join';
+import memoize from 'lodash/memoize';
+import { WELLKNOWN_PING_PREFIX } from '@abtnode/constant';
+import { evaluateURLs } from '@abtnode/util/lib/url-evaluation';
+import defaultCheckAccessible from '@abtnode/util/lib/url-evaluation/check-accessible-browser';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { getAccessUrl, getBlockletUrlParams, getBlockletUrls } from '../util';
+
+// 如果同一个页面中存在多个部分同时对同一个 url 检测 url 可访问性, 避免造成重复请求
+const ping = memoize(url => {
+  const {
+    origin,
+    hostname
+  } = new URL(url);
+  if (hostname === window.location.hostname) {
+    return true;
+  }
+  return defaultCheckAccessible(joinUrl(origin, WELLKNOWN_PING_PREFIX));
+});
+
+// url <-> evaluation cache
+const CACHE = {};
+export function useUrlEvaluation({
+  urls,
+  checkAccessible = defaultCheckAccessible,
+  disableCache = false
+}) {
+  // 基于 CACHE 初始化该 hook 的状态
+  // FIXME: 最好解决源头的 material-table 渲染 BlockletInterface 时的 re-mount 问题 (#4897)
+  const initialCachedRef = useRef(urls.filter(url => CACHE[url]).map(url => CACHE[url]));
+  const allCached = initialCachedRef.current.length === urls.length;
+  const [urlsState, setUrlsState] = useState(allCached ? initialCachedRef.current : []);
+  const [loading, setLoading] = useState(!allCached);
+  const recommendedUrlState = useMemo(() => {
+    if (!loading && urlsState.length) {
+      return urlsState[0];
+    }
+    return null;
+  }, [urlsState, loading]);
+  useEffect(() => {
+    if (urls?.length > 0 && !allCached) {
+      const evaluate = async () => {
+        let results;
+        setLoading(true);
+        if (disableCache) {
+          results = await evaluateURLs(urls, {
+            checkAccessible
+          });
+          results.forEach(item => {
+            CACHE[item.url] = item;
+          });
+        } else {
+          const misses = await evaluateURLs(urls.filter(url => !CACHE[url]), {
+            checkAccessible
+          });
+          misses.forEach(item => {
+            CACHE[item.url] = item;
+          });
+          results = urls.map(url => CACHE[url]).sort((a, b) => b.score - a.score);
+        }
+        setUrlsState(results);
+        setLoading(false);
+      };
+      evaluate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [urls, disableCache, allCached]);
+  return {
+    urlsState,
+    loading,
+    recommendedUrlState,
+    recommendedUrl: recommendedUrlState?.url
+  };
+}
+
+/**
+ * 主要对 blocklet 访问 urls 进行评估
+ * @param {object} blocklet
+ */
+export function useBlockletUrlEvaluation(blocklet) {
+  const {
+    locale
+  } = useContext(LocaleContext);
+  const urls = useMemo(() => {
+    if (!blocklet) {
+      return [];
+    }
+    // getBlockletUrlParams 的调用是必须的, 会根据 blocklet 状态决定是否添加 "__start__" 参数, 以保证 blocklet 启动按钮可以正确的跳转到启动页面
+    return getBlockletUrls({
+      blocklet,
+      params: getBlockletUrlParams(blocklet, locale)
+    });
+  }, [blocklet, locale]);
+  const {
+    loading,
+    recommendedUrlState,
+    recommendedUrl
+  } = useUrlEvaluation({
+    urls,
+    checkAccessible: ping
+  });
+  return {
+    urls,
+    loading,
+    recommendedUrlState,
+    recommendedUrl
+  };
+}
+
+/**
+ * 主要对 blocklet domains 对应的 urls 进行评估, 配合 DomainStatusProvider 使用
+ * @param {string[]} domains
+ */
+export function useDomainsAccessibility(domains) {
+  // 获取 blocklet domain 对应的访问 url
+  const urls = useMemo(() => domains.map(item => getAccessUrl(item)), [domains]);
+  const {
+    urlsState,
+    loading,
+    recommendedUrl
+  } = useUrlEvaluation({
+    urls,
+    checkAccessible: ping
+  });
+  let result;
+  if (loading) {
+    result = {
+      domainsAccessibility: domains.reduce((acc, cur) => ({
+        ...acc,
+        [cur]: {
+          loading: true
+        }
+      }), {}),
+      recommendedDomain: null
+    };
+  } else {
+    const domainsAccessibility = urlsState.reduce((acc, cur) => {
+      // 检测对象是 domain, 但检测可访问性用的是 domain 对应的 ping url, 所以需要取 hostname 作为结果
+      const domain = new URL(cur.url).hostname;
+      acc[domain] = {
+        ...cur,
+        domain
+      };
+      return acc;
+    }, {});
+    // 从排好优先级的 urls 中选择第一个可访问的 url 作为 recommendedDomain (对于自定义域名, 可能存在评分最高但不可访问的情况) (#5195)
+    const accessibleUrl = urlsState.find(item => item.accessible)?.url || recommendedUrl;
+    result = {
+      domainsAccessibility,
+      recommendedDomain: accessibleUrl ? new URL(accessibleUrl).hostname : null
+    };
+  }
+  return result;
+}

package/es/hooks/use-app-logo.js

@@ -0,0 +1,16 @@
+import joinUrl from 'url-join';
+import { useNodeContext } from '../contexts/node';
+import { isInstalling } from '../util';
+export default function useAppLogo({
+  blocklet
+}) {
+  const {
+    inService
+  } = useNodeContext();
+  const prefix = window.env?.apiPrefix || '/';
+  const search = `?v=${blocklet?.meta?.version}${isInstalling(blocklet?.status) ? '~' : ''}`;
+  const logoUrl = joinUrl(prefix, `/blocklet/logo/${inService ? '' : blocklet.meta.did}`, search);
+  return {
+    logoUrl
+  };
+}

package/es/hooks/use-backup-progress.js

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { BlockletEvents } from '@blocklet/constant';
+import { useNodeContext } from '../contexts/node';
+
+/**
+ * @description 实时显示备份的进度
+ * @param {{appDid: string}} {appDid}
+ * @return {{message: string, progress: number, completed: boolean}}
+ */
+function useBackupProgress({
+  appDid
+}) {
+  const [progress, setProgress] = useState({
+    message: '',
+    progress: 0,
+    completed: false
+  });
+  const node = useNodeContext();
+  const {
+    ws: {
+      useSubscription
+    }
+  } = node;
+  useSubscription(BlockletEvents.backupProgress, data => {
+    setProgress(() => ({
+      ...data
+    }));
+  }, [appDid]);
+  return progress;
+}
+export default useBackupProgress;

package/es/hooks/use-blocklet-info-for-connect-did-spaces.js

@@ -0,0 +1,50 @@
+import { getAppDescription, getAppName } from '@blocklet/meta/lib/util';
+
+/**
+ *
+ *
+ * @param {import('@abtnode/client').BlockletState} blocklet
+ * @return {{
+ *  appDid: string,
+ *  appName: string,
+ *  appDescription: string,
+ *  appUrl: string,
+ *  scopes: string,
+ *  referrer: string,
+ *  isReady: string,
+ * }}
+ */
+function useBlockletInfoForConnectDIDSpaces({
+  blocklet
+}) {
+  const {
+    appDid
+  } = blocklet;
+  const appName = getAppName(blocklet);
+  const appDescription = getAppDescription(blocklet);
+  const appUrls = blocklet?.site?.domainAliases?.sort((a, b) => {
+    if (a.accessibility.accessible && b.accessibility.accessible) {
+      return +a.isProtected - +b.isProtected;
+    }
+    return +b.accessibility.accessible - +a.accessibility.accessible;
+  })?.map(domainAlias => {
+    const protocol = domainAlias?.domainStatus?.isHttps ? 'https://' : 'http://';
+    const value = domainAlias?.value;
+    return `${protocol}${value}`;
+  }).filter(Boolean);
+  const appUrl = appUrls?.[0];
+  const scopes = 'list:object read:object write:object';
+  const referrer = window.location.href;
+
+  // 授权的时候提供 appUrl, 因为 appUrl 可能很久都拿不到值，所以加一个 isReady 来表示就绪状态
+  return {
+    appDid,
+    appName,
+    appDescription,
+    appUrl,
+    scopes,
+    referrer,
+    isReady: Boolean(appUrl)
+  };
+}
+export default useBlockletInfoForConnectDIDSpaces;

package/es/hooks/use-bundle-logo.js

@@ -0,0 +1,27 @@
+import joinUrl from 'url-join';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import { useNodeContext } from '../contexts/node';
+import { formatRegistryLogoPath, APP_PREFIX, isDownloading } from '../util';
+export default function useAvatar({
+  blocklet,
+  ancestors = []
+}) {
+  const node = useNodeContext();
+  const {
+    inService
+  } = node;
+  const search = `?v=${blocklet?.meta?.version}${isDownloading(blocklet?.status) ? '~' : ''}`;
+  let logoUrl = inService ? joinUrl(APP_PREFIX, WELLKNOWN_SERVICE_PATH_PREFIX, '/blocklet/logo-bundle', search) : joinUrl(node.imgPrefix, 'blocklet.png');
+  if (blocklet.source === 'registry' && blocklet.deployedFrom && blocklet.meta.logo) {
+    logoUrl = joinUrl(blocklet.deployedFrom, formatRegistryLogoPath(blocklet.meta.bundleDid, blocklet.meta.logo), search);
+  } else {
+    const prefix = window.env.apiPrefix || '/';
+    const components = ancestors.concat(blocklet);
+    const list = inService ? components.slice(1) : components;
+    logoUrl = joinUrl(prefix, `/blocklet/logo-bundle${list.map(x => `/${x.meta.did}`).join('')}`, search);
+  }
+  return {
+    logoUrl,
+    inService
+  };
+}