add: vue-cli plugin for cloudinary api

Author: Maya Shavin

package.json

@@ -37,7 +37,8 @@
   },
   "homepage": "https://cloudinary-build-url.netlify.app/",
   "repository": {
-    "url": "https://github.com/mayashavin/cloudinary-api"
+    "type": "git",
+    "url": "git+https://github.com/mayashavin/cloudinary-api"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.7.0",

packages/types/package.json

@@ -12,7 +12,8 @@
   "sideEffects": false,
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mayashavin/cloudinary-api.git"
+    "url": "git+https://github.com/mayashavin/cloudinary-api.git",
+    "directory": "packages/types"
   },
   "scripts": {
     "bundlewatch": "bundlewatch --config bundlewatch.config.json",

packages/url/package.json

@@ -58,5 +58,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mayashavin/cloudinary-api.git",
+    "directory": "packages/url"
+  },
   "gitHead": "dcef68eee9274fe77f860b2f7e7165fde41f8bb6"
 }

packages/utils/package.json

@@ -7,7 +7,8 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mayashavin/cloudinary-api.git"
+    "url": "git+https://github.com/mayashavin/cloudinary-api.git",
+    "directory": "packages/utils"
   },
   "bugs": {
     "url": "https://github.com/mayashavin/cloudinary-api/issues"

packages/vue-cli-plugin-cloudinary-api/README.md

@@ -0,0 +1,9 @@
+# `vue-cli-plugin-cloudinary-api`
+
+> Vue-cli plugin for installing Cloudinary light APIs in Vue project.
+
+## Usage
+
+```bash
+vue add cloudinary-api
+```

packages/vue-cli-plugin-cloudinary-api/generator/index.js

@@ -0,0 +1,77 @@
+/** Generator */
+module.exports = (api, opts) => {
+  api.extendPackage({
+    dependencies: {
+      "cloudinary-build-url": "latest",
+    },
+  });
+
+  const urlModes = opts.urlModes.reduce(
+    (opt, mode) => ({
+      image: opt.image || mode === "buildImageUrl",
+      video: opt.video || mode === "buildVideoUrl",
+    }),
+    {
+      image: false,
+      video: false,
+    }
+  );
+
+  api.render("./template", {
+    cloudName: opts.cloudName,
+    ...urlModes,
+    features: opts.urlModes,
+  });
+
+  api.onCreateComplete(() => {
+    // // inject to main.js
+    const fs = require("fs");
+    const mainPath = api.resolve(api.entryFile);
+
+    // get content
+    let contentMain = fs.readFileSync(mainPath, { encoding: "utf-8" });
+
+    const lines = contentMain.split(/\r?\n/g).reverse();
+    // inject import
+    const lastImportIndex = lines.findIndex((line) => line.match(/^import/));
+
+    if (contentMain.includes("createApp(")) {
+      //Vue 3x
+      lines[
+        lastImportIndex
+      ] += `\nimport useCloudinary from './plugins/cloudinary'`;
+
+      const lastCreateAppIndex = lines.findIndex((line) =>
+        line.match(/^createApp\(/)
+      );
+
+      if (lastCreateAppIndex !== -1) {
+        const sublines = lines[lastCreateAppIndex].split(".");
+        sublines[0] = `const app = ${sublines[0]};`;
+        const newLines = sublines.map((line, index) =>
+          index ? `app.${line};` : line
+        );
+
+        const createAppLines = newLines.join("\n");
+
+        lines[lastCreateAppIndex] = createAppLines;
+      }
+
+      contentMain = lines.reverse().join("\n");
+      contentMain += `\nuseCloudinary(app);`;
+    } else {
+      //Vue 2x
+      lines[lastImportIndex] += `\nimport './plugins/cloudinary'`;
+      contentMain = lines.reverse().join("\n");
+    }
+
+    // modify app
+    fs.writeFileSync(mainPath, contentMain, { encoding: "utf-8" });
+    
+    api.exitLog("🖼️ Learn more how to use url builder: https://cloudinary-build-url.netlify.com");
+    api.exitLog("💻 Github: https://github.com/mayashavin/cloudinary-api");
+    api.exitLog(
+      "❤️ Have fun optimizing your images and videos with Cloudinary ❤️"
+    );
+  });
+};

packages/vue-cli-plugin-cloudinary-api/generator/template/src/plugins/cloudinary.js

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import { setConfig, <%= features %> } from 'cloudinary-build-url';
+
+setConfig({
+  cloudName: '<%= cloudName %>'
+})
+
+if (Vue && Vue.version && Vue.version.startsWith('2')) {
+  /** Vue 2x */
+  <% if (image) {%>Vue.prototype.$imageUrl = buildImageUrl;<% } %>
+  <% if (video) {%>Vue.prototype.$videoUrl = buildVideoUrl;<% } %>
+}
+
+const useCloudinary = (app) => {
+  if (!app || !app.config || !app.config.globalProperties) return
+
+  <% if (image) {%>app.config.globalProperties.$imageUrl = buildImageUrl;<% } %>
+  <% if (video) {%>app.config.globalProperties.$videoUrl = buildVideoUrl;<% } %>
+}
+
+export default useCloudinary

packages/vue-cli-plugin-cloudinary-api/icon.png

@@ -0,0 +1 @@
+module.exports = () => {}

packages/vue-cli-plugin-cloudinary-api/index.js

@@ -0,0 +1,35 @@
+{
+  "name": "vue-cli-plugin-cloudinary-api",
+  "version": "0.1.1",
+  "description": "Cloudinary light APIs plugin for vue-cli (3.0+)",
+  "keywords": [
+    "vue",
+    "vue-cli",
+    "plugin",
+    "url",
+    "cloudinary",
+    "sdk",
+    "image",
+    "optimization",
+    "video",
+    "vue-cli-3",
+    "vue-cli-4",
+    "vue-cli cloudinary"
+  ],
+  "author": "Maya Shavin <maya@cloudinary.com>",
+  "homepage": "https://cloudinary-build-url.netlify.app",
+  "license": "MIT",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mayashavin/cloudinary-api.git",
+    "directory": "packages/vue-cli-plugin-cloudinary-api"
+  },
+  "scripts": {
+    "lint": "eslint --ext .js,.vue .",
+    "test": "jest"
+  },
+  "bugs": {
+    "url": "https://github.com/mayashavin/cloudinary-api/issues"
+  }
+}