@salesforcedevs/dw-components - npm Package Compare versions

Comparing version 1.3.397-canary.4 to 1.3.397-canary.5

package.json

 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.397-canary.4",
+    "version": "1.3.397-canary.5",
     "description": "Lightning web components for https://developer.salesforce.com",
@@ -5,0 +5,0 @@ "license": "MIT",

src/modules/dw/recaptcha/recaptcha.ts

 import { api, LightningElement } from "lwc";
 
-declare module globalThis {
-    let grecaptcha: {
-        render(element: HTMLElement | null, recaptchaConfig: any): void;
-        reset(): void;
-    };
-}
+// NOTE: This component assumes it is the only Recaptcha widget on a page.
+type RecaptchaApi = {
+    render(element: HTMLElement | null, recaptchaConfig: any): void;
+    reset(): void;
+};
 
 export default class Recaptcha extends LightningElement {
-    private _recaptchaToken = "";
     private errorMessage = "";
-    private slottedRecaptchaDiv: HTMLDivElement | null = null;
+    private recaptchaDiv!: HTMLDivElement;
+    private recaptchaApi?: RecaptchaApi;
+    private recaptchaToken = "";
 
@@ -20,6 +20,14 @@ @api missingErrorMessage = "Complete the captcha";
     get value() {
-        return this._recaptchaToken;
+        return this.recaptchaToken;
     }
 
     @api
+    recaptchaScriptOnLoad = (recaptchaApi: RecaptchaApi) => {
+        this.recaptchaApi = recaptchaApi;
+        if (this.recaptchaDiv) {
+            this.renderRecaptcha();
+        }
+    };
+
+    @api
     reset = () => this.resetRecaptcha();
@@ -40,13 +48,17 @@
     checkValidity = () => {
-        return Boolean(
-            (
-                this.slottedRecaptchaDiv?.querySelector(
-                    "#g-recaptcha-response"
-                ) as HTMLTextAreaElement
-            )?.value
-        );
+        return Boolean(this.recaptchaToken);
     };
 
-    private onSlotChange(e: Event) {
-        this.slottedRecaptchaDiv = e.target as HTMLDivElement;
+    renderedCallback() {
+        if (!this.recaptchaDiv) {
+            this.recaptchaDiv = this.template.querySelector(
+                ".g-recaptcha"
+            ) as HTMLDivElement;
+            if (this.recaptchaApi) {
+                this.renderRecaptcha();
+            }
+        }
+    }
+
+    private renderRecaptcha = () => {
         const smallMatchMedia = window.matchMedia(
@@ -57,3 +69,3 @@ "screen and (max-width: 768px)"
         // render recaptcha, referencing this component's callbacks for handling events
-        globalThis.grecaptcha?.render(this.slottedRecaptchaDiv, {
+        this.recaptchaApi?.render(this.recaptchaDiv, {
             sitekey: this.recaptchaSiteKey,
@@ -65,6 +77,6 @@ callback: this.recaptchaCallback,
         });
-    }
+    };
 
     private recaptchaCallback = (token: string) => {
-        this._recaptchaToken = token;
+        this.recaptchaToken = token;
         this.errorMessage = "";
@@ -74,3 +86,3 @@ };
     private recaptchaExpiredCallback = () => {
-        this._recaptchaToken = ""; // note: recaptcha element itself handles showing an "expired" message
+        this.recaptchaToken = ""; // note: recaptcha element itself handles showing an "expired" message
     };
@@ -84,5 +96,5 @@
     private resetRecaptcha = () => {
-        this._recaptchaToken = "";
-        globalThis.grecaptcha?.reset();
+        this.recaptchaToken = "";
+        this.recaptchaApi?.reset();
     };
 }

No alert changes

Improved metrics

Total package byte prevSize

509439

0.06%

Lines of code

9425

0.11%

No dependency changes