zoomwall.js - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

package.json

 {
   "name": "zoomwall.js",
-  "version": "1.2.0",
+  "type": "module",
+  "version": "2.0.0",
   "description": "A content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode.",
-  "main": "zoomwall.js",
+  "main": "./lib/zoomwall.js",
+  "types": "./lib/zoomwall.d.ts",
   "files": [
-    "zoomwall.js",
-    "zoomwall.css"
+    "./lib/zoomwall.js",
+    "./lib/zoomwall.css"
   ],
   "scripts": {
-    "lint": "eslint zoomwall.js",
+    "build": "tsc --project tsconfig.json",
+    "source-map": "tsc --sourceMap --project tsconfig.json",
+    "copy": "copyfiles -u 1 \"./src/zoomwall.css\" lib",
+    "docs": "typedoc --theme minimal --mode library --out docs src/zoomwall.ts",
     "gpr-package-rename": "node scripts/gpr-package-rename.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint-js": "eslint \"**/*.{ts,js,mjs,cjs}\"",
+    "lint-css": "stylelint \"**/*.css\"",
+    "lint": "concurrently \"npm:lint-*\"",
+    "format-check": "prettier --check .",
+    "format": "prettier --write .",
+    "test": "cross-env JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "cover:test": "cross-env JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage",
+    "cover:patch": "node scripts/patch-puppeteer-istanbul-output.js",
+    "cover:copy:map": "npx copyfiles \"lib/*.map\" \"./.nyc_output/js\"",
+    "cover:copy:src": "npx copyfiles \"src/*.ts\" \"./.nyc_output/js\"",
+    "cover:report": "nyc report --reporter=lcov --exclude-after-remap=false",
+    "cover:all": "npm run source-map && npm run cover:copy:map && npm run cover:copy:src && npm run cover:test && npm run cover:patch && npm run cover:report",
+    "prepare": "concurrently \"npm:build\" \"npm:copy\""
   },
@@ -31,4 +48,32 @@ "repository": {
   "devDependencies": {
-    "eslint": "^7.3.1"
+    "@istanbuljs/nyc-config-typescript": "^1.0.1",
+    "@types/expect-puppeteer": "^4.4.3",
+    "@types/jest": "^26.0.9",
+    "@types/jest-environment-puppeteer": "^4.3.2",
+    "@types/puppeteer": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^3.8.0",
+    "@typescript-eslint/parser": "^3.8.0",
+    "concurrently": "^5.3.0",
+    "copyfiles": "^2.3.0",
+    "cross-env": "^7.0.2",
+    "eslint": "^7.6.0",
+    "eslint-config-prettier": "^6.11.0",
+    "expect-puppeteer": "^4.4.0",
+    "jest": "^26.2.2",
+    "jest-dev-server": "^4.4.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-puppeteer": "^4.4.0",
+    "nyc": "^15.1.0",
+    "prettier": "2.0.5",
+    "puppeteer": "^v2.1.1",
+    "puppeteer-to-istanbul": "github:skerit/puppeteer-to-istanbul#d0ebc44",
+    "source-map-support": "^0.5.19",
+    "stylelint": "^13.6.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-standard": "^20.0.0",
+    "ts-jest": "^26.1.4",
+    "ts-node": "^8.10.2",
+    "typedoc": "^0.17.0-3",
+    "typescript": "^3.9.7"
   }
 }

README.md

@@ -1,3 +0,3 @@
-zoomwall.js
-===========
+# zoomwall.js
+
 zoomwall.js is a content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode.
@@ -9,6 +9,8 @@
 ![Node.js Package](https://github.com/ericleong/zoomwall.js/workflows/Node.js%20Package/badge.svg)
+[![Coverage Status](https://coveralls.io/repos/github/ericleong/zoomwall.js/badge.svg?branch=master)](https://coveralls.io/github/ericleong/zoomwall.js?branch=master)
 
-install
--------
+## install
+
 For those using [npm](https://www.npmjs.com/)
+
 ```bash
@@ -18,16 +20,16 @@ $ npm install zoomwall.js
 
-usage
------
+## usage
 
 ### html
 
-First, add a reference to `zoomwall.js` and `zoomwall.css` in your HTML file, like this:
+First, add a reference to `zoomwall.css` in your HTML file, like this:
+
 ```html
 <link rel="stylesheet" type="text/css" href="zoomwall.css" />
-<script type="text/javascript" src="zoomwall.js"></script>
 ```
 
-Add the `zoomwall` class to the container element. 
+Add the `zoomwall` class to the container element.
 
 #### responsive images
+
 To have the browser determine when to load a high resolution image, use [responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
@@ -37,4 +39,12 @@
 <div id="gallery" class="zoomwall">
-    <img srcset="01_lowres.jpg 200w, 01_highres.jpg 800w" sizes="(max-width: 1200px) 200px, 800px" src="01_lowres.jpg">
-    <img srcset="02_lowres.jpg 200w, 02_highres.jpg 800w" sizes="(max-width: 1200px) 200px, 800px" src="02_lowres.jpg">
+  <img
+    srcset="01_lowres.jpg 200w, 01_highres.jpg 800w"
+    sizes="(max-width: 1200px) 200px, 800px"
+    src="01_lowres.jpg"
+  />
+  <img
+    srcset="02_lowres.jpg 200w, 02_highres.jpg 800w"
+    sizes="(max-width: 1200px) 200px, 800px"
+    src="02_lowres.jpg"
+  />
 </div>
@@ -44,2 +54,3 @@ ```
 #### high resolution image
+
 Include high resolution photos using the `data-highres` attribute of each `<img>` tag.
@@ -49,4 +60,4 @@
 <div id="gallery" class="zoomwall">
-    <img src="01_lowres.jpg" data-highres="01_highres.jpg" />
-    <img src="02_lowres.jpg" data-highres="02_highres.jpg" />
+  <img src="01_lowres.jpg" data-highres="01_highres.jpg" />
+  <img src="02_lowres.jpg" data-highres="02_highres.jpg" />
 </div>
@@ -57,7 +68,13 @@ ```
 
+See [documentation](http://ericleong.github.io/zoomwall.js/docs). Remember to import the module.
+
+```javascript
+import * as zoomwall from "zoomwall.js";
+```
+
 Run `zoomwall.create()` on the container element (`#gallery` in this example), after they have loaded.
 
 ```javascript
-window.onload = function() {
-    zoomwall.create(document.getElementById('gallery'));
+window.onload = function () {
+  zoomwall.create(document.getElementById("gallery"));
 };
@@ -71,5 +88,5 @@ ```
 ```javascript
-zoomwall.create(document.getElementById('first-gallery'));
-zoomwall.create(document.getElementById('second-gallery'));
+zoomwall.create(document.getElementById("first-gallery"));
+zoomwall.create(document.getElementById("second-gallery"));
 zoomwall.keys();
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

86

increased by24.64%

Is type module

Yes

Worsened metrics

Total package byte prevSize

6688

decreased by-61.66%

Dev dependency count

29

increased by2800%

Number of package files

3

decreased by-40%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes