shineout 3.10.3-beta.6 → 3.10.3-beta.8

package/cjs/config.d.ts

@@ -0,0 +1,2 @@
+import { setConfig as setBaseConfig } from '@sheinx/base';
+export declare const setConfig: typeof setBaseConfig;

package/cjs/config.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setConfig = void 0;
+var _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _preloadStyle = require("./message/preload-style");
+// 样式相关的配置由 shineout-style 处理，base 不依赖 shineout-style，在这里转发
+var setConfig = exports.setConfig = function setConfig(option) {
+  (0, _base.setConfig)(option);
+  if (option && 'keepStyleSheet' in option) {
+    (0, _shineoutStyle.setJssConfig)({
+      keepStyleSheet: !!option.keepStyleSheet
+    });
+    // 和 normalize 一样在初始化时插入 Message 样式，避免第一次弹出时的开销
+    if (option.keepStyleSheet) (0, _preloadStyle.preloadMessageStyle)();
+  }
+};

package/cjs/index.d.ts

@@ -51,7 +51,8 @@ export { default as Tree } from './tree';
 export { default as TreeSelect } from './tree-select';
 export { default as Upload } from './upload';
 export { default as Watermark } from './watermark';
-export { setConfig, config, setLocale, setIcons, icons } from '@sheinx/base';
+export { config, setLocale, setIcons, icons } from '@sheinx/base';
+export { setConfig } from './config';
 export type { ConfigOption } from '@sheinx/base';
 export { setToken, useToken } from '@sheinx/theme';
 export { default as Tokens } from '@sheinx/theme';

package/cjs/index.js

@@ -59,11 +59,11 @@ var _exportNames = {
   TreeSelect: true,
   Upload: true,
   Watermark: true,
-  setConfig: true,
   config: true,
   setLocale: true,
   setIcons: true,
   icons: true,
+  setConfig: true,
   setToken: true,
   useToken: true,
   Tokens: true,
@@ -433,7 +433,7 @@ Object.defineProperty(exports, "scopeNormalizeStyle", {
 Object.defineProperty(exports, "setConfig", {
   enumerable: true,
   get: function get() {
-    return _base.setConfig;
+    return _config.setConfig;
   }
 });
 Object.defineProperty(exports, "setIcons", {
@@ -521,6 +521,7 @@ var _treeSelect = _interopRequireDefault(require("./tree-select"));
 var _upload = _interopRequireDefault(require("./upload"));
 var _watermark = _interopRequireDefault(require("./watermark"));
 var _base = require("@sheinx/base");
+var _config = require("./config");
 var _theme = _interopRequireWildcard(require("@sheinx/theme"));
 var _shineoutStyle = require("@sheinx/shineout-style");
 var _utils = _interopRequireWildcard(require("./utils"));
@@ -545,5 +546,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.10.3-beta.6'
+  version: '3.10.3-beta.8'
 };

package/cjs/message/preload-style.d.ts

@@ -0,0 +1 @@
+export declare const preloadMessageStyle: () => void;

package/cjs/message/preload-style.js

@@ -0,0 +1,33 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preloadMessageStyle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@sheinx/hooks");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var preloaded = false;
+
+// 挂载一次 Message 用到的样式 hook 后立即卸载，配合 keepStyleSheet 让样式表常驻
+// 这样第一次弹出 Message 时不用在点击回调里插入样式表
+var Preload = function Preload(props) {
+  (0, _shineoutStyle.useMessageStyle)();
+  (0, _shineoutStyle.useAlertStyle)();
+  (0, _react.useEffect)(function () {
+    _hooks.util.ReactUnmount(props.container);
+  }, []);
+  return null;
+};
+var preloadMessageStyle = exports.preloadMessageStyle = function preloadMessageStyle() {
+  if (preloaded || typeof document === 'undefined') return;
+  preloaded = true;
+  var container = document.createElement('div');
+  _hooks.util.ReactRender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Preload, {
+    container: container
+  }), container);
+};

package/dist/shineout.js

@@ -6470,7 +6470,7 @@ __webpack_require__.d(__webpack_exports__, {
   "default": function() { return /* binding */ src_0; },
   icons: function() { return /* reexport */ icons; },
   scopeNormalizeStyle: function() { return /* reexport */ scopeNormalizeStyle; },
-  setConfig: function() { return /* reexport */ setConfig; },
+  setConfig: function() { return /* reexport */ src_config_setConfig; },
   setIcons: function() { return /* reexport */ setIcons; },
   setJssConfig: function() { return /* reexport */ setJssConfig; },
   setLocale: function() { return /* reexport */ setLocale; },
@@ -8723,7 +8723,8 @@ var defaultConfig = {
   avatar: {},
   direction: 'ltr',
   popupContainer: null,
-  popupEsc: true
+  popupEsc: true,
+  keepStyleSheet: false
 };
 var state = createWithHooks(defaultConfig);
 var config_config = snapshot(state.mutate);
@@ -8743,7 +8744,7 @@ function getDefaultContainer() {
 var useConfig = function useConfig() {
   return state.useSnapshot();
 };
-var setConfig = function setConfig(option) {
+var config_setConfig = function setConfig(option) {
   for (var _i = 0, _Object$entries = Object.entries(option); _i < _Object$entries.length; _i++) {
     var _Object$entries$_i = slicedToArray_default()(_Object$entries[_i], 2),
       key = _Object$entries$_i[0],
@@ -13736,7 +13737,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.10.3-beta.6');
+/* harmony default export */ var version = ('3.10.3-beta.8');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -13751,6 +13752,23 @@ var setJssConfig = function setJssConfig(newConfig) {
 var getJssConfig = function getJssConfig() {
   return jss_style_config;
 };
+
+// react-jss 在样式表引用计数归零时会 detach，把 style 标签移出文档，下次挂载再插回
+// 每次插入/移除样式表都会让浏览器重新处理整套样式（Message、Modal.confirm 这类每次打开都新建 root 的组件尤其明显，拖慢 INP）
+// 开启 keepStyleSheet 后跳过 detach，类名带版本哈希，常驻不会影响其它元素
+var shineoutElements = new WeakSet();
+var keepStyleSheetPlugin = {
+  onProcessSheet: function onProcessSheet(sheet) {
+    if (!sheet) return;
+    var element = sheet.options.element;
+    if (!element || !shineoutElements.has(element)) return;
+    var detach = sheet.detach.bind(sheet);
+    sheet.detach = function () {
+      return jss_style_config.keepStyleSheet ? sheet : detach();
+    };
+  }
+};
+react_jss_esm_defaultJss.use(keepStyleSheetPlugin);
 var stringToHash = function stringToHash(str) {
   var hash = 0;
   if (str.length === 0) return '';
@@ -13785,6 +13803,7 @@ var createClassname = function createClassname(rule, sheet) {
 
 var styled = function styled(style, ns) {
   var styleElement = typeof window !== 'undefined' ? document.createElement('style') : undefined;
+  if (styleElement) shineoutElements.add(styleElement);
   var hoc = createUseStyles(jss_style_handleStyle(style), {
     name: ns,
     generateId: createClassname,
@@ -13897,7 +13916,7 @@ function set(name, value) {
   if (value !== undefined && name in src_config_config) src_config_config[name] = value;
   noti.dispatch(name);
 }
-var config_setConfig = function setConfig(options) {
+var setConfig = function setConfig(options) {
   var _iterator = _createForOfIteratorHelper(entries(options)),
     _step;
   try {
@@ -27954,18 +27973,13 @@ var stepsStyle = {
   arrowIcon: {
     position: 'absolute',
     top: 0,
-    right: 0.25,
+    right: 0,
     bottom: 0,
-    transform: 'translateX(100%)',
+    // 1 倍屏下向左压进内容区 0.5px，盖住小数尺寸下亚像素对齐和抗锯齿产生的缝；2 倍屏误差小，偏移 0.25px
+    transform: 'translateX(calc(100% - 0.5px))',
     zIndex: 1,
     '@media (min-resolution: 2dppx)': {
-      right: 0
-    },
-    '$withDescription &': {
-      transform: 'translateX(calc(100% - 0.5px))',
-      '@media (min-resolution: 2dppx)': {
-        transform: 'translateX(100%)'
-      }
+      transform: 'translateX(calc(100% - 0.25px))'
     },
     '& > svg': {
       display: 'block',
@@ -27995,9 +28009,12 @@ var stepsStyle = {
       display: 'none'
     },
     '$arrow[dir=rtl] &': {
-      left: '0.25px',
+      left: 0,
       right: 'auto',
-      transform: 'translateX(-100%)',
+      transform: 'translateX(calc(-100% + 0.5px))',
+      '@media (min-resolution: 2dppx)': {
+        transform: 'translateX(calc(-100% + 0.25px))'
+      },
       '& > svg': {
         transform: "rotate(180deg)"
       }
@@ -39384,7 +39401,7 @@ function setLocale(arg) {
       clone: true
     });
   }
-  setConfig({
+  config_setConfig({
     locale: locale
   });
 }
@@ -78022,6 +78039,47 @@ var watermark_jssStyle = {
 var WatermarkComp = src_watermark_watermark;
 WatermarkComp.displayName = 'ShineoutWatermark';
 /* harmony default export */ var src_watermark_0 = (WatermarkComp);
+;// CONCATENATED MODULE: ./src/message/preload-style.tsx
+
+
+
+
+var preloaded = false;
+
+// 挂载一次 Message 用到的样式 hook 后立即卸载，配合 keepStyleSheet 让样式表常驻
+// 这样第一次弹出 Message 时不用在点击回调里插入样式表
+var Preload = function Preload(props) {
+  useMessageStyle();
+  useAlertStyle();
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    ReactUnmount(props.container);
+  }, []);
+  return null;
+};
+var preloadMessageStyle = function preloadMessageStyle() {
+  if (preloaded || typeof document === 'undefined') return;
+  preloaded = true;
+  var container = document.createElement('div');
+  ReactRender( /*#__PURE__*/(0,jsx_runtime.jsx)(Preload, {
+    container: container
+  }), container);
+};
+;// CONCATENATED MODULE: ./src/config.ts
+
+
+
+
+// 样式相关的配置由 shineout-style 处理，base 不依赖 shineout-style，在这里转发
+var src_config_setConfig = function setConfig(option) {
+  config_setConfig(option);
+  if (option && 'keepStyleSheet' in option) {
+    setJssConfig({
+      keepStyleSheet: !!option.keepStyleSheet
+    });
+    // 和 normalize 一样在初始化时插入 Message 样式，避免第一次弹出时的开销
+    if (option.keepStyleSheet) preloadMessageStyle();
+  }
+};
 ;// CONCATENATED MODULE: ../theme/src/hooks/useToken/use-token.ts
 
 
@@ -80363,10 +80421,11 @@ var watermark_interface = __webpack_require__(6640);
 
 
 
+
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.10.3-beta.6'
+  version: '3.10.3-beta.8'
 });
 }();
 /******/ 	return __webpack_exports__;