Package Name Change & Publish Script (#1)

Package Name Change & Publish Script

Author: MrDHat

.github/workflows/nodejs.yml

@@ -24,6 +24,6 @@ jobs:
         yarn test:unit
       env:
         CI: true
-        REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
-        REACT_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
-        REACT_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }}
+        VUE_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
+        VUE_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
+        VUE_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }}

.github/workflows/npmpublish.yml

@@ -25,10 +25,14 @@ jobs:
         npm i -g yarn
         yarn install
         yarn test
+        yarn build
       env:
         CI: true
-  
-  publish: 
+        VUE_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
+        VUE_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
+        VUE_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }}
+
+  publish:
     needs: build
     runs-on: ubuntu-latest
     steps:
@@ -41,7 +45,7 @@ jobs:
       run: |
         npm i -g yarn
         yarn config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
-        yarn publish        
+        yarn publish
       env:
         NODE_AUTH_TOKEN: ${{secrets.npm_token}}
         CI: true

README.md

@@ -1,7 +1,7 @@
 # ImageKit.io Vue SDK
 
-[![Node CI](https://github.com/imagekit-developer/imagekit-nodejs/workflows/Node%20CI/badge.svg)](https://github.com/imagekit-developer/imagekit-vuejs/)
-[![npm version](https://img.shields.io/npm/v/imagekit-vue)](https://www.npmjs.com/package/imagekit-vuejs) 
+[![Node CI](https://github.com/imagekit-developer/imagekit-nodejs/workflows/Node%20CI/badge.svg)](https://github.com/imagekit-developer/imagekitio-vuejs/)
+[![npm version](https://img.shields.io/npm/v/imagekitio-vue)](https://www.npmjs.com/package/imagekitio-vuejs) 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Twitter Follow](https://img.shields.io/twitter/follow/imagekitio?label=Follow&style=social)](https://twitter.com/ImagekitIo)
 
@@ -11,11 +11,11 @@ ImageKit is a complete image optimization and transformation solution that comes
 
 ## Installation
 
-  `npm install --save imagekit-vue`
+  `npm install --save imagekitio-vue`
 
 Include the components in your code:
 
-  `import {IKContext} from "imagekit-vue"`
+  `import {IKContext} from "imagekitio-vue"`
 
 ## Usage
 

example/sample-app/README.md

@@ -28,7 +28,7 @@ Now link it with, npm link
 ```js
 npm link
 ```
-This will create a global repository link for imagekit-vue
+This will create a global repository link for imagekitio-vue
 
 ### Installing the sample-app
 
@@ -44,9 +44,9 @@ npm install
 
 Now run,
 ```
-npm link imagekit-vue
+npm link imagekitio-vue
 ```
-This should create a copy of `imagekit-vue` library in `node_modules` of `sample-app`
+This should create a copy of `imagekitio-vue` library in `node_modules` of `sample-app`
 
 ## Setting the environment variable
 Create a .env file by renaming the sample.env in examples/sample-app

example/sample-app/src/App.vue

@@ -5,34 +5,34 @@
     <IKImage
       :publicKey="publicKey"
       :urlEndpoint="urlEndpoint"
-      src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"
+      :src="src"
     />
     <p>Let's transform this once</p>
     <IKImage
       :publicKey="publicKey"
       :urlEndpoint="urlEndpoint"
-      src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"
+      :src="src"
       v-bind:transformation="[{height:300,width:400}]"
     />
     <p>Let's transform this more than once</p>
     <IKImage
       :publicKey="publicKey"
       :urlEndpoint="urlEndpoint"
-      path="/ABC_BV8lzpfOS"
+      :path="path"
       v-bind:transformation="[{height:300,width:400},{rotation:90}]"
     />
 
     <p>LQIP</p>
     <IKImage
       :publicKey="publicKey"
       :urlEndpoint="urlEndpoint"
-      src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"
+      :src="src"
       v-bind:lqip="{active:true,quality:20}"
     />
 
     <p>Adding a Image with Context</p>
     <IKContext :publicKey="publicKey" :urlEndpoint="urlEndpoint">
-      <IKImage path="/ABC_BV8lzpfOS" v-bind:transformation="[{height:300,width:400}]" />
+      <IKImage :path="path" v-bind:transformation="[{height:300,width:400}]" />
     </IKContext>
     <p>Upload</p>
     <IKContext
@@ -47,7 +47,15 @@
 </template>
 
 <script>
-import { IKImage, IKContext, IKUpload } from "imagekit-vue";
+import { IKImage, IKContext, IKUpload } from "imagekitio-vue";
+
+let urlEndpoint= process.env.VUE_APP_URL_ENDPOINT;
+if(urlEndpoint[urlEndpoint.length-1] === "/")
+    urlEndpoint = urlEndpoint.slice(0,urlEndpoint.length-1);
+
+let path = "/default-image.jpg";
+  if(path[0] === "/")
+    path = path.split("/")[1];
 
 export default {
   name: "app",
@@ -58,9 +66,11 @@ export default {
   },
   data() {
     return {
-      urlEndpoint: process.env.VUE_APP_URL_ENDPOINT,
+      urlEndpoint: urlEndpoint,
       publicKey: process.env.VUE_APP_PUBLIC_KEY,
-      authenticationEndpoint: process.env.VUE_APP_AUTHENTICATION_ENDPOINT
+      authenticationEndpoint: process.env.VUE_APP_AUTHENTICATION_ENDPOINT,
+      path: path,
+      src: `${urlEndpoint}/${path}`
     };
   }
 };

package-lock.json

@@ -1,19 +1,18 @@
 {
-  "name": "imagekit-vue",
+  "name": "imagekitio-vue",
   "version": "0.1.0",
-  "private": true,
   "scripts": {
     "build:lib": "vue-cli-service build --target lib src/index.js",
     "build": "vue-cli-service lint --fix; npm run build:lib",
     "serve": "vue-cli-service serve",
     "lint": "vue-cli-service lint",
-    "test:unit": "rm -f tests/__snapshots__/storyshots.test.js.snap && vue-cli-service test:unit",
+    "test:unit": "vue-cli-service test:unit -u",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
-  "main": "dist/imagekit-vue.common.js",
+  "main": "dist/imagekitio-vue.common.js",
   "browser": "src/index.js",
-  "unpkg": "dist/imagekit-vue.umd.min.js",
+  "unpkg": "dist/imagekitio-vue.umd.min.js",
   "dependencies": {
     "babel-plugin-require-context-hook": "^1.0.0",
     "core-js": "^3.4.3",

package.json

@@ -9,10 +9,10 @@ export default {
   inject: {configurations: {default:""}},
   props: {
     fileName: { type: String, default: "", required: false },
-    useUniqueFileName: {type: Boolean, default:"true", required:false},
+    useUniqueFileName: {type: Boolean, default:true, required:false},
     tags:{type:Array,required:false},
     folder:{ type: String, default: "/", required: false },
-    isPrivateFile: {type: Boolean, default:"false", required:false},
+    isPrivateFile: {type: Boolean, default:false, required:false},
     customCoordinates: { type: String, default: "", required: false },
     responseFields: { type: Array, required: false }
   },

src/components/IKUpload.vue

@@ -4,13 +4,21 @@ export default {
   title: 'IKContext',
 };
 
-
-const urlEndpoint = process.env.VUE_APP_URL_ENDPOINT;
 const publicKey = process.env.VUE_APP_PUBLIC_KEY;
 
+let urlEndpoint = process.env.VUE_APP_URL_ENDPOINT;
+if(urlEndpoint[urlEndpoint.length-1] === "/")
+    urlEndpoint = urlEndpoint.slice(0,urlEndpoint.length-1);
+
+let path = "/default-image.jpg";
+  if(path[0] === "/")
+    path = path.split("/")[1];
+
+const src = `${urlEndpoint}/${path}`;
+
 export const imageWithContext = () => ({
   components: { IKImage, IKContext },
-  template: `<IKContext publicKey="${publicKey}" urlEndpoint=${urlEndpoint}><IKImage src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"/></IKContext>`,
+  template: `<IKContext publicKey="${publicKey}" urlEndpoint=${urlEndpoint}><IKImage src="${src}"/></IKContext>`,
 });
 
 

tests/stories/0-ImageKitContext.stories.js

@@ -4,30 +4,39 @@ export default {
   title: 'IKImage',
 };
 
-const urlEndpoint = process.env.VUE_APP_URL_ENDPOINT;
 const publicKey = process.env.VUE_APP_PUBLIC_KEY;
 
+let urlEndpoint = process.env.VUE_APP_URL_ENDPOINT;
+if(urlEndpoint[urlEndpoint.length-1] === "/")
+    urlEndpoint = urlEndpoint.slice(0,urlEndpoint.length-1);
+
+let path = "/default-image.jpg";
+  if(path[0] === "/")
+    path = path.split("/")[1];
+
+const src = `${urlEndpoint}${path}`;
+
 export const imageWithSrc = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"/>`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src=${src}/>`,
 });
 
 export const imageWithPath = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} path="/ABC_BV8lzpfOS"/>`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} path=${path}/>`,
 });
 
 export const imageWithLQIP = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS" v-bind:lqip="{active:true,threshold:20}"/>`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint=${urlEndpoint} src=${src} v-bind:lqip="{active:true,threshold:20}"/>`,
 });
 
 export const imageWithNoPublicKey = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="" urlEndpoint=${urlEndpoint} src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"/>`,
+  template: `<IKImage publicKey="" urlEndpoint=${urlEndpoint} src=${src}/>`,
 });
 
 export const imageWithNoUrlEndpoint = () => ({
   components: { IKImage },
-  template: `<IKImage publicKey="${publicKey}" urlEndpoint="" src="https://ik.imagekit.io/gqyojxcwzxj/ABC_BV8lzpfOS"/>`,
+  template: `<IKImage publicKey="${publicKey}" urlEndpoint="" src=${src}/>`,
 });