@abtnode/ux 1.16.17-beta-ce49fe0e → 1.16.17-beta-2679e686

package/es/blocklet/configuration.js

@@ -1,14 +1,17 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, lazy, useRef } from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
+import classnames from 'classnames';
+import joinUrl from 'url-join';
 import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 import Divider from '@mui/material/Divider';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import LoopIcon from '@mui/icons-material/Loop';
+import Avatar from '@mui/material/Avatar';
 import { EVENTS } from '@abtnode/constant';
 import { BLOCKLET_CONFIGURABLE_KEY, SUPPORTED_LANGUAGES } from '@blocklet/constant';
 import { getWhoCanAccess } from '@blocklet/meta/lib/util';
@@ -22,19 +25,34 @@ import Permission, { withPermission } from '../permission';
 import ClearCache from '../clear-cache';
 import AppSk from './preferences/app-sk';
 import TransferOwner from './transfer-owner';
+import useAppLogo from '../hooks/use-app-logo';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const languages = Object.keys(SUPPORTED_LANGUAGES).map(x => ({
   code: x,
   name: SUPPORTED_LANGUAGES[x].nativeName
 }));
+
+// eslint-disable-next-line import/no-unresolved
+const UploaderComponent = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
+  default: res.Uploader
+})));
+const uploadPrefix = '/blocklet/logo/upload';
 function BlockletEnvironment({
   blocklet,
   onUpdate,
   hasPermission,
   ...rest
 }) {
-  const node = useNodeContext();
+  const {
+    api,
+    inService,
+    prefix,
+    getSessionInHeader,
+    ws: {
+      useSubscription
+    }
+  } = useNodeContext();
   const {
     t
   } = useContext(LocaleContext);
@@ -44,12 +62,28 @@ function BlockletEnvironment({
   const whoCanAccess = getWhoCanAccess(blocklet);
   const publicToStore = blocklet?.settings?.publicToStore;
   const disabled = loading || !hasPermission;
+  const uploaderLogoRef = useRef(null);
   const {
-    inService,
-    ws: {
-      useSubscription
+    logoUrl,
+    rectLogoUrl,
+    faviconUrl
+  } = useAppLogo({
+    blocklet
+  });
+  const [apiPathProps, setApiPathProps] = useState();
+  const uploadLogoPrefix = joinUrl(prefix, uploadPrefix, 'square', blocklet.meta.did);
+  const uploadLogoRectPrefix = joinUrl(prefix, uploadPrefix, 'rect', blocklet.meta.did);
+  const uploadLogoFaviconPrefix = joinUrl(prefix, uploadPrefix, 'favicon', blocklet.meta.did);
+  const openUploader = uploaderPrefix => {
+    if (!hasPermission) {
+      return;
     }
-  } = node;
+    setApiPathProps({
+      uploader: uploaderPrefix,
+      disableMediaKitPrefix: true
+    });
+    uploaderLogoRef.current.open();
+  };
   const {
     did
   } = blocklet.meta;
@@ -71,10 +105,6 @@ function BlockletEnvironment({
   const deletable = !customDelete || customDelete.value === 'yes';
   const customLanguages = blocklet.environments.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LANGUAGES);
   const customUrl = blocklet.environments.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_URL);
-  const customLogoSquare = blocklet.environments.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_SQUARE);
-  const customLogoRect = blocklet.environments.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_RECT);
-  const customLogoFavicon = blocklet.environments.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_FAVICON);
-  const customLogoDeprecated = blocklet.environments.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO);
   const copyrightOwner = blocklet.environments.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_COPYRIGHT_OWNER);
   const copyrightYear = blocklet.environments.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_COPYRIGHT_YEAR);
   const configurableEnvs = [{
@@ -89,22 +119,6 @@ function BlockletEnvironment({
     key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_URL,
     description: t('blocklet.config.appUrl'),
     value: customUrl ? customUrl.value : ''
-  }, {
-    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_SQUARE,
-    description: t('blocklet.config.logoSquare'),
-    value: customLogoSquare ? customLogoSquare.value : ''
-  }, {
-    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_RECT,
-    description: t('blocklet.config.logoRect'),
-    value: customLogoRect ? customLogoRect.value : ''
-  }, {
-    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_FAVICON,
-    description: t('blocklet.config.logoFavicon'),
-    value: customLogoFavicon ? customLogoFavicon.value : ''
-  }, {
-    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO,
-    description: t('blocklet.config.logo'),
-    value: customLogoDeprecated ? customLogoDeprecated.value : ''
   }, {
     key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_COPYRIGHT_OWNER,
     description: t('blocklet.config.copyrightOwner'),
@@ -135,7 +149,7 @@ function BlockletEnvironment({
       } = e.target;
       const {
         blocklet: data
-      } = await node.api.configPublicToStore({
+      } = await api.configPublicToStore({
         input: {
           did: blocklet.meta.did,
           publicToStore: checked
@@ -167,7 +181,7 @@ function BlockletEnvironment({
       setLoading(true);
       const {
         blocklet: data
-      } = await node.api.configBlocklet({
+      } = await api.configBlocklet({
         input: {
           did: blocklet.meta.did,
           configs: params
@@ -191,7 +205,7 @@ function BlockletEnvironment({
       } = e.target;
       const {
         blocklet: data
-      } = await node.api.configBlocklet({
+      } = await api.configBlocklet({
         input: {
           did: blocklet.meta.did,
           configs: [{
@@ -216,7 +230,7 @@ function BlockletEnvironment({
     try {
       setLoading(true);
       const corsAllowedOrigins = newValue.length ? newValue : ['__none__'];
-      await node.api.updateRoutingSite({
+      await api.updateRoutingSite({
         input: {
           id: site.id,
           corsAllowedOrigins,
@@ -239,7 +253,7 @@ function BlockletEnvironment({
     try {
       const {
         blocklet: data
-      } = await node.api.configBlocklet({
+      } = await api.configBlocklet({
         input: {
           did: blocklet.meta.did,
           configs: [{
@@ -255,6 +269,11 @@ function BlockletEnvironment({
       setLoading(false);
     }
   };
+  const uploaderStyle = {
+    '&::after': {
+      content: `"${t('common.switch')}"`
+    }
+  };
   return /*#__PURE__*/_jsxs(Div, {
     ...rest,
     children: [configurableEnvs.map(item => /*#__PURE__*/_jsxs(Box, {
@@ -275,6 +294,95 @@ function BlockletEnvironment({
         onSubmit: value => onSubmitConfig(item.key, value)
       })]
     })), /*#__PURE__*/_jsx(Box, {
+      className: "config-form",
+      component: Divider,
+      my: 3
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "config-label",
+      fontSize: 14,
+      mb: 1,
+      sx: {
+        flexGrow: 0,
+        width: 'auto'
+      },
+      children: t('blocklet.config.logoSquare')
+    }), /*#__PURE__*/_jsx(Box, {
+      className: classnames('uploader-wrapper', hasPermission && 'enabled'),
+      sx: uploaderStyle,
+      onClick: () => openUploader(uploadLogoPrefix),
+      children: /*#__PURE__*/_jsx(Avatar, {
+        sx: {
+          height: 80,
+          width: 80
+        },
+        variant: "square",
+        alt: "Blocklet Logo",
+        src: logoUrl
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "config-label",
+      fontSize: 14,
+      mt: 4,
+      children: t('blocklet.config.logoRect')
+    }), /*#__PURE__*/_jsx(Box, {
+      mb: 1.5,
+      className: "config-desc",
+      children: t('blocklet.config.logoRectDesc')
+    }), /*#__PURE__*/_jsx(Box, {
+      className: classnames('uploader-wrapper', hasPermission && 'enabled'),
+      sx: uploaderStyle,
+      onClick: () => openUploader(uploadLogoRectPrefix),
+      children: /*#__PURE__*/_jsx("img", {
+        alt: "Blocklet Rect Logo",
+        src: rectLogoUrl,
+        style: {
+          height: '80px'
+        }
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "config-label",
+      fontSize: 14,
+      mt: 4,
+      children: t('blocklet.config.logoFavicon')
+    }), /*#__PURE__*/_jsx(Box, {
+      mb: 1.5,
+      className: "config-desc",
+      children: t('blocklet.config.logoFaviconDesc')
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'inline-flex',
+        cursor: hasPermission ? 'pointer' : 'default'
+      },
+      onClick: () => openUploader(uploadLogoFaviconPrefix),
+      children: /*#__PURE__*/_jsx(Avatar, {
+        variant: "square",
+        sx: {
+          width: 20,
+          height: 20
+        },
+        alt: "Blocklet Favicon Logo",
+        src: faviconUrl
+      })
+    }), /*#__PURE__*/_jsx(UploaderComponent, {
+      id: "\u200Buploader-logo",
+      ref: uploaderLogoRef,
+      popup: true,
+      onUploadFinish: () => {
+        uploaderLogoRef.current.close();
+      },
+      plugins: [],
+      apiPathProps: apiPathProps,
+      coreProps: {
+        restrictions: {
+          allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'],
+          maxFileSize: 1024 * 1024 * 10,
+          maxNumberOfFiles: 1
+        }
+      },
+      tusProps: {
+        headers: getSessionInHeader
+      }
+    }, "uploader-logo"), /*#__PURE__*/_jsx(Box, {
       className: "config-form",
       children: whoCanAccess === 'all' && blocklet.source === 'registry' && /*#__PURE__*/_jsxs(Box, {
         className: "config-item",
@@ -485,7 +593,6 @@ const Div = styled.div`
       flex-shrink: 0;
       padding: 0 24px;
       transform: translate(0, 0);
-      max-height: 60vh;
     }
   }
 
@@ -509,4 +616,34 @@ const Div = styled.div`
   .form-item {
     margin-top: 0;
   }
+
+  .uploader-wrapper {
+    display: inline-flex;
+    position: relative;
+    font-size: 0px;
+    &.enabled {
+      cursor: pointer;
+    }
+    &::after {
+      display: none;
+    }
+    &.enabled::after {
+      display: block;
+      opacity: 0;
+      position: absolute;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.2);
+      left: 0;
+      right: 0;
+      height: 2.2em;
+      color: white;
+      text-align: center;
+      font-size: 12px;
+      line-height: 2em;
+      transition: opacity 0.3s ease;
+    }
+    &:hover::after {
+      opacity: 1;
+    }
+  }
 `;

package/es/blocklet/publish/create-release.js

@@ -582,7 +582,7 @@ export default function CreateRelease({
               maxNumberOfFiles: 1
             }
           }
-        }, "uploader-screenshot"), /*#__PURE__*/_jsx(UploaderComponent, {
+        }, "uploader-logo"), /*#__PURE__*/_jsx(UploaderComponent, {
           id: "\u200Buploader-screenshot",
           ref: uploaderScreenshotRef,
           popup: true,

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

@@ -1,16 +1,32 @@
 import joinUrl from 'url-join';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
 import { useNodeContext } from '../contexts/node';
-import { isInstalling } from '../util';
+import { isInstalling, getLogoHash } from '../util';
+const getSearch = (blocklet, customLogo) => {
+  let search = '?v=';
+  if (customLogo) {
+    search += getLogoHash(customLogo);
+  } else {
+    search += `${blocklet?.meta?.version}${isInstalling(blocklet?.status) ? '~' : ''}`;
+  }
+  return search;
+};
 export default function useAppLogo({
   blocklet
 }) {
   const {
     inService
   } = useNodeContext();
+  const customLogo = (blocklet?.environments || []).find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_SQUARE)?.value;
+  const customRectLogo = (blocklet?.environments || []).find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_RECT)?.value;
+  const customFavicon = (blocklet?.environments || []).find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_FAVICON)?.value;
   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);
+  const logoUrl = joinUrl(prefix, `/blocklet/logo/${inService ? '' : blocklet.meta.did}`, getSearch(blocklet, customLogo));
+  const rectLogoUrl = joinUrl(prefix, `/blocklet/logo-rect/${inService ? '' : blocklet.meta.did}`, getSearch(blocklet, customRectLogo));
+  const faviconUrl = joinUrl(prefix, `/blocklet/logo-favicon/${inService ? '' : blocklet.meta.did}`, getSearch(blocklet, customFavicon));
   return {
-    logoUrl
+    logoUrl,
+    rectLogoUrl,
+    faviconUrl
   };
 }

package/es/locales/en.js

@@ -278,6 +278,7 @@ module.exports = {
     succeeded: 'Succeeded',
     subscription: 'Subscription',
     support: 'Support',
+    switch: 'Switch',
     team: 'Team',
     the: 'The',
     timeAgo: '{time} ago',
@@ -391,10 +392,11 @@ module.exports = {
       name: 'Blocklet Name',
       description: 'Blocklet Description',
       sk: 'Secret key for the blocklet wallet',
-      logo: '(Deprecated) Logo URL or path for the blocklet',
-      logoSquare: 'Square logo URL or path for the blocklet (optional, default to logo from blocklet store)',
-      logoRect: 'Horizontal logo URL or path for the blocklet (optional)',
-      logoFavicon: 'favicon URL or path for the blocklet (optional, default to square logo)',
+      logoSquare: 'App Logo',
+      logoRect: 'Rect logo',
+      logoRectDesc: 'Usually displayed at the top of the page, default to app logo',
+      logoFavicon: 'Favicon',
+      logoFaviconDesc: "Usually displayed in the browser's address bar or tab page, default to app logo",
       clusterSize: 'Instance count when run this blocklet in cluster mode',
       copyrightOwner: 'Copyright Owner (Display in footer)',
       copyrightYear: 'Copyright Year (Display in footer)',

package/es/locales/zh.js

@@ -283,6 +283,7 @@ module.exports = {
     succeeded: '成功',
     subscription: '订阅',
     support: '服务支持',
+    switch: '切换',
     team: '团队',
     the: '此',
     timeAgo: '{time}前',
@@ -395,10 +396,11 @@ module.exports = {
       name: '应用名称',
       description: '应用描述',
       sk: '应用账户私钥',
-      logo: '（即将废弃）应用 Logo 地址或路径',
-      logoSquare: '正方形 Logo 地址或路径 (可选，默认使用发布到 Store 的应用Logo)',
-      logoRect: '横版 Logo 地址或路径 (可选)',
-      logoFavicon: 'favicon 地址或路径 (可选，默认和正方形 Logo 相同)',
+      logoSquare: '应用 Logo',
+      logoRect: '横版 Logo',
+      logoRectDesc: '通常显示在页面顶部，默认和应用 Logo 相同',
+      logoFavicon: 'Favicon',
+      logoFaviconDesc: '通常显示在浏览器的地址栏或标签页中，默认和应用 Logo 相同',
       clusterSize: '以 Cluster 模式启动时的实例数量',
       copyrightOwner: '版权所有者 (展示在页脚中)',
       copyrightYear: '版权年份 (展示在页脚中)',

package/es/util/index.js

@@ -614,4 +614,5 @@ export const getSubscriptionURL = async ({
   return joinUrl(baseUrl, `/${nftId}/subscription?locale=${locale}&return-url=${encodeURIComponent(window.location.href)}`);
 };
 export const nanoid = (length = 16) => [...Array(length)].map(() => Math.random().toString(36)[2]).join('');
-export const getSystemDomains = domains => domains.filter(x => x.isProtected);
+export const getSystemDomains = domains => domains.filter(x => x.isProtected);
+export const getLogoHash = logo => encodeURIComponent((logo || '').split('/').slice(-1)[0].slice(0, 7));

package/lib/blocklet/configuration.js

@@ -9,12 +9,15 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Loop = _interopRequireDefault(require("@mui/icons-material/Loop"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 var _constant = require("@abtnode/constant");
 var _constant2 = require("@blocklet/constant");
 var _util = require("@blocklet/meta/lib/util");
@@ -28,12 +31,11 @@ var _permission = _interopRequireWildcard(require("../permission"));
 var _clearCache = _interopRequireDefault(require("../clear-cache"));
 var _appSk = _interopRequireDefault(require("./preferences/app-sk"));
 var _transferOwner = _interopRequireDefault(require("./transfer-owner"));
+var _useAppLogo = _interopRequireDefault(require("../hooks/use-app-logo"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 const _excluded = ["blocklet", "onUpdate", "hasPermission"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -42,10 +44,18 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const languages = Object.keys(_constant2.SUPPORTED_LANGUAGES).map(x => ({
   code: x,
   name: _constant2.SUPPORTED_LANGUAGES[x].nativeName
 }));
+
+// eslint-disable-next-line import/no-unresolved
+const UploaderComponent = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('@blocklet/uploader/react'))).then(res => ({
+  default: res.Uploader
+})));
+const uploadPrefix = '/blocklet/logo/upload';
 function BlockletEnvironment(_ref) {
   var _blocklet$settings;
   let {
@@ -54,7 +64,15 @@ function BlockletEnvironment(_ref) {
       hasPermission
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const node = (0, _node.useNodeContext)();
+  const {
+    api,
+    inService,
+    prefix,
+    getSessionInHeader,
+    ws: {
+      useSubscription
+    }
+  } = (0, _node.useNodeContext)();
   const {
     t
   } = (0, _react.useContext)(_context.LocaleContext);
@@ -64,12 +82,28 @@ function BlockletEnvironment(_ref) {
   const whoCanAccess = (0, _util.getWhoCanAccess)(blocklet);
   const publicToStore = blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.publicToStore;
   const disabled = loading || !hasPermission;
+  const uploaderLogoRef = (0, _react.useRef)(null);
   const {
-    inService,
-    ws: {
-      useSubscription
+    logoUrl,
+    rectLogoUrl,
+    faviconUrl
+  } = (0, _useAppLogo.default)({
+    blocklet
+  });
+  const [apiPathProps, setApiPathProps] = (0, _react.useState)();
+  const uploadLogoPrefix = (0, _urlJoin.default)(prefix, uploadPrefix, 'square', blocklet.meta.did);
+  const uploadLogoRectPrefix = (0, _urlJoin.default)(prefix, uploadPrefix, 'rect', blocklet.meta.did);
+  const uploadLogoFaviconPrefix = (0, _urlJoin.default)(prefix, uploadPrefix, 'favicon', blocklet.meta.did);
+  const openUploader = uploaderPrefix => {
+    if (!hasPermission) {
+      return;
     }
-  } = node;
+    setApiPathProps({
+      uploader: uploaderPrefix,
+      disableMediaKitPrefix: true
+    });
+    uploaderLogoRef.current.open();
+  };
   const {
     did
   } = blocklet.meta;
@@ -91,10 +125,6 @@ function BlockletEnvironment(_ref) {
   const deletable = !customDelete || customDelete.value === 'yes';
   const customLanguages = blocklet.environments.find(x => x.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LANGUAGES);
   const customUrl = blocklet.environments.find(x => x.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_URL);
-  const customLogoSquare = blocklet.environments.find(x => x.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_SQUARE);
-  const customLogoRect = blocklet.environments.find(x => x.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_RECT);
-  const customLogoFavicon = blocklet.environments.find(x => x.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_FAVICON);
-  const customLogoDeprecated = blocklet.environments.find(x => x.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO);
   const copyrightOwner = blocklet.environments.find(x => x.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_COPYRIGHT_OWNER);
   const copyrightYear = blocklet.environments.find(x => x.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_COPYRIGHT_YEAR);
   const configurableEnvs = [{
@@ -109,22 +139,6 @@ function BlockletEnvironment(_ref) {
     key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_URL,
     description: t('blocklet.config.appUrl'),
     value: customUrl ? customUrl.value : ''
-  }, {
-    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_SQUARE,
-    description: t('blocklet.config.logoSquare'),
-    value: customLogoSquare ? customLogoSquare.value : ''
-  }, {
-    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_RECT,
-    description: t('blocklet.config.logoRect'),
-    value: customLogoRect ? customLogoRect.value : ''
-  }, {
-    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_FAVICON,
-    description: t('blocklet.config.logoFavicon'),
-    value: customLogoFavicon ? customLogoFavicon.value : ''
-  }, {
-    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO,
-    description: t('blocklet.config.logo'),
-    value: customLogoDeprecated ? customLogoDeprecated.value : ''
   }, {
     key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_COPYRIGHT_OWNER,
     description: t('blocklet.config.copyrightOwner'),
@@ -155,7 +169,7 @@ function BlockletEnvironment(_ref) {
       } = e.target;
       const {
         blocklet: data
-      } = await node.api.configPublicToStore({
+      } = await api.configPublicToStore({
         input: {
           did: blocklet.meta.did,
           publicToStore: checked
@@ -187,7 +201,7 @@ function BlockletEnvironment(_ref) {
       setLoading(true);
       const {
         blocklet: data
-      } = await node.api.configBlocklet({
+      } = await api.configBlocklet({
         input: {
           did: blocklet.meta.did,
           configs: params
@@ -211,7 +225,7 @@ function BlockletEnvironment(_ref) {
       } = e.target;
       const {
         blocklet: data
-      } = await node.api.configBlocklet({
+      } = await api.configBlocklet({
         input: {
           did: blocklet.meta.did,
           configs: [{
@@ -236,7 +250,7 @@ function BlockletEnvironment(_ref) {
     try {
       setLoading(true);
       const corsAllowedOrigins = newValue.length ? newValue : ['__none__'];
-      await node.api.updateRoutingSite({
+      await api.updateRoutingSite({
         input: {
           id: site.id,
           corsAllowedOrigins,
@@ -259,7 +273,7 @@ function BlockletEnvironment(_ref) {
     try {
       const {
         blocklet: data
-      } = await node.api.configBlocklet({
+      } = await api.configBlocklet({
         input: {
           did: blocklet.meta.did,
           configs: [{
@@ -275,6 +289,11 @@ function BlockletEnvironment(_ref) {
       setLoading(false);
     }
   };
+  const uploaderStyle = {
+    '&::after': {
+      content: "\"".concat(t('common.switch'), "\"")
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread({}, rest), {}, {
     children: [configurableEnvs.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       className: "config-form",
@@ -294,6 +313,95 @@ function BlockletEnvironment(_ref) {
         onSubmit: value => onSubmitConfig(item.key, value)
       })]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-form",
+      component: _Divider.default,
+      my: 3
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-label",
+      fontSize: 14,
+      mb: 1,
+      sx: {
+        flexGrow: 0,
+        width: 'auto'
+      },
+      children: t('blocklet.config.logoSquare')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: (0, _classnames.default)('uploader-wrapper', hasPermission && 'enabled'),
+      sx: uploaderStyle,
+      onClick: () => openUploader(uploadLogoPrefix),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        sx: {
+          height: 80,
+          width: 80
+        },
+        variant: "square",
+        alt: "Blocklet Logo",
+        src: logoUrl
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-label",
+      fontSize: 14,
+      mt: 4,
+      children: t('blocklet.config.logoRect')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mb: 1.5,
+      className: "config-desc",
+      children: t('blocklet.config.logoRectDesc')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: (0, _classnames.default)('uploader-wrapper', hasPermission && 'enabled'),
+      sx: uploaderStyle,
+      onClick: () => openUploader(uploadLogoRectPrefix),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        alt: "Blocklet Rect Logo",
+        src: rectLogoUrl,
+        style: {
+          height: '80px'
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-label",
+      fontSize: 14,
+      mt: 4,
+      children: t('blocklet.config.logoFavicon')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mb: 1.5,
+      className: "config-desc",
+      children: t('blocklet.config.logoFaviconDesc')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        display: 'inline-flex',
+        cursor: hasPermission ? 'pointer' : 'default'
+      },
+      onClick: () => openUploader(uploadLogoFaviconPrefix),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        variant: "square",
+        sx: {
+          width: 20,
+          height: 20
+        },
+        alt: "Blocklet Favicon Logo",
+        src: faviconUrl
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(UploaderComponent, {
+      id: "\u200Buploader-logo",
+      ref: uploaderLogoRef,
+      popup: true,
+      onUploadFinish: () => {
+        uploaderLogoRef.current.close();
+      },
+      plugins: [],
+      apiPathProps: apiPathProps,
+      coreProps: {
+        restrictions: {
+          allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'],
+          maxFileSize: 1024 * 1024 * 10,
+          maxNumberOfFiles: 1
+        }
+      },
+      tusProps: {
+        headers: getSessionInHeader
+      }
+    }, "uploader-logo"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       className: "config-form",
       children: whoCanAccess === 'all' && blocklet.source === 'registry' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         className: "config-item",
@@ -490,4 +598,4 @@ BlockletEnvironment.defaultProps = {
   onUpdate: () => {},
   hasPermission: false
 };
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 24px;\n  .config-form {\n    flex-grow: 1;\n    overflow-y: auto;\n    ", " {\n      width: 100%;\n      flex-shrink: 0;\n      padding: 0 24px;\n      transform: translate(0, 0);\n      max-height: 60vh;\n    }\n  }\n\n  .config-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 16px 0;\n  }\n\n  .config-label {\n    font-weight: bold;\n  }\n\n  .config-desc {\n    font-weight: normal;\n    font-size: 12px;\n    color: #666;\n  }\n\n  .form-item {\n    margin-top: 0;\n  }\n"])), props => props.theme.breakpoints.down('md'));
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 24px;\n  .config-form {\n    flex-grow: 1;\n    overflow-y: auto;\n    ", " {\n      width: 100%;\n      flex-shrink: 0;\n      padding: 0 24px;\n      transform: translate(0, 0);\n    }\n  }\n\n  .config-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 16px 0;\n  }\n\n  .config-label {\n    font-weight: bold;\n  }\n\n  .config-desc {\n    font-weight: normal;\n    font-size: 12px;\n    color: #666;\n  }\n\n  .form-item {\n    margin-top: 0;\n  }\n\n  .uploader-wrapper {\n    display: inline-flex;\n    position: relative;\n    font-size: 0px;\n    &.enabled {\n      cursor: pointer;\n    }\n    &::after {\n      display: none;\n    }\n    &.enabled::after {\n      display: block;\n      opacity: 0;\n      position: absolute;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.2);\n      left: 0;\n      right: 0;\n      height: 2.2em;\n      color: white;\n      text-align: center;\n      font-size: 12px;\n      line-height: 2em;\n      transition: opacity 0.3s ease;\n    }\n    &:hover::after {\n      opacity: 1;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));

package/lib/blocklet/publish/create-release.js

@@ -592,7 +592,7 @@ function CreateRelease(_ref2) {
               maxNumberOfFiles: 1
             }
           }
-        }, "uploader-screenshot"), /*#__PURE__*/(0, _jsxRuntime.jsx)(UploaderComponent, {
+        }, "uploader-logo"), /*#__PURE__*/(0, _jsxRuntime.jsx)(UploaderComponent, {
           id: "\u200Buploader-screenshot",
           ref: uploaderScreenshotRef,
           popup: true,

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

@@ -5,21 +5,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useAppLogo;
 var _urlJoin = _interopRequireDefault(require("url-join"));
+var _constant = require("@blocklet/constant");
 var _node = require("../contexts/node");
 var _util = require("../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const getSearch = (blocklet, customLogo) => {
+  let search = '?v=';
+  if (customLogo) {
+    search += (0, _util.getLogoHash)(customLogo);
+  } else {
+    var _blocklet$meta;
+    search += "".concat(blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.version).concat((0, _util.isInstalling)(blocklet === null || blocklet === void 0 ? void 0 : blocklet.status) ? '~' : '');
+  }
+  return search;
+};
 function useAppLogo(_ref) {
-  var _window$env, _blocklet$meta;
+  var _find, _find2, _find3, _window$env;
   let {
     blocklet
   } = _ref;
   const {
     inService
   } = (0, _node.useNodeContext)();
+  const customLogo = (_find = ((blocklet === null || blocklet === void 0 ? void 0 : blocklet.environments) || []).find(x => x.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_SQUARE)) === null || _find === void 0 ? void 0 : _find.value;
+  const customRectLogo = (_find2 = ((blocklet === null || blocklet === void 0 ? void 0 : blocklet.environments) || []).find(x => x.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_RECT)) === null || _find2 === void 0 ? void 0 : _find2.value;
+  const customFavicon = (_find3 = ((blocklet === null || blocklet === void 0 ? void 0 : blocklet.environments) || []).find(x => x.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_FAVICON)) === null || _find3 === void 0 ? void 0 : _find3.value;
   const prefix = ((_window$env = window.env) === null || _window$env === void 0 ? void 0 : _window$env.apiPrefix) || '/';
-  const search = "?v=".concat(blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.version).concat((0, _util.isInstalling)(blocklet === null || blocklet === void 0 ? void 0 : blocklet.status) ? '~' : '');
-  const logoUrl = (0, _urlJoin.default)(prefix, "/blocklet/logo/".concat(inService ? '' : blocklet.meta.did), search);
+  const logoUrl = (0, _urlJoin.default)(prefix, "/blocklet/logo/".concat(inService ? '' : blocklet.meta.did), getSearch(blocklet, customLogo));
+  const rectLogoUrl = (0, _urlJoin.default)(prefix, "/blocklet/logo-rect/".concat(inService ? '' : blocklet.meta.did), getSearch(blocklet, customRectLogo));
+  const faviconUrl = (0, _urlJoin.default)(prefix, "/blocklet/logo-favicon/".concat(inService ? '' : blocklet.meta.did), getSearch(blocklet, customFavicon));
   return {
-    logoUrl
+    logoUrl,
+    rectLogoUrl,
+    faviconUrl
   };
 }

package/lib/locales/en.js

@@ -280,6 +280,7 @@ module.exports = {
     succeeded: 'Succeeded',
     subscription: 'Subscription',
     support: 'Support',
+    switch: 'Switch',
     team: 'Team',
     the: 'The',
     timeAgo: '{time} ago',
@@ -393,10 +394,11 @@ module.exports = {
       name: 'Blocklet Name',
       description: 'Blocklet Description',
       sk: 'Secret key for the blocklet wallet',
-      logo: '(Deprecated) Logo URL or path for the blocklet',
-      logoSquare: 'Square logo URL or path for the blocklet (optional, default to logo from blocklet store)',
-      logoRect: 'Horizontal logo URL or path for the blocklet (optional)',
-      logoFavicon: 'favicon URL or path for the blocklet (optional, default to square logo)',
+      logoSquare: 'App Logo',
+      logoRect: 'Rect logo',
+      logoRectDesc: 'Usually displayed at the top of the page, default to app logo',
+      logoFavicon: 'Favicon',
+      logoFaviconDesc: "Usually displayed in the browser's address bar or tab page, default to app logo",
       clusterSize: 'Instance count when run this blocklet in cluster mode',
       copyrightOwner: 'Copyright Owner (Display in footer)',
       copyrightYear: 'Copyright Year (Display in footer)',

package/lib/locales/zh.js

@@ -285,6 +285,7 @@ module.exports = {
     succeeded: '成功',
     subscription: '订阅',
     support: '服务支持',
+    switch: '切换',
     team: '团队',
     the: '此',
     timeAgo: '{time}前',
@@ -397,10 +398,11 @@ module.exports = {
       name: '应用名称',
       description: '应用描述',
       sk: '应用账户私钥',
-      logo: '（即将废弃）应用 Logo 地址或路径',
-      logoSquare: '正方形 Logo 地址或路径 (可选，默认使用发布到 Store 的应用Logo)',
-      logoRect: '横版 Logo 地址或路径 (可选)',
-      logoFavicon: 'favicon 地址或路径 (可选，默认和正方形 Logo 相同)',
+      logoSquare: '应用 Logo',
+      logoRect: '横版 Logo',
+      logoRectDesc: '通常显示在页面顶部，默认和应用 Logo 相同',
+      logoFavicon: 'Favicon',
+      logoFaviconDesc: '通常显示在浏览器的地址栏或标签页中，默认和应用 Logo 相同',
       clusterSize: '以 Cluster 模式启动时的实例数量',
       copyrightOwner: '版权所有者 (展示在页脚中)',
       copyrightYear: '版权年份 (展示在页脚中)',

package/lib/util/index.js

@@ -30,7 +30,7 @@ exports.getBlockletUrl = getBlockletUrl;
 exports.getBlockletUrlParams = void 0;
 exports.getBlockletUrls = getBlockletUrls;
 exports.getExplorerLink = getExplorerLink;
-exports.getTransferAppLink = exports.getSystemDomains = exports.getSubscriptionURL = exports.getStoreList = exports.getRenewBlockletURL = exports.getPathPrefix = exports.getIssuePassportLink = exports.getInviteLink = void 0;
+exports.getTransferAppLink = exports.getSystemDomains = exports.getSubscriptionURL = exports.getStoreList = exports.getRenewBlockletURL = exports.getPathPrefix = exports.getLogoHash = exports.getIssuePassportLink = exports.getInviteLink = void 0;
 exports.getWebWalletUrl = getWebWalletUrl;
 exports.isNewStoreUrl = exports.isInstalling = exports.isDownloading = exports.isChrome = exports.isCertificateMatch = exports.isBlockletDev = void 0;
 exports.isProtectedRole = isProtectedRole;
@@ -727,4 +727,6 @@ const nanoid = function nanoid() {
 };
 exports.nanoid = nanoid;
 const getSystemDomains = domains => domains.filter(x => x.isProtected);
-exports.getSystemDomains = getSystemDomains;
+exports.getSystemDomains = getSystemDomains;
+const getLogoHash = logo => encodeURIComponent((logo || '').split('/').slice(-1)[0].slice(0, 7));
+exports.getLogoHash = getLogoHash;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.17-beta-ce49fe0e",
+  "version": "1.16.17-beta-2679e686",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -27,9 +27,9 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.17-beta-ce49fe0e",
-    "@abtnode/constant": "1.16.17-beta-ce49fe0e",
-    "@abtnode/util": "1.16.17-beta-ce49fe0e",
+    "@abtnode/auth": "1.16.17-beta-2679e686",
+    "@abtnode/constant": "1.16.17-beta-2679e686",
+    "@abtnode/util": "1.16.17-beta-2679e686",
     "@ahooksjs/use-url-state": "^3.5.1",
     "@arcblock/did": "^1.18.92",
     "@arcblock/did-connect": "^2.7.29",
@@ -39,12 +39,12 @@
     "@arcblock/react-hooks": "^2.7.29",
     "@arcblock/terminal": "^2.7.29",
     "@arcblock/ux": "^2.7.29",
-    "@blocklet/constant": "1.16.17-beta-ce49fe0e",
-    "@blocklet/launcher-layout": "2.2.21",
+    "@blocklet/constant": "1.16.17-beta-2679e686",
+    "@blocklet/launcher-layout": "2.2.22",
     "@blocklet/list": "^0.12.45",
-    "@blocklet/meta": "1.16.17-beta-ce49fe0e",
+    "@blocklet/meta": "1.16.17-beta-2679e686",
     "@blocklet/ui-react": "^2.7.29",
-    "@blocklet/uploader": "^0.0.29",
+    "@blocklet/uploader": "^0.0.32",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@iconify/react": "^4.0.0",
@@ -100,7 +100,7 @@
     "babel-plugin-inline-react-svg": "^1.1.2",
     "glob": "^10.3.3"
   },
-  "gitHead": "d8a04ff2ef9cd52a02d019bc2c9a743785e869c3",
+  "gitHead": "abbe4a479b379552cd9ebd8c27732b360844cb73",
   "exports": {
     ".": {
       "import": "./es/index.js",