ribcage-gen - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

package.json

 {
   "name": "ribcage-gen",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "A generator script for ribcage components",
@@ -5,0 +5,0 @@ "main": "index.js",

react-component-template/example/entry.jsx

 import React from 'react'
+import ReactDOM from 'react-dom'
+
 import {{PascalName}} from '../index.jsx'
 import data from './data.js'
+import styles from './entry.css'
+import a11y from 'react-a11y'
 
 // expose React for debugging
 window.React = React
+a11y(React)
 
-React.render(<{{PascalName}} {...data} />, document.getElementById('app'))
+ReactDOM.render(<{{PascalName}} {...data} />, document.getElementById('app'))

react-component-template/index.jsx

 import React, {PropTypes, Component} from 'react'
 import {addons} from 'react/addons'
+import styles from './index.css'
 const {shouldComponentUpdate} = addons.PureRenderMixin
-const namespace = '{{camelName}}'
 
 export default class {{PascalName}} extends Component {
+  constructor (props) {
+    super(props)
+    // initialize state values
+    this.state = {}
+
+    // bind your custom methods here (instead of render for example)
+    // example:
+    // this._handleSomething = this._handleSomething.bind(this)
+  }
+
   // use the pure-render mixin without the mixin. This allows us to use es6
@@ -16,5 +26,5 @@ // classes and avoid "magic" code. NOTE: if this component is used directly
   render () {
-    return (<div className={namespace}>
-      <h1 className={`${namespace}-title`}>{this.props.name} component</h1>
-      <img src={`http://loremflickr.com/600/600/${this.props.name}`} />
+    return (<div>
+      <h1 className={styles.title} ref="title">{this.props.name} component</h1>
+      <img src={`http://loremflickr.com/600/600/${this.props.name}`} alt={this.props.name} />
     </div>)
@@ -29,3 +39,3 @@ }
 {{PascalName}}.defaultProps = {
-  name: {{camelName}}
+  name: '{{titleName}}'
 }

react-component-template/test.js

 import test from 'tape'
+import HelloWorld from './index.jsx'
 import React from 'react'
 import {addons} from 'react/addons'
-import {{PascalName}} from './index.jsx'
+import testTree from 'react-test-tree'
 const {TestUtils} = addons
-const {Simulate, renderIntoDocument, isElement, createRenderer} = TestUtils
-const getReactNode = (dom, node) => TestUtils.findRenderedDOMComponentWithTag(dom, node)
-const getDOMNode = (dom, node) => getReactNode(dom, node).getDOMNode()
-const getDOMNodes = (dom, type) => TestUtils.scryRenderedDOMComponentsWithTag(dom, type)
-const getDOMNodeText = (dom, node) => getDOMNode(dom, node).textContent
+const {isElement} = TestUtils
 
-test('{{PascalName}}: constructor', (t) => {
-  const {{camelName}} = React.createElement({{PascalName}})
+test('HelloWorld: constructor', (t) => {
+  const helloWorld = React.createElement(HelloWorld)
+
   t.ok(
-    isElement({{camelName}})
+    isElement(helloWorld)
     , 'is a valid react component'
@@ -22,12 +20,11 @@ )
 
-// TODO: delete me. I'm just an example!
-test('{{PascalName}} rendered DOM', (t) => {
-  const name = 'Bert'
-  const {{camelName}} = React.createElement({{PascalName}}, {name})
-  const dom = renderIntoDocument({{camelName}})
+// I'm a sample test, you probably want to delete me
+test('HelloWorld: render', (t) => {
+  const name = 'john doe'
+  const tree = testTree(<HelloWorld name={name} />)
 
   t.equal(
-    getDOMNodeText(dom, 'h1')
+    tree.title.innerText
     , name
-    , 'renders the `name` prop'
+    , 'puts the name prop in the title'
   )
@@ -37,1 +34,2 @@
 })
+

No alert changes

Improved metrics

Total package byte prevSize

22927

increased by0.04%

Lines of code

606

increased by1.68%

No dependency changes