Add rollup.js

.eslintignore

@@ -0,0 +1,2 @@
+coverage
+dist

.eslintrc.json

@@ -1,13 +1,17 @@
 {
-  "extends": "airbnb-base",
-  "plugins": [
-  	"import"
-  ],
   "env": {
     "browser": true,
-    "node": true
+    "es2021": true,
+    "node": true,
+    "jest": true
+  },
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "overrides": [
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
   },
-  "globals": {
-    "document": false
+  "rules": {
   }
 }

.gitignore

@@ -4,58 +4,24 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
+# jest
 coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-.DS_Store
-.vscode

.npmignore

@@ -0,0 +1,14 @@
+public
+src
+.editorconfig
+.eslintignore
+.eslintrc.json
+.gitignore
+.prettierrc
+.travis.yml
+CONTRIBUTING.md
+LICENSE.md
+README.md
+babel.config.cjs
+jest.config.cjs
+rollup.config.js

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "none",
+  "semi": false,
+  "singleQuote": true
+}

.travis.yml

@@ -8,7 +8,7 @@ cache:
     "node_modules"
 
 before_script:
-  - npm run build:all
+  - npm run build
 
 after_success:
   - npm run coveralls

README.md

@@ -4,72 +4,63 @@
 
 ScrollSpy in pure JavaScript.
 
-## Browser Support
-
-![IE](https://cloud.githubusercontent.com/assets/398893/3528325/20373e76-078e-11e4-8e3a-1cb86cf506f0.png) | ![Chrome](https://cloud.githubusercontent.com/assets/398893/3528328/23bc7bc4-078e-11e4-8752-ba2809bf5cce.png) | ![Firefox](https://cloud.githubusercontent.com/assets/398893/3528329/26283ab0-078e-11e4-84d4-db2cf1009953.png) | ![Opera](https://cloud.githubusercontent.com/assets/398893/3528330/27ec9fa8-078e-11e4-95cb-709fd11dac16.png) | ![Safari](https://cloud.githubusercontent.com/assets/398893/3528331/29df8618-078e-11e4-8e3e-ed8ac738693f.png)
---- | --- | --- | --- | ---
-IE 10+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔
-
 ## Installation
 
-```bash
+```bash
 $ npm install vanillajs-scrollspy --save
 ```
 
 ## How to use
 
 ```javascript
-const scrollspy = VanillaScrollspy(menu, speed, easing);
-scrollspy.init();
+const menu = document.querySelector('#navbar')
+const scrollspy = VanillaScrollspy({ menu })
+scrollspy.init()
 ```
 
 - **menu:** menu selector (#id, .class, ...)
 - **speed (optional):** scroll speed, default value `2000`
-- **easing (optional):** scroll type `'easeOutSine'`, `'easeInOutSine'` or `'easeInOutQuint'`, default value `'easeInOutQuint'`
+- **easing (optional):** scroll type `'easeOutSine'`, `'easeInOutSine'` or `'easeInOutQuint'`, default value `'easeOutSine'`
 
 ### ES6
 
 ```javascript
-import VanillaScrollspy from 'vanillajs-scrollspy';
+import VanillaScrollspy from 'vanillajs-scrollspy'
 
-const navbar = document.querySelector('#navbar');
-const scrollspy = VanillaScrollspy(navbar);
-scrollspy.init();
+const menu = document.querySelector('#navbar')
+const scrollspy = VanillaScrollspy({ menu })
+scrollspy.init()
 ```
 
 ### CommonJS
 
 ```javascript
-const VanillaScrollspy = require('vanillajs-scrollspy').default;
+const VanillaScrollspy = require('vanillajs-scrollspy').default
 
-const navbar = document.querySelector('#navbar');
-const scrollspy = VanillaScrollspy(navbar);
-scrollspy.init();
+const menu = document.querySelector('#navbar')
+const scrollspy = VanillaScrollspy({ menu })
+scrollspy.init()
 ```
 
 ### UMD in Browser
 
 ```html
-<!-- to import non-minified version -->
-<script src="./dist/vanillajs-scrollspy.js"></script>
-
-<!-- to import minified version -->
 <script src="./dist/vanillajs-scrollspy.min.js"></script>
 ```
 
 After that the library will be available to the Global as `VanillaScrollspy`. Follow an example:
 
 ``` javascript
-const navbar = document.querySelector('#navbar');
-const scrollspy = VanillaScrollspy(navbar);
-scrollspy.init();
+const menu = document.querySelector('#navbar')
+const scrollspy = VanillaScrollspy({ menu })
+scrollspy.init()
 ```
 
 ## Examples
 
 ### Basic template
 
-Available in [`examples/index.html`](examples/index.html).
+Available in [`public/index.html`](public/index.html).
 
 ``` html
 <!DOCTYPE html>
@@ -78,86 +69,67 @@ Available in [`examples/index.html`](examples/index.html).
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>VanillaJS ScrollSpy</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
     <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+
       html, body {
         height: 100%;
       }
-      .navbar-brand > .navbar-item {
-        font-size: 20px;
-        font-weight: bold;
-      }
-      .navbar-menu .navbar-item {
-        font-size: 14px;
-        transition: background-color .26s, color .26s;
+
+      nav {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
       }
-      .navbar-menu .navbar-item.active {
-        background-color: #222;
-        color: red;
+
+      nav a.active {
+        font-weight: bold;
       }
+
       .page {
         height: 100%;
         padding: 80px 0;
         width: 100%;
+        background-color: #ddd;
       }
-      .page:nth-child(odd) { background-color: #ddd; }
+
       .page:nth-child(even) { background-color: #fff; }
     </style>
   </head>
 
   <body>
-    <nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation">
-      <div class="container">
-        <div class="navbar-brand">
-          <a title="VanillaJS ScrollSpy" class="navbar-item">VanillaJS ScrollSpy</a>
-
-          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-          </a>
-        </div>
-
-        <div id="navbar" class="navbar-menu navbar-scroll">
-          <div class="navbar-start">
-            <a href="#home" title="Home" class="navbar-item active">Home</a>
-            <a href="#portfolio" title="Portfolio" class="navbar-item">Portfolio</a>
-            <a href="#about" title="About" class="navbar-item">About</a>
-            <a href="#contact" title="Contact" class="navbar-item">Contact</a>
-          </div>
-        </div>
-      </div>
+    <nav id="navbar">
+      <a href="#home" title="Home" class="active">Home</a>
+      <a href="#portfolio" title="Portfolio">Portfolio</a>
+      <a href="#about" title="About">About</a>
+      <a href="#contact" title="Contact">Contact</a>
     </nav>
 
     <section id="home" class="page">
-      <div class="container">
-        <h2 class="title">Home</h2>
-      </div>
+      <h2 class="title">Home</h2>
     </section>
 
     <section id="portfolio" class="page">
-      <div class="container">
-        <h2 class="title">Portfolio</h2>
-      </div>
+      <h2 class="title">Portfolio</h2>
     </section>
 
     <section id="about" class="page">
-      <div class="container">
-        <h2 class="title">About</h2>
-      </div>
+      <h2 class="title">About</h2>
     </section>
 
     <section id="contact" class="page">
-      <div class="container">
-        <h2 class="title">Contact</h2>
-      </div>
+      <h2 class="title">Contact</h2>
     </section>
 
-    <script src="./dist/vanillajs-scrollspy.min.js"></script>
+    <script src="../dist/vanillajs-scrollspy.min.js"></script>
     <script>
-      const navbar = document.querySelector('#navbar');
-      const scrollspy = VanillaScrollspy(navbar);
-      scrollspy.init();
+      const menu = document.querySelector('#navbar')
+      const scrollspy = VanillaScrollspy({ menu })
+      scrollspy.init()
     </script>
   </body>
 </html>
@@ -167,17 +139,17 @@ Available in [`examples/index.html`](examples/index.html).
 Choose a number greater than or equal to 1.
 
 ``` javascript
-const navbar = document.querySelector('#navbar');
-const scrollspy = VanillaScrollspy(navbar, 1000);
-scrollspy.init();
+const menu = document.querySelector('#navbar')
+const scrollspy = VanillaScrollspy({ menu, speed: 1000 })
+scrollspy.init()
 ```
 
 ### Changing scroll type
 
 ``` javascript
-const navbar = document.querySelector('#navbar');
-const scrollspy = VanillaScrollspy(navbar, 1000, 'easeInOutQuint');
-scrollspy.init();
+const menu = document.querySelector('#navbar')
+const scrollspy = VanillaScrollspy({ menu, speed: 1000, easing: 'easeInOutQuint' })
+scrollspy.init()
 ```
 
 ## Contributing

babel.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', { modules: 'auto' }]]
+}