Fix importing issues with the AutoNumeric library

AlexandreBonneau · AlexandreBonneau · commit a4a27ab97f8a · 2017-11-28T10:26:57.000-10:00
Complete the documentation on how to install and use the component
Add a link to the examples page and its source in the Readme
Fix the example script imports by removing the unneeded AutoNumeric link

Signed-off-by: Alexandre Bonneau &lt;alexandre.bonneau@linuxfr.eu&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 ## Changelog for vue-autoNumeric
 
+### 1.0.3
++ Fix importing issues with the `AutoNumeric` library
++ Complete the documentation on how to install and use the component
++ Add a link to the examples page and its source in the Readme
++ Fix the example script imports by removing the unneeded AutoNumeric link
++ Fix issue #4 Error when building with webpack 2 on linux
+
 ### 1.0.2
 + Fix issue #3 Update the value when the `:options` prop is modified
 
diff --git a/README.md b/README.md
@@ -24,23 +24,31 @@ yarn add vue-autonumeric
 npm install vue-autonumeric --save
 ```
 
-You also need to link the [AutoNumeric](https://github.com/autoNumeric/autoNumeric/) library in your html `<head>` tag since `vue-autonumeric` does not bundle it.
-You can link AutoNumeric either with a CDN like so:
+*Note: In order to minimize the size of the vue-autoNumeric component, the AutoNumeric library dependency **is not** bundled with it.*
+
+This means you **need** to link the [AutoNumeric](https://github.com/autoNumeric/autoNumeric/) library with either ways:
+ 
+#### ...in your html `<head>` tag
+In the html `<head>` tag directly, or by using a CDN like so:
+
 ```html
+<script src="../node_modules/autonumeric/dist/autonumeric.min.js"></script>
+<!-- or -->
 <script src="//unpkg.com/autonumeric"></script>
 ```
 
-...or by importing it too in your source code:
+#### ...or by importing it directly as a module
+You can choose to directly import the `AutoNumeric` library in your source code using:
 
 ```sh
 yarn add autonumeric
 # or
 npm install autonumeric --save
 ```
 
-You'll then be able to use the vue-autonumeric component:
+You'll then be able to use the `vue-autonumeric` component in your scripts using:
 ```js
-import AutoNumeric from 'AutoNumeric';
+import AutoNumeric from 'autonumeric';
 import VueAutonumeric from 'vue-autonumeric';
 ```
 
@@ -120,6 +128,8 @@ The official AutoNumeric [documentation](http://autonumeric.org/#/guide) is usin
 <br>
 An editable live example is available [on Codepen](https://codepen.io/AnotherLinuxUser/pen/pWgOrZ?editors=1010).
 
+Moreover, you can check the [shipped examples](https://github.com/autoNumeric/vue-autoNumeric/blob/master/examples/index.html) in your browser, and study its [source here](https://github.com/autoNumeric/vue-autoNumeric/tree/master/examples-src).
+
 ### Requirements
 
 - [AutoNumeric](https://github.com/autoNumeric/autoNumeric) `^v4`
diff --git a/build/webpack.base.js b/build/webpack.base.js
@@ -68,8 +68,9 @@ module.exports = {
         timings : true,
     },
 
-    // cf. https://webpack.js.org/configuration/externals/
     externals: {
+        // This prevent bundling the AutoNumeric library inside the vue-autornumeric component
+        // cf. https://webpack.js.org/configuration/externals/
         AutoNumeric: 'autonumeric',
     },
 };
diff --git a/dist/vue-autonumeric.js b/dist/vue-autonumeric.js
diff --git a/dist/vue-autonumeric.min.js b/dist/vue-autonumeric.min.js
diff --git a/examples/examples.bundle.js b/examples/examples.bundle.js
diff --git a/examples/index.html b/examples/index.html
@@ -21,7 +21,6 @@
 </head>
 <body>
 <div id="app"></div>
-<script src="//unpkg.com/autonumeric"></script>
 <script src="examples.bundle.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-autonumeric",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An AutoNumeric wrapper for Vue.js",
   "author": "Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "components"
   ],
   "dependencies": {
-    "autonumeric": "^4.1.0-beta.8"
+    "autonumeric": "^4.1.0-beta.16"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.7",
diff --git a/src/components/VueAutonumeric.vue b/src/components/VueAutonumeric.vue
@@ -1,7 +1,7 @@
 <!--
               vue-autonumeric
 
-@version      1.0.0
+@version      1.0.3
 @date         2017-09-19 UTC 08:00
 
 @author       Alexandre Bonneau
@@ -54,7 +54,7 @@ OTHER DEALINGS IN THE SOFTWARE.
 </template>
 
 <script type="text/babel">
-    import AutoNumeric from 'AutoNumeric';
+    import AutoNumeric from 'autonumeric';
 
     // Custom default autoNumeric option can be set here to override the default autoNumeric ones
     const defaultOptions = {};
diff --git a/yarn.lock b/yarn.lock
@@ -228,9 +228,9 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
-autonumeric@^4.1.0-beta.8:
-  version "4.1.0-beta.8"
-  resolved "https://registry.yarnpkg.com/autonumeric/-/autonumeric-4.1.0-beta.8.tgz#6b8c5118e6adce14bd0f07673f71464ee63d645a"
+autonumeric@^4.1.0-beta.16:
+  version "4.1.0-beta.16"
+  resolved "https://registry.yarnpkg.com/autonumeric/-/autonumeric-4.1.0-beta.16.tgz#7727c93c0aa41f4c50b43023e89b46aca8b21475"
 
 autoprefixer@^6.3.1, autoprefixer@^6.7.7:
   version "6.7.7"
