@semcore/utils - npm Package Compare versions

Comparing version 3.13.0 to 3.16.2

CHANGELOG.md

@@ -5,2 +5,63 @@ # Changelog
 
+## [3.16.2] - 2020-06-10
+
+### Fixed
+
+- Убрана dev зависимость `core`.
+
+## [3.16.1] - 2020-06-08
+
+### Fixed
+
+- Исправлен проброс свойств в функции `i18nEnhance`.
+
+## [3.16.0] - 2020-06-03
+
+### Added
+
+- Добавлена проверка `children` свойств на одиночных тегах в `propsForElement`
+- функцию `i18nEnhance` для работы с переводами
+
+## [3.15.4] - 2020-06-01
+
+### Fixed
+
+- Добавлен tabIndex по умолчанию для `keyboardFocusEnhance`
+
+## [3.15.3] - 2020-05-29
+
+### Fixed
+
+- В `logger` убрано обращение к window, так как возможен запуск на сервере
+
+### Changed
+
+- `injectStyle` не вставляет одинаковые стили два раза
+
+## [3.15.1] - 2020-05-19
+
+### Fixed
+
+- `useForkRef` теперь возвращает memo функцию, а не ref
+- Убрана ошибка в `autoFocusEnhance` при исчезновении ноды
+
+## [3.15.0] - 2020-04-27
+
+### Added
+
+- Функция `addonTextChildren` теперь может принимать массив `Addon-ов`.
+
+## [3.14.1] - 2020-04-24
+
+### Added
+
+- Добавлена функция `getNodeByRef` для получения dom node из ref-а.
+- Добавлена функция `findComponent` для поиска компонентов в `Children`.
+
+## [3.13.2] - 2020-04-16
+
+### Fixed
+
+- Добавлено описание интерфейса `autoFocusEnhance`
+
 ## [3.13.0] - 2020-04-10
@@ -10,3 +71,3 @@
 
-- Добавлено описание интерфеса `autoFocusEnhance`
+- Добавлена функция `getOriginChildren` для поиска оригинального children.
 
@@ -13,0 +74,0 @@ ## [3.12.1] - 2020-04-03

lib/addonTextChildren.d.ts

 /// <reference types="react" />
 import React from 'react';
-declare function addonTextChildren(Children: any, Text: React.ComponentType, Addon: React.ComponentType): any;
+declare function addonTextChildren(Children: any, Text: React.ComponentType, Addon: React.ComponentType | React.ComponentType[]): any;
 export { addonTextChildren as default };

lib/addonTextChildren.js

@@ -8,2 +8,4 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _react = _interopRequireDefault(require("react"));
@@ -13,8 +15,12 @@
 
+var _getOriginChildren = _interopRequireDefault(require("./getOriginChildren"));
+
 function addonTextChildren(Children, Text, Addon) {
-  if (typeof Children.origin === 'function') {
+  var children = (0, _getOriginChildren["default"])(Children);
+
+  if (typeof children === 'function') {
     return _react["default"].createElement(Children, null);
   }
 
-  return _react["default"].Children.toArray(Children.origin).some(function (element) {
+  return _react["default"].Children.toArray(children).some(function (element) {
     if (!_react["default"].isValidElement(element)) return false;
@@ -35,3 +41,8 @@ if (element.type === _react["default"].Fragment) return true;
     var inheritedNames = element.type[_core.INHERITED_NAME] || [element.type.displayName];
-    return inheritedNames.includes(Text.displayName) || inheritedNames.includes(Addon.displayName);
+    var addonNames = Array.isArray(Addon) ? Addon.map(function (Component) {
+      return Component.displayName;
+    }) : [Addon.displayName];
+    return [Text.displayName].concat((0, _toConsumableArray2["default"])(addonNames)).find(function (name) {
+      return inheritedNames.includes(name);
+    });
   }) ? _react["default"].createElement(Children, null) : _react["default"].createElement(Text, null, _react["default"].createElement(Children, null));
@@ -38,0 +49,0 @@ }

lib/assignProps.js

@@ -59,6 +59,3 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
   if (source.ref) {
-    newProps.ref = function (ref) {
-      (0, _ref.setRef)(source.ref, ref);
-      (0, _ref.setRef)(props.ref, ref);
-    };
+    newProps.ref = (0, _ref.forkRef)(source.ref, props.ref);
   }
@@ -65,0 +62,0 @@

lib/enhances/autoFocusEnhance.d.ts

 interface IWithAutoFocusEnhanceProps {
+    /** Нативный автофокус, но с поддержкой внутри модальных окон, так же можно передать количество ms до срабатывания фокуса */
     autoFocus?: Boolean | Number;
@@ -3,0 +4,0 @@ }

lib/enhances/autoFocusEnhance.js

@@ -42,3 +42,5 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
       var timer = setTimeout(function () {
-        return nodeRef.current.focus();
+        var _nodeRef$current;
+
+        return (_nodeRef$current = nodeRef.current) === null || _nodeRef$current === void 0 ? void 0 : _nodeRef$current.focus();
       }, autoFocus || 0);
@@ -45,0 +47,0 @@ return function () {

lib/enhances/keyboardFocusEnhance.js

@@ -22,3 +22,4 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
   return function (props) {
-    var tabIndex = props.tabIndex,
+    var _props$tabIndex = props.tabIndex,
+        tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
         disabled = props.disabled;
@@ -25,0 +26,0 @@

lib/enhances/WithI18n.d.ts

@@ -11,4 +11,5 @@ /// <reference types="react" />
 };
+declare const Context: React.Context<LocaleKeys>;
 declare const I18nProvider: React.Provider<LocaleKeys>, I18nConsumer: React.Consumer<LocaleKeys>;
-declare function getText(dictionaries: Dictionary, locale: LocaleKeys): (key: React.ReactText) => string;
+declare function getText(dictionaries: Dictionary, locale: LocaleKeys): (key: keyof DictionaryItem) => string;
 interface IWithI18nInjectedProps {
@@ -30,4 +31,4 @@ getText: WithI18n['getText'];
 }
-declare const useI18n: (dictionary: Dictionary, locale?: LocaleKeys) => (key: React.ReactText) => string;
+declare const useI18n: (dictionary: Dictionary, locale?: LocaleKeys) => (key: keyof DictionaryItem) => string;
 declare const _default: (options?: {}) => (WrappedComponent: any) => any;
-export { _default as default, LocaleKeys, DictionaryItem, Dictionary, IWithI18nInjectedProps, IWithI18nProps, useI18n, I18nProvider, I18nConsumer };
+export { _default as default, LocaleKeys, DictionaryItem, Dictionary, Context, IWithI18nInjectedProps, IWithI18nProps, useI18n, I18nProvider, I18nConsumer };

lib/enhances/WithI18n.js

@@ -6,3 +6,3 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 });
-exports.I18nConsumer = exports.I18nProvider = exports.useI18n = exports["default"] = void 0;
+exports.I18nConsumer = exports.I18nProvider = exports.useI18n = exports["default"] = exports.Context = void 0;
 
@@ -28,2 +28,3 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var Context = (0, _react.createContext)('en');
+exports.Context = Context;
 var I18nProvider = Context.Provider,
@@ -30,0 +31,0 @@ I18nConsumer = Context.Consumer;

lib/injectStyle.js

@@ -15,2 +15,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+function hashCode(str) {
+  var hash = 0,
+      i,
+      chr;
+
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+
+  return hash;
+}
+
 function injectStyle(css) {
@@ -25,3 +39,3 @@ if ((typeof window === "undefined" ? "undefined" : (0, _typeof2["default"])(window)) === 'object') {
         // @ts-ignore
-        var version = "3.13.0";
+        var version = "3.16.2";
         sh = document.createElement('style');
@@ -34,3 +48,8 @@ sh.setAttribute('data-ui-v', version);
 
-    sh.insertAdjacentText('beforeend', css);
+    var hash = Math.abs(hashCode(css));
+
+    if (!sh.dataset[hash]) {
+      sh.dataset[hash] = true;
+      sh.insertAdjacentText('beforeend', css);
+    }
   }
@@ -37,0 +56,0 @@ }

lib/logger.js

@@ -17,3 +17,5 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
     (0, _classCallCheck2["default"])(this, Logger);
-    this.logger = logger;
+    this.logger = logger || {
+      warn: function warn() {}
+    };
   }
@@ -41,5 +43,5 @@
 
-var _default = new Logger(window.console);
+var _default = new Logger(console);
 
 exports["default"] = _default;
 //# sourceMappingURL=logger.js.map

lib/propsForElement.js

@@ -42,2 +42,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.validAttr = validAttr;
+var omittedCloseTags = {
+  area: true,
+  base: true,
+  br: true,
+  col: true,
+  embed: true,
+  hr: true,
+  img: true,
+  input: true,
+  keygen: true,
+  link: true,
+  meta: true,
+  param: true,
+  source: true,
+  track: true,
+  wbr: true,
+  // because Children default value [Object object]
+  textarea: true
+};
 
@@ -49,3 +68,4 @@ function propsForElement(props, element) {
     return Object.keys(props).reduce(function (acc, propName) {
-      if (validAttr(propName)) {
+      // @ts-ignore
+      if (validAttr(propName) && !(omittedCloseTags[element] && propName === 'children')) {
         acc[propName] = props[propName];
@@ -52,0 +72,0 @@ }

lib/ref.d.ts

@@ -1,5 +0,8 @@
-import { Ref } from 'react';
+import { MutableRefObject, Ref, RefObject } from 'react';
 declare function setRef<T>(ref: Ref<T>, value: T): void;
+declare function useCallbackRef<T>(initialValue: T | null, callback: (newValue: T | null, lastValue: T | null) => void): MutableRefObject<T | null>;
 declare function useForkRef<T>(...refs: any[]): Ref<T>;
 declare function forkRef<T>(...refs: any[]): Ref<T>;
-export { setRef, useForkRef, forkRef };
+type NodeByRef = RefObject<HTMLElement> | HTMLElement | (() => RefObject<HTMLElement> | HTMLElement);
+declare function getNodeByRef(ref: NodeByRef): HTMLElement;
+export { setRef, useCallbackRef, useForkRef, forkRef, NodeByRef, getNodeByRef };

lib/ref.js

@@ -7,7 +7,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.setRef = setRef;
+exports.useCallbackRef = useCallbackRef;
 exports.useForkRef = useForkRef;
 exports.forkRef = forkRef;
+exports.getNodeByRef = getNodeByRef;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _react = require("react");
+
+var _reactDom = require("react-dom");
+
 function setRef(ref, value) {
@@ -22,2 +28,35 @@ if (typeof ref === 'function') {
 
+function useCallbackRef(initialValue, callback) {
+  var _useState = (0, _react.useState)(function () {
+    return {
+      // value
+      value: initialValue,
+      // last callback
+      callback: callback,
+      // "memoized" public interface
+      facade: {
+        get current() {
+          return ref.value;
+        },
+
+        set current(value) {
+          var last = ref.value;
+
+          if (last !== value) {
+            ref.value = value;
+            ref.callback(value, last);
+          }
+        }
+
+      }
+    };
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      ref = _useState2[0]; // update callback
+
+
+  ref.callback = callback;
+  return ref.facade;
+}
+
 function useForkRef() {
@@ -28,4 +67,6 @@ for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
 
-  return _react["default"].useMemo(function () {
-    return forkRef.apply(void 0, refs);
+  return (0, _react.useCallback)(function (refValue) {
+    refs.forEach(function (ref) {
+      return setRef(ref, refValue);
+    });
   }, refs);
@@ -51,2 +92,14 @@ }
 }
+
+function getNodeByRef(ref) {
+  if (typeof ref === 'function') {
+    ref = ref();
+  }
+
+  if (!ref) return null;
+  var node = 'current' in ref ? ref.current : ref;
+  if (!node) return null;
+  if (node.nodeType === 1) return node;
+  return (0, _reactDom.findDOMNode)(node);
+}
 //# sourceMappingURL=ref.js.map

lib/use/useCss.d.ts

 import { CssLikeObject } from 'nano-css/types/common';
 type IUseCssArg = CssLikeObject;
-declare const useCss: (css?: CssLikeObject) => string;
+declare const useCss: (css?: IUseCssArg) => string;
 export { useCss as default, IUseCssArg };

lib/use/useEnhancedEffect.d.ts

 /// <reference types="react" />
 import React from 'react';
-declare const useEnhancedEffect: typeof React.useLayoutEffect;
+declare const useEnhancedEffect: typeof React.useEffect;
 export { useEnhancedEffect as default };

package.json

 {
   "name": "@semcore/utils",
   "description": "SEMRush Utils Component",
-  "version": "3.13.0",
+  "version": "3.16.2",
   "author": "Roman Lysov <[e-mail]>",
@@ -11,7 +11,4 @@ "license": "MIT",
   },
-  "devDependencies": {
-    "@semcore/core": "^0.0.1-4"
-  },
   "dependencies": {
-    "@babel/runtime": "^7.9",
+    "@babel/runtime": "^7.10",
     "@types/react": "^16.9",
@@ -25,3 +22,3 @@ "classnames": "^2.2",
     "react-dom": "^16.8",
-    "@semcore/core": "^0.0.1-4"
+    "@semcore/core": "^1"
   },
@@ -28,0 +25,0 @@ "jest": {

src/assignProps.ts

@@ -1,5 +0,4 @@
-/* eslint-disable */
 import cn from 'classnames';
 import { CSSProperties, Ref } from 'react';
-import { setRef } from './ref';
+import { forkRef } from './ref';
 
@@ -45,6 +44,3 @@ export function callAllEventHandlers(...fns) {
   if (source.ref) {
-    newProps.ref = (ref) => {
-      setRef(source.ref, ref);
-      setRef(props.ref, ref);
-    };
+    newProps.ref = forkRef(source.ref, props.ref);
   }
@@ -51,0 +47,0 @@

src/injectStyle.ts

@@ -7,2 +7,14 @@ /* eslint-disable */
 
+function hashCode(str) {
+  let hash = 0,
+    i,
+    chr;
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+}
+
 function injectStyle(css) {
@@ -25,3 +37,7 @@ if (typeof window === 'object') {
     }
-    sh.insertAdjacentText('beforeend', css);
+    const hash = Math.abs(hashCode(css));
+    if (!sh.dataset[hash]) {
+      sh.dataset[hash] = true;
+      sh.insertAdjacentText('beforeend', css);
+    }
   }
@@ -28,0 +44,0 @@ }

src/logger.ts

@@ -7,3 +7,5 @@ const DEV = process.env.NODE_ENV !== 'production';
   constructor(logger) {
-    this.logger = logger;
+    this.logger = logger || {
+      warn: () => {}
+    };
   }
@@ -24,2 +26,2 @@
 export { Logger };
-export default new Logger(window.console);
+export default new Logger(console);

src/propsForElement.ts

@@ -36,2 +36,22 @@ /* eslint-disable */
 
+const omittedCloseTags = {
+  area: true,
+  base: true,
+  br: true,
+  col: true,
+  embed: true,
+  hr: true,
+  img: true,
+  input: true,
+  keygen: true,
+  link: true,
+  meta: true,
+  param: true,
+  source: true,
+  track: true,
+  wbr: true,
+  // because Children default value [Object object]
+  textarea: true,
+};
+
 export default function propsForElement<T extends {}>(
@@ -45,3 +65,4 @@ props: T,
     return Object.keys(props).reduce((acc, propName) => {
-      if (validAttr(propName)) {
+      // @ts-ignore
+      if (validAttr(propName) && !(omittedCloseTags[element] && propName === 'children')) {
         acc[propName] = props[propName];
@@ -48,0 +69,0 @@ }

src/ref.ts

@@ -1,2 +0,3 @@
-import React, { Ref } from 'react';
+import { MutableRefObject, Ref, RefObject, useCallback, useState } from 'react';
+import { findDOMNode } from 'react-dom';
 
@@ -12,4 +13,35 @@ export function setRef<T>(ref: Ref<T>, value: T) {
 
+export function useCallbackRef<T>(
+  initialValue: T | null,
+  callback: (newValue: T | null, lastValue: T | null) => void,
+): MutableRefObject<T | null> {
+  const [ref] = useState(() => ({
+    // value
+    value: initialValue,
+    // last callback
+    callback,
+    // "memoized" public interface
+    facade: {
+      get current() {
+        return ref.value;
+      },
+      set current(value) {
+        const last = ref.value;
+        if (last !== value) {
+          ref.value = value;
+          ref.callback(value, last);
+        }
+      },
+    },
+  }));
+  // update callback
+  ref.callback = callback;
+
+  return ref.facade;
+}
+
 export function useForkRef<T>(...refs): Ref<T> {
-  return React.useMemo(() => forkRef(...refs), refs);
+  return useCallback((refValue) => {
+    refs.forEach((ref) => setRef(ref, refValue));
+  }, refs);
 }
@@ -25,1 +57,19 @@
 }
+
+export type NodeByRef =
+  | RefObject<HTMLElement>
+  | HTMLElement
+  | (() => RefObject<HTMLElement> | HTMLElement);
+
+export function getNodeByRef(ref: NodeByRef): HTMLElement {
+  if (typeof ref === 'function') {
+    ref = ref();
+  }
+  if (!ref) return null;
+
+  const node = 'current' in ref ? ref.current : ref;
+  if (!node) return null;
+  if (node.nodeType === 1) return node;
+
+  return findDOMNode(node);
+}

No alert changes

Improved metrics

Total package byte prevSize

233801

increased by11.86%

Dev dependency count

0

decreased by-100%

Number of package files

189

increased by9.25%

Lines of code

3221

increased by12.43%

Dependency changes

• + Added@reshadow/core@0.0.1-alpha.74(transitive)

• + Added@semcore/core@1.15.8(transitive)

• + Added@semcore/utils@3.54.1(transitive)

• + Addedclassnames@2.2.6(transitive)

• + Addedfast-loops@1.1.4(transitive)

• + Addedfocus-lock@0.11.3(transitive)

• + Addedinline-style-prefixer@6.0.4(transitive)

• + Addednano-css@5.3.4(transitive)

• + Addedsourcemap-codec@1.4.8(transitive)

• + Addedtslib@2.6.3(transitive)

• Updated@babel/runtime@^7.10