@mailto.foo/sdk 1.3.3 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -4
- package/dist/cdn.js +26 -2
- package/dist/cdn.js.map +1 -1
- package/dist/sdk.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
# @mailto.foo/sdk
|
|
3
3
|
|
|
4
|
-
The JavaScript SDK for mailto.foo — a headless email subscription and contact form service. Drop it in via script tag or npm, hand it your publish key, and it handles bot protection and delivers only verified submissions to your dashboard.
|
|
4
|
+
The JavaScript SDK for [mailto.foo](https://mailto.foo) — a headless email subscription and contact form service. Drop it in via script tag or npm, hand it your publish key, and it handles bot protection and delivers only verified submissions to your dashboard.
|
|
5
5
|
|
|
6
6
|
No backend code required on your end.
|
|
7
7
|
|
|
@@ -40,11 +40,26 @@ The CDN build auto-enhances any `<form>` whose `action` points at your subscribe
|
|
|
40
40
|
</form>
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
On submit, the SDK intercepts the form, calls `subscribe` with the form fields, resets the form on success, and dispatches `mailto:success` / `mailto:error` custom events on the form element so you can hook in your own UI:
|
|
43
|
+
On submit, the SDK intercepts the form, calls `subscribe` with the form fields, resets the form on success, and dispatches `mailto-foo:submitting` / `mailto-foo:success` / `mailto-foo:error` custom events on the form element so you can hook in your own UI:
|
|
44
44
|
|
|
45
45
|
```js
|
|
46
|
-
form.addEventListener('mailto:
|
|
47
|
-
form.addEventListener('mailto:
|
|
46
|
+
form.addEventListener('mailto-foo:submitting', () => showLoading())
|
|
47
|
+
form.addEventListener('mailto-foo:success', () => showThankYou())
|
|
48
|
+
form.addEventListener('mailto-foo:error', (e) => showError(e.detail.error.message))
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
The SDK also manages status messages and submit buttons for you automatically:
|
|
52
|
+
|
|
53
|
+
- It injects a `.mailto-foo-error` and a `.mailto-foo-success` element into the form (if not already present) and fills them with the error or success message on submit.
|
|
54
|
+
- Any element matching `.mailto-foo-button`, `button[type="submit"]`, or `input[type="submit"]` is disabled (and gets `data-loading="true"`) while the request is in flight, so you can style a loading state.
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<form action="https://api.mailto.foo/your_publish_key/subscribe">
|
|
58
|
+
<input type="email" name="email" required>
|
|
59
|
+
<div class="mailto-foo-error"></div>
|
|
60
|
+
<div class="mailto-foo-success"></div>
|
|
61
|
+
<button type="submit" class="mailto-foo-button">Subscribe</button>
|
|
62
|
+
</form>
|
|
48
63
|
```
|
|
49
64
|
|
|
50
65
|
The SDK is also exposed as `window.Mailto` for manual usage:
|
package/dist/cdn.js
CHANGED
|
@@ -10,6 +10,7 @@ const collectFormData = (form) => {
|
|
|
10
10
|
};
|
|
11
11
|
const ERROR_CLASS = "mailto-foo-error";
|
|
12
12
|
const SUCCESS_CLASS = "mailto-foo-success";
|
|
13
|
+
const BUTTON_CLASS = "mailto-foo-button";
|
|
13
14
|
const ensureMessageElement = (form, className) => {
|
|
14
15
|
const existing = form.querySelector(`.${className}`);
|
|
15
16
|
if (existing)
|
|
@@ -19,23 +20,46 @@ const ensureMessageElement = (form, className) => {
|
|
|
19
20
|
form.appendChild(element);
|
|
20
21
|
return element;
|
|
21
22
|
};
|
|
23
|
+
const getActionButtons = (form) => {
|
|
24
|
+
const buttons = new Set();
|
|
25
|
+
for (const el of form.querySelectorAll(`.${BUTTON_CLASS}, button[type="submit"], input[type="submit"]`)) {
|
|
26
|
+
if (el instanceof HTMLButtonElement || el instanceof HTMLInputElement)
|
|
27
|
+
buttons.add(el);
|
|
28
|
+
}
|
|
29
|
+
return [...buttons];
|
|
30
|
+
};
|
|
31
|
+
const setButtonsLoading = (buttons, loading) => {
|
|
32
|
+
for (const button of buttons) {
|
|
33
|
+
button.disabled = loading;
|
|
34
|
+
if (loading)
|
|
35
|
+
button.setAttribute("data-loading", "true");
|
|
36
|
+
else
|
|
37
|
+
button.removeAttribute("data-loading");
|
|
38
|
+
}
|
|
39
|
+
};
|
|
22
40
|
const enhanceForm = (form, publishKey) => {
|
|
23
41
|
const mailto = new Mailto({ publishKey });
|
|
24
42
|
const errorElement = ensureMessageElement(form, ERROR_CLASS);
|
|
25
43
|
const successElement = ensureMessageElement(form, SUCCESS_CLASS);
|
|
44
|
+
const actionButtons = getActionButtons(form);
|
|
26
45
|
form.addEventListener("submit", async (event) => {
|
|
27
46
|
event.preventDefault();
|
|
47
|
+
setButtonsLoading(actionButtons, true);
|
|
48
|
+
form.dispatchEvent(new CustomEvent("mailto-foo:submitting", { bubbles: true }));
|
|
28
49
|
try {
|
|
29
50
|
await mailto.subscribe(collectFormData(form));
|
|
30
51
|
errorElement.textContent = "";
|
|
31
52
|
successElement.textContent = "Thanks for subscribing!";
|
|
32
53
|
form.reset();
|
|
33
|
-
form.dispatchEvent(new CustomEvent("mailto:success", { bubbles: true }));
|
|
54
|
+
form.dispatchEvent(new CustomEvent("mailto-foo:success", { bubbles: true }));
|
|
34
55
|
}
|
|
35
56
|
catch (err) {
|
|
36
57
|
successElement.textContent = "";
|
|
37
58
|
errorElement.textContent = err instanceof Error ? err.message : String(err);
|
|
38
|
-
form.dispatchEvent(new CustomEvent("mailto:error", { bubbles: true, detail: { error: err } }));
|
|
59
|
+
form.dispatchEvent(new CustomEvent("mailto-foo:error", { bubbles: true, detail: { error: err } }));
|
|
60
|
+
}
|
|
61
|
+
finally {
|
|
62
|
+
setButtonsLoading(actionButtons, false);
|
|
39
63
|
}
|
|
40
64
|
});
|
|
41
65
|
};
|
package/dist/cdn.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cdn.js","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,MAAM,mBAAmB,GAAG,iDAAiD,CAAC;AAE9E,MAAM,eAAe,GAAG,CAAC,IAAqB,EAA0B,EAAE;IACxE,MAAM,IAAI,GAA2B,EAAE,CAAC;IACxC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;QACxD,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IACnD,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,kBAAkB,CAAC;AACvC,MAAM,aAAa,GAAG,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"cdn.js","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"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"}
|
package/dist/sdk.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var u="https://api-mailto-foo.dan-7bc.workers.dev",
|
|
1
|
+
"use strict";(()=>{var u="https://api-mailto-foo.dan-7bc.workers.dev",g=async n=>{let e=new AbortController,t=setTimeout(()=>e.abort(),5e3);try{let o=await fetch(`${u}/config/${n}/config`,{signal:e.signal});if(clearTimeout(t),!o.ok)throw new Error(`Config fetch failed: ${o.status}`);return o.json()}catch(o){throw clearTimeout(t),o}},a=null,p=()=>window.turnstile?Promise.resolve():a||(a=new Promise((n,e)=>{let t=document.createElement("script");t.src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit",t.async=!0,t.defer=!0,t.onload=()=>n(),t.onerror=o=>{a=null,e(o)},document.head.appendChild(t)}),a),f=n=>new Promise((e,t)=>{let o=document.createElement("div");o.style.cssText=["position:fixed","inset:0","z-index:2147483647","display:flex","align-items:center","justify-content:center","background:rgba(0,0,0,0.5)"].join(";");let s=document.createElement("div");o.appendChild(s),document.body.appendChild(o);let i,c=()=>{try{window.turnstile.remove(i)}catch{}try{document.body.removeChild(o)}catch{}};i=window.turnstile.render(s,{sitekey:n,callback:r=>{c(),e(r)},"error-callback":()=>{c(),t(new Error("Turnstile verification failed"))},"expired-callback":()=>{c(),t(new Error("Turnstile token expired"))}})}),y=async n=>{await p();let e=document.createElement("div");e.style.cssText="position:fixed;bottom:0;right:0;z-index:9999;visibility:hidden;",document.body.appendChild(e);let t,o=()=>{try{window.turnstile.remove(t)}catch{}try{document.body.removeChild(e)}catch{}};return await new Promise((i,c)=>{t=window.turnstile.render(e,{sitekey:n,appearance:"interaction-only",callback:r=>{o(),i(r)},"error-callback":()=>{o(),i(null)},"expired-callback":()=>{o(),c(new Error("Turnstile token expired"))}})})??f(n)},l=class{publishKey;constructor(e){this.publishKey=e.publishKey}async subscribe(e){let t=await g(this.publishKey),o=t.turnstileSiteKey?await y(t.turnstileSiteKey):void 0,s={data:e,config:{publishKey:this.publishKey,token:o}},i=await fetch(`${u}/subscribe`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s)});if(!i.ok){let r=(i.headers.get("content-type")??"").includes("application/json")?(await i.json()).error??"Subscription failed":await i.text();throw new Error(r)}}};var h=/\/(pk_[A-Za-z0-9_-]+)\/subscribe\/?(?:[?#].*)?$/,w=n=>{let e={};for(let[t,o]of new FormData(n).entries())typeof o=="string"&&(e[t]=o);return e},E="mailto-foo-error",T="mailto-foo-success",C="mailto-foo-button",d=(n,e)=>{let t=n.querySelector(`.${e}`);if(t)return t;let o=document.createElement("div");return o.className=e,n.appendChild(o),o},S=n=>{let e=new Set;for(let t of n.querySelectorAll(`.${C}, button[type="submit"], input[type="submit"]`))(t instanceof HTMLButtonElement||t instanceof HTMLInputElement)&&e.add(t);return[...e]},m=(n,e)=>{for(let t of n)t.disabled=e,e?t.setAttribute("data-loading","true"):t.removeAttribute("data-loading")},v=(n,e)=>{let t=new l({publishKey:e}),o=d(n,E),s=d(n,T),i=S(n);n.addEventListener("submit",async c=>{c.preventDefault(),m(i,!0),n.dispatchEvent(new CustomEvent("mailto-foo:submitting",{bubbles:!0}));try{await t.subscribe(w(n)),o.textContent="",s.textContent="Thanks for subscribing!",n.reset(),n.dispatchEvent(new CustomEvent("mailto-foo:success",{bubbles:!0}))}catch(r){s.textContent="",o.textContent=r instanceof Error?r.message:String(r),n.dispatchEvent(new CustomEvent("mailto-foo:error",{bubbles:!0,detail:{error:r}}))}finally{m(i,!1)}})},b=()=>{for(let n of document.querySelectorAll("form[action]")){let e=n.action.match(h);e?.[1]&&v(n,e[1])}};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",b):b();window.Mailto=l;})();
|
package/package.json
CHANGED