@semcore/utils - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [3.2.1] - 2019-10-17
+
+- ### Fixed
+
+- Создается и используется один и тот же контекст для WithCSS и useCss
+- Заменен метод `setRef` в `assignProps`
+
 ## [3.2.0] - 2019-10-10
@@ -81,3 +88,3 @@
 
-### Change
+### Changed
 
@@ -84,0 +91,0 @@ - Обнавлена зависимость `nano-css`

lib/assignProps.d.ts

@@ -1,3 +0,2 @@
-import { Ref, CSSProperties } from "react";
-export declare function setRef(ref: Ref<any>, value: Node): void;
+import { CSSProperties, Ref } from "react";
 export declare function callAllEventHandlers(...fns: any[]): (...args: any[]) => boolean;
@@ -4,0 +3,0 @@ export declare function assignHandlers(props: any, source: any): {};

lib/assignProps.js

@@ -6,3 +6,2 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 });
-exports.setRef = setRef;
 exports.callAllEventHandlers = callAllEventHandlers;
@@ -16,12 +15,5 @@ exports.assignHandlers = assignHandlers;
 
+var _setRef = _interopRequireDefault(require("./setRef"));
+
 /* tslint:disable */
-function setRef(ref, value) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    // @ts-ignore
-    ref.current = value;
-  }
-}
-
 function callAllEventHandlers() {
@@ -66,4 +58,4 @@ for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
     newProps.ref = function (ref) {
-      setRef(source.ref, ref);
-      setRef(props.ref, ref);
+      (0, _setRef["default"])(source.ref, ref);
+      (0, _setRef["default"])(props.ref, ref);
     };
@@ -70,0 +62,0 @@ }

lib/enhances/WithCSS.d.ts

 import React from "react";
 import PropTypes from "prop-types";
 import { PureComponent } from "react";
+import { NanoOptions } from "nano-css";
+import { CssLikeObject } from "nano-css/types/common";
 declare const getStylesheet: () => string;
-export interface IWithCssContextCxt {
-    sh: HTMLStyleElement;
-}
-declare const Provider: React.ProviderExoticComponent<React.ProviderProps<IWithCssContextCxt>>;
+/**
+ * Ф-ция очистки обьекта стилей nanoCSS от ключей со значнение undefined
+ * @param {Object} obj - обьект стилей nanoCSS
+ * @returns {Object}
+ */
+declare function normaliseCss(obj: CssLikeObject): {};
+declare const WithCssContext: React.Context<NanoOptions>;
+declare const Provider: React.ProviderExoticComponent<React.ProviderProps<NanoOptions>>;
+declare function initNanoCss(options?: NanoOptions): import("nano-css").NanoRenderer;
 export interface IEnhancedWithCSSProps {
@@ -19,7 +26,7 @@ className?: string;
 }
-declare class EnhancedWithCSS extends PureComponent<IEnhancedWithCSSProps, IEnhancedWithCSSState, IWithCssContextCxt> {
+declare class EnhancedWithCSS extends PureComponent<IEnhancedWithCSSProps, IEnhancedWithCSSState, NanoOptions> {
     static propTypes: {
         css: PropTypes.Requireable<object>;
     };
-    static contextType: React.Context<IWithCssContextCxt>;
+    static contextType: React.Context<NanoOptions>;
     static defaultProps: {
@@ -39,2 +46,2 @@ css: {};
 export default _default;
-export { getStylesheet, EnhancedWithCSS, Provider };
+export { getStylesheet, EnhancedWithCSS, Provider, WithCssContext, initNanoCss, normaliseCss };

lib/enhances/WithCSS.js

@@ -8,6 +8,6 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 });
-exports["default"] = exports.Provider = exports.EnhancedWithCSS = exports.getStylesheet = void 0;
+exports.initNanoCss = initNanoCss;
+exports.normaliseCss = normaliseCss;
+exports["default"] = exports.WithCssContext = exports.Provider = exports.EnhancedWithCSS = exports.getStylesheet = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -23,2 +23,4 @@
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
 var _react = _interopRequireWildcard(require("react"));
@@ -38,23 +40,50 @@
 
-var nano = null;
+var _nano = null;
 
 var getStylesheet = function getStylesheet() {
-  return nano ? nano.raw : '';
+  return _nano ? _nano.raw : '';
 };
+/**
+ * Ф-ция очистки обьекта стилей nanoCSS от ключей со значнение undefined
+ * @param {Object} obj - обьект стилей nanoCSS
+ * @returns {Object}
+ */
 
+
 exports.getStylesheet = getStylesheet;
 
-var removeUndefinedKyes = function removeUndefinedKyes(obj) {
+function normaliseCss(obj) {
   return Object.keys(obj).reduce(function (acc, key) {
-    var _acc = acc;
-    if (obj[key] !== undefined) _acc[key] = obj[key];
-    return _acc;
+    var result = acc;
+
+    if (obj[key] !== undefined) {
+      result[key] = obj[key];
+    }
+
+    return result;
   }, {});
-};
+}
 
 var WithCssContext = _react["default"].createContext({});
 
+exports.WithCssContext = WithCssContext;
 var Provider = WithCssContext.Provider;
 exports.Provider = Provider;
 
+function initNanoCss() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  if (_nano) {
+    return _nano;
+  }
+
+  var nano = (0, _nanoCss.create)((0, _objectSpread2["default"])({
+    pfx: 'css'
+  }, options));
+  (0, _prefixer.addon)(nano);
+  (0, _rule.addon)(nano);
+  (0, _cache.addon)(nano);
+  return nano;
+}
+
 var EnhancedWithCSS =
@@ -73,12 +102,3 @@ /*#__PURE__*/
     };
-
-    if (!nano) {
-      nano = (0, _nanoCss.create)((0, _objectSpread2["default"])({
-        pfx: 'css'
-      }, context));
-      (0, _prefixer.addon)(nano);
-      (0, _rule.addon)(nano);
-      (0, _cache.addon)(nano);
-    }
-
+    _nano = initNanoCss(context);
     return _this;
@@ -102,5 +122,5 @@ }
     value: function getDerivedStateFromProps(props) {
-      var cleanCss = removeUndefinedKyes(props.css);
+      var cleanCss = normaliseCss(props.css);
       return {
-        dynamicClassName: Object.keys(cleanCss).length ? nano.cache(cleanCss) : ''
+        dynamicClassName: Object.keys(cleanCss).length ? _nano.cache(cleanCss) : ''
       };
@@ -107,0 +127,0 @@ }

lib/enhances/WithI18n.js

@@ -30,3 +30,3 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 function getText(locale, dictionary) {
-  return function getTextByKey(key) {
+  return function (key) {
     return dictionary[locale][key];
@@ -33,0 +33,0 @@ };

lib/use/useCss.d.ts

@@ -1,11 +0,4 @@
-import React from "react";
 import { CssLikeObject } from "nano-css/types/common";
-declare function getStylesheet(): string;
-export interface IWithCssContext {
-    sh: CSSStyleSheet;
-}
-declare const Provider: React.ProviderExoticComponent<React.ProviderProps<IWithCssContext>>;
 export declare type IUseCssArg = CssLikeObject;
 declare const useCss: (css?: CssLikeObject) => string;
 export default useCss;
-export { getStylesheet, useCss, Provider };

lib/use/useCss.js

@@ -1,76 +0,20 @@
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStylesheet = getStylesheet;
-exports["default"] = exports.Provider = exports.useCss = void 0;
+exports["default"] = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+var _react = require("react");
 
-var _react = _interopRequireWildcard(require("react"));
+var _WithCSS = require("../enhances/WithCSS");
 
-var _nanoCss = require("nano-css");
-
-var _rule = require("nano-css/addon/rule");
-
-var _cache = require("nano-css/addon/cache");
-
-var _prefixer = require("nano-css/addon/prefixer");
-
-var nano = null;
-
-function getStylesheet() {
-  return nano ? nano.raw : '';
-}
-
-function initNanoCss(options) {
-  if (nano) {
-    return;
-  }
-
-  nano = (0, _nanoCss.create)((0, _objectSpread2["default"])({
-    pfx: 'css'
-  }, options));
-  (0, _prefixer.addon)(nano);
-  (0, _rule.addon)(nano);
-  (0, _cache.addon)(nano);
-}
-/**
- * Ф-ция очистки обьекта стилей nanoCSS от ключей со значнение undefined
- * @param {Object} obj - обьект стилей nanoCSS
- * @returns {Object}
- */
-
-
-function normaliseCss(obj) {
-  return Object.keys(obj).reduce(function (acc, key) {
-    var result = acc;
-
-    if (obj[key] !== undefined) {
-      result[key] = obj[key];
-    }
-
-    return result;
-  }, {});
-}
-
-var WithCssContext = _react["default"].createContext({});
-
-var Provider = WithCssContext.Provider;
-exports.Provider = Provider;
-
 var useCss = function useCss() {
   var css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var nanoOptions = (0, _react.useContext)(WithCssContext);
-  initNanoCss(nanoOptions);
-  var cleanCss = normaliseCss(css);
+  var nanoOptions = (0, _react.useContext)(_WithCSS.WithCssContext);
+  var nano = (0, _WithCSS.initNanoCss)(nanoOptions);
+  var cleanCss = (0, _WithCSS.normaliseCss)(css);
   return Object.keys(cleanCss).length ? nano.cache(cleanCss) : '';
 };
 
-exports.useCss = useCss;
 var _default = useCss;
 exports["default"] = _default;
 //# sourceMappingURL=useCss.js.map

package.json

 {
   "name": "@semcore/utils",
   "description": "SEMRush Utils Component",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "author": "Roman Lysov <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "MIT",

src/assignProps.ts

 /* tslint:disable */
 import cn from 'classnames';
-import { Ref, CSSProperties } from 'react';
+import { CSSProperties, Ref } from 'react';
+import setRef from './setRef';
 
-export function setRef(ref: Ref<any>, value: Node) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    // @ts-ignore
-    ref.current = value;
-  }
-}
-
 export function callAllEventHandlers(...fns) {
@@ -15,0 +7,0 @@ return (...args) =>

src/use/useCss.ts

@@ -1,47 +0,5 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { CssLikeObject } from 'nano-css/types/common';
-import { create, CreateNano, NanoOptions } from 'nano-css';
-import { addon as addonRule } from 'nano-css/addon/rule';
-import { addon as addonCache } from 'nano-css/addon/cache';
-import { addon as addonPrefixer } from 'nano-css/addon/prefixer';
+import { initNanoCss, normaliseCss, WithCssContext } from '../enhances/WithCSS';
 
-let nano: ReturnType<CreateNano> = null;
-
-function getStylesheet() {
-  return nano ? nano.raw : '';
-}
-
-function initNanoCss(options: NanoOptions) {
-  if (nano) {
-    return;
-  }
-  nano = create({ pfx: 'css', ...options });
-
-  addonPrefixer(nano);
-  addonRule(nano);
-  addonCache(nano);
-}
-
-/**
- * Ф-ция очистки обьекта стилей nanoCSS от ключей со значнение undefined
- * @param {Object} obj - обьект стилей nanoCSS
- * @returns {Object}
- */
-function normaliseCss(obj: CssLikeObject) {
-  return Object.keys(obj).reduce((acc, key) => {
-    const result = acc;
-    if (obj[key] !== undefined) {
-      result[key] = obj[key];
-    }
-    return result;
-  }, {});
-}
-
-export interface IWithCssContext {
-  sh: CSSStyleSheet;
-}
-
-const WithCssContext = React.createContext<IWithCssContext>({} as any);
-const { Provider } = WithCssContext;
-
 export type IUseCssArg = CssLikeObject;
@@ -51,3 +9,3 @@
   const nanoOptions = useContext(WithCssContext);
-  initNanoCss(nanoOptions);
+  const nano = initNanoCss(nanoOptions);
   const cleanCss = normaliseCss(css);
@@ -57,3 +15,2 @@ return Object.keys(cleanCss).length ? nano.cache(cleanCss) : '';
 
-export { getStylesheet, useCss, Provider };
 export default useCss;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

137723

decreased by-3.19%

Number of package files

116

decreased by-2.52%

Lines of code

1822

decreased by-4.66%

No dependency changes