added ssr support

.babelrc

@@ -1,10 +1,10 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "useBuiltIns": false
-      }
-    ]
-  ]
-}
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": false
+      }
+    ]
+  ]
+}

.gitignore

@@ -1,2 +1,2 @@
-node_modules
+node_modules
 dist

.npmignore

@@ -1,2 +1,2 @@
-node_modules
+node_modules
 assets

LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2019 Andrew Vasilchuk
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2019 Andrew Vasilchuk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

README.md

@@ -1,86 +1,86 @@
-# Vue.js aspect ratio
-
-![Computer screens with different aspect ratios](./assets/img.jpg)
-
-## 💿 Installation
-
-### Via NPM
-
-```bash
-$ npm install v-aspect-ratio --save
-```
-### Via Yarn
-
-```bash
-$ yarn add v-aspect-ratio
-```
-
-## Initialization
-
-### As a global plugin
-
-It must be called before new Vue ()
-
-```javascript
-import Vue from "vue";
-import AspectRatio from "v-aspect-ratio";
-
-Vue.use(AspectRatio);
-```
-
-### As a global directive
-
-```javascript
-import Vue from "vue";
-import AspectRatio from "v-aspect-ratio";
-
-Vue.directive("aspect-ratio", AspectRatio.directive)
-```
-
-### As a local directive
-
-```javascript
-import AspectRatio from "v-aspect-ratio";
-
-export default {
-  name: "YourAwesomeComponent",
-  directives: {
-    "aspect-ratio": AspectRatio.directive
-  }
-}
-```
-
-## 🚀 Usage
-
-There's nothing you need to do in JavaScript except for installation. To use the plugin, simply use the v-aspect-ratio directive with the value you need.
-
-```vue
-<template>
-  <div>
-    <div v-aspect-ratio="'16:9'"></div>
-    <div v-aspect-ratio="'4:3'"></div>
-  </div>
-</template>
-```
-
-## Demo
-
-[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ko425ro4k7)
-
-## 💉 Tests
-Jest is used for unit-tests.
-
-You can run tests by typing this command in your console:
-
-```bash
-npm run test
-```
-
-## Powered by
-
-* Babel
-* Webpack 4
-
-## 🔒 License
-
+# Vue.js aspect ratio
+
+![Computer screens with different aspect ratios](./assets/img.jpg)
+
+## 💿 Installation
+
+### Via NPM
+
+```bash
+$ npm install v-aspect-ratio --save
+```
+### Via Yarn
+
+```bash
+$ yarn add v-aspect-ratio
+```
+
+## Initialization
+
+### As a global plugin
+
+It must be called before new Vue ()
+
+```javascript
+import Vue from "vue";
+import AspectRatio from "v-aspect-ratio";
+
+Vue.use(AspectRatio);
+```
+
+### As a global directive
+
+```javascript
+import Vue from "vue";
+import AspectRatio from "v-aspect-ratio";
+
+Vue.directive("aspect-ratio", AspectRatio.directive)
+```
+
+### As a local directive
+
+```javascript
+import AspectRatio from "v-aspect-ratio";
+
+export default {
+  name: "YourAwesomeComponent",
+  directives: {
+    "aspect-ratio": AspectRatio.directive
+  }
+}
+```
+
+## 🚀 Usage
+
+There's nothing you need to do in JavaScript except for installation. To use the plugin, simply use the v-aspect-ratio directive with the value you need.
+
+```vue
+<template>
+  <div>
+    <div v-aspect-ratio="'16:9'"></div>
+    <div v-aspect-ratio="'4:3'"></div>
+  </div>
+</template>
+```
+
+## Demo
+
+[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ko425ro4k7)
+
+## 💉 Tests
+Jest is used for unit-tests.
+
+You can run tests by typing this command in your console:
+
+```bash
+npm run test
+```
+
+## Powered by
+
+* Babel
+* Webpack 4
+
+## 🔒 License
+
 [MIT](http://opensource.org/licenses/MIT)

package.json

@@ -1,10 +1,11 @@
 {
   "name": "v-aspect-ratio",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Aspect ratio directive for Vue.js",
   "main": "dist/v-aspect-ratio.js",
   "scripts": {
     "build": "webpack",
+    "build:ssr": "webpack --config webpack.config.ssr.js",
     "test": "jest"
   },
   "repository": {
@@ -16,6 +17,10 @@
     "aspect-ratio"
   ],
   "author": "Andrew Vasilchuk <andrew.d.vasilchuk@gmail.com>",
+  "files": [
+    "src",
+    "dist"
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/3vilArthas/v-aspect-ratio/issues"

src/config.js

@@ -0,0 +1,3 @@
+export default {
+  pattern: /^\d+:\d+$/
+}

src/helpers.js

@@ -0,0 +1,27 @@
+import config from './config'
+
+export function applyDirective(value, style) {
+  if (!value) {
+    throw new Error("No value provided");
+  }
+
+  if (typeof value !== "string") {
+    throw new Error(
+      `Expected directive binding value type to be a string but found a ${typeof value} instead`
+    );
+  }
+
+  if (!config.pattern.test(value)) {
+    throw new Error(
+      `Expected directive value to match pattern "[Integer]:[Integer]" gut got a ${value}`
+    );
+  }
+
+  const values = value.split(":").map(Number);
+
+  if (values[0] === 0) {
+    throw new Error("Division by 0");
+  }
+
+  style.paddingBottom = `${(values[1] / values[0]) * 100}%`;
+}

src/index.js

@@ -1,10 +1,10 @@
-import directive from "./v-aspect-ratio";
-
-const plugin = {
-  install(Vue) {
-    Vue.directive("aspect-ratio", directive);
-  },
-  directive
-};
-
-export default plugin;
+import directive from "./v-aspect-ratio";
+
+const plugin = {
+  install(Vue) {
+    Vue.directive("aspect-ratio", directive);
+  },
+  directive
+};
+
+export default plugin;

src/index.ssr.js

@@ -0,0 +1,3 @@
+import directive from "./v-aspect-ratio.ssr";
+
+export default directive;

src/v-aspect-ratio.js

@@ -1,29 +1,5 @@
-const pattern = /^\d+:\d+$/;
-
-export default function(el, binding) {
-  const { value } = binding;
-
-  if (!value) {
-    throw new Error("No value provided");
-  }
-
-  if (typeof value !== "string") {
-    throw new Error(
-      `Expected directive binding value type to be a string but found a ${typeof value} instead`
-    );
-  }
-
-  if (!pattern.test(value)) {
-    throw new Error(
-      `Expected directive value to match pattern "[Integer]:[Integer]" gut got a ${value}`
-    );
-  }
-
-  const values = value.split(":").map(Number);
-
-  if (values[0] === 0) {
-    throw new Error("Division by 0");
-  }
-
-  el.style.paddingBottom = `${(values[1] / values[0]) * 100}%`;
-}
+import { applyDirective } from "./helpers";
+
+export default function(el, binding) {
+  applyDirective(binding.value, el.style);
+}

src/v-aspect-ratio.ssr.js

@@ -0,0 +1,7 @@
+import { applyDirective } from "./helpers";
+
+export default function aspectRatio(vnode, directiveMeta) {
+  const style = vnode.data.style || (vnode.data.style = {});
+
+  applyDirective(directiveMeta.value, style);
+}