wc-img-ai 0.1.2 → 0.2.1

package/dist/wc-img-ai.js

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var _a;
-const t$4 = globalThis, e$3 = t$4.ShadowRoot && (void 0 === t$4.ShadyCSS || t$4.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$4 = /* @__PURE__ */ new WeakMap();
+const t$3 = globalThis, e$3 = t$3.ShadowRoot && (void 0 === t$3.ShadyCSS || t$3.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$4 = /* @__PURE__ */ new WeakMap();
 let n$4 = class n {
   constructor(t2, e2, o2) {
     if (this._$cssResult$ = true, o2 !== s$3)
@@ -38,7 +38,7 @@ const r$5 = (t2) => new n$4("string" == typeof t2 ? t2 : t2 + "", void 0, s$3),
     s3.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
   else
     for (const e2 of o2) {
-      const o3 = document.createElement("style"), n3 = t$4.litNonce;
+      const o3 = document.createElement("style"), n3 = t$3.litNonce;
       void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s3.appendChild(o3);
     }
 }, c$3 = e$3 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
@@ -299,7 +299,7 @@ b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[d$1("elementProp
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$3 = globalThis, i$1 = t$3.trustedTypes, s$2 = i$1 ? i$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$1 = "$lit$", h$1 = `lit$${(Math.random() + "").slice(9)}$`, o$2 = "?" + h$1, n$2 = `<${o$2}>`, r$3 = document, l = () => r$3.createComment(""), c$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a = Array.isArray, u = (t2) => a(t2) || "function" == typeof (t2 == null ? void 0 : t2[Symbol.iterator]), d = "[ 	\n\f\r]", f$2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
+const t$2 = globalThis, i$1 = t$2.trustedTypes, s$2 = i$1 ? i$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$1 = "$lit$", h$1 = `lit$${(Math.random() + "").slice(9)}$`, o$2 = "?" + h$1, n$2 = `<${o$2}>`, r$3 = document, l = () => r$3.createComment(""), c$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a = Array.isArray, u = (t2) => a(t2) || "function" == typeof (t2 == null ? void 0 : t2[Symbol.iterator]), d = "[ 	\n\f\r]", f$2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y = (t2) => (i2, ...s3) => ({ _$litType$: t2, strings: i2, values: s3 }), x = y(1), w = Symbol.for("lit-noChange"), T = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), E = r$3.createTreeWalker(r$3, 129);
 function C(t2, i2) {
   if (!Array.isArray(t2) || !t2.hasOwnProperty("raw"))
@@ -534,8 +534,8 @@ class L {
     N(this, t2);
   }
 }
-const Z = t$3.litHtmlPolyfillSupport;
-Z == null ? void 0 : Z(V, M), (t$3.litHtmlVersions ?? (t$3.litHtmlVersions = [])).push("3.1.0");
+const Z = t$2.litHtmlPolyfillSupport;
+Z == null ? void 0 : Z(V, M), (t$2.litHtmlVersions ?? (t$2.litHtmlVersions = [])).push("3.1.0");
 const j = (t2, i2, s3) => {
   const e2 = (s3 == null ? void 0 : s3.renderBefore) ?? i2;
   let h2 = e2._$litPart$;
@@ -584,7 +584,7 @@ r$2 == null ? void 0 : r$2({ LitElement: s$1 });
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$2 = (t2) => (e2, o2) => {
+const t$1 = (t2) => (e2, o2) => {
   void 0 !== o2 ? o2.addInitializer(() => {
     customElements.define(t2, e2);
   }) : customElements.define(t2, e2);
@@ -621,17 +621,6 @@ function n$1(t2) {
     return e3.constructor.createProperty(o3, r2 ? { ...t3, wrapped: true } : t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
   })(t2, e2, o2);
 }
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function t$1(t2) {
-  return (n3, o2) => {
-    const c2 = "function" == typeof n3 ? n3 : n3[o2];
-    Object.assign(c2, t2);
-  };
-}
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -900,6 +889,7 @@ class SpreadDirective extends SpreadEventsDirective {
   }
 }
 const spread = e(SpreadDirective);
+const spinner = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.a{animation:b .8s linear infinite;fill:#888}.c{animation-delay:-.65s}.d{animation-delay:-.5s}@keyframes b{93.75%,100%{r:3px}46.875%{r:.2px}}</style><circle class="a" cx="4" cy="12" r="3"/><circle class="a c" cx="12" cy="12" r="3"/><circle class="a d" cx="20" cy="12" r="3"/></svg>`;
 const getGeneratedImage = async (endpoint, prompt, width, height) => {
   let response;
   try {
@@ -935,12 +925,8 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let AiImg = class extends s$1 {
-  // Override createRenderRoot to render in the light DOM
-  // createRenderRoot() {
-  //   return this
-  // }
   constructor() {
-    super();
+    super(...arguments);
     this.fallback = "";
     this.width = "";
     this.height = "";
@@ -949,30 +935,33 @@ let AiImg = class extends s$1 {
     this.imgsrc = "";
     this.prompt = "";
     this.imgAttributes = {};
-    setTimeout(async () => {
-      var _a2;
-      if (!this.prompt) {
-        this.imgsrc = this.fallback;
-        return;
-      }
-      try {
-        const openAiResponse = await getGeneratedImage(
-          this.src,
-          this.prompt,
-          Number(this.width),
-          Number(this.height)
-        );
-        this.imgsrc = openAiResponse || this.fallback;
-      } catch (error) {
-        console.error("Error fetching AI image:", error);
-        this.imgsrc = this.fallback;
-      }
-      const img = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("img");
-      img == null ? void 0 : img.addEventListener("error", this._onImgError.bind(this));
-    }, 1);
   }
   connectedCallback() {
     super.connectedCallback();
+    this.initAttributes();
+    this.fetchImage();
+  }
+  async fetchImage() {
+    if (!this.prompt) {
+      this.imgsrc = this.fallback;
+      return;
+    }
+    try {
+      const openAiResponse = await getGeneratedImage(
+        this.src,
+        this.prompt,
+        Number(this.width),
+        Number(this.height)
+      );
+      this.imgsrc = openAiResponse || this.fallback;
+      this.classList.remove("spin");
+    } catch (error) {
+      console.error("Error fetching AI image:", error);
+      this.imgsrc = this.fallback;
+      this.classList.remove("spin");
+    }
+  }
+  initAttributes() {
     Array.from(this.attributes).forEach((attr) => {
       if (![
         "loading",
@@ -996,20 +985,31 @@ let AiImg = class extends s$1 {
     this.imgsrc = "data:image/svg+xml;utf8," + encodeURIComponent(
       `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${this.width} ${this.height}"><rect width="${this.width}" height="${this.height}" fill="#ddd"/></svg>`
     );
-  }
-  _onImgError() {
-    this.imgsrc = this.fallback;
+    this.classList.add("spin");
   }
   render() {
-    const hostStyles = {
-      width: `${this.width}px`,
-      height: `${this.height}px`
-    };
     return x`
       <style>
-        :host {
-          width: ${hostStyles.width};
-          height: ${hostStyles.height};
+        :host(.spin) {
+          position: relative;
+        }
+
+        :host(.spin):before {
+          content: "";
+          position: absolute;
+          margin: auto 0;
+          width: 100%;
+          height: 100%;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          color: red;
+          background-image: url("data:image/svg+xml;utf8,${encodeURIComponent(
+      spinner
+    )}");
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: 25%;
         }
       </style>
 
@@ -1019,18 +1019,6 @@ let AiImg = class extends s$1 {
               decoding="async"
               loading="eager"
               ${spread(this.imgAttributes)}
-              @onerror=${() => {
-      console.log("onerror");
-    }}
-              @onabort=${() => {
-      console.log("onabort");
-    }}
-              @onloadend=${() => {
-      console.log("onloadend");
-    }}
-              @onprogress=${() => {
-      console.log("onprogress");
-    }}
             />
           ` : x`<div>fail</div>`}
     `;
@@ -1077,11 +1065,8 @@ __decorateClass([
 __decorateClass([
   n$1({ type: String, reflect: true })
 ], AiImg.prototype, "prompt", 2);
-__decorateClass([
-  t$1({ passive: true })
-], AiImg.prototype, "_onImgError", 1);
 AiImg = __decorateClass([
-  t$2("ai-img")
+  t$1("ai-img")
 ], AiImg);
 export {
   AiImg

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wc-img-ai",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Use AI to generate images for your img tags.",
   "author": {
     "name": "John Romani",
@@ -35,6 +35,7 @@
     "vite": "^5.0.8"
   },
   "dependencies": {
+    "@changesets/cli": "^2.27.1",
     "@lit-labs/observers": "^2.0.2",
     "@open-wc/lit-helpers": "^0.6.0",
     "lit": "^3.1.0"

package/types/ai-img.d.ts

@@ -11,8 +11,8 @@ export declare class AiImg extends LitElement {
         [key: string]: string;
     };
     connectedCallback(): void;
-    protected constructor();
-    private _onImgError;
+    fetchImage(): Promise<void>;
+    initAttributes(): void;
     protected render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }

package/types/get-generated-image.d.ts

@@ -1 +1,2 @@
+export declare const spinner = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><style>.a{animation:b .8s linear infinite;fill:#888}.c{animation-delay:-.65s}.d{animation-delay:-.5s}@keyframes b{93.75%,100%{r:3px}46.875%{r:.2px}}</style><circle class=\"a\" cx=\"4\" cy=\"12\" r=\"3\"/><circle class=\"a c\" cx=\"12\" cy=\"12\" r=\"3\"/><circle class=\"a d\" cx=\"20\" cy=\"12\" r=\"3\"/></svg>";
 export declare const getGeneratedImage: (endpoint: string, prompt: string, width: number, height: number) => Promise<string | undefined>;