canvas-effects - npm Package Compare versions

Comparing version 0.1.6 to 0.2.0

lib/CanvasEffect/index.d.ts

@@ -1,14 +0,10 @@
-export interface Config {
-    container: string;
-    width: any;
-    height: any;
-}
+import { Config } from '../types';
 export default abstract class CanvasEffect<T extends Config> {
     protected readonly config: T;
-    protected canvas: HTMLCanvasElement;
-    protected ctx: CanvasRenderingContext2D;
+    protected canvas: HTMLCanvasElement | null;
+    protected ctx: CanvasRenderingContext2D | null;
     private requestId;
     private delay;
     private fps;
-    private timer;
+    private timer?;
     constructor(config: T);
@@ -18,9 +14,9 @@ protected init(): void;
     protected render(): void;
-    private main();
-    private debounce();
-    private resize();
-    private clear();
-    private createCanvas();
-    private hasValidDimensions(w, h);
-    private setCanvasSize();
+    private main;
+    private debounce;
+    private resize;
+    private clear;
+    private createCanvas;
+    private hasValidDimensions;
+    private setCanvasSize;
 }

lib/CanvasEffect/index.js

@@ -7,2 +7,4 @@ "use strict";
         this.config = config;
+        this.canvas = null;
+        this.ctx = null;
         this.delay = 200;
@@ -22,3 +24,3 @@ this.fps = 60;
     CanvasEffect.prototype.main = function () {
-        this.requestId = requestAnimationFrame_1.requestAnimFrame(this.main.bind(this), this.fps);
+        this.requestId = (0, requestAnimationFrame_1.requestAnimFrame)(this.main.bind(this), this.fps);
         this.update();
@@ -32,4 +34,6 @@ this.render();
         }
-        clearTimeout(this.timer);
-        this.timer = setTimeout(this.resize.bind(this), this.delay);
+        if (this.timer != null) {
+            window.clearTimeout(this.timer);
+        }
+        this.timer = window.setTimeout(this.resize.bind(this), this.delay);
         this.clear();
@@ -42,3 +46,5 @@ };
     CanvasEffect.prototype.clear = function () {
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        if (this.ctx != null) {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }
     };
@@ -53,3 +59,3 @@ CanvasEffect.prototype.createCanvas = function () {
         else {
-            throw new TypeError("Invalid container: " + this.config.container + ".");
+            throw new TypeError("Invalid container: ".concat(this.config.container, "."));
         }
@@ -90,3 +96,3 @@ };
         else {
-            throw new TypeError("Invalid dimensions: " + width + ", " + height + ".");
+            throw new TypeError("Invalid dimensions: ".concat(width, ", ").concat(height, "."));
         }
@@ -93,0 +99,0 @@ };

lib/CanvasEffect/requestAnimationFrame.d.ts

@@ -1,2 +0,2 @@
-export declare function requestAnimFrame(callback: any, fps: number): number | ((callback: any) => void);
-export declare function cancelAnimFrame(callback: any): void;
+export declare function requestAnimFrame(callback: any, fps: number): number | ((callback: () => void) => void);
+export declare function cancelAnimFrame(callback: number): void;

lib/CanvasEffect/requestAnimationFrame.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.cancelAnimFrame = exports.requestAnimFrame = void 0;
 function requestAnimFrame(callback, fps) {
     return requestAnimationFrame(callback) ||
-        webkitRequestAnimationFrame(callback) ||
         function (callback) {
@@ -7,0 +7,0 @@ setTimeout(callback, 1000 / fps);

lib/CanvasEffect/validate.d.ts

 export declare function initialized(prop: any): boolean;
-export declare function array(prop: any, length: any): boolean;
+export declare function array(prop: any, length: number): boolean;
 export declare function boolean(prop: any): boolean;
 export declare function number(prop: any): boolean;
 export declare function color(prop: any): boolean;

lib/CanvasEffect/validate.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.color = exports.number = exports.boolean = exports.array = exports.initialized = void 0;
 function initialized(prop) {
@@ -4,0 +5,0 @@ return typeof prop !== 'undefined';

lib/index.d.ts

@@ -1,3 +0,3 @@
-import Constellations from './Constellations';
-import Polygonal from './Polygonal';
-export { Constellations, Polygonal };
+import Stars from './Stars';
+import Delaunay from './Delaunay';
+export { Stars, Delaunay };

lib/index.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var Constellations_1 = require("./Constellations");
-exports.Constellations = Constellations_1.default;
-var Polygonal_1 = require("./Polygonal");
-exports.Polygonal = Polygonal_1.default;
+exports.Delaunay = exports.Stars = void 0;
+var Stars_1 = __importDefault(require("./Stars"));
+exports.Stars = Stars_1.default;
+var Delaunay_1 = __importDefault(require("./Delaunay"));
+exports.Delaunay = Delaunay_1.default;

package.json

 {
   "name": "canvas-effects",
   "description": "modular canvas visualizations",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "main": "./lib/index.js",
@@ -13,3 +13,3 @@ "types": "./lib/index.d.ts",
     "type": "git",
-    "url": "git+https://github.com/getmicah/canvas-effects.git"
+    "url": "git+https://github.com/micahco/canvas-effects.git"
   },
@@ -19,17 +19,18 @@ "author": "Micah Cowell",
   "bugs": {
-    "url": "https://github.com/getmicah/canvas-effects/issues"
+    "url": "https://github.com/micahco/canvas-effects/issues"
   },
-  "homepage": "https://github.com/getmicah/canvas-effects#readme",
+  "homepage": "https://github.com/micahco/canvas-effects#readme",
   "devDependencies": {
-    "awesome-typescript-loader": "^3.2.3",
-    "source-map-loader": "^0.2.3",
-    "typescript": "^2.5.3",
-    "webpack": "^1.14.0",
-    "webpack-dev-server": "^1.16.2"
+    "@types/delaunator": "^5.0.0",
+    "ts-loader": "^9.4.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@types/delaunator": "^1.0.0",
-    "delaunator": "^1.0.4",
-    "open-simplex-noise": "^1.4.0"
+    "delaunator": "^5.0.0",
+    "open-simplex-noise": "^2.5.0"
   }
 }

README.md

@@ -6,2 +6,4 @@ # canvas-effects
 
+BROKEN (moving to 0.2)
+
 ## Getting Started
@@ -8,0 +10,0 @@

webpack.config.ts

@@ -1,5 +0,18 @@
-const webpack = require('webpack');
+const path = require('path');
 
 module.exports = {
-	entry: "./dev/index.ts",
+	entry: './dev/index.ts',
+	mode: 'development',
+	module: {
+		rules: [
+			{
+				test: /\.ts?$/,
+				use: 'ts-loader',
+				exclude: /node_modules/,
+			},
+		],
+	},
+	resolve: {
+		extensions: ['.tsx', '.ts', '.js'],
+	},
 	output: {
@@ -10,40 +23,9 @@ filename: 'bundle.min.js',
 	},
-
-	// Enable sourcemaps for debugging webpack's output.
-	devtool: "source-map",
-
-	resolve: {
-		// Add '.ts' and '.tsx' as resolvable extensions.
-		extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
-	},
-
-	module: {
-		loaders: [
-			// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
-			{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
-		],
-
-		preLoaders: [
-			// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-			{ test: /\.js$/, loader: "source-map-loader" }
-		]
-	},
-
-	plugins: [
-		new webpack.optimize.UglifyJsPlugin({
-			minimize: true,
-			compress: {
-				warnings: false
-			}
-		})
-	],
-
 	devServer: {
-		colors: true,
-		inline: true,
-		port: 8080,
-		historyApiFallback: {
-			index: 'dev/index.html'
-		}
+		static: {
+			directory: path.join(__dirname, 'dev'),
+		},
+		compress: true,
+		port: 9000
 	}
 };

New 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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39730

increased by19.64%

Dependency count

2

decreased by-33.33%

Number of package files

24

increased by9.09%

Lines of code

936

increased by18.63%

Number of lines in readme file

265

increased by0.76%

Worsened metrics

Dev dependency count

7

increased by40%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addeddelaunator@5.0.1(transitive)

• + Addedopen-simplex-noise@2.5.0(transitive)

• + Addedrobust-predicates@3.0.2(transitive)

• - Removed@types/delaunator@^1.0.0

• - Removed@types/delaunator@1.0.0(transitive)

• - Removeddelaunator@1.0.5(transitive)

• - Removedopen-simplex-noise@1.7.0(transitive)

• Updateddelaunator@^5.0.0

• Updatedopen-simplex-noise@^2.5.0