Merge pull request #10 from vaibhavbansal23/ssr-fix

Ssr fix

Author: imagekitio

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "imagekitio-vue",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "scripts": {
     "build:lib": "./node_modules/.bin/vue-cli-service build --target lib src/index.js",
     "build": "./node_modules/.bin/vue-cli-service lint --fix; npm run build:lib",
@@ -12,11 +12,9 @@
     "build-storybook": "build-storybook"
   },
   "main": "dist/imagekitio-vue.common.js",
-  "browser": "src/index.js",
   "unpkg": "dist/imagekitio-vue.umd.min.js",
   "files": [
-    "dist/*",
-    "src/*"
+    "dist/*"
   ],
   "repository": {
     "type": "git",

package.json

@@ -25,7 +25,7 @@ npm run build
 
 Now, Go to `sample-app` by,
 ```bash
-cd example/sample-app
+cd samples/sample-app
 ```
 
 then,

samples/sample-app/README.md

@@ -9,7 +9,7 @@ export default {
       default: () => [0, 0.2]
     },
     root: {
-      type: HTMLElement,
+      type: Object,
       required: false,
       default: () => null
     },

src/components/Intersect.vue

@@ -1,23 +1,49 @@
 export function parseURL(url) {
-  let parser = document.createElement('a'),
-      searchObject = {},
-      queries, split, i;
-  // Let the browser do the work
-  parser.href = url;
-  // Convert query string to object
-  queries = parser.search.replace(/^\?/, '').split('&');
-  for( i = 0; i < queries.length; i++ ) {
-      split = queries[i].split('=');
-      searchObject[split[0]] = split[1];
-  }
-  return {
-      protocol: parser.protocol,
-      host: parser.host,
-      hostname: parser.hostname,
-      port: parser.port,
-      pathname: parser.pathname,
-      search: parser.search,
-      searchObject: searchObject,
-      hash: parser.hash
-  };
+	let parser;
+	if(typeof document === 'undefined'){
+		parser = parseUrlInNode(url);
+	}else{
+		parser = parseUrlInBrowser(url);
+	}
+
+	return {
+		protocol: parser.protocol,
+		host: parser.host,
+		hostname: parser.hostname,
+		port: parser.port,
+		pathname: parser.pathname,
+		search: parser.search,
+		searchObject: parser.searchObject,
+		hash: parser.hash
+	};
 }
+
+function parseUrlInBrowser(urlToParse){
+	var parser = document.createElement('a'),searchObject = {}, queries, split, i;
+	// Let the browser do the work
+	parser.href = urlToParse;
+	// Convert query string to object
+	queries = parser.search.replace(/^\?/, '').split('&');
+	for( i = 0; i < queries.length; i++ ) {
+		split = queries[i].split('=');
+		searchObject[split[0]] = split[1];
+	}
+	parser.searchObject = searchObject;
+	return parser;
+}
+
+function parseUrlInNode(urlToParse){
+	var url = require('url');
+
+	var parser = new URL(urlToParse);
+	var searchObject = {}, queries, split, i;
+	
+	// Convert query string to object
+	queries = parser.search.replace(/^\?/, '').split('&');
+	for( i = 0; i < queries.length; i++ ) {
+		split = queries[i].split('=');
+		searchObject[split[0]] = split[1];
+	}
+	parser.searchObject = searchObject;
+	return parser;
+}

src/utils/urlParser.js

@@ -3,56 +3,56 @@
 exports[`Storyshots IKContext Image With Context 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5"
 />
 `;
 
 exports[`Storyshots IKContext Overriding Url Parameter 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/utkace/default-image.jpg?ik-sdk-version=vuejs-1.0.4"
+  src="https://ik.imagekit.io/utkace/default-image.jpg?ik-sdk-version=vuejs-1.0.5"
 />
 `;
 
 exports[`Storyshots IKImage Image With LQIP With Nested Path 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/tr:q-20,h-300,w-400/sample-folder/default-image.jpg?ik-sdk-version=vuejs-1.0.4"
+  src="https://ik.imagekit.io/your_imagekit_id/tr:q-20,h-300,w-400/sample-folder/default-image.jpg?ik-sdk-version=vuejs-1.0.5"
 />
 `;
 
 exports[`Storyshots IKImage Image With LQIP With Path With No Transformation 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/tr:q-20/default-image.jpg?ik-sdk-version=vuejs-1.0.4"
+  src="https://ik.imagekit.io/your_imagekit_id/tr:q-20/default-image.jpg?ik-sdk-version=vuejs-1.0.5"
 />
 `;
 
 exports[`Storyshots IKImage Image With LQIP With Path With Transformation 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/tr:q-20,h-300,w-400/default-image.jpg?ik-sdk-version=vuejs-1.0.4"
+  src="https://ik.imagekit.io/your_imagekit_id/tr:q-20,h-300,w-400/default-image.jpg?ik-sdk-version=vuejs-1.0.5"
 />
 `;
 
 exports[`Storyshots IKImage Image With LQIP With Src With No Transformation 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4&tr=q-20"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5&tr=q-20"
 />
 `;
 
 exports[`Storyshots IKImage Image With LQIP With Src With Transformation 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4&tr=h-300%2Cw-400%2Cq-20"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5&tr=h-300%2Cw-400%2Cq-20"
 />
 `;
 
 exports[`Storyshots IKImage Image With Leading Slashes In Path 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5"
 />
 `;
 
@@ -63,35 +63,35 @@ exports[`Storyshots IKImage Image With No Url Endpoint 1`] = `<!---->`;
 exports[`Storyshots IKImage Image With Path 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5"
 />
 `;
 
 exports[`Storyshots IKImage Image With Query Parameters 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4&version=5&name=check"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5&version=5&name=check"
 />
 `;
 
 exports[`Storyshots IKImage Image With Src 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5"
 />
 `;
 
 exports[`Storyshots IKImage Image With Src Query Parameters 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?foo=bar&ik-sdk-version=vuejs-1.0.4&version=5&name=check"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?foo=bar&ik-sdk-version=vuejs-1.0.5&version=5&name=check"
 />
 `;
 
 exports[`Storyshots IKImage Image With Trailing Slashes In Url Endpoint 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5"
 />
 `;
 
@@ -128,41 +128,41 @@ exports[`Storyshots IKUpload Image Upload With No Tags 1`] = `
 exports[`Storyshots Transformations Image With Chained Transformation 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4&tr=h-300%2Cw-400%3Art-90"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5&tr=h-300%2Cw-400%3Art-90"
 />
 `;
 
 exports[`Storyshots Transformations Image With Non Existing Transformation With Existing Transformation 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4&tr=h-300%2Cfoo-bar"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5&tr=h-300%2Cfoo-bar"
 />
 `;
 
 exports[`Storyshots Transformations Image With Transformation 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4&tr=h-300%2Cw-400"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5&tr=h-300%2Cw-400"
 />
 `;
 
 exports[`Storyshots Transformations Image With Transformation Position As Path Passing Src 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4&tr=h-300%2Cw-400"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5&tr=h-300%2Cw-400"
 />
 `;
 
 exports[`Storyshots Transformations Image With Transformation Position As Query 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4&tr=h-300%2Cw-400"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5&tr=h-300%2Cw-400"
 />
 `;
 
 exports[`Storyshots Transformations Image Without Existing Transformation 1`] = `
 <img
   class="ik-image"
-  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.4&tr=foo-bar"
+  src="https://ik.imagekit.io/your_imagekit_id/default-image.jpg?ik-sdk-version=vuejs-1.0.5&tr=foo-bar"
 />
 `;