Run autoformatter

datocms · Mar 24, 2020 · 6a6901a · 6a6901a
1 parent 6b3b515
commit 6a6901a
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 57 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+examples/
+coverage/
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+examples/
+coverage/
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,3 @@
 {
-  "trailingComma": "all",
+  "trailingComma": "all"
 }
diff --git a/babel.config.js b/babel.config.js
@@ -1,13 +1,13 @@
 module.exports = {
   presets: [
-    '@vue/babel-preset-jsx',
+    "@vue/babel-preset-jsx",
     [
-      '@babel/preset-env',
+      "@babel/preset-env",
       {
         targets: {
-          node: 'current',
+          node: "current",
         },
       },
     ],
   ],
-};
+};
diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -7,15 +7,15 @@ export default {
     file: "bundle.js",
     name: "VueDatoCms",
     globals: {
-      "@znck/prop-types": "PropTypes"
-    }
+      "@znck/prop-types": "PropTypes",
+    },
   },
   external: ["@znck/prop-types"],
   plugins: [
     babel({
       exclude: "node_modules/**",
-      runtimeHelpers: true
+      runtimeHelpers: true,
     }),
-    commonjs()
-  ]
+    commonjs(),
+  ],
 };
diff --git a/src/Image/index.js b/src/Image/index.js
@@ -10,6 +10,7 @@ const absolutePositioning = {
 
 // @vue/component
 export const Image = {
+  inheritAttrs: false,
   props: {
     data: PropTypes.shape({
       aspectRatio: PropTypes.number.isRequired,
@@ -33,11 +34,10 @@ export const Image = {
     rootStyle: PropTypes.object.defaultValue(() => ({})),
     explicitWidth: PropTypes.bool.defaultValue(false),
   },
-  inheritAttrs: false,
   data: () => ({
     observer: null,
     inView: false,
-    loaded: false
+    loaded: false,
   }),
   computed: {
     addImage() {
@@ -69,14 +69,37 @@ export const Image = {
       }
 
       return true;
+    },
+  },
+  mounted() {
+    if ("IntersectionObserver" in window) {
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          const image = entries[0];
+          if (image.isIntersecting) {
+            this.inView = true;
+            this.observer.disconnect();
+          }
+        },
+        {
+          threshold: this.intersectionTreshold,
+          rootMargin: this.intersectionMargin,
+        },
+      );
+      this.observer.observe(this.$el);
+    }
+  },
+  destroyed() {
+    if ("IntersectionObserver" in window && this.observer) {
+      this.observer.disconnect();
     }
   },
   methods: {
     load() {
       if (this.$el.getAttribute("src") !== this.srcPlaceholder) {
         this.loaded = true;
       }
-    }
+    },
   },
   render(h) {
     const {
@@ -87,7 +110,7 @@ export const Image = {
       showImage,
       addImage,
       rootStyle,
-      explicitWidth
+      explicitWidth,
     } = this;
 
     const webpSource = data.webpSrcSet && (
@@ -109,7 +132,7 @@ export const Image = {
             !fadeInDuration || fadeInDuration > 0
               ? `opacity ${fadeInDuration}ms ${fadeInDuration}ms`
               : null,
-          ...absolutePositioning
+          ...absolutePositioning,
         }}
       />
     );
@@ -124,7 +147,7 @@ export const Image = {
           width: explicitWidth ? `${width}px` : "100%",
           height: "auto",
           display: "block",
-          ...pictureStyle
+          ...pictureStyle,
         }}
         height={height}
         width={width}
@@ -137,7 +160,7 @@ export const Image = {
           display: "inline-block",
           overflow: "hidden",
           ...rootStyle,
-          position: "relative"
+          position: "relative",
         }}
       >
         {sizer}
@@ -151,7 +174,7 @@ export const Image = {
               transition:
                 !fadeInDuration || fadeInDuration > 0
                   ? `opacity ${fadeInDuration}ms`
-                  : null
+                  : null,
             }}
           >
             {webpSource}
@@ -161,7 +184,7 @@ export const Image = {
                 src={data.src}
                 alt={data.alt}
                 title={data.title}
-                vOn:load={this.load}
+                v-on:load={this.load}
                 style={{ width: "100%" }}
               />
             )}
@@ -180,39 +203,16 @@ export const Image = {
                 </picture>
               );
             },
-            staticRenderFns: []
-          }
+            staticRenderFns: [],
+          },
         })}
       </div>
     );
   },
-  mounted() {
-    if ("IntersectionObserver" in window) {
-      this.observer = new IntersectionObserver(
-        entries => {
-          const image = entries[0];
-          if (image.isIntersecting) {
-            this.inView = true;
-            this.observer.disconnect();
-          }
-        },
-        {
-          threshold: this.intersectionTreshold,
-          rootMargin: this.intersectionMargin
-        }
-      );
-      this.observer.observe(this.$el);
-    }
-  },
-  destroyed() {
-    if ("IntersectionObserver" in window && this.observer) {
-      this.observer.disconnect();
-    }
-  }
 };
 
 export const DatocmsImagePlugin = {
-  install: Vue => {
+  install: (Vue) => {
     Vue.component("DatocmsImage", Image);
-  }
+  },
 };
diff --git a/src/index.js b/src/index.js
@@ -1,23 +1,25 @@
-export * from './Image';
+export * from "./Image";
 
 export const toHead = (...args) => {
   const tags = [].concat(...args);
 
-  const titleTag = tags && tags.find(t => t.tag === 'title');
-  const metaTags = tags ? tags.filter(t => t.tag === 'meta') : [];
-  const linkTags = tags ? tags.filter(t => t.tag === 'link') : [];
+  const titleTag = tags && tags.find((t) => t.tag === "title");
+  const metaTags = tags ? tags.filter((t) => t.tag === "meta") : [];
+  const linkTags = tags ? tags.filter((t) => t.tag === "link") : [];
 
   return {
     title: titleTag && titleTag.content,
-    meta: metaTags.map(tag => ({
+    meta: metaTags.map((tag) => ({
       ...tag.attributes,
       hid: tag.attributes.name || tag.attributes.property,
       vmid: tag.attributes.name || tag.attributes.property,
     })),
-    link: linkTags.map(tag => ({
+    link: linkTags.map((tag) => ({
       ...tag.attributes,
-      hid: tag.attributes.name || (`${tag.attributes.rel}-${tag.attributes.sizes}`),
-      vmid: tag.attributes.name || (`${tag.attributes.rel}-${tag.attributes.sizes}`),
-    }))
-  }
-}
+      hid:
+        tag.attributes.name || `${tag.attributes.rel}-${tag.attributes.sizes}`,
+      vmid:
+        tag.attributes.name || `${tag.attributes.rel}-${tag.attributes.sizes}`,
+    })),
+  };
+};