react-shadow - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

example/js/app.js

 import React, { Component, PropTypes } from 'react';
 import { render } from 'react-dom';
+import ShadowDOM from '../../src/react-shadow';
 import ready from 'document-ready-promise';
@@ -7,3 +8,2 @@ import nlp from 'nlp_compromise';
 import memoize from 'ramda/src/memoize';
-import ShadowDOM from '../../src/react-shadow';
 
@@ -24,2 +24,9 @@ /**
 /**
+ * @method filenameFor
+ * @param {String} name
+ * @return {String}
+ */
+const filenameFor = memoize(name => `/images/${name.replace(/ /ig, '-').toLowerCase()}.png`);
+
+/**
  * @class Weather
@@ -35,14 +42,7 @@ * @author Adam Timberlake
      */
-    static defaultProps = { countries: ['Amsterdam', 'Cairo', 'London', 'Moscow', 'Paris', 'Rio de Janeiro', 'Rome', 'Sydney'] };
+    static defaultProps = {
+        countries: ['Amsterdam', 'Cairo', 'London', 'Moscow', 'Paris', 'Rio de Janeiro', 'Rome', 'Sydney']
+    };
 
     /**
-     * @method constructor
-     * @return {Object}
-     */
-    constructor() {
-        super();
-        const countries = Weather.defaultProps.countries;
-    }
-
-    /**
      * @method componentWillMount
@@ -90,12 +90,9 @@ * @return {void}
 
-                <div>
+                <div className="my-weather">
 
-                    <img src={`/images/${country.replace(/ /ig, '-').toLowerCase()}.png`} alt={country} />
+                    <img src={filenameFor(country)} alt={country} />
 
                     <h1>{title}</h1>
+                    <h2>{label}</h2>
 
-                    <h2 className={weather ? 'loading' : ''}>
-                        {label}
-                    </h2>
-
                     <ul>
@@ -107,8 +104,7 @@
 
+                            const className = name === country ? 'active' : '';
+
                             return (
                                 <li key={name}>
-                                    <a
-                                       onClick={() => this.weatherFor(name)}
-                                       className={name === country ? 'active' : ''}
-                                       >
+                                    <a onClick={() => this.weatherFor(name)} className={className}>
                                         {name}
@@ -115,0 +111,0 @@ </a>

package.json

 {
   "name": "react-shadow",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Utilise Shadow DOM in React with all the benefits of style encapsulation.",
@@ -5,0 +5,0 @@ "main": "dist/react-shadow.js",

src/react-shadow.js

@@ -36,3 +36,5 @@ import { get as fetch } from 'axios';
         children: PropTypes.node.isRequired,
-        cssDocuments: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+        cssDocuments: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+        nodeName: PropTypes.string,
+        boundaryMode: PropTypes.oneOf(['open', 'closed']),
     };
@@ -45,3 +47,5 @@
     static defaultProps = {
-        cssDocuments: []
+        cssDocuments: [],
+        nodeName: 'span',
+        boundaryMode: 'open'
     };
@@ -66,3 +70,3 @@
         const children = this.props.children.props.children;
-        return children.length ? <span>{children}</span> : children;
+        return children.length ? <this.props.nodeName>{children}</this.props.nodeName> : children;
 
@@ -79,3 +83,3 @@ }
         const node = findDOMNode(this);
-        const root = node.attachShadow ? node.attachShadow({ mode: 'open' }) : node.createShadowRoot();
+        const root = node.attachShadow ? node.attachShadow({ mode: this.props.boundaryMode }) : node.createShadowRoot();
         const cssDocuments = this.props.cssDocuments;
@@ -87,3 +91,3 @@ const container = this.getContainer();
         render(container, root);
-        cssDocuments.length === 0 && this.setState({ root });
+        !cssDocuments.length && this.setState({ root });
 
@@ -90,0 +94,0 @@ if (cssDocuments.length) {

No alert changes

Improved metrics

Total package byte prevSize

688201

increased by0.03%

No dependency changes