estoolbox - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

CHANGELOG.md

@@ -6,2 +6,10 @@
 
+## 0.5.0
+
+### Features and Improvements
+
+* Reconfigured linting for Javascript and Scss.
+* Switched unit testing to [Jest](https://jestjs.io/).
+* Removed jQuery as a dependency.
+
 ## 0.4.0
@@ -8,0 +16,0 @@

CONTRIBUTING.md

 
 # Contributing
 
-## Testing
-
-See [https://travis-ci.org/dbtedman/estoolbox](https://travis-ci.org/dbtedman/estoolbox) for CI results, run on each commit.
-
-### Static Analysis
-
-Javascript linting support provided by [ESLint](http://eslint.org/) based on rules defined in `.eslintrc.yml` and Sass linting support provided by [Sass Lint](https://www.npmjs.com/package/sass-lint) based on rules defined in `.sass-lint.yml`
-
-```bash
-yarn test:lint
-```
-
-### Unit
-
-BDD based testing provided by [Jasmine](http://jasmine.github.io), run using [Karma](http://karma-runner.github.io) based on specifications defined in `/spec`.
-
-```bash
-yarn test:unit
-```
-
-## Releasing
-
-Based on [Publishing a Package](https://yarnpkg.com/lang/en/docs/publishing-a-package/) guide.
-
-1\. Update `CHANGELOG.md` with release details, specifying a new release number using [Semantic Versioning Format](http://semver.org/).
-
-2\. Update `package.json` with new release number.
-
-3\. Commit these changes and add new release number tag to this commit.
-
-4\. Create a [pull request](https://help.github.com/articles/about-pull-requests/) to merge these changes into master branch.
-
-5\. Checkout new release number tag locally from master branch.
-
-6\. Login to npm.
-
-```bash
-yarn login
-```
-
-7\. Publish new package version, specifying the version number.
-
-```bash
-yarn publish
-```
+*Needs to be rewritten.*

package.json

 {
   "name": "estoolbox",
   "description": "A collection of tools intended to augment the development of ES2015 targeted applications.",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "main": "./src/js/main.js",
   "scripts": {
-    "test": "gulp test",
-    "test:lint": "gulp test:lint",
-    "test:unit": "gulp test:unit"
+    "test": "npm run test:eslint && npm run test:stylelint && npm run test:jest",
+    "test:eslint": "eslint --config .eslintrc.yml ./src/**/*.js",
+    "test:stylelint": "stylelint ./src/**/*.scss",
+    "test:jest": "jest --coverage --collectCoverageFrom=src/**/*.{js,jsx}"
   },
@@ -16,25 +17,27 @@ "contributors": [
   "repository": "https://github.com/dbtedman/estoolbox",
+  "babel": {
+    "presets": [
+      "es2015"
+    ]
+  },
+  "jest": {
+    "transform": {
+      ".*": "<rootDir>/node_modules/babel-jest"
+    }
+  },
   "devDependencies": {
-    "babel-core": "6.17.0",
-    "babel-loader": "6.2.5",
-    "babel-preset-es2015": "6.16.0",
-    "eslint": "3.7.1",
-    "eslint-config-defaults": "9.0.0",
-    "gulp": "3.9.1",
-    "gulp-eslint": "3.0.1",
-    "gulp-sass-lint": "1.3.2",
-    "jasmine": "2.5.2",
-    "jasmine-core": "2.5.2",
-    "karma": "1.3.0",
-    "karma-jasmine": "1.0.2",
-    "karma-phantomjs-launcher": "1.0.2",
-    "karma-webpack": "1.8.0",
-    "phantom-jasmine": "0.3.0",
-    "sass-lint": "1.9.1",
-    "webpack": "1.13.2"
+    "@babel/core": "7.1.2",
+    "@types/jest": "23.3.5",
+    "babel-jest": "23.6.0",
+    "babel-polyfill": "6.26.0",
+    "babel-preset-es2015": "6.24.1",
+    "eslint": "5.7.0",
+    "jest": "23.6.0",
+    "stylelint": "9.6.0",
+    "stylelint-config-sass-guidelines": "5.2.0",
+    "stylelint-config-standard": "18.2.0"
   },
   "dependencies": {
-    "jquery": "3.1.1",
-    "path-to-regexp": "2.2.1"
+    "path-to-regexp": "2.4.0"
   }
 }

README.md

@@ -5,67 +5,29 @@
 [![Build Status](https://img.shields.io/travis/dbtedman/estoolbox.svg?label=tests)](https://travis-ci.org/dbtedman/estoolbox)
-[![NPM Version](https://img.shields.io/npm/v/estoolbox.svg?label=npm&colorB=ff803a)](https://www.npmjs.com/package/estoolbox)
-[![NPM Version](https://img.shields.io/npm/v/estoolbox.svg?label=yarn&colorB=ff803a)](https://yarnpkg.com/en/package/estoolbox)
-[![License: MIT](https://img.shields.io/badge/License-MIT-ff803a.svg)](LICENSE.md)
+[![Known Vulnerabilities](https://snyk.io/test/github/dbtedman/estoolbox/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dbtedman/estoolbox?targetFile=package.json)
 
-A collection of tools intended to augment the development of [ES2015](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015) targeted applications.
+A collection of tools intended to augment the development of Modern JS targeted applications.
 
 ## Where do I start?
 
-1\. Install the package.
+### Install
 
+Using [NPM](https://www.npmjs.com)
+
 ```bash
-# NPM
-npm install estoolbox --save-dev
-
-# Yarn
-yarn add estoolbox --dev
+npm install estoolbox --save-dev --save-exact
 ```
 
-2\. Import and use the desired component.
+### Choose
 
-### [Affix](src/js/affix.js)
+Available Components
 
-Provides the ability to affix content to the top of the window on scroll.
+* [Affix](docs/Affix.md)
+* [Router](docs/Router.md)
 
-```javascript
-import {Affix} from "estoolbox";
+## Want to lean more?
 
-Affix.top(".top-nav", ".content");
-```
+* See our [Contributing Guide](CONTRIBUTING.md) for details on how this repository is developed.
+* See our [Changelog](CHANGELOG.md) for details on which features, improvements, and bug fixes have been implemented
+* See our [License](LICENSE.md) for details on how you can use the code in this repository.
+* See our [Security Guide](SECURITY.md) for details on how security is considered.
 
-```scss
-@import "estoolbox/affix";
-
-.my-nav {
-  @include affix();
-  height: 300px;
-}
-
-.my-content {
-  @include affix-buffer(300px);
-}
-```
-
-> This scss example assumes you have added estoolbox to your load path, such that estoolbox maps to associated the node_modules directory.
-
-### [Router](src/js/router.js)
-
-Provides the ability to perform actions based on changes in the URL hash.
-
-```javascript
-import {Router} from "estoolbox";
-
-Router.when("/about", () => {
-  // Show the about route content.
-});
-
-Router.when("/person/:username", (route) => {
-  const username = route.variables.username;
-  // Show the person content for this user.
-});
-```
----
-
-Created [Down Under](https://en.wikipedia.org/wiki/Australia) by [Daniel Tedman](https://danieltedman.com).
-
-[![Australia](https://danieltedman.com/images/Australia.png)](https://en.wikipedia.org/wiki/Australia)

src/js/affix.js

@@ -1,3 +0,1 @@
-import $ from "jquery";
-
 export default class Affix {
@@ -9,31 +7,30 @@ /**
    * @param {String} affixToSelector Css selector for the content that is being affixed.
-   * @param {String} affixBufferSelector Optional css selector for content directly below content
+   * @param {String|null} affixBufferSelector Optional css selector for content directly below content
    *   being affixed.
    */
-  static top(affixToSelector, affixBufferSelector) {
+  static top(affixToSelector, affixBufferSelector = null) {
 
-    const $affixMe = $(affixToSelector);
-    const $needsBuffer = affixBufferSelector ? $(affixBufferSelector) : [];
+    const affixMe = document.querySelectorAll(affixToSelector);
+    const needsBuffer = affixBufferSelector !== null ? document.querySelectorAll(affixBufferSelector) : [];
 
-    if ($affixMe.length > 0) {
-      const $body = $("body");
-      const $html = $("html");
-      const $window = $(window);
-      const initialTop = $affixMe.offset().top;
+    if (affixMe.length > 0) {
+      const body = document.getElementsByTagName("body")[0];
+      const html = document.getElementsByTagName("html")[0];
+      const initialTop = affixMe.offsetTop;
 
-      $window.scroll(() => {
+      window.addEventListener("scroll", () => {
         // Firefox does not support checking scrollTop on body element so we need to check html element instead.
-        if ($body[0].scrollTop >= initialTop || $html[0].scrollTop >= initialTop) {
-          $affixMe.addClass("fixed-top");
+        if (body.scrollTop >= initialTop || html.scrollTop >= initialTop) {
+          affixMe.forEach((affixMeItem) => affixMeItem.classList.add("fixed-top"));
 
           // Buffer forces content to be dropped according to a specific height associated with affixed content.
-          if ($needsBuffer.length > 0) {
-            $needsBuffer.addClass("fixed-top-buffer");
+          if (needsBuffer.length > 0) {
+            needsBuffer.forEach((needsBufferItem) => needsBufferItem.classList.add("fixed-top-buffer"));
           }
 
         } else {
-          $affixMe.removeClass("fixed-top");
+          affixMe.forEach((affixMeItem) => affixMeItem.classList.remove("fixed-top"));
 
-          if ($needsBuffer.length > 0) {
-            $needsBuffer.removeClass("fixed-top-buffer");
+          if (needsBuffer.length > 0) {
+            needsBuffer.forEach((needsBufferItem) => needsBufferItem.classList.remove("fixed-top-buffer"));
           }
@@ -40,0 +37,0 @@ }

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

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

Improved metrics

Total package byte prevSize

85378

increased by652.23%

Dependency count

1

decreased by-50%

Dev dependency count

10

decreased by-41.18%

Number of package files

29

increased by190%

Lines of code

645

increased by347.92%

Worsened metrics

Number of lines in readme file

33

decreased by-53.52%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedpath-to-regexp@2.4.0(transitive)

• - Removedjquery@3.1.1

• - Removedjquery@3.1.1(transitive)

• - Removedpath-to-regexp@2.2.1(transitive)

• Updatedpath-to-regexp@2.4.0