@wcstack/fetch 1.7.1 → 1.8.0

package/dist/index.d.ts

@@ -104,5 +104,41 @@ declare class FetchCore extends EventTarget {
     private _doFetch;
 }
 
-export { FetchCore, bootstrapFetch, getConfig };
+declare class Fetch extends HTMLElement {
+    static hasConnectedCallbackPromise: boolean;
+    static wcBindable: IWcBindable;
+    static get observedAttributes(): string[];
+    private _core;
+    private _body;
+    private _trigger;
+    private _connectedCallbackPromise;
+    constructor();
+    get url(): string;
+    set url(value: string);
+    get method(): string;
+    set method(value: string);
+    get target(): string | null;
+    set target(value: string | null);
+    get value(): any;
+    get loading(): boolean;
+    get error(): any;
+    get status(): number;
+    get promise(): Promise<any>;
+    get connectedCallbackPromise(): Promise<void>;
+    get manual(): boolean;
+    set manual(value: boolean);
+    get body(): any;
+    set body(value: any);
+    get trigger(): boolean;
+    set trigger(value: boolean);
+    private _collectHeaders;
+    private _collectBody;
+    abort(): void;
+    fetch(): Promise<any>;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+export { FetchCore, Fetch as WcsFetch, bootstrapFetch, getConfig };
 export type { FetchRequestOptions, IWritableConfig, IWritableTagNames, WcsFetchCoreValues, WcsFetchHttpError, WcsFetchValues };

package/dist/index.esm.js

@@ -419,5 +419,5 @@ function bootstrapFetch(userConfig) {
     registerComponents();
 }
 
-export { FetchCore, bootstrapFetch, getConfig };
+export { FetchCore, Fetch as WcsFetch, bootstrapFetch, getConfig };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.min.js

@@ -1,2 +1,2 @@
-const t={autoTrigger:!0,triggerAttribute:"data-fetchtarget",tagNames:{fetch:"wcs-fetch",fetchHeader:"wcs-fetch-header",fetchBody:"wcs-fetch-body"}};function e(t){if(null===t||"object"!=typeof t)return t;Object.freeze(t);for(const r of Object.keys(t))e(t[r]);return t}function r(t){if(null===t||"object"!=typeof t)return t;const e={};for(const s of Object.keys(t))e[s]=r(t[s]);return e}let s=null;const n=t;function o(){return s||(s=e(r(t))),s}class i extends EventTarget{static wcBindable={protocol:"wc-bindable",version:1,properties:[{name:"value",event:"wcs-fetch:response",getter:t=>t.detail.value},{name:"loading",event:"wcs-fetch:loading-changed"},{name:"error",event:"wcs-fetch:error"},{name:"status",event:"wcs-fetch:response",getter:t=>t.detail.status}]};_target;_value=null;_loading=!1;_error=null;_status=0;_abortController=null;_promise=Promise.resolve(null);constructor(t){super(),this._target=t??this}get value(){return this._value}get loading(){return this._loading}get error(){return this._error}get status(){return this._status}get promise(){return this._promise}_setLoading(t){this._loading=t,this._target.dispatchEvent(new CustomEvent("wcs-fetch:loading-changed",{detail:t,bubbles:!0}))}_setError(t){this._error=t,this._target.dispatchEvent(new CustomEvent("wcs-fetch:error",{detail:t,bubbles:!0}))}_setResponse(t,e){this._value=t,this._status=e,this._target.dispatchEvent(new CustomEvent("wcs-fetch:response",{detail:{value:t,status:e},bubbles:!0}))}abort(){this._abortController&&(this._abortController.abort(),this._abortController=null)}async fetch(t,e={}){t||function(t){throw new Error(`[@wcstack/fetch] ${t}`)}("url attribute is required.");const r=this._doFetch(t,e);return this._promise=r,r}async _doFetch(t,e){this.abort(),this._abortController=new AbortController;const{signal:r}=this._abortController;this._setLoading(!0),this._error=null;const{method:s="GET",headers:n={},body:o=null,contentType:i=null,forceText:a=!1}=e;try{i&&!n["Content-Type"]&&(n["Content-Type"]=i);const e={method:s,headers:n,signal:r};"GET"!==s&&"HEAD"!==s&&null!==o&&(e.body=o);const l=await globalThis.fetch(t,e);if(this._status=l.status,!l.ok){const t=await l.text().catch(()=>""),e={status:l.status,statusText:l.statusText,body:t};return this._setError(e),this._setLoading(!1),null}if(a){const t=await l.text();this._setResponse(t,l.status)}else{if((l.headers.get("Content-Type")||"").includes("application/json")){const t=await l.json();this._setResponse(t,l.status)}else{const t=await l.text();this._setResponse(t,l.status)}}return this._setLoading(!1),this._value}catch(t){return"AbortError"===t.name?(this._setLoading(!1),null):(this._setError(t),this._setLoading(!1),null)}finally{this._abortController=null}}}let a=!1;function l(t){const e=t.target;if(!(e instanceof Element))return;const r=e.closest(`[${n.triggerAttribute}]`);if(!r)return;const s=r.getAttribute(n.triggerAttribute);if(!s)return;const o=document.getElementById(s);o&&o instanceof c&&(t.preventDefault(),o.fetch())}class c extends HTMLElement{static hasConnectedCallbackPromise=!0;static wcBindable={...i.wcBindable,properties:[...i.wcBindable.properties,{name:"trigger",event:"wcs-fetch:trigger-changed"}]};static get observedAttributes(){return["url"]}_core;_body=null;_trigger=!1;_connectedCallbackPromise=Promise.resolve();constructor(){super(),this._core=new i(this)}get url(){return this.getAttribute("url")||""}set url(t){this.setAttribute("url",t)}get method(){return(this.getAttribute("method")||"GET").toUpperCase()}set method(t){this.setAttribute("method",t)}get target(){return this.getAttribute("target")}set target(t){null===t?this.removeAttribute("target"):this.setAttribute("target",t)}get value(){return this._core.value}get loading(){return this._core.loading}get error(){return this._core.error}get status(){return this._core.status}get promise(){return this._core.promise}get connectedCallbackPromise(){return this._connectedCallbackPromise}get manual(){return this.hasAttribute("manual")}set manual(t){t?this.setAttribute("manual",""):this.removeAttribute("manual")}get body(){return this._body}set body(t){this._body=t}get trigger(){return this._trigger}set trigger(t){!!t&&(this._trigger=!0,this.fetch().finally(()=>{this._trigger=!1,this.dispatchEvent(new CustomEvent("wcs-fetch:trigger-changed",{detail:!1,bubbles:!0}))}))}_collectHeaders(){const t={},e=this.querySelectorAll(n.tagNames.fetchHeader);for(const r of e){const e=r.headerName,s=r.headerValue;e&&(t[e]=s)}return t}_collectBody(){if(null!==this._body)return{body:"string"==typeof this._body?this._body:JSON.stringify(this._body),contentType:"string"==typeof this._body?null:"application/json"};const t=this.querySelector(n.tagNames.fetchBody);return t?{body:t.bodyContent||null,contentType:t.contentType}:{body:null,contentType:null}}abort(){this._core.abort()}async fetch(){const t=this._collectHeaders(),{body:e,contentType:r}=this._collectBody(),s=await this._core.fetch(this.url,{method:this.method,headers:t,body:e,contentType:r,forceText:!!this.target});if(this.target&&null!==s){const t=document.getElementById(this.target);t&&(t.innerHTML=s)}return this._body=null,s}attributeChangedCallback(t,e,r){"url"===t&&this.isConnected&&!this.manual&&r&&this.fetch()}connectedCallback(){this.style.display="none",n.autoTrigger&&(a||(a=!0,document.addEventListener("click",l))),!this.manual&&this.url&&(this._connectedCallbackPromise=this.fetch().then(()=>{}))}disconnectedCallback(){this.abort()}}class u extends HTMLElement{connectedCallback(){this.style.display="none"}get headerName(){return this.getAttribute("name")||""}get headerValue(){return this.getAttribute("value")||""}}class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}get contentType(){return this.getAttribute("type")||"application/json"}get bodyContent(){return this.textContent?.trim()||""}}function g(e){var r;e&&("boolean"==typeof(r=e).autoTrigger&&(t.autoTrigger=r.autoTrigger),"string"==typeof r.triggerAttribute&&(t.triggerAttribute=r.triggerAttribute),r.tagNames&&Object.assign(t.tagNames,r.tagNames),s=null),customElements.get(n.tagNames.fetch)||customElements.define(n.tagNames.fetch,c),customElements.get(n.tagNames.fetchHeader)||customElements.define(n.tagNames.fetchHeader,u),customElements.get(n.tagNames.fetchBody)||customElements.define(n.tagNames.fetchBody,h)}export{i as FetchCore,g as bootstrapFetch,o as getConfig};
+const t={autoTrigger:!0,triggerAttribute:"data-fetchtarget",tagNames:{fetch:"wcs-fetch",fetchHeader:"wcs-fetch-header",fetchBody:"wcs-fetch-body"}};function e(t){if(null===t||"object"!=typeof t)return t;Object.freeze(t);for(const r of Object.keys(t))e(t[r]);return t}function r(t){if(null===t||"object"!=typeof t)return t;const e={};for(const s of Object.keys(t))e[s]=r(t[s]);return e}let s=null;const n=t;function o(){return s||(s=e(r(t))),s}class i extends EventTarget{static wcBindable={protocol:"wc-bindable",version:1,properties:[{name:"value",event:"wcs-fetch:response",getter:t=>t.detail.value},{name:"loading",event:"wcs-fetch:loading-changed"},{name:"error",event:"wcs-fetch:error"},{name:"status",event:"wcs-fetch:response",getter:t=>t.detail.status}]};_target;_value=null;_loading=!1;_error=null;_status=0;_abortController=null;_promise=Promise.resolve(null);constructor(t){super(),this._target=t??this}get value(){return this._value}get loading(){return this._loading}get error(){return this._error}get status(){return this._status}get promise(){return this._promise}_setLoading(t){this._loading=t,this._target.dispatchEvent(new CustomEvent("wcs-fetch:loading-changed",{detail:t,bubbles:!0}))}_setError(t){this._error=t,this._target.dispatchEvent(new CustomEvent("wcs-fetch:error",{detail:t,bubbles:!0}))}_setResponse(t,e){this._value=t,this._status=e,this._target.dispatchEvent(new CustomEvent("wcs-fetch:response",{detail:{value:t,status:e},bubbles:!0}))}abort(){this._abortController&&(this._abortController.abort(),this._abortController=null)}async fetch(t,e={}){t||function(t){throw new Error(`[@wcstack/fetch] ${t}`)}("url attribute is required.");const r=this._doFetch(t,e);return this._promise=r,r}async _doFetch(t,e){this.abort(),this._abortController=new AbortController;const{signal:r}=this._abortController;this._setLoading(!0),this._error=null;const{method:s="GET",headers:n={},body:o=null,contentType:i=null,forceText:a=!1}=e;try{i&&!n["Content-Type"]&&(n["Content-Type"]=i);const e={method:s,headers:n,signal:r};"GET"!==s&&"HEAD"!==s&&null!==o&&(e.body=o);const c=await globalThis.fetch(t,e);if(this._status=c.status,!c.ok){const t=await c.text().catch(()=>""),e={status:c.status,statusText:c.statusText,body:t};return this._setError(e),this._setLoading(!1),null}if(a){const t=await c.text();this._setResponse(t,c.status)}else{if((c.headers.get("Content-Type")||"").includes("application/json")){const t=await c.json();this._setResponse(t,c.status)}else{const t=await c.text();this._setResponse(t,c.status)}}return this._setLoading(!1),this._value}catch(t){return"AbortError"===t.name?(this._setLoading(!1),null):(this._setError(t),this._setLoading(!1),null)}finally{this._abortController=null}}}let a=!1;function c(t){const e=t.target;if(!(e instanceof Element))return;const r=e.closest(`[${n.triggerAttribute}]`);if(!r)return;const s=r.getAttribute(n.triggerAttribute);if(!s)return;const o=document.getElementById(s);o&&o instanceof l&&(t.preventDefault(),o.fetch())}class l extends HTMLElement{static hasConnectedCallbackPromise=!0;static wcBindable={...i.wcBindable,properties:[...i.wcBindable.properties,{name:"trigger",event:"wcs-fetch:trigger-changed"}]};static get observedAttributes(){return["url"]}_core;_body=null;_trigger=!1;_connectedCallbackPromise=Promise.resolve();constructor(){super(),this._core=new i(this)}get url(){return this.getAttribute("url")||""}set url(t){this.setAttribute("url",t)}get method(){return(this.getAttribute("method")||"GET").toUpperCase()}set method(t){this.setAttribute("method",t)}get target(){return this.getAttribute("target")}set target(t){null===t?this.removeAttribute("target"):this.setAttribute("target",t)}get value(){return this._core.value}get loading(){return this._core.loading}get error(){return this._core.error}get status(){return this._core.status}get promise(){return this._core.promise}get connectedCallbackPromise(){return this._connectedCallbackPromise}get manual(){return this.hasAttribute("manual")}set manual(t){t?this.setAttribute("manual",""):this.removeAttribute("manual")}get body(){return this._body}set body(t){this._body=t}get trigger(){return this._trigger}set trigger(t){!!t&&(this._trigger=!0,this.fetch().finally(()=>{this._trigger=!1,this.dispatchEvent(new CustomEvent("wcs-fetch:trigger-changed",{detail:!1,bubbles:!0}))}))}_collectHeaders(){const t={},e=this.querySelectorAll(n.tagNames.fetchHeader);for(const r of e){const e=r.headerName,s=r.headerValue;e&&(t[e]=s)}return t}_collectBody(){if(null!==this._body)return{body:"string"==typeof this._body?this._body:JSON.stringify(this._body),contentType:"string"==typeof this._body?null:"application/json"};const t=this.querySelector(n.tagNames.fetchBody);return t?{body:t.bodyContent||null,contentType:t.contentType}:{body:null,contentType:null}}abort(){this._core.abort()}async fetch(){const t=this._collectHeaders(),{body:e,contentType:r}=this._collectBody(),s=await this._core.fetch(this.url,{method:this.method,headers:t,body:e,contentType:r,forceText:!!this.target});if(this.target&&null!==s){const t=document.getElementById(this.target);t&&(t.innerHTML=s)}return this._body=null,s}attributeChangedCallback(t,e,r){"url"===t&&this.isConnected&&!this.manual&&r&&this.fetch()}connectedCallback(){this.style.display="none",n.autoTrigger&&(a||(a=!0,document.addEventListener("click",c))),!this.manual&&this.url&&(this._connectedCallbackPromise=this.fetch().then(()=>{}))}disconnectedCallback(){this.abort()}}class u extends HTMLElement{connectedCallback(){this.style.display="none"}get headerName(){return this.getAttribute("name")||""}get headerValue(){return this.getAttribute("value")||""}}class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}get contentType(){return this.getAttribute("type")||"application/json"}get bodyContent(){return this.textContent?.trim()||""}}function g(e){var r;e&&("boolean"==typeof(r=e).autoTrigger&&(t.autoTrigger=r.autoTrigger),"string"==typeof r.triggerAttribute&&(t.triggerAttribute=r.triggerAttribute),r.tagNames&&Object.assign(t.tagNames,r.tagNames),s=null),customElements.get(n.tagNames.fetch)||customElements.define(n.tagNames.fetch,l),customElements.get(n.tagNames.fetchHeader)||customElements.define(n.tagNames.fetchHeader,u),customElements.get(n.tagNames.fetchBody)||customElements.define(n.tagNames.fetchBody,h)}export{i as FetchCore,l as WcsFetch,g as bootstrapFetch,o as getConfig};
 //# sourceMappingURL=index.esm.min.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wcstack/fetch",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Declarative fetch component for Web Components. Framework-agnostic async data fetching via wc-bindable-protocol.",
   "type": "module",
   "main": "./dist/index.esm.js",