react-cosmos-background-proxy - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n        body {\n          ', '\n        }\n      '], ['\n        body {\n          ', '\n        }\n      ']);
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -18,25 +18,72 @@ var _react = require('react');
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 exports.default = function (setupFunction) {
-  var BackgroundProxy = function BackgroundProxy(props) {
-    var nextProxy = props.nextProxy,
-        rest = _objectWithoutProperties(props, ['nextProxy']);
+  if (setupFunction) setupFunction();
 
-    var NextProxy = nextProxy.value,
-        next = nextProxy.next;
+  var BackgroundProxy = function (_React$Component) {
+    _inherits(BackgroundProxy, _React$Component);
 
+    function BackgroundProxy(props) {
+      _classCallCheck(this, BackgroundProxy);
 
-    if (setupFunction) setupFunction();
+      var _this = _possibleConstructorReturn(this, (BackgroundProxy.__proto__ || Object.getPrototypeOf(BackgroundProxy)).call(this, props));
 
-    if (rest.fixture.background) {
-      // eslint-disable-next-line no-unused-expressions
-      (0, _emotion.injectGlobal)(_templateObject, (0, _emotion.css)(rest.fixture.background));
+      _this.state = {
+        classname: (0, _emotion.css)(props.fixture.background)
+      };
+      return _this;
     }
-    return _react2.default.createElement(NextProxy, Object.assign({}, rest, { nextProxy: next() }));
-  };
 
+    _createClass(BackgroundProxy, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        document.body.classList.add(this.state.classname);
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        document.body.classList.remove(this.state.classname);
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate(prevProps, prevState) {
+        if (prevState.classname !== this.state.classname) {
+          var body = document.body;
+          body.classList.remove(prevState.classname);
+          body.classList.add(this.state.classname);
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props,
+            nextProxy = _props.nextProxy,
+            rest = _objectWithoutProperties(_props, ['nextProxy']);
+
+        var NextProxy = nextProxy.value,
+            next = nextProxy.next;
+
+
+        return _react2.default.createElement(NextProxy, Object.assign({}, rest, { nextProxy: next() }));
+      }
+    }], [{
+      key: 'getDerivedStateFromProps',
+      value: function getDerivedStateFromProps(props) {
+        return {
+          classname: (0, _emotion.css)(props.fixture.background)
+        };
+      }
+    }]);
+
+    return BackgroundProxy;
+  }(_react2.default.Component);
+
   return BackgroundProxy;
 };

package.json

 {
   "name": "react-cosmos-background-proxy",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Easily apply a background for a fixture's playground and load global css",
@@ -24,2 +24,3 @@ "main": "dist/index.js",
   "dependencies": {
+    "emotion": "^9.2.6",
     "react": "^16.4.0",
@@ -26,0 +27,0 @@ "react-dom": "^16.4.0"

README.md

@@ -5,2 +5,8 @@ # react-cosmos-background-proxy
 
+#### Installation
+
+```
+npm install --save-dev react-cosmos-background-proxy
+```
+
 ## Usage
@@ -12,7 +18,5 @@
 // cosmos.proxies.js
-import createBackgroundProxy from "react-cosmos-background-proxy";
+import createBackgroundProxy from 'react-cosmos-background-proxy';
 
-export default [
-    createBackgroundProxy()
-];
+export default [createBackgroundProxy()];
 ```
@@ -26,3 +30,3 @@
   background: {
-      backgroundColor: 'white'
+    backgroundColor: 'white'
   }
@@ -36,12 +40,12 @@ };
 // cosmos.proxies.js
-import createBackgroundProxy from "react-cosmos-background-proxy";
+import createBackgroundProxy from 'react-cosmos-background-proxy';
 
 export default [
-    createBackgroundProxy(() => {
-        // this will be invoked for every fixture
-        require('node_modules/some-css-framework/dist/styles.css');
-    })
+  createBackgroundProxy(() => {
+    // this will be invoked once when the playground is loaded
+    require('node_modules/some-css-framework/dist/styles.css');
+  })
 ];
 ```
 
-_Contributions are more than welcome! :beers:_
+_Contributions are more than welcome! :beers:_

src/index.jsx

 import React from 'react';
-import { injectGlobal, css } from 'emotion';
+import { css } from 'emotion';
 
 export default (setupFunction) => {
-  const BackgroundProxy = (props) => {
-    const { nextProxy, ...rest } = props;
-    const { value: NextProxy, next } = nextProxy;
+  if (setupFunction) setupFunction();
 
-    if (setupFunction) setupFunction();
+  class BackgroundProxy extends React.Component {
+    constructor(props) {
+      super(props);
 
-    if (rest.fixture.background) {
-      // eslint-disable-next-line no-unused-expressions
-      injectGlobal`
-        body {
-          ${css(rest.fixture.background)}
-        }
-      `;
+      this.state = {
+        classname: css(props.fixture.background)
+      };
     }
-    return <NextProxy {...rest} nextProxy={next()} />;
-  };
 
+    componentDidMount() {
+      document.body.classList.add(this.state.classname);
+    }
+
+    componentWillUnmount() {
+      document.body.classList.remove(this.state.classname);
+    }
+
+    static getDerivedStateFromProps(props) {
+      return {
+        classname: css(props.fixture.background)
+      };
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+      if (prevState.classname !== this.state.classname) {
+        const body = document.body;
+        body.classList.remove(prevState.classname);
+        body.classList.add(this.state.classname);
+      }
+    }
+
+    render() {
+      const { nextProxy, ...rest } = this.props;
+      const { value: NextProxy, next } = nextProxy;
+
+      return <NextProxy {...rest} nextProxy={next()} />;
+    }
+  }
+
   return BackgroundProxy;
 };

No alert changes

Improved metrics

Total package byte prevSize

30559

increased by36.8%

Number of package files

12

increased by9.09%

Lines of code

105

increased by133.33%

Number of lines in readme file

48

increased by11.63%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedemotion@^9.2.6

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/generator@7.26.8(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.8(transitive)

• + Added@babel/runtime@7.26.7(transitive)

• + Added@babel/template@7.26.8(transitive)

• + Added@babel/traverse@7.26.8(transitive)

• + Added@babel/types@7.26.8(transitive)

• + Added@emotion/babel-utils@0.6.10(transitive)

• + Added@emotion/hash@0.6.6(transitive)

• + Added@emotion/memoize@0.6.6(transitive)

• + Added@emotion/serialize@0.9.1(transitive)

• + Added@emotion/stylis@0.7.1(transitive)

• + Added@emotion/unitless@0.6.7(transitive)

• + Added@emotion/utils@0.8.2(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedabbrev@1.1.1(transitive)

• + Addedbabel-plugin-emotion@9.2.11(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@9.2.12(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addedemotion@9.2.12(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedimport-fresh@3.3.1(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.16.1(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedms@2.1.3(transitive)

• + Addednopt@1.0.10(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.10(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsource-map@0.5.70.7.4(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtouch@2.0.2(transitive)

• + Addedyaml@1.10.2(transitive)