vue-recaptcha-v3 - npm Package Compare versions

Comparing version 1.9.0 to 2.0.0

dist/ReCaptchaVuePlugin.d.ts

 import { ReCaptchaInstance } from 'recaptcha-v3';
-import _Vue from 'vue';
+import { App, Ref } from 'vue';
 import { IReCaptchaOptions } from './IReCaptchaOptions';
-export declare function VueReCaptcha(Vue: typeof _Vue, options: IReCaptchaOptions): void;
-declare module 'vue/types/vue' {
-    interface Vue {
-        $recaptcha(action: string): Promise<string>;
-        $recaptchaLoaded(): Promise<boolean>;
-        $recaptchaInstance: ReCaptchaInstance;
-    }
+export declare const VueReCaptcha: {
+    install(app: App, options: IReCaptchaOptions): void;
+};
+export declare function useReCaptcha(): IReCaptchaComposition | undefined;
+export interface IReCaptchaComposition {
+    isLoaded: Ref<boolean>;
+    instance: Ref<ReCaptchaInstance | undefined>;
+    executeRecaptcha: (action: string) => Promise<string>;
+    recaptchaLoaded: () => Promise<boolean>;
 }

dist/ReCaptchaVuePlugin.js

@@ -39,44 +39,69 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReCaptcha = exports.VueReCaptcha = void 0;
 var recaptcha_v3_1 = require("recaptcha-v3");
-function VueReCaptcha(Vue, options) {
-    var _this = this;
-    var plugin = new ReCaptchaVuePlugin();
-    var recaptchaLoaded = false;
-    var recaptchaError = null;
-    var loadedWaiters = [];
-    Vue.prototype.$recaptchaLoaded = function () { return new Promise(function (resolve, reject) {
-        if (recaptchaError !== null) {
-            return reject(recaptchaError);
+var vue_1 = require("vue");
+var VueReCaptchaInjectKey = Symbol('VueReCaptchaInjectKey');
+var globalConfig = {
+    loadedWaiters: [],
+    error: null
+};
+exports.VueReCaptcha = {
+    install: function (app, options) {
+        var isLoaded = vue_1.ref(false);
+        var instance = vue_1.ref(undefined);
+        app.config.globalProperties.$recaptchaLoaded = recaptchaLoaded(isLoaded);
+        initializeReCaptcha(options).then(function (wrapper) {
+            isLoaded.value = true;
+            instance.value = wrapper;
+            app.config.globalProperties.$recaptcha = recaptcha(instance);
+            app.config.globalProperties.$recaptchaInstance = instance;
+            globalConfig.loadedWaiters.forEach(function (v) { return v.resolve(true); });
+        }).catch(function (error) {
+            globalConfig.error = error;
+            globalConfig.loadedWaiters.forEach(function (v) { return v.reject(error); });
+        });
+        app.provide(VueReCaptchaInjectKey, {
+            instance: instance,
+            isLoaded: isLoaded,
+            executeRecaptcha: recaptcha(instance),
+            recaptchaLoaded: recaptchaLoaded(isLoaded)
+        });
+    }
+};
+function useReCaptcha() {
+    return vue_1.inject(VueReCaptchaInjectKey);
+}
+exports.useReCaptcha = useReCaptcha;
+function initializeReCaptcha(options) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4, recaptcha_v3_1.load(options.siteKey, options.loaderOptions)];
+                case 1: return [2, _a.sent()];
+            }
+        });
+    });
+}
+function recaptchaLoaded(isLoaded) {
+    return function () { return new Promise(function (resolve, reject) {
+        if (globalConfig.error !== null) {
+            return reject(globalConfig.error);
         }
-        if (recaptchaLoaded === true) {
+        if (isLoaded.value) {
             return resolve(true);
         }
-        loadedWaiters.push({ resolve: resolve, reject: reject });
+        globalConfig.loadedWaiters.push({ resolve: resolve, reject: reject });
     }); };
-    plugin.initializeReCaptcha(options).then(function (wrapper) {
-        recaptchaLoaded = true;
-        Vue.prototype.$recaptcha = function (action) { return __awaiter(_this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2, wrapper.execute(action)];
-            });
-        }); };
-        Vue.prototype.$recaptchaInstance = wrapper;
-        loadedWaiters.forEach(function (v) { return v.resolve(true); });
-    }).catch(function (error) {
-        recaptchaError = error;
-        loadedWaiters.forEach(function (v) { return v.reject(error); });
-    });
 }
-exports.VueReCaptcha = VueReCaptcha;
-var ReCaptchaVuePlugin = (function () {
-    function ReCaptchaVuePlugin() {
-    }
-    ReCaptchaVuePlugin.prototype.initializeReCaptcha = function (options) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2, recaptcha_v3_1.load(options.siteKey, options.loaderOptions)];
-            });
+function recaptcha(instance) {
+    var _this = this;
+    return function (action) { return __awaiter(_this, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4, ((_a = instance.value) === null || _a === void 0 ? void 0 : _a.execute(action))];
+                case 1: return [2, _b.sent()];
+            }
         });
-    };
-    return ReCaptchaVuePlugin;
-}());
+    }); };
+}

package.json

 {
   "name": "vue-recaptcha-v3",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "keywords": [
@@ -30,3 +30,3 @@ "captcha",
     "lint": "eslint \"src/**/*.ts\" \"demo/**/*.ts\"",
-    "demo:webpack:server": "webpack-dev-server --config demo/webpack.config.js --progress --public --host 0.0.0.0"
+    "demo:webpack:server": "webpack serve --config demo/webpack.config.js --progress"
   },
@@ -37,5 +37,5 @@ "dependencies": {
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "2",
-    "eslint": "6",
-    "eslint-config-standard-with-typescript": "^12.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.6.1",
+    "eslint": "^7.13.0",
+    "eslint-config-standard-with-typescript": "^19.0.1",
     "eslint-plugin-import": "2",
@@ -45,13 +45,13 @@ "eslint-plugin-node": "11",
     "eslint-plugin-standard": "4",
-    "html-webpack-plugin": "^4.0.4",
-    "ts-loader": "^6.2.2",
-    "typescript": "^3.8.3",
-    "vue": "^2.6.11",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "html-webpack-plugin": "^4.5.0",
+    "ts-loader": "^8.0.9",
+    "typescript": "^4.0.5",
+    "vue": "^3.0.0",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^3.11.0"
   },
   "peerDependencies": {
-    "vue": "^2.6.11"
+    "vue": "^3.0.0"
   }
 }

README.md

@@ -7,2 +7,4 @@ # Vue reCAPTCHA-v3
 
+**The latest version of this package supports Vue 3!** [See here for Vue 2 usage](https://github.com/AurityLab/vue-recaptcha-v3/tree/vue-v2.x). 
+
 ## Install
@@ -47,2 +49,47 @@ With NPM:
 
+### Vue 3 Composition
+
+```js
+import { createApp } from 'vue'
+import { VueReCaptcha, useRecaptcha } from 'vue-recaptcha-v3'
+
+const component = {
+  setup() {
+    const { executeRecaptcha, recaptchaLoaded } = useRecaptcha()
+
+    const recaptcha = async () => {
+      // (optional) Wait until recaptcha has been loaded.
+      await recaptchaLoaded()
+
+      // Execute reCAPTCHA with action "login".
+      const token = await executeRecaptcha('login')
+
+      // Do stuff with the received token.
+    }
+
+    return {
+      recaptcha
+    }
+  },
+  template: '<button @click="recaptcha">Execute recaptcha</button>'
+}
+
+createApp(component)
+  .use(VueReCaptcha, { siteKey: '<site key>' })
+```
+
+### TypeScript + Vue 3
+To get type suggestions for instance variables (this is not needed for composition API), create a new file called `shims-vue-recaptcha-v3.d.ts` and put the following inside it:
+```ts
+import { ReCaptchaInstance } from 'recaptcha-v3'
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $recaptcha: (action: string) => Promise<string>
+    $recaptchaLoaded: () => Promise<boolean>
+    $recaptchaInstance: ReCaptchaInstance
+  }
+}
+```
+
 ## Options
@@ -85,2 +132,2 @@ This plugin offers optional options to configure the behavior of some parts.
 recaptcha.showBadge()
-```  
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21753

increased by11.66%

Lines of code

126

increased by27.27%

Number of lines in readme file

131

increased by55.95%

No dependency changes