starfield-react - npm Package Compare versions

Comparing version 3.0.0-dev-0 to 3.0.0-dev-1

dist/starfield-react.js

@@ -1,2 +0,2 @@
-var t=require("react");function e(t){var e=t.width,a=t.height,n=Math.round(e/2),s=Math.round(a/2),o=(e+a)/2;return{stars:r(n,s,o,e,a,t.count),width:e,height:a,x:n,y:s,z:o}}function r(t,e,r,a,n,s){for(var o=[],i=0;i<s;i++)o.push({x:Math.random()*a*2-2*t,y:Math.random()*n*2-2*e,z:Math.round(Math.random()*r),stepX:0,stepY:0});return o}function a(r,a,n){var s=n.current||e({count:a.count,height:a.height,width:a.width});if(a.count!==s.stars.length)if(s.stars.length<a.count){var o=e({count:a.count-s.stars.length,height:a.height,width:a.width});s.stars=s.stars.concat(o.stars)}else s.stars.splice(0,s.stars.length-a.count);t.useEffect(function(){var t,e=r.current.getContext("2d"),n=1/s.z,o=a.speed,i=a.starRatio,h=a.starSize;e.strokeStyle="string"==typeof a.starStyle&&a.starStyle,e.lineCap=a.starShape;var c,u,l=1e3/a.fps,d=Date.now();return t=requestAnimationFrame(function r(){if(t=requestAnimationFrame(r),"number"==typeof a.fps){if(c=Date.now(),(u=c-d)<l)return;d=c-u%l}!function(t){var e=t.context,r=t.stars,a=t.width,n=t.height,s=t.z,o=t.x,i=t.y,h=t.starLineWidthRatio,c=t.speed,u=t.starRatio,l=t.starSize,d=t.strokeStyle,g=t.bgStyle,p=t.noBackground;t.clear&&(e.clearRect(0,0,a,n),p||(e.fillStyle=g,e.fillRect(0,0,a,n)));for(var f=!1,S=0;S<r.length;S++){"function"==typeof d&&(e.strokeStyle=d());var y=r[S],z=y.stepX,v=y.stepY;f=!0,y.z-=c,y.z>s&&(y.z-=s,f=!1),y.z<0&&(y.z+=s,f=!1),y.stepX=o+y.x/y.z*u,y.stepY=i+y.y/y.z*u,(f=f&&z>0&&z<a&&v>0&&v<n)&&(e.beginPath(),e.lineWidth=(1-h*y.z)*l,e.moveTo(z,v),e.lineTo(y.stepX,y.stepY),e.stroke(),e.closePath())}}(Object.assign({},{context:e,speed:o,starRatio:i,starSize:h,starLineWidthRatio:n,strokeStyle:a.starStyle,bgStyle:a.bgStyle,noBackground:a.noBackground,clear:a.clear},s))}),function(){return cancelAnimationFrame(t)}},[a])}var n=function(r){var n=r.width,s=r.height,o=r.starStyle,i=r.bgStyle,h=r.count,c=r.fps,u=r.speed,l=r.starRatio,d=r.starShape,g=r.starSize,p=r.clear,f=r.noBackground,S=function(t,e){var r={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&-1===e.indexOf(a)&&(r[a]=t[a]);return r}(r,["width","height","starStyle","bgStyle","count","fps","speed","starRatio","starShape","starSize","clear","noBackground"]),y=t.useRef(null);return a(y,{width:n,height:s,starStyle:o,bgStyle:i,count:h,fps:c,speed:u,starRatio:l,starShape:d,starSize:g,clear:p,noBackground:f},t.useRef(e({count:h,height:s,width:n}))),t.createElement("canvas",Object.assign({ref:y},{width:n,height:s},S))};n.defaultProps={width:300,height:300,count:3e3,speed:3,starRatio:356,starSize:1.4,starStyle:"rgb(255,255,255)",starShape:"round",clear:!0,bgStyle:"rgb(0,0,0)",noBackground:!1},exports.StarField=n,exports.useStarField=a;
+var t=require("react");function e(t){var e=t.width,a=t.height,n=Math.round(e/2),s=Math.round(a/2),o=(e+a)/2;return{stars:r(n,s,o,e,a,t.count),width:e,height:a,x:n,y:s,z:o}}function r(t,e,r,a,n,s){for(var o=[],i=0;i<s;i++)o.push({x:Math.random()*a*2-2*t,y:Math.random()*n*2-2*e,z:Math.round(Math.random()*r),stepX:0,stepY:0});return o}function a(r,a,n){var s=n.current||e({count:a.count,height:a.height,width:a.width});if(a.count!==s.stars.length)if(s.stars.length<a.count){var o=e({count:a.count-s.stars.length,height:a.height,width:a.width});s.stars=s.stars.concat(o.stars)}else s.stars.splice(0,s.stars.length-a.count);t.useEffect(function(){var t,e=r.current.getContext("2d"),n=1/s.z,o=a.speed,i=a.starRatio,h=a.starSize;e.strokeStyle="string"==typeof a.starStyle&&a.starStyle,e.lineCap=a.starShape;var c,u,l=1e3/a.fps,d=Date.now();return t=requestAnimationFrame(function r(){if(t=requestAnimationFrame(r),"number"==typeof a.fps){if(c=Date.now(),(u=c-d)<l)return;d=c-u%l}!function(t){var e=t.context,r=t.stars,a=t.width,n=t.height,s=t.z,o=t.x,i=t.y,h=t.starLineWidthRatio,c=t.speed,u=t.starRatio,l=t.starSize,d=t.strokeStyle,f=t.bgStyle,g=t.noBackground;t.clear&&(e.clearRect(0,0,a,n),g||(e.fillStyle=f,e.fillRect(0,0,a,n)));for(var p=!1,S=0;S<r.length;S++){"function"==typeof d&&(e.strokeStyle=d());var y=r[S],z=y.stepX,v=y.stepY;p=!0,y.z-=c,y.z>s&&(y.z-=s,p=!1),y.z<0&&(y.z+=s,p=!1),y.stepX=o+y.x/y.z*u,y.stepY=i+y.y/y.z*u,(p=p&&z>0&&z<a&&v>0&&v<n)&&(e.beginPath(),e.lineWidth=(1-h*y.z)*l,e.moveTo(z,v),e.lineTo(y.stepX,y.stepY),e.stroke(),e.closePath())}}(Object.assign({},{context:e,speed:o,starRatio:i,starSize:h,starLineWidthRatio:n,strokeStyle:a.starStyle,bgStyle:a.bgStyle,noBackground:a.noBackground,clear:a.clear},s))}),function(){return cancelAnimationFrame(t)}},[a])}var n=function(r){var n=r.width,s=r.height,o=r.starStyle,i=r.bgStyle,h=r.count,c=r.fps,u=r.speed,l=r.starRatio,d=r.starShape,f=r.starSize,g=r.clear,p=r.noBackground,S=function(t,e){var r={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&-1===e.indexOf(a)&&(r[a]=t[a]);return r}(r,["width","height","starStyle","bgStyle","count","fps","speed","starRatio","starShape","starSize","clear","noBackground"]),y=t.useRef(null);return a(y,{width:n,height:s,starStyle:o,bgStyle:i,count:h,fps:c,speed:u,starRatio:l,starShape:d,starSize:f,clear:g,noBackground:p},t.useRef(e({count:h,height:s,width:n}))),t.createElement("canvas",Object.assign({ref:y},{width:n,height:s},S))};n.defaultProps={width:300,height:300,count:3e3,speed:3,starRatio:356,starSize:1.4,starStyle:"#fff",starShape:"round",clear:!0,bgStyle:"#000",noBackground:!1},exports.StarField=n,exports.useStarField=a;
 //# sourceMappingURL=starfield-react.js.map

dist/starfield-react.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e(t.starfieldReact={},t.react)}(this,function(t,e){function r(t){var e=t.width,r=t.height,n=Math.round(e/2),s=Math.round(r/2),o=(e+r)/2;return{stars:a(n,s,o,e,r,t.count),width:e,height:r,x:n,y:s,z:o}}function a(t,e,r,a,n,s){for(var o=[],i=0;i<s;i++)o.push({x:Math.random()*a*2-2*t,y:Math.random()*n*2-2*e,z:Math.round(Math.random()*r),stepX:0,stepY:0});return o}function n(t,a,n){var s=n.current||r({count:a.count,height:a.height,width:a.width});if(a.count!==s.stars.length)if(s.stars.length<a.count){var o=r({count:a.count-s.stars.length,height:a.height,width:a.width});s.stars=s.stars.concat(o.stars)}else s.stars.splice(0,s.stars.length-a.count);e.useEffect(function(){var e,r=t.current.getContext("2d"),n=1/s.z,o=a.speed,i=a.starRatio,c=a.starSize;r.strokeStyle="string"==typeof a.starStyle&&a.starStyle,r.lineCap=a.starShape;var h,u,l=1e3/a.fps,d=Date.now();return e=requestAnimationFrame(function t(){if(e=requestAnimationFrame(t),"number"==typeof a.fps){if(h=Date.now(),(u=h-d)<l)return;d=h-u%l}!function(t){var e=t.context,r=t.stars,a=t.width,n=t.height,s=t.z,o=t.x,i=t.y,c=t.starLineWidthRatio,h=t.speed,u=t.starRatio,l=t.starSize,d=t.strokeStyle,f=t.bgStyle,p=t.noBackground;t.clear&&(e.clearRect(0,0,a,n),p||(e.fillStyle=f,e.fillRect(0,0,a,n)));for(var g=!1,S=0;S<r.length;S++){"function"==typeof d&&(e.strokeStyle=d());var y=r[S],z=y.stepX,w=y.stepY;g=!0,y.z-=h,y.z>s&&(y.z-=s,g=!1),y.z<0&&(y.z+=s,g=!1),y.stepX=o+y.x/y.z*u,y.stepY=i+y.y/y.z*u,(g=g&&z>0&&z<a&&w>0&&w<n)&&(e.beginPath(),e.lineWidth=(1-c*y.z)*l,e.moveTo(z,w),e.lineTo(y.stepX,y.stepY),e.stroke(),e.closePath())}}(Object.assign({},{context:r,speed:o,starRatio:i,starSize:c,starLineWidthRatio:n,strokeStyle:a.starStyle,bgStyle:a.bgStyle,noBackground:a.noBackground,clear:a.clear},s))}),function(){return cancelAnimationFrame(e)}},[a])}var s=function(t){var a=t.width,s=t.height,o=t.starStyle,i=t.bgStyle,c=t.count,h=t.fps,u=t.speed,l=t.starRatio,d=t.starShape,f=t.starSize,p=t.clear,g=t.noBackground,S=function(t,e){var r={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&-1===e.indexOf(a)&&(r[a]=t[a]);return r}(t,["width","height","starStyle","bgStyle","count","fps","speed","starRatio","starShape","starSize","clear","noBackground"]),y=e.useRef(null);return n(y,{width:a,height:s,starStyle:o,bgStyle:i,count:c,fps:h,speed:u,starRatio:l,starShape:d,starSize:f,clear:p,noBackground:g},e.useRef(r({count:c,height:s,width:a}))),e.createElement("canvas",Object.assign({ref:y},{width:a,height:s},S))};s.defaultProps={width:300,height:300,count:3e3,speed:3,starRatio:356,starSize:1.4,starStyle:"rgb(255,255,255)",starShape:"round",clear:!0,bgStyle:"rgb(0,0,0)",noBackground:!1},t.StarField=s,t.useStarField=n});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e(t.starfieldReact={},t.react)}(this,function(t,e){function r(t){var e=t.width,r=t.height,n=Math.round(e/2),s=Math.round(r/2),o=(e+r)/2;return{stars:a(n,s,o,e,r,t.count),width:e,height:r,x:n,y:s,z:o}}function a(t,e,r,a,n,s){for(var o=[],i=0;i<s;i++)o.push({x:Math.random()*a*2-2*t,y:Math.random()*n*2-2*e,z:Math.round(Math.random()*r),stepX:0,stepY:0});return o}function n(t,a,n){var s=n.current||r({count:a.count,height:a.height,width:a.width});if(a.count!==s.stars.length)if(s.stars.length<a.count){var o=r({count:a.count-s.stars.length,height:a.height,width:a.width});s.stars=s.stars.concat(o.stars)}else s.stars.splice(0,s.stars.length-a.count);e.useEffect(function(){var e,r=t.current.getContext("2d"),n=1/s.z,o=a.speed,i=a.starRatio,c=a.starSize;r.strokeStyle="string"==typeof a.starStyle&&a.starStyle,r.lineCap=a.starShape;var h,u,l=1e3/a.fps,d=Date.now();return e=requestAnimationFrame(function t(){if(e=requestAnimationFrame(t),"number"==typeof a.fps){if(h=Date.now(),(u=h-d)<l)return;d=h-u%l}!function(t){var e=t.context,r=t.stars,a=t.width,n=t.height,s=t.z,o=t.x,i=t.y,c=t.starLineWidthRatio,h=t.speed,u=t.starRatio,l=t.starSize,d=t.strokeStyle,f=t.bgStyle,p=t.noBackground;t.clear&&(e.clearRect(0,0,a,n),p||(e.fillStyle=f,e.fillRect(0,0,a,n)));for(var g=!1,S=0;S<r.length;S++){"function"==typeof d&&(e.strokeStyle=d());var y=r[S],z=y.stepX,w=y.stepY;g=!0,y.z-=h,y.z>s&&(y.z-=s,g=!1),y.z<0&&(y.z+=s,g=!1),y.stepX=o+y.x/y.z*u,y.stepY=i+y.y/y.z*u,(g=g&&z>0&&z<a&&w>0&&w<n)&&(e.beginPath(),e.lineWidth=(1-c*y.z)*l,e.moveTo(z,w),e.lineTo(y.stepX,y.stepY),e.stroke(),e.closePath())}}(Object.assign({},{context:r,speed:o,starRatio:i,starSize:c,starLineWidthRatio:n,strokeStyle:a.starStyle,bgStyle:a.bgStyle,noBackground:a.noBackground,clear:a.clear},s))}),function(){return cancelAnimationFrame(e)}},[a])}var s=function(t){var a=t.width,s=t.height,o=t.starStyle,i=t.bgStyle,c=t.count,h=t.fps,u=t.speed,l=t.starRatio,d=t.starShape,f=t.starSize,p=t.clear,g=t.noBackground,S=function(t,e){var r={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&-1===e.indexOf(a)&&(r[a]=t[a]);return r}(t,["width","height","starStyle","bgStyle","count","fps","speed","starRatio","starShape","starSize","clear","noBackground"]),y=e.useRef(null);return n(y,{width:a,height:s,starStyle:o,bgStyle:i,count:c,fps:h,speed:u,starRatio:l,starShape:d,starSize:f,clear:p,noBackground:g},e.useRef(r({count:c,height:s,width:a}))),e.createElement("canvas",Object.assign({ref:y},{width:a,height:s},S))};s.defaultProps={width:300,height:300,count:3e3,speed:3,starRatio:356,starSize:1.4,starStyle:"#fff",starShape:"round",clear:!0,bgStyle:"#000",noBackground:!1},t.StarField=s,t.useStarField=n});
 //# sourceMappingURL=starfield-react.umd.js.map

package.json

 {
   "name": "starfield-react",
-  "version": "3.0.0-dev-0",
+  "version": "3.0.0-dev-1",
   "description": "A React component that draws a Starfield on a canvas dom element.",
@@ -5,0 +5,0 @@ "author": "Christopher Decoster",

README.md

 # Starfield
 
-A react component that draws a starfield in a canvas element.
+A React component that draws a StarField in a canvas element.
 
-Using the starfield is just like a regular React component from npm:
+See a live editable demo here:
 
+[![Edit starfield-react example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/musing-lamarr-84is6?fontsize=14)
+
+Getting Started:
+
 1) Install with npm or yarn:
@@ -19,7 +23,1 @@ - `npm install starfield-react`
 ```
-
-The default Starfield will look like:
-
-![Default starfield render](https://github.com/impaler/starfield-react/blob/develop/example/thumbnails/default-field.gif?raw=true)
-
-See the demo app for more examples in `demo/src/index.js`.

No alert changes

Improved metrics

Number of package files

15

increased by7.14%

Worsened metrics

Total package byte prevSize

44781

decreased by-0.07%

Lines of code

115

decreased by-0.86%

Number of lines in readme file

23

decreased by-8%

No dependency changes