kytta · kytta · Nov 14, 2019 · Aug 23, 2019 · Aug 23, 2019 · Nov 14, 2019
diff --git a/.gitignore b/.gitignore
@@ -1,81 +1,4 @@
-# Created by https://www.gitignore.io/api/node,visualstudiocode,webstorm+all
-
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# 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
-
-
-### VisualStudioCode ###
-.vscode/*
-
-# Ignore all local history of files
-.history
-
-
-### WebStorm+all ###
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-# See also: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023
-
-.idea/
-
-*.iws
-*.ipr
-
-# CMake
-cmake-build-*/
-
-# IntelliJ
-out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# End of https://www.gitignore.io/api/node,visualstudiocode,webstorm+all
-
-/dist
+.idea
+node_modules
+dist
+.cache
diff --git a/.travis.yml b/.travis.yml
@@ -32,7 +32,6 @@ jobs:
         api_key:
           secure: ZkkKjSsdvjVjamrcSeuCFCp+Upi2iKI0jszIYuLmIixhY/JfYWLWYM6T+8To9BWuEZ1974Ddo400nYS2BTwKu5jZVUBZPWJorurT/rFt6tnnRQ/jNdh8tmQYG3XT3BZBf/vN7JGFbKVpY6C91szfdkUOPBqbXrjkJOWOVC8+gY2z/iFur0ddhWGB4mCMZb/9qEx1d1KgdMFBAlyn1BJMLyjukyEE0NxgfLeENso0MHST9Scp4a2+yTL/qBdHODD62P2KMDHmAUD7vCY4SDuQbpkIcSZW9YPbaau4pGZX+KTlLAh+OZZfmke+Kn7ju/61CDkp3rGITNsRUxC0SXDrwwkYWh2kG9EueWE8dJBFL2oMMkzHkHwz0P7EUf3l5dVbAw9GtwWu68xor24ElDviUBlboAc/DxfbR7JAG1VmGn7m0jTBUSYNxv9xzSUKbBdT+0dPgDsQH28Yyl01VPe9jtyPEQ9dbvQdv/i/oi1qPEKrgtNB7vG34hkdyjsdS0OO5b+qw3k2nYluCCK+gu8p+dtUGQMI4BHTw3xP6R6W37/e9Nexr4o37dTSDYzoRnc2BUDGjgBlqn0rsa6bMPG4BxyKdZ7c+ZeaolqPblMbKbtxXLiXwRnVK5MQYj5NJ2ZyNb492lcfqtYKetm+tlUiNqzjfBVyzUP4i2d/nndDz5o=
         file:
-          - ./dist/tinybox.min.js
           - ./dist/tinybox.umd.js
           - ./dist/tinybox.esm.js
         skip_cleanup: true

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,27 @@
 # CHANGELOG
 
+## 0.3.0
+
+### 🛑 BREAKING
+
+- ".min.js" version is removed in favor of ".umd.js"
+
+### Improved
+
+- package size went down ~170 bytes
+- build configs are more readable now
+- source code is more readable now
+
 ## 0.2.0
 
-#### New
+### New
 
 - slide animation when navigating through photos (#3)
 - on mobile devices images can now be navigated via swiping (#4)
     - this feature has limited support in MS Edge
 - on computers images can now be navigated with arrow keys (#9)
 
-#### Fixed
+### Fixed
 
 - images weren't aligned vertically under some conditions (#8)
 - user was able to scroll the content behind the lightbox (#11)
@@ -18,7 +30,7 @@
 
 Initial pre-release of `vue-tinybox`
 
-#### New
+### New
 
 - ability to open and close lightbox
 - ability to pass photos as props

diff --git a/README.md b/README.md
@@ -2,9 +2,13 @@
 
 A slick, yet tiny lightbox gallery component for Vue.js
 
+- **Slick.** Nothing excessive. Image, controls and thumbnails.
+- **Small.** Dependency-free and less than 3.5 KB minified and gzipped.
+- **Adaptive.** Works great on both desktop and mobile.
+
 ## Demo
 
-The live demo can be found at https://NickKaramoff.github.io/vue-tinybox
+The live demo can be found at https://os.karamoff.ru/vue-tinybox
 
 ## Install
 
@@ -24,7 +28,7 @@ Just include the link to the Tinybox in your `<head>`:
 
 ```html
 <script src="path/to/vue.js"></script>
-<script src="path/to/tinybox.min.js"></script>
+<script src="path/to/tinybox.umd.js"></script>
 ```
 
 ## Usage
@@ -63,16 +67,16 @@ Then you can use the `Tinybox` component:
 
 The `Tinybox` component accepts these props:
 
-| Prop name | Type          | Default | Description                                                                    |
-|-----------|---------------|---------|--------------------------------------------------------------------------------|
-| `images`  | Array         | `[]`    | The array of either image URLs or `Image` objects                              |
-| `index`   | Number|`null` | `null`  | The index of the image that has to be shown. If `null`, the lightbox is closed |
-| `loop`    | Boolean       | `false` | Indicates whether the images should loop                                       |
+| Prop name | Type              | Default | Description                                                                    |
+|-----------|-------------------|---------|--------------------------------------------------------------------------------|
+| `images`  | `Array`           | `[]`    | The array of either image URLs or `Image` objects                              |
+| `index`   | `Number` / `null` | `null`  | The index of the image that has to be shown. If `null`, the lightbox is closed |
+| `loop`    | `Boolean`         | `false` | Indicates whether the images should loop                                       |
 
 The `Image` object is an object with following fields:
 
-| Field name  | Type   | Description                                                                                                    |
-|-------------|--------|----------------------------------------------------------------------------------------------------------------|
-| `src`       | String | The URL of the image                                                                                           |
-| `alt`       | String | The text to be set inside `alt` attribute, i.e. text for screen readers or to be shown if the image can't load |
-| `thumbnail` | String | The URL of the smaller version of the image to be shown in the thumbnail strip                                 |
+| Field name  | Type     | Description                                                                               |
+|-------------|----------|-------------------------------------------------------------------------------------------|
+| `src`       | `String` | The URL of the image                                                                      |
+| `alt`       | `String` | (optional) The text to be set inside `alt` attribute, e.g. a caption                      |
+| `thumbnail` | `String` | (optional) The URL of the smaller version of the image to be shown in the thumbnail strip |
diff --git a/config/build/defaults.js b/config/build/defaults.js
@@ -0,0 +1,7 @@
+export const input = "./src/index.js";
+
+export const defaultOutput = {
+    name: "Tinybox",
+};
+
+export const getFilename = (infix) => `./dist/tinybox.${infix}.js`;
diff --git a/config/build/plugins.js b/config/build/plugins.js
@@ -0,0 +1,29 @@
+import rollupPluginBuble from "rollup-plugin-buble";
+import rollupPluginCommonJs from "rollup-plugin-commonjs";
+import { terser as rollupPluginTerser } from "rollup-plugin-terser";
+import rollupPluginVue from "rollup-plugin-vue";
+
+export function buble() {
+    return rollupPluginBuble();
+}
+
+export function cjs() {
+    return rollupPluginCommonJs();
+}
+
+export function terser(ecma) {
+    return rollupPluginTerser({
+        output: {
+            ecma
+        }
+    });
+}
+
+export function vue(isProduction) {
+    return rollupPluginVue({
+        css: true,
+        template: {
+            isProduction
+        }
+    });
+}
diff --git a/docs/index.html b/docs/index.html
@@ -17,7 +17,7 @@
         }
     </style>
 
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue-tinybox@0.2.0/dist/tinybox.min.js"></script>
 </head>
 <body>
@@ -51,8 +51,8 @@ <h2>
             </p>
 
             <p>
-                While being not as customizable as some other components, <code>Tinybox</code> is simple and
-                lightweight (less than 4KB minzipped).
+                While being not as customizable as some other components, <code>Tinybox</code> is dead simple and
+                lightweight (less than 3.5 KB minzipped).
             </p>
             <aside>
                 <p>
@@ -63,7 +63,7 @@ <h2>
 
             <p>
                 <code>Tinybox</code> also doesn't depend on any third-party library, so that means pure JavaScript —
-                with no jQuery and other mess. And yes, it is 100% SSR-compatible.
+                with no mess.
             </p>
 
             <p>
@@ -96,7 +96,7 @@ <h2>
 
                 <p>...or served from CDN like jsDelivr:</p>
                 <pre><code>&lt;script
-  src="https://cdn.jsdelivr.net/npm/vue-tinybox@0.1/dist/tinybox.min.js"
+  src="https://cdn.jsdelivr.net/npm/vue-tinybox@0.3/dist/tinybox.umd.js"
 &gt;
 &lt;/script&gt;</code></pre>
         </article>