make numeral a peer dependency

dmackca · dmackca · commit ccfb1b18f296 · 2019-08-21T23:21:56.000-07:00
pass it in to create formatter function
diff --git a/README.md b/README.md
@@ -4,14 +4,20 @@
 
 This is a simple wrapper for [Numeral.js](http://numeraljs.com/).
 
+## Numeral.js 2 required
+
+This package requires you to install Numeral.js as a peer dependency (`numeral@^2`). This way, you can use a different version of Numeral, or even a drop-in replacement with the same API.
+Use [version 1 of this package](https://www.npmjs.com/package/vue-filter-number-format/v/1.0.3) if you want it to install its own Numeral.js dependency as part of the bundle.
+
 ## Suggested usage
 
-Register globally as a Vue filter in your main.js-ish file:
+Pass in Numeral to create the formatter function, and register globally as a Vue filter in your main.js-ish file:
 
 ```js
+import numeral from 'numeral';
 import numFormat from 'vue-filter-number-format';
 
-Vue.filter('numFormat', numFormat);
+Vue.filter('numFormat', numFormat(numeral));
 
 // new Vue ...
 ```
@@ -31,6 +37,8 @@ See the [Numeral.js docs](http://numeraljs.com/) for other formatting options.
 
 ## Development
 
+For convenience, this function is bundled with a VueJS dev site.
+
 ``` bash
 # install dependencies
 yarn
diff --git a/dist/vue-filter-number-format.js b/dist/vue-filter-number-format.js
diff --git a/dist/vue-filter-number-format.js.map b/dist/vue-filter-number-format.js.map
diff --git a/package.json b/package.json
@@ -17,9 +17,7 @@
     "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --host 0.0.0.0",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
-  "dependencies": {
-    "numeral": "^2.0.6"
-  },
+  "dependencies": {},
   "browserslist": [
     "> 1%",
     "last 2 versions",
@@ -33,10 +31,14 @@
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",
     "file-loader": "^1.1.11",
+    "numeral": "^2.0.6",
     "vue": "^2.6.10",
     "vue-loader": "^13.7.3",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^3.12.0",
     "webpack-dev-server": "^2.11.5"
+  },
+  "peerDependencies": {
+    "numeral": "^2.0.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -4,14 +4,19 @@
       <p>{{ 123456 | numFormat }}</p>
       <p>{{ 123456 | numFormat('0.000') }}</p>
       <p>{{ 123456 | numFormat('0,0.0[0000]') }}</p>
+      <p>{{ 69696969 | numFormat }} -> "69,696,969"</p>
+      <p>{{ 420 | numFormat('0.000') }} -> "420.000"</p>
+      <p>{{ 666 | numFormat('0,0o') }} -> "666th"</p>
+      <p><input type="text" v-model="testVal"> -> "{{ testVal | numFormat }}"</p>
   </div>
 </template>
 
 <script>
-
-
 export default {
     name: 'app',
+    data: () => ({
+      testVal: 10304,
+    }),
 }
 </script>
 
diff --git a/src/filter-number-format.js b/src/filter-number-format.js
@@ -2,12 +2,18 @@
  * number formatting helper functions
  * can be used in vue filters
  */
-import numeral from 'numeral';
 
 /**
- * apply a numeral.js formatting string to an input value
- * @param {Number} val input value to be changed
- * @param {String} [format='0,0'] numeral.js format string
- * @return {String} formatted output string
+ * return a filter function
+ * @param {Function} numeral Numeral.js peer dependency
+ * @return {Function} number formatting filter
  */
-export default (val, format = '0,0') => numeral(val).format(format);
+export default (numeral) => {
+    /**
+     * apply a Numeral.js formatting string to an input value
+     * @param {Number} val input value to be changed
+     * @param {String} [format='0,0'] Numeral.js format string
+     * @return {String} formatted output string
+     */
+    return (val, format = '0,0') => numeral(val).format(format);
+};
diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,9 @@
 import Vue from 'vue'
+import numeral from 'numeral';
 import App from './App.vue'
 import numFormat from './filter-number-format';
 
-Vue.filter('numFormat', numFormat);
+Vue.filter('numFormat', numFormat(numeral));
 
 new Vue({
   el: '#app',
diff --git a/yarn.lock b/yarn.lock
@@ -236,7 +236,7 @@ babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-core@^6.26.0:
+babel-core@^6.26.0, babel-core@^6.26.3:
   version "6.26.3"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
   integrity sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==
@@ -388,7 +388,7 @@ babel-helpers@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-loader@^7.1.2:
+babel-loader@^7.1.5:
   version "7.1.5"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.5.tgz#e3ee0cd7394aa557e013b02d3e492bfd07aa6d68"
   integrity sha512-iCHfbieL5d1LfOQeeVJEUyD9rTwBcP/fcEbRCfempxTDuqrKpu0AZjLAQHEQa3Yqyj9ORKe2iHfoj4rHLf7xpw==
@@ -676,7 +676,7 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-preset-env@^1.6.0:
+babel-preset-env@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
   integrity sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==
@@ -1386,7 +1386,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-cross-env@^5.0.5:
+cross-env@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
   integrity sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==
@@ -1436,7 +1436,7 @@ css-color-names@0.0.4:
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
   integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
 
-css-loader@^0.28.7:
+css-loader@^0.28.11:
   version "0.28.11"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"
   integrity sha512-wovHgjAx8ZIMGSL8pTys7edA1ClmzxHeY6n/d97gg5odgsxEgKjULPR0viqyC+FWMCL9sfqoC/QCUBo62tLvPg==
@@ -2044,7 +2044,7 @@ faye-websocket@~0.11.0:
   dependencies:
     websocket-driver ">=0.5.1"
 
-file-loader@^1.1.4:
+file-loader@^1.1.11:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
   integrity sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==
@@ -5095,7 +5095,7 @@ vue-hot-reload-api@^2.2.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
   integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
 
-vue-loader@^13.0.5:
+vue-loader@^13.7.3:
   version "13.7.3"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"
   integrity sha512-ACCwbfeC6HjY2pnDii+Zer+MZ6sdOtwvLmDXRK/BoD3WNR551V22R6KEagwHoTRJ0ZlIhpCBkptpCU6+Ri/05w==
@@ -5122,7 +5122,7 @@ vue-style-loader@^3.0.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.4.4:
+vue-template-compiler@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
   integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
@@ -5135,7 +5135,7 @@ vue-template-es2015-compiler@^1.6.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.5.11:
+vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
@@ -5167,7 +5167,7 @@ webpack-dev-middleware@1.12.2:
     range-parser "^1.0.3"
     time-stamp "^2.0.0"
 
-webpack-dev-server@^2.9.1:
+webpack-dev-server@^2.11.5:
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.5.tgz#416fbdea0e04eebe44a626e791d5a2eb37fe8c48"
   integrity sha512-7TdOKKt7G3sWEhPKV0zP+nD0c4V9YKUJ3wDdBwQsZNo58oZIRoVIu66pg7PYkBW8A74msP9C2kLwmxGHndz/pw==
@@ -5208,7 +5208,7 @@ webpack-sources@^1.0.1:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^3.6.0:
+webpack@^3.12.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.12.0.tgz#3f9e34360370602fcf639e97939db486f4ec0d74"
   integrity sha512-Sw7MdIIOv/nkzPzee4o0EdvCuPmxT98+vVpIvwtcwcF1Q4SDSNp92vwcKc4REe7NItH9f1S4ra9FuQ7yuYZ8bQ==
