ribcage-gen - npm Package Compare versions

Comparing version 1.6.1 to 2.0.0

backbone-component-template/example/entry.js

@@ -0,1 +1,3 @@
+'use strict'
+
 var $ = require('jquery')
@@ -2,0 +4,0 @@ , Backbone = require('backbone')

backbone-component-template/index.js

@@ -1,2 +0,2 @@
-'use strict';
+'use strict'
 
@@ -3,0 +3,0 @@ var Base = require('ribcage-view')

backbone-pane-template/example/entry.js

@@ -0,1 +1,3 @@
+'use strict'
+
 var $ = require('jquery')
@@ -2,0 +4,0 @@ , Backbone = require('backbone')

backbone-pane-template/index.js

@@ -1,2 +0,2 @@
-'use strict';
+'use strict'
 
@@ -3,0 +3,0 @@ var Base = require('ribcage-view')

backbone-pane-template/step.js

@@ -1,2 +0,2 @@
-'use strict';
+'use strict'
 
@@ -3,0 +3,0 @@ var Base = require('ribcage-view')

bin/rib.js

 #!/usr/bin/env node
-'use strict';
+'use strict'
 
@@ -8,4 +8,4 @@ var gen = require('../index')
 
-gen({target: argv._[0], type: type}, function (names) {
-  console.log('created the ' + names.PascalName + ' component')
+gen({target: argv._[0], type: type}, function (context) {
+  console.log('created the ' + context.names.PascalName + ' component')
 })

index.js

@@ -1,2 +0,2 @@
-'use strict';
+'use strict'
 
@@ -15,3 +15,3 @@ var hbsDir = require('hbs-dir')
 
-module.exports = function (options, cb) {
+module.exports = function ribcageGen (options, cb) {
   if (!options) throw new Error('options are required')
@@ -27,9 +27,12 @@ if (!typeMap[options.type]) throw new Error('type ' + options.type + ' not found')
         PascalName: change.pascalCase(name)
-      , camelName: change.camelCase(name)
-      , titleName: change.titleCase(name)
-      , name: name
+        , camelName: change.camelCase(name)
+        , titleName: change.titleCase(name)
+        , name: name
       }
-    }
+  }
+  , successCallback = function successCallback () {
+    cb(opts.context)
+  }
 
-  hbsDir(opts, cb)
+  hbsDir(opts, successCallback)
 }

package.json

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

react-component-template/example/entry.jsx

@@ -1,7 +0,8 @@
-'use strict';
+import React from 'react'
+import {{PascalName}} from '../index.jsx'
+import data from './data.js'
 
-var {{PascalName}} = require('../index.jsx')
-  , React = require('react')
-  , {{camelName}} = <{{PascalName}} name="{{PascalName}}"></{{PascalName}}>
+// expose React for debugging
+window.React = React
 
-React.renderComponent({{camelName}}, document.body)
+React.render(<{{PascalName}} {...data} />, document.getElementById('app'))

react-component-template/index.jsx

@@ -1,18 +0,15 @@
-'use strict';
+import {default as React, PropTypes} from 'react'
+const namespace = '{{camelName}}'
 
-var React = require('react')
-
-module.exports = React.createClass({
-  getInitialState(){
-    return {name: null}
-  }
-  , onChange(e){
-    this.setState({name: e.target.value})
-  }
-  , render(){
-    return <div><h1>{this.state.name || this.props.name} component</h1>
-      <input onChange={this.onChange} />
-      <img src={'//' + (this.state.name || this.props.name) + '.jpg.to'} />
+export default class {{PascalName}} extends React.Component {
+  render(){
+    return <div className={namespace}>
+      <h1 className={`${namespace}-title`}>{this.props.name} component</h1>
+      <img src={`//${this.props.name}.jpg.to`} />
     </div>
   }
 })
+
+{{PascalName}}.propTypes = {
+  name: PropTypes.string.isRequired
+}

react-component-template/README.md

@@ -7,5 +7,5 @@ # {{PascalName}}
 ```js
-  var {{PascalName}} = require('{{name}}')
-    , options = {}
-    , {{camelName}} = new {{PascalName}}(options)
+  import React from 'react'
+  import {{PascalName}} from '{{name}}'
+  React.render(<{{PascalName}} />, document.createElement('div'))
 ```
@@ -17,14 +17,6 @@
 
-## JS Options
+## Props
 ### `<String> option` **Required**
 Defaults to "hi". Controls X.
 
-## JS Methods
-### `doesThings(<Number> arg)`
-Does X. Arg is used for Y. Returns Z.
-
-## JS Events
-### eventName `(<Number> arg)`
-Emitted when Z happens. `arg` is a Y.
-
 ## CSS Variables
@@ -39,4 +31,5 @@
 ```bash
-browserify -t hbsfy --debug | smokestack
+browserify -t babelify --debug | smokestack
 ```
+
 ## Developing
@@ -48,5 +41,7 @@ Install [ribcage](https://github.com/Techwraith/ribcage)
 ribcage preview .
+# run with client side js enabled
+ribcage preview . -s
 ```
 
-Open [http://localhost:4000/default](http://localhost:4000/default)
+Open [http://localhost:4001/default](http://localhost:4001/default)
 

react-component-template/test.js

@@ -1,59 +0,32 @@
-var test = require('tape')
-  , {{PascalName}} = require('./index.js')
-  , sinon = require('sinon')
-  , createView = function createView(options){
-    return new {{PascalName}}(options)
-  }
+import test from 'tape'
+import React from 'react'
+import {addons} from 'react/addons'
+import {{PascalName}} from './index.jsx'
+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
 
-test('{{PascalName}}: constructor', function(t){
-  var view = createView()
-
-  t.equal(
-    typeof view
-    , 'object'
-    , 'creates an object'
-  )
-
-  t.end()
-})
-
-test('{{PascalName}}#bindEvents', function (t){
-  var view = createView()
-    , fn = view.bindEvents
-    , stopListening
-
-  function setup(){
-    stopListening = sinon.spy(view, 'stopListening')
-  }
-
-  function cleanup(){
-    stopListening.restore()
-  }
-
-  setup()
-
-  // call bind events
-  fn.call(view)
+test('{{PascalName}}: constructor', (t) => {
+  const {{camelName}} = React.createElement({{PascalName}})
   t.ok(
-    stopListening.calledOnce
-    , 'calls stopListening so that events aren\'t bound multiple times'
+    isElement({{camelName}})
+    , 'is a valid react component'
   )
-  t.ok(
-    stopListening.calledWith(view.state)
-    , 'calls stopListening with the state so that not all listeners are removed'
-  )
 
-  cleanup()
   t.end()
 })
 
-test('{{PascalName}}#beforeInit', function(t){
-  var view = createView()
-    , fn = view.beforeInit
-    , options = {}
+// 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}})
 
-  fn.call(view, options)
-  t.ok(
-    view.state instanceof view.State
-    , 'creates a state model'
+  t.equal(
+    getDOMNodeText(dom, 'h1')
+    , name
+    , 'renders the `name` prop'
   )
@@ -63,14 +36,1 @@
 })
-
-test('{{PascalName}}#context', function(t){
-  var view = createView()
-    , fn = view.context
-
-  t.deepEqual(
-    fn.call(view)
-    , view.state.toJSON()
-    , 'uses the state to pass variables to the template'
-  )
-
-  t.end()
-})

README.md

 ribcage-gen
 ===========
 
-A generator script for ribcage components
+A generator script for ribcage components. Defaults to a ribcage (ie - backbone) view. Alternatives are ribcage pane/step component or a react component (That's somewhat out of date. Beware)
 
-
 ## Install
@@ -17,2 +16,4 @@
 ribcage-gen <name>
+ribcage-gen -t react <name>
+ribcage-gen -t pane <name>
 ```
@@ -22,2 +23,2 @@
 
-Check out the `component-template/` for an example of the output.
+Check out the `backbone-component-template/` for an example of the output.

No alert changes

Improved metrics

Number of package files

29

increased by3.57%

Number of lines in readme file

23

increased by4.55%

Worsened metrics

Total package byte prevSize

22264

decreased by-0.04%

Lines of code

575

decreased by-4.01%

No dependency changes