frs-hide-scrollbar - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+## [0.4.0](https://github.com/FRSource/FRS-hide-scrollbar/compare/v0.3.0...v0.4.0) (2019-10-31)
+
+
+### ⚠ BREAKING CHANGES
+
+* FRSHideScrollbar is now shipped via regular export rather than default one
+
+* migrate from parcel to microbundle ([#13](https://github.com/FRSource/FRS-hide-scrollbar/issues/13)) ([3f0bafd](https://github.com/FRSource/FRS-hide-scrollbar/commit/3f0bafd4dc800f2c98fef097bbfa8f904a30dec1))
+
 ### [0.3.1](https://github.com/FRSource/FRS-hide-scrollbar/compare/v0.3.0...v0.3.1) (2019-10-30)

dist/FRS-hide-scrollbar.js

@@ -1,6 +0,2 @@
-parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"wyX0":[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e,t=window.FRSHideScrollbar||{},l=t.config=t.config||{},i=t;function n(){document.readyState&&"loading"!==document.readyState?s():window.addEventListener("load",s,{passive:!0}),window.addEventListener("resize",s,{passive:!0})}function s(){var e=r("div",document.body);e.style.position="absolute",e.style["z-index"]="-1",e.style.width="100px",e.style.overflow="scroll";var t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),t!==l.scrollWidth&&(l.scrollWidth=t,a()),t}function r(e,t){return t.appendChild(document.createElement(e))}function a(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:l.styleElement,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e;if(i){var n=i.styleElement,s=n.innerText.lastIndexOf("."+i.className+"{margin-right:-");n.innerText=n.innerText.substring(0,s)}0!==l.scrollWidth&&(e=Object.assign({},l),t.innerText+="."+l.className+"{margin-right:-"+(l.scrollWidth+.5)+"px;height:calc(100% + "+l.scrollWidth+"px)}")}exports.default=i,t.refreshScrollWidth=s,t.createNewChild=r,t.updateStyles=a,l.className=l.className||"frs-hide-scroll",l.wrapperClassName=l.wrapperClassName||"frs-hide-scroll-wrapper",l.styleElement=l.styleElement||document.getElementsByTagName("style")[0]||r("style",document.head),l.autoInit=void 0===l.autoInit||l.autoInit,l.autoInit&&n();
-},{}],"JC3L":[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=require("./src/scripts/FRSHideScrollbar"),r=e.FRSHideScrollbar;exports.default=r;
-},{"./src/scripts/FRSHideScrollbar":"wyX0"}]},{},["JC3L"], null)
-//# sourceMappingURL=/FRS-hide-scrollbar.js.map
+var e,t=window.FRSHideScrollbar||{},l=t.config=t.config||{};function i(){var e=n("div",document.body);e.style.position="absolute",e.style["z-index"]="-1",e.style.width="100px",e.style.overflow="scroll";var t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),t!==l.scrollWidth&&(l.scrollWidth=t,s()),t}function n(e,t){return t.appendChild(document.createElement(e))}function s(t,i){if(void 0===t&&(t=l.styleElement),void 0===i&&(i=e),i){var n=i.styleElement,s=n.innerText.lastIndexOf("."+i.className+"{margin-right:-");n.innerText=n.innerText.substring(0,s)}0!==l.scrollWidth&&(e=Object.assign({},l),t.innerText+="."+l.className+"{margin-right:-"+(l.scrollWidth+.5)+"px;height:calc(100% + "+l.scrollWidth+"px)}")}t.refreshScrollWidth=i,t.createNewChild=n,t.updateStyles=s,l.className=l.className||"frs-hide-scroll",l.wrapperClassName=l.wrapperClassName||"frs-hide-scroll-wrapper",l.styleElement=l.styleElement||document.getElementsByTagName("style")[0]||n("style",document.head),l.autoInit=void 0===l.autoInit||l.autoInit,l.autoInit&&(document.readyState&&"loading"!==document.readyState?i():window.addEventListener("load",i,{passive:!0}),window.addEventListener("resize",i,{passive:!0})),exports.FRSHideScrollbar=t;
+//# sourceMappingURL=FRS-hide-scrollbar.js.map

package.json

 {
   "name": "frs-hide-scrollbar",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Easy & lightweight solution for cross-browser scrollbar hiding",
-  "main": "index.js",
-  "esnext": "index.mjs",
+  "source": "src/index.mjs",
+  "main": "dist/FRS-hide-scrollbar.js",
+  "module": "dist/FRS-hide-scrollbar.mjs",
+  "umd:main": "dist/FRS-hide-scrollbar.umd.js",
+  "unpkg": "dist/FRS-hide-scrollbar.umd.js",
+  "esnext": "dist/FRS-hide-scrollbar.js",
+  "sass": "src/styles/FRSHideScrollbar.scss",
+  "styles": "dist/FRS-hide-scrollbar.css",
   "scripts": {
@@ -12,16 +18,11 @@ "test": "tap --node-arg=--experimental-modules ./src/scripts/*.spec.test.js",
     "prestart": "yarn clean",
-    "start": "parcel watch index.mjs index.scss -o FRS-hide-scrollbar",
+    "start": "microbundle watch -o docs",
     "prebuild": "yarn clean",
-    "build": "npm-run-all -p build:bundle build:browser build:example",
-    "postbuild": "yarn docs",
-    "build:bundle": "parcel build index.mjs index.scss -d dist -o FRS-hide-scrollbar --detailed-report",
-    "build:browser": "node ./scripts/replace \"let FRSHideScrollbar =\" \"let FRSHideScrollbar = window['FRSHideScrollbar'] =\" src/scripts/FRSHideScrollbar.mjs | node ./scripts/replace \"export default FRSHideScrollbar;\" \"\" | google-closure-compiler  --compilation_level ADVANCED --isolation_mode IIFE --assume_function_wrapper --js_output_file dist/FRS-hide-scrollbar.browser.js",
-    "build:example": "parcel build docs/example.src.html -d docs --public-url /FRS-hide-scrollbar -o example.dist.html",
+    "build": "yarn build:bundle && yarn build:example",
+    "build:bundle": "microbundle",
+    "build:example": "cpy dist/* docs",
     "prerelease": "yarn test-coverage && yarn build && git add dist && git add docs",
-    "release": "standard-version",
+    "release": "yarn build && standard-version",
     "postrelease": "git push --follow-tags origin master && yarn publish",
-    "predevExample": "yarn clean",
-    "devExample": "parcel docs/example.src.html -d docs -o example.dist.html",
-    "clean": "rimraf dist/**/* && rimraf docs/*.dist.html && rimraf docs/report.html && rimraf docs/*.{js,css,map} && rimraf coverage",
-    "docs": "jsdoc2md src/**/*.js > docs/api.md"
+    "clean": "rimraf dist/**/* && rimraf docs/*.{js,mjs,css,map} && rimraf coverage"
   },
@@ -52,3 +53,2 @@ "author": "Jakub Freisler <[e-mail]>",
   ],
-  "unpkg": "dist/FRS-hide-scrollbar.browser.js",
   "bugs": {
@@ -58,12 +58,7 @@ "url": "https://github.com/FRSource/FRS-hide-scrollbar/issues"
   "devDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "@babel/preset-env": "^7.4.4",
     "coveralls": "^3.0.7",
-    "esm": "^3.0.84",
-    "google-closure-compiler": "^20191027.0.0",
-    "jsdoc-to-markdown": "^5.0.0",
+    "cpy-cli": "^2.0.0",
     "jsdom": "^15.0.0",
-    "npm-run-all": "^4.1.3",
-    "parcel-bundler": "^1.7.1",
-    "parcel-plugin-bundle-visualiser": "^1.0.2",
+    "microbundle": "^0.11.0",
+    "node-sass": "^4.13.0",
     "postcss-import": "^12.0.0",
@@ -73,3 +68,2 @@ "postcss-reporter": "^6.0.0",
     "rimraf": "^3.0.0",
-    "sass": "^1.14.1",
     "standard-version": "^7.0.0",
@@ -76,0 +70,0 @@ "tap": "^14.1.11"

README.md

@@ -0,11 +1,16 @@
+# FRS-hide-scrollbar
+
 [![NPM version](https://img.shields.io/npm/v/frs-hide-scrollbar.svg?style=flat)](https://www.npmjs.com/package/frs-hide-scrollbar)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 [![Build Status](https://travis-ci.com/FRSource/FRS-hide-scrollbar.svg?branch=master)](https://travis-ci.org/FRSource/FRS-hide-scrollbar)
 [![Coverage Status](https://coveralls.io/repos/github/FRSource/FRS-hide-scrollbar/badge.svg?branch=master)](https://coveralls.io/github/FRSource/FRS-hide-scrollbar?branch=master)
-[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
-[![Greenkeeper badge](https://badges.greenkeeper.io/FRSource/FRS-hide-scrollbar.svg)](https://greenkeeper.io/)
+[![Dependabot badge](https://api.dependabot.com/badges/status?host=github&repo=FRSource/FRS-hide-scrollbar)](https://dependabot.com/)
+[![Dependencies none](https://img.shields.io/badge/dependencies-none-brightgreen)](https://david-dm.org/frsource/frs-hide-scrollbar)
+[![Dev dependencies status](https://david-dm.org/frsource/frs-hide-scrollbar/dev-status.svg)](https://david-dm.org/frsource/frs-hide-scrollbar?type=dev)
+[![codebeat badge](https://codebeat.co/badges/5496a006-a13d-48cc-baeb-37c79a1f6444)](https://codebeat.co/projects/github-com-frsource-frs-replace-master)
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![Bundle size](https://img.shields.io/bundlephobia/minzip/frs-hide-scrollbar)](https://bundlephobia.com/result?p=frs-hide-scrollbar)
 
-# FRS-hide-scrollbar
-
 FRS-hide-scrollbar is cross-browser (supports both desktop & mobile devices), simple & lightweight library for hiding both horizontal & vertical scrollbars!
 
-For more information, please see [docs](https://frsource.github.io/FRS-hide-scrollbar/).
+For more information, please see [docs](https://frsource.github.io/FRS-hide-scrollbar/).

src/scripts/FRSHideScrollbar.spec.test.js

 const tap = require('tap')
 const jsdom = require('jsdom')
 const {JSDOM} = jsdom
-let window, document, FRSHideScrollBar
+let window, document, FRSHideScrollbar
 let CACHE_BUSTER = -1
@@ -10,3 +10,3 @@
 tap.test('without <style> element in DOM new one', (t) => {
-  FRSHideScrollBar.refreshScrollWidth()
+  FRSHideScrollbar.refreshScrollWidth()
 
@@ -16,3 +16,3 @@ const styleEls = document.getElementsByTagName('style')
   t.is(styleEls.length, 1, 'should be created')
-  t.is(styleEls[0], FRSHideScrollBar.config.styleElement, 'should be visible under config.styleElement')
+  t.is(styleEls[0], FRSHideScrollbar.config.styleElement, 'should be visible under config.styleElement')
 
@@ -23,5 +23,5 @@ t.end()
 tap.test('window already loaded', {timeout: 3000}, (t) => {
-  t.isNot(typeof FRSHideScrollBar.config.scrollWidth, 'undefined',
+  t.isNot(typeof FRSHideScrollbar.config.scrollWidth, 'undefined',
     'scrollWidth should be recalculated (will NOT be undef)')
-  t.is(FRSHideScrollBar.refreshScrollWidth(), FRSHideScrollBar.config.scrollWidth,
+  t.is(FRSHideScrollbar.refreshScrollWidth(), FRSHideScrollbar.config.scrollWidth,
     'scrollWidth should be the same as refreshScrollWidth return value')
@@ -40,3 +40,3 @@ t.end()
 
-  t.is(FRSHideScrollBar.config.styleElement.innerHTML, '', 'styleElement should be empty')
+  t.is(FRSHideScrollbar.config.styleElement.innerHTML, '', 'styleElement should be empty')
 
@@ -49,5 +49,5 @@ t.end()
 
-  t.isNot(typeof FRSHideScrollBar.config.scrollWidth, 'undefined',
+  t.isNot(typeof FRSHideScrollbar.config.scrollWidth, 'undefined',
     'scrollWidth should be recalculated (will NOT be undef)')
-  t.is(FRSHideScrollBar.refreshScrollWidth(), FRSHideScrollBar.config.scrollWidth,
+  t.is(FRSHideScrollbar.refreshScrollWidth(), FRSHideScrollbar.config.scrollWidth,
     'scrollWidth should be the same as refreshScrollWidth return value')
@@ -58,5 +58,5 @@ t.end()
 tap.test('when loaded after DOM init', {timeout: 3000}, async (t) => {
-  t.isNot(typeof FRSHideScrollBar.config.scrollWidth, 'undefined',
+  t.isNot(typeof FRSHideScrollbar.config.scrollWidth, 'undefined',
     'scrollWidth should be recalculated (will NOT be undef)')
-  t.is(FRSHideScrollBar.refreshScrollWidth(), FRSHideScrollBar.config.scrollWidth,
+  t.is(FRSHideScrollbar.refreshScrollWidth(), FRSHideScrollbar.config.scrollWidth,
     'scrollWidth should be the same as refreshScrollWidth return value')
@@ -68,10 +68,10 @@ t.end()
   const styleEl = document.getElementsByTagName('style')[0]
-  t.is(styleEl, FRSHideScrollBar.config.styleElement, 'styleEl should be visible under config.styleElement')
+  t.is(styleEl, FRSHideScrollbar.config.styleElement, 'styleEl should be visible under config.styleElement')
 
-  const oldClassName = FRSHideScrollBar.config.className
+  const oldClassName = FRSHideScrollbar.config.className
   const newClassName = 'new-class-name'
   const styleContentExpected = styleEl.innerHTML.replace(new RegExp(oldClassName, 'g'), newClassName)
 
-  FRSHideScrollBar.config.className = newClassName
-  FRSHideScrollBar.updateStyles()
+  FRSHideScrollbar.config.className = newClassName
+  FRSHideScrollbar.updateStyles()
 
@@ -90,4 +90,4 @@ t.is(styleEl.innerHTML, styleContentExpected, 'changes style content as well')
     ct.test('when scrollWidth hasn\'t changed', (cct) => {
-      FRSHideScrollBar.updateStyles = () => cct.fail('shouldn\'t be called')
-      FRSHideScrollBar.refreshScrollWidth()
+      FRSHideScrollbar.updateStyles = () => cct.fail('shouldn\'t be called')
+      FRSHideScrollbar.refreshScrollWidth()
 
@@ -98,23 +98,23 @@ cct.end()
     ct.test('when scrollWidth has changed', (cct) => {
-      const originalUpdateStyles = FRSHideScrollBar.updateStyles
+      const originalUpdateStyles = FRSHideScrollbar.updateStyles
 
-      FRSHideScrollBar.updateStyles = () => cct.pass('should be called')
-      FRSHideScrollBar.config.scrollWidth += 1
-      FRSHideScrollBar.refreshScrollWidth()
+      FRSHideScrollbar.updateStyles = () => cct.pass('should be called')
+      FRSHideScrollbar.config.scrollWidth += 1
+      FRSHideScrollbar.refreshScrollWidth()
 
-      const styleEl = FRSHideScrollBar.config.styleElement
+      const styleEl = FRSHideScrollbar.config.styleElement
       const styleContentExpected = styleEl.innerHTML
 
-      FRSHideScrollBar.updateStyles = originalUpdateStyles
+      FRSHideScrollbar.updateStyles = originalUpdateStyles
 
-      FRSHideScrollBar.config.scrollWidth = 12 // need to mock, so styles are appended to _styleElement
-      FRSHideScrollBar.updateStyles()
-      FRSHideScrollBar.refreshScrollWidth()
+      FRSHideScrollbar.config.scrollWidth = 12 // need to mock, so styles are appended to _styleElement
+      FRSHideScrollbar.updateStyles()
+      FRSHideScrollbar.refreshScrollWidth()
 
       styleEl.innerHTML = styleEl.innerHTML.replace(
-        new RegExp('margin-right:-' + (FRSHideScrollBar.config.scrollWidth + .5) + 'px;'),
-        new RegExp('margin-right:-' + (FRSHideScrollBar.config.scrollWidth + 1.5) + 'px;')
+        new RegExp('margin-right:-' + (FRSHideScrollbar.config.scrollWidth + .5) + 'px;'),
+        new RegExp('margin-right:-' + (FRSHideScrollbar.config.scrollWidth + 1.5) + 'px;')
       )
-      FRSHideScrollBar.config.scrollWidth += 1
-      FRSHideScrollBar.refreshScrollWidth()
+      FRSHideScrollbar.config.scrollWidth += 1
+      FRSHideScrollbar.refreshScrollWidth()
 
@@ -133,12 +133,10 @@ cct.is(styleEl.innerHTML, styleContentExpected, 'changes style content as well')
 async function onBeforeEach (windowOptions = undefined, mimicNotLoadedWindow = false) {
-  ({window, document, FRSHideScrollBar} = await initializeModuleInDOM(`./FRSHideScrollbar.mjs?v=${++CACHE_BUSTER}`,
+  ({window, document, FRSHideScrollbar} = await initializeModuleInDOM(`./FRSHideScrollbar.mjs?v=${++CACHE_BUSTER}`,
     windowOptions, mimicNotLoadedWindow))
 
-  FRSHideScrollBar = FRSHideScrollBar.default
-  FRSHideScrollBar.cache = CACHE_BUSTER
+  FRSHideScrollbar.cache = CACHE_BUSTER
 }
 
-function initializeModuleInDOM (module, windowOptions = undefined, mimicNotLoadedWindow = false) {
+async function initializeModuleInDOM (module, windowOptions = undefined, mimicNotLoadedWindow = false) {
   const {window} = new JSDOM('')
-  let resultPromise = Promise.resolve()
 
@@ -157,3 +155,3 @@ global.window = window
     if (!window.document.readyState || window.document.readyState === 'loading') {
-      resultPromise = new Promise((resolve) => {
+      await new Promise((resolve) => {
         window.addEventListener('load', resolve, {passive: true})
@@ -169,36 +167,30 @@ })
 
-  return resultPromise.then(() => new Promise(resolve => {
-      import(module)
-        .then(moduleObj => {
-            if (mimicNotLoadedWindow) {
-              Object.defineProperty(window.document, 'readyState', {
-                get () {
-                  return 'complete'
-                }
-              })
-            }
+  const {FRSHideScrollbar} = await import(module)
+  if (mimicNotLoadedWindow) {
+    Object.defineProperty(window.document, 'readyState', {
+      get () { return 'complete' }
+    })
+  }
 
-            const resolver = () => resolve({
-              window: window,
-              FRSHideScrollBar: moduleObj,
-              document: window.document
-            })
+  return new Promise(resolve => {
+    const resolver = () => resolve({
+      window,
+      FRSHideScrollbar,
+      document: window.document
+    })
 
-            if (!window.document.readyState || window.document.readyState === 'loading') {
-              window.addEventListener(
-                'load',
-                resolver,
-                {passive: true}
-              )
-            } else {
-              resolver()
-            }
+    if (!window.document.readyState || window.document.readyState === 'loading') {
+      window.addEventListener(
+        'load',
+        resolver,
+        {passive: true}
+      )
+    } else {
+      resolver()
+    }
 
-            if (mimicNotLoadedWindow) {
-              window.dispatchEvent(new window.Event('load'))
-            }
-          }
-        )
+    if (mimicNotLoadedWindow) {
+      window.dispatchEvent(new window.Event('load'))
     }
-  ))
+  });
 }

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

11

-35.29%

Number of package files

17

13.33%

Number of low quality alerts

1

-50%

Number of lines in readme file

17

54.55%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

371621

-32.05%

Lines of code

222

-4.72%

No dependency changes