react-frame-component - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

gulpfile.js

 var gulp = require('gulp');
-var react = require('gulp-react');
-var rename = require('gulp-rename');
 var karma = require('gulp-karma');
-var browserify = require('gulp-browserify');
+var browserify = require('browserify');
+var reactify = require('reactify');
+var source = require('vinyl-source-stream');
 
 var testFiles = [
   'node_modules/es5-shim/es5-shim.js',
-  'test/libs/react-with-addons.js',
-  'index.js',
   'test/processed/Frame_spec.js'
@@ -15,12 +13,11 @@ ];
 gulp.task('build', function() {
-  return gulp.src('src/Frame.js')
-    .pipe(react())
-    .pipe(browserify({
-      standalone: 'Frame'
-    }))
-    .pipe(rename('index.js'))
-    .pipe(gulp.dest('./'))
-    .pipe(gulp.src('test/Frame_spec.js'))
-    .pipe(react())
-    .pipe(gulp.dest('test/processed'));
+  var bundler = browserify({
+      entries: ['./test/Frame_spec.js']
+  });
+
+  return bundler
+    .transform(reactify)
+    .bundle()
+    .pipe(source('Frame_spec.js'))
+    .pipe(gulp.dest('./test/processed/'));
 });
@@ -27,0 +24,0 @@

index.js

@@ -1,4 +0,6 @@
-!function(e){if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.Frame=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
 /** @jsx React.DOM */
-var Frame = React.createClass({displayName: 'Frame',
+
+var React = require('react');
+
+var Frame = React.createClass({
   propTypes: {
@@ -9,3 +11,3 @@ style: React.PropTypes.object,
   render: function() {
-    return this.transferPropsTo(React.DOM.iframe(null ));
+    return this.transferPropsTo(<iframe />);
   },
@@ -19,6 +21,6 @@ componentDidMount: function() {
       var contents = (
-        React.DOM.div(null, 
-          this.props.head,
-          this.props.children
-        )
+        <div>
+          {this.props.head}
+          {this.props.children}
+        </div>
       );
@@ -41,5 +43,1 @@
 
-
-},{}]},{},[1])
-(1)
-});

karma.conf.js

@@ -7,3 +7,2 @@ module.exports = function(config) {
 
-
     // frameworks to use
@@ -13,24 +12,2 @@ // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
 
-
-    // list of files / patterns to load in the browser
-    files: [
-      'index.js',
-      'test/libs/react-with-addons.js',
-      'test/processed/Frame_spec.js'
-    ],
-
-
-    // list of files to exclude
-    exclude: [
-
-    ],
-
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-
-    },
-
-
     // test results reporter to use
@@ -41,11 +18,8 @@ // possible values: 'dots', 'progress'
 
-
     // web server port
     port: 9876,
 
-
     // enable / disable colors in the output (reporters and logs)
     colors: true,
 
-
     // level of logging
@@ -55,7 +29,5 @@ // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
 
-
     // enable / disable watching file and executing tests whenever any file changes
     autoWatch: false,
 
-
     // start these browsers
@@ -62,0 +34,0 @@ // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher

package.json

 {
   "name": "react-frame-component",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "React component to wrap your application or component in an iFrame for encapsulation purposes",
@@ -27,4 +27,2 @@ "main": "index.js",
     "gulp": "^3.6.2",
-    "gulp-react": "^0.3.3",
-    "gulp-rename": "^1.2.0",
     "karma": "^0.12.16",
@@ -35,3 +33,5 @@ "gulp-karma": "0.0.4",
     "es5-shim": "^3.3.0",
-    "gulp-browserify": "^0.5.0"
+    "browserify": "^4.1.11",
+    "reactify": "^0.13.1",
+    "vinyl-source-stream": "^0.1.1"
   },
@@ -38,0 +38,0 @@ "dependencies": {

README.md

@@ -11,11 +11,8 @@ # React <Frame /> component
 
-
 ## How to use:
 
-This is a UMD module so you can include however you like.
+```js
+var Frame = require('react-frame-component');
+```
 
-### UMD what now?
-
-If you're not sure what that is you can include this as a `<script>` tag in your site and it will be available as a `Frame` global.
-
 Go check out the [demo] [demo-url].
@@ -48,2 +45,6 @@
 
+## More info
+
+I wrote a [blog post] [blog-url] about building this component.
+
 ## License
@@ -64,2 +65,2 @@
 [demo-url]: http://ryanseddon.github.io/react-frame-component/
-
+[blog-url]: http://developer.zendesk.com/blog/2014/05/13/rendering-to-iframes-in-react/

test/Frame_spec.js

@@ -5,3 +5,5 @@ /** @jsx React.DOM */
 
-var ReactTestUtils, div;
+var ReactTestUtils, div,
+    React = require('react/addons'),
+    Frame = require('../index.js');
 
@@ -8,0 +10,0 @@ describe("Frame test",function(){

No alert changes

Improved metrics

Number of lines in readme file

64

increased by1.59%

Number of low supply chain risk alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

643695

decreased by-0.19%

Lines of code

17842

decreased by-0.11%

No dependency changes