react-input-autosize - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

example/dist/bundle.js

@@ -55,3 +55,3 @@ require=(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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.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})({"react-input-autosize":[function(require,module,exports){
 		}
-		var newInputWidth = this.refs.sizer.getDOMNode().scrollWidth;
+		var newInputWidth = this.refs.sizer.getDOMNode().scrollWidth + 2;
 		if (newInputWidth < this.props.minWidth) {
@@ -62,3 +62,3 @@ newInputWidth = this.props.minWidth;
 			this.setState({
-				inputWidth: this.refs.sizer.getDOMNode().scrollWidth
+				inputWidth: newInputWidth
 			});
@@ -65,0 +65,0 @@ }

gulpfile.js

 var browserify = require('browserify'),
+	shim = require('browserify-shim'),
 	chalk = require('chalk'),
@@ -14,2 +15,3 @@ del = require('del'),
 
+
 /**
@@ -19,13 +21,17 @@ * Constants
 
+var SRC_PATH = './src';
+var DIST_PATH = './dist';
+
 var PACKAGE_NAME = require('./package.json').name;
-var PACKAGE_FILE = 'AutoSizeInput.js';
+var PACKAGE_FILE = 'AutosizeInput.js';
+var STANDALONE_NAME = 'AutosizeInput';
 var DEPENDENCIES = ['react'];
 
-var SRC_PATH = './src';
-var DIST_PATH = './dist';
-
+var EXAMPLE_DIST = './example/dist';
 var EXAMPLE_APP = './example/src/app.js';
 var EXAMPLE_LESS = './example/src/app.less';
-var EXAMPLE_FILES = ['./example/src/index.html'];
-var EXAMPLE_DIST = './example/dist';
+var EXAMPLE_FILES = [
+	'./example/src/index.html',
+	'./example/src/standalone.html'
+];
 
@@ -65,3 +71,48 @@
 
-function buildExample(dev) {
+
+/**
+ * Prepare task for examples
+ */
+
+gulp.task('prepare:examples', function(done) {
+	del([EXAMPLE_DIST], done);
+});
+
+
+/**
+ * Build example files
+ */
+
+function buildExampleFiles() {
+	return gulp.src(EXAMPLE_FILES)
+		.pipe(gulp.dest(EXAMPLE_DIST))
+		.pipe(connect.reload());
+}
+
+gulp.task('dev:build:example:files', buildExampleFiles);
+gulp.task('build:example:files', ['prepare:examples'], buildExampleFiles);
+
+
+/**
+ * Build example css from less
+ */
+
+function buildExampleCSS() {
+	return gulp.src(EXAMPLE_LESS)
+		.pipe(less())
+		.pipe(gulp.dest(EXAMPLE_DIST))
+		.pipe(connect.reload());
+}
+
+gulp.task('dev:build:example:css', buildExampleCSS);
+gulp.task('build:example:css', ['prepare:examples'], buildExampleCSS);
+
+
+/**
+ * Build example scripts
+ * 
+ * Returns a gulp task with watchify when in development mode
+ */
+
+function buildExampleScripts(dev) {
 	
@@ -71,39 +122,68 @@ var dest = EXAMPLE_DIST;
 	var opts = dev ? watchify.args : {};
-	
 	opts.debug = dev ? true : false;
 	opts.hasExports = true;
 	
-	var common = browserify(opts),
-		bundle = browserify(opts),
-		example = browserify(opts);
-	
-	DEPENDENCIES.forEach(function(pkg) {
-		common.require(pkg);
-		bundle.exclude(pkg);
-		example.exclude(pkg);
-	});
-	
-	bundle.require(SRC_PATH + '/' + PACKAGE_FILE, { expose: PACKAGE_NAME });
-	example.exclude(PACKAGE_NAME).add(EXAMPLE_APP);
-	
-	if (dev) {
-		watchBundle(common, 'common.js', dest);
-		watchBundle(bundle, 'bundle.js', dest);
-		watchBundle(example, 'app.js', dest);
+	return function() {
+		
+		var common = browserify(opts),
+			bundle = browserify(opts).require(SRC_PATH + '/' + PACKAGE_FILE, { expose: PACKAGE_NAME }),
+			example = browserify(opts).exclude(PACKAGE_NAME).add(EXAMPLE_APP),
+			standalone = browserify(SRC_PATH + '/' + PACKAGE_FILE, { standalone: STANDALONE_NAME })
+				.transform(reactify)
+				.transform(shim);
+		
+		DEPENDENCIES.forEach(function(pkg) {
+			common.require(pkg);
+			bundle.exclude(pkg);
+			example.exclude(pkg);
+			standalone.exclude(pkg);
+		});
+		
+		if (dev) {
+			watchBundle(common, 'common.js', dest);
+			watchBundle(bundle, 'bundle.js', dest);
+			watchBundle(example, 'app.js', dest);
+			watchBundle(standalone, 'standalone.js', dest);
+		}
+		
+		return merge(
+			doBundle(common, 'common.js', dest),
+			doBundle(bundle, 'bundle.js', dest),
+			doBundle(example, 'app.js', dest),
+			doBundle(standalone, 'standalone.js', dest)
+		);
+		
 	}
-	
-	return merge(
-		doBundle(common, 'common.js', dest),
-		doBundle(bundle, 'bundle.js', dest),
-		doBundle(example, 'app.js', dest)
-	);
-	
-}
 
+};
 
+gulp.task('dev:build:example:scripts', buildExampleScripts(true));
+gulp.task('build:example:scripts', ['prepare:examples'], buildExampleScripts());
+
+
 /**
+ * Build examples
+ */
+
+gulp.task('build:examples', [
+	'build:example:files',
+	'build:example:css',
+	'build:example:scripts'
+]);
+
+gulp.task('watch:examples', [
+	'dev:build:example:files',
+	'dev:build:example:css',
+	'dev:build:example:scripts'
+], function() {
+	gulp.watch([EXAMPLE_FILES], ['dev:build:example:files']);
+	gulp.watch([EXAMPLE_LESS], ['dev:build:example:css']);
+});
+
+
+/**
  * Serve task for local development
  */
 
-gulp.task('dev-server', function() {
+gulp.task('dev:server', function() {
 	connect.server({
@@ -118,35 +198,9 @@ root: 'example/dist',
 /**
- * Example tasks
- */
-
-gulp.task('prepare-examples', function(done) {
-	del([EXAMPLE_DIST], done);
-});
-
-gulp.task('copy-example-files', ['prepare-examples'], function() {
-	return gulp.src(EXAMPLE_FILES)
-		.pipe(gulp.dest(EXAMPLE_DIST));
-})
-
-gulp.task('build-example-css', ['prepare-examples'], function() {
-	return gulp.src(EXAMPLE_LESS)
-		.pipe(less())
-		.pipe(gulp.dest(EXAMPLE_DIST))
-		.pipe(connect.reload());
-});
-
-gulp.task('build-examples', ['prepare-examples', 'build-example-css', 'copy-example-files'], function() {
-	return buildExample();
-});
-
-
-/**
  * Development task
  */
 
-gulp.task('dev', ['copy-example-files', 'build-example-css', 'dev-server'], function() {
-	gulp.watch([EXAMPLE_FILES], ['copy-example-files']);
-	gulp.watch([EXAMPLE_LESS], ['build-example-css']);
-	return buildExample(true);
-});
+gulp.task('dev', [
+	'dev:server',
+	'watch:examples'
+]);
 
@@ -158,17 +212,28 @@
 
-gulp.task('prepare-dist', function(done) {
+gulp.task('prepare:dist', function(done) {
 	del([DIST_PATH], done);
 });
 
-gulp.task('build', ['prepare-dist', 'build-examples'], function() {
-	var dest = DIST_PATH;
-	var bundle = browserify({ hasExports: true });
+gulp.task('build:dist', ['prepare:dist'], function() {
+	
+	var standalone = browserify(SRC_PATH + '/' + PACKAGE_FILE, {
+			standalone: STANDALONE_NAME
+		})
+		.transform(reactify)
+		.transform(shim);
+	
 	DEPENDENCIES.forEach(function(pkg) {
-		bundle.exclude(pkg);
+		standalone.exclude(pkg);
 	});
-	bundle.require(SRC_PATH + '/' + PACKAGE_FILE, { expose: PACKAGE_NAME });
-	return doBundle(bundle, PACKAGE_FILE, dest);
+	
+	return doBundle(standalone, PACKAGE_FILE, DIST_PATH);
+	
 });
 
+gulp.task('build', [
+	'build:dist',
+	'build:examples'
+]);
 
+
 /**
@@ -178,4 +243,4 @@ * Deploy task
 
-gulp.task('deploy', ['build-examples'], function() {
+gulp.task('deploy', ['build:examples'], function() {
 	return gulp.src(EXAMPLE_DIST + '/**/*').pipe(deploy());
 });

package.json

 {
   "name": "react-input-autosize",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Auto-resizing Input Component for React",
@@ -13,6 +13,8 @@ "main": "dist/AutosizeInput.js",
   "dependencies": {
-    "react": "~0.12.0"
+    "react": "~0.12.0",
+    "reactify": "~0.15.2"
   },
   "devDependencies": {
     "browserify": "~6.2.0",
+    "browserify-shim": "~3.8.0",
     "chalk": "~0.5.1",
@@ -26,6 +28,6 @@ "del": "~0.1.3",
     "merge-stream": "~0.1.6",
-    "reactify": "~0.15.2",
     "vinyl-source-stream": "~1.0.0",
     "watchify": "~2.1.1"
   },
+  "browser": "src/AutosizeInput.js",
   "browserify": {
@@ -36,2 +38,5 @@ "transform": [
   },
+  "browserify-shim": {
+    "react": "global:React"
+  },
   "scripts": {
@@ -38,0 +43,0 @@ "test": "echo \"no tests yet\" && exit 0"

src/AutosizeInput.js

@@ -54,3 +54,3 @@ var React = require('react');
 		}
-		var newInputWidth = this.refs.sizer.getDOMNode().scrollWidth;
+		var newInputWidth = this.refs.sizer.getDOMNode().scrollWidth + 2;
 		if (newInputWidth < this.props.minWidth) {
@@ -61,3 +61,3 @@ newInputWidth = this.props.minWidth;
 			this.setState({
-				inputWidth: this.refs.sizer.getDOMNode().scrollWidth
+				inputWidth: newInputWidth
 			});
@@ -64,0 +64,0 @@ }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

607576

increased by1.29%

Number of package files

19

increased by18.75%

Lines of code

16863

increased by0.75%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Number of low supply chain risk alerts

211

increased by0.96%

Dependency changes

• + Addedreactify@~0.15.2

• + Addedbase62@0.1.1(transitive)

• + Addedesprima-fb@6001.1.0-dev-harmony-fb8001.1001.0-dev-harmony-fb(transitive)

• + Addedjstransform@6.3.28.2.0(transitive)

• + Addedreact-tools@0.12.2(transitive)

• + Addedreactify@0.15.2(transitive)

• + Addedsource-map@0.1.31(transitive)