1.0.0

janriemer · Nov 10, 2018 · efef448 · efef448
1 parent f4e474c
commit efef448
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 42 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,7 @@
 /shrinkwrap.yaml
 /package-lock.json
 .DS_Store
-/*.js
+./**/*.js
 /*.map
 /index.d.ts
 /.rpt2_cache
diff --git a/README.md b/README.md
@@ -1,4 +1,61 @@
 # scrolldir-observable
 [![Build Status](https://travis-ci.org/janriemer/scrolldir-observable.svg?branch=master)](https://travis-ci.org/janriemer/scrolldir-observable)
 
-WIP - stay tuned!
+Get the direction of scrolling - as an [observable](https://github.com/ReactiveX/RxJS) ✨
+
+## Install
+```bash
+$ npm install scrolldir-observable
+```
+
+## Usage
+### via `import`
+```typescript
+import scrollDirObservable from 'scrolldir-observable';
+
+// will react on scroll events that happen on the document
+const scrollDir$ = scrollDirObservable(window.document);
+
+scrollDir$.subscribe(dir => {
+    console.log(dir); // 'up' or 'down', depending on the scroll direction
+});
+```
+
+⚠ The observable only emits values on the **first scroll** or **when the scroll direction changes**. So if the user e.g. scrolls down for 2 seconds, the observable will emit the value `down` only **once**.
+
+### via `script` tags
+In case you want to use this library via script tags, you can do it like this
+```html
+ <!DOCTYPE html>
+<html>
+    <head>
+    <script type="module" src="scrolldir-observable/dist/bundles/scrolldir-observable.es.min.js"></script>
+    <script nomodule src="scrolldir-observable/dist/bundles/scrolldir-observable.umd.min.js"></script>
+    </head>
+    ...
+</html> 
+```
+It tries to load the library as an ES module and if that is not supported, it will fall back to an UMD module. Further details can be found in Jake Archibald's great article [ECMAScript modules in browsers](https://jakearchibald.com/2017/es-modules-in-browsers/).
+
+## API
+### scrollDirObservable(element: `HTMLElement | Document`, windowElem: `Window` = window): `Observable<Directions>`
+element: Some html element or the document on which scroll directions should be observed.
+
+windowElem: The global window object - defaults to `window` - *if you use this library directly in the browser, you need not to care about this parameter*.
+
+### Directions: `'up' | 'down'`
+`String`, which describes the direction of the scroll.
+
+## Development
+- `npm run build`: compiles library into the dist folder:
+    - standalone (used, if consumers want to bundle it themselves):
+        - `dist/index.js`
+        - `dist/index.es.js`
+    - bundles (direct usage via script tags (see [Usage](#via-script-tags))):
+        - `dist/bundles/scrolldir-observable.es.min.js`
+        - `dist/bundles/scrolldir-observable.umd.min.js`
+    - types: `dist/types/index.d.ts`
+- `npm test`: executes all tests
+
+## License
+MIT
diff --git a/package.json b/package.json
@@ -2,15 +2,18 @@
   "name": "scrolldir-observable",
   "version": "1.0.0",
   "description": "An observable for getting the scroll direction.",
-  "main": "dist/scrolldir-observable.umd.js",
-  "module": "dist/scrolldir-observable.esm.js",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
   "typings": "dist/types/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rimraf dist && tsc && rollup -c rollup.config.ts",
-    "test": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha --timeout 20000 --reporter nyan --require ts-node/register test/index.spec.ts",
+    "clean": "rimraf dist",
+    "build": "npm run clean && tsc && npm run build:standalone && npm run build:bundle",
+    "build:bundle": "rollup -c rollup.bundle.config.js",
+    "build:standalone": "rollup -c rollup.config.ts",
+    "test": "npm run build:bundle && TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha --timeout 10000 --reporter nyan --require ts-node/register test/*.spec.ts",
     "prepare": "npm run build",
     "prepublish": "check-node-version --npm \">=4\" || npm run prepare"
   },
@@ -24,24 +27,25 @@
   "author": "Jan Riemer <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "rxjs": "^6.2.1"
+    "rxjs": "^6.3.3"
   },
   "devDependencies": {
     "@types/chai": "^4.1.4",
-    "@types/jsdom": "^11.0.6",
+    "@types/jsdom": "11.12.0",
     "@types/mocha": "^5.2.4",
     "@types/sinon": "^5.0.1",
     "chai": "^4.1.2",
     "check-node-version": "^3.2.0",
     "coffeescript": "^2.3.1",
-    "jsdom": "11.0.0",
+    "jsdom": "11.5.1",
     "mocha": "^5.2.0",
     "rimraf": "^2.6.2",
-    "rollup": "^0.64.1",
+    "rollup": "^0.66.6",
     "rollup-plugin-commonjs": "^9.1.5",
     "rollup-plugin-json": "^3.0.0",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
+    "rollup-plugin-terser": "^3.0.0",
     "rollup-plugin-typescript2": "^0.16.1",
     "rxjs-marbles": "^4.3.1",
     "sinon": "^6.1.5",

diff --git a/rollup.bundle.config.js b/rollup.bundle.config.js
@@ -0,0 +1,29 @@
+import {pkgName, libraryName, config}  from './rollup.common.config';
+import {terser} from 'rollup-plugin-terser';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+
+let localConfig = config;
+
+// Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs).
+// Allow node_modules resolution, so you can use 'external' to control
+// which external modules to include in the bundle
+// https://github.com/rollup/rollup-plugin-node-resolve#usage
+localConfig.plugins.push(terser(), commonjs(), resolve());
+
+// we have multiple configs instead of multiple outputs to prevent a bug in rollup-plugin-terser:
+// https://github.com/TrySound/rollup-plugin-terser/issues/5
+export default [
+    {
+        ...localConfig,
+        output: [
+            { file: `dist/bundles/${pkgName}.umd.min.js`, name: libraryName, format: 'umd', sourcemap: false },
+        ],
+    },
+    {
+        ...localConfig,
+        output: [
+            { file: `dist/bundles/${pkgName}.es.min.js`, format: 'es', sourcemap: false },
+        ]
+    }
+]
diff --git a/rollup.common.config.js b/rollup.common.config.js
@@ -0,0 +1,21 @@
+import typescript from 'rollup-plugin-typescript2'
+import json from 'rollup-plugin-json'
+
+const pkg = require('./package.json')
+export const pkgName = pkg.name;
+
+export const libraryName = 'scrollDirObservable'
+
+export const config = 
+  {
+    input: `src/index.ts`,
+    watch: {
+      include: 'src/**',
+    },
+    plugins: [
+      // Allow json resolution
+      json(),
+      // Compile TypeScript files
+      typescript({ useTsconfigDeclarationDir: true }),
+    ],
+  };
diff --git a/rollup.config.ts b/rollup.config.ts
@@ -1,39 +1,15 @@
-import resolve from 'rollup-plugin-node-resolve'
-import commonjs from 'rollup-plugin-commonjs'
-import sourceMaps from 'rollup-plugin-sourcemaps'
-import typescript from 'rollup-plugin-typescript2'
-import json from 'rollup-plugin-json'
+import {config, libraryName} from './rollup.common.config';
 
-const pkg = require('./package.json')
-
-const libraryName = 'scrollDirObservable'
+const pkg = require('./package.json');
 
 export default [
   {
-    input: `src/index.ts`,
+    ...config,
     output: [
-      { file: pkg.main, name: libraryName, format: 'umd', sourcemap: true },
-      { file: pkg.module, format: 'es', sourcemap: true },
-    ],
-    // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
-    external: [],
-    watch: {
-      include: 'src/**',
-    },
-    plugins: [
-      // Allow json resolution
-      json(),
-      // Compile TypeScript files
-      typescript({ useTsconfigDeclarationDir: true }),
-      // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
-      commonjs(),
-      // Allow node_modules resolution, so you can use 'external' to control
-      // which external modules to include in the bundle
-      // https://github.com/rollup/rollup-plugin-node-resolve#usage
-      resolve(),
-
-      // Resolve source maps to the original source
-      sourceMaps(),
+      { file: pkg.main, name: libraryName, format: 'cjs', sourcemap: false },
+      { file: pkg.module, format: 'es', sourcemap: false },
     ],
+    // leave it up to the consumer to bundle deps
+    external: ['rxjs', 'rxjs/operators']
   }
 ]
diff --git a/test/bundle.spec.ts b/test/bundle.spec.ts
@@ -0,0 +1,70 @@
+import 'mocha';
+import {expect} from 'chai';
+import {JSDOM} from 'jsdom';
+import {join} from 'path';
+import {readFileSync} from 'fs';
+import { rollup } from 'rollup';
+//import {pkgName, libraryName} from '../rollup.common.config';
+
+describe('Smoke-testing the generated bundle...', () => {
+
+    const bundlePath = join(__dirname, '..', 'dist', 'bundles');
+
+    it ('should expose a function within the umd module', () => {
+        const script = loadScript(`scrolldir-observable.umd.min.js`);
+        const html = `<html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <title>Document</title>
+        </head>
+        <body>
+            <script>
+                ${script}
+            </script>
+            <script>
+                document.body.innerText = typeof window.scrollDirObservable;
+            </script>
+        </body>
+        </html>`;
+        const jsdom = new JSDOM(html, {runScripts: 'dangerously', resources: 'usable'});
+
+        expect(jsdom.window.document.body.innerText).to.eql('function');
+    });
+
+    it ('should transform the es module into a functioning umd module', async () => {
+        const scriptPath = join(bundlePath, `scrolldir-observable.es.min.js`);
+
+        const bundle = await rollup({
+            input: scriptPath
+        });
+
+        const {code} = await bundle.generate({
+            format: 'umd',
+            name: 'scrollDirObservable'
+        });
+
+        const html = `<html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <title>Document</title>
+        </head>
+        <body>
+            <script>
+                ${code}
+            </script>
+            <script>
+                document.body.innerText = typeof window.scrollDirObservable;
+            </script>
+        </body>
+        </html>`;
+        const jsdom = new JSDOM(html, {runScripts: 'dangerously', resources: 'usable'});
+
+        expect(jsdom.window.document.body.innerText).to.eql('function');
+    });
+
+
+    function loadScript(jsFile: string): string {
+        return readFileSync(
+            join(bundlePath, jsFile), {encoding: 'utf8'});
+    }
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-      "sourceMap": true,
+      "sourceMap": false,
       "declaration": true,
       "module": "es2015",
       "moduleResolution": "node",