@danilosimonatto/ionicons-minimal-weather-widget 0.1.2 → 0.2.1

package/README.md

@@ -77,6 +77,26 @@ Props:
 - 🎨 Customizable icon style and units
 - 🔐 Uses your OpenWeather API key via the `api-key` attribute
 
+## Development (editing HTML/CSS with formatting)
+
+The published widget bundle is **generated** so consumers can keep importing a single file.
+
+- Edit:
+  - `src/styles.css`
+  - `src/template.html`
+  - `src/weather-widget.vite.js`
+- Then run:
+
+```sh
+npm run build
+```
+
+For auto-rebuild while developing (e.g. with `npm link`), run:
+
+```sh
+npm run dev
+```
+
 ## License
 
 MIT

package/astro/WeatherWidget.astro

@@ -27,5 +27,5 @@ const {
 	run it in the browser without the user needing a separate script file.
 -->
 <script type="module">
-	import "../weather-widget.js";
+	import "../dist/weather-widget.js";
 </script>

package/dist/weather-widget.js

@@ -0,0 +1,215 @@
+import { defineCustomElements as w } from "ionicons/loader";
+import { addIcons as f } from "ionicons";
+import { helpCircleSharp as S, helpCircleOutline as b, helpCircle as C, snowSharp as O, snowOutline as x, snow as E, thunderstormSharp as k, thunderstormOutline as I, thunderstorm as v, rainySharp as A, rainyOutline as P, rainy as q, cloudyNightSharp as M, cloudyNightOutline as N, cloudyNight as U, cloudySharp as L, cloudyOutline as $, cloudy as F, partlySunnySharp as R, partlySunnyOutline as T, partlySunny as W, moonSharp as j, moonOutline as z, moon as K, sunnySharp as _, sunnyOutline as D, sunny as H } from "ionicons/icons";
+const B = `:host {
+	--color-primary: #000;
+	display: inline-block;
+}
+
+.weather-widget {
+	display: inline-flex;
+	flex-direction: column;
+	gap: 8px;
+	color: var(--color-primary, #000);
+	text-align: center;
+	font-size: 1rem;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+.error {
+	color: #ffebee;
+	background: rgba(255, 0, 0, 0.2);
+	border-radius: 8px;
+}
+
+.weather-content {
+	display: flex;
+	flex-direction: row;
+	gap: 5px;
+	align-items: center;
+	justify-content: center;
+}
+`, J = `<div
+	class="weather-widget"
+	part="root"
+>
+	<div
+		class="loading"
+		part="loading"
+	>
+		Loading…
+	</div>
+
+	<div
+		class="weather-content"
+		part="content"
+		hidden
+	>
+		<div
+			class="city-name"
+			part="city"
+		></div>
+		<ion-icon
+			class="icon"
+			aria-hidden="true"
+		></ion-icon>
+		<span
+			class="temperature"
+			part="temperature"
+		></span>
+	</div>
+
+	<div
+		class="error"
+		part="error"
+		hidden
+	></div>
+</div>
+`;
+let a;
+function G() {
+  return a || (f({
+    sunny: H,
+    sunnyOutline: D,
+    sunnySharp: _,
+    moon: K,
+    moonOutline: z,
+    moonSharp: j,
+    partlySunny: W,
+    partlySunnyOutline: T,
+    partlySunnySharp: R,
+    cloudy: F,
+    cloudyOutline: $,
+    cloudySharp: L,
+    cloudyNight: U,
+    cloudyNightOutline: N,
+    cloudyNightSharp: M,
+    rainy: q,
+    rainyOutline: P,
+    rainySharp: A,
+    thunderstorm: v,
+    thunderstormOutline: I,
+    thunderstormSharp: k,
+    snow: E,
+    snowOutline: x,
+    snowSharp: O,
+    helpCircle: C,
+    helpCircleOutline: b,
+    helpCircleSharp: S
+  }), a = w(window)), a;
+}
+const Q = (e) => String(e || "").toUpperCase() === "F" ? "F" : "C", V = (e) => e === "outline" || e === "sharp" || e === "filled" ? e : "filled", X = (e, t) => t === "filled" ? e : `${e}-${t}`, Y = {
+  // 01d - sunny
+  "01d": "sunny",
+  "01n": "moon",
+  // 02d - partly-sunny
+  "02d": "partly-sunny",
+  "02n": "cloudy-night",
+  // 03d, 04d, 50d - cloudy
+  "03d": "cloudy",
+  "03n": "cloudy",
+  "04d": "cloudy",
+  "04n": "cloudy",
+  "50d": "cloudy",
+  "50n": "cloudy",
+  // 09d, 10d - rainy
+  "09d": "rainy",
+  "09n": "rainy",
+  "10d": "rainy",
+  "10n": "rainy",
+  // 11d - thunderstorm
+  "11d": "thunderstorm",
+  "11n": "thunderstorm",
+  // 13d - snow
+  "13d": "snow",
+  "13n": "snow"
+};
+class Z extends HTMLElement {
+  static observedAttributes = ["city", "scale", "icon-style", "api-key"];
+  #e = null;
+  #n = this.attachShadow({ mode: "open" });
+  #t = null;
+  connectedCallback() {
+    G().then(() => {
+      this.#o(), this.#i();
+    });
+  }
+  disconnectedCallback() {
+    this.#e && this.#e.abort();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this.#i();
+  }
+  get city() {
+    return (this.getAttribute("city") || "").trim();
+  }
+  get scale() {
+    return Q(this.getAttribute("scale"));
+  }
+  get iconStyle() {
+    return V(this.getAttribute("icon-style"));
+  }
+  get apiKey() {
+    return (this.getAttribute("api-key") || "").trim();
+  }
+  #o() {
+    this.#n.innerHTML = `<style>${B}</style>${J}`;
+    const t = this.#n.querySelector(".weather-widget");
+    t && (this.#t = {
+      root: t,
+      loading: t.querySelector('[part="loading"]'),
+      content: t.querySelector('[part="content"]'),
+      city: t.querySelector('[part="city"]'),
+      icon: t.querySelector("ion-icon"),
+      temp: t.querySelector('[part="temperature"]'),
+      error: t.querySelector('[part="error"]')
+    });
+  }
+  #s() {
+    this.#t && (this.#t.loading.hidden = !1, this.#t.content.hidden = !0, this.#t.error.hidden = !0);
+  }
+  #r(t) {
+    this.#t && (this.#t.loading.hidden = !0, this.#t.content.hidden = !0, this.#t.error.hidden = !1, this.#t.error.textContent = t);
+  }
+  #a({ cityName: t, iconName: n, tempText: r }) {
+    this.#t && (this.#t.loading.hidden = !0, this.#t.error.hidden = !0, this.#t.content.hidden = !1, this.#t.city.textContent = t, this.#t.icon.setAttribute("name", n), this.#t.temp.textContent = r);
+  }
+  async #i() {
+    const t = this.city;
+    if (!t) {
+      this.#r("Missing city");
+      return;
+    }
+    this.#e && this.#e.abort(), this.#e = new AbortController(), this.#s();
+    try {
+      const n = this.apiKey;
+      if (!n) throw new Error("Missing API key");
+      const r = new URL("https://api.openweathermap.org/geo/1.0/direct");
+      r.searchParams.set("q", t), r.searchParams.set("limit", "1"), r.searchParams.set("appid", n);
+      const c = await fetch(r, { signal: this.#e.signal });
+      if (!c.ok) throw new Error("City not found");
+      const l = await c.json(), o = l && l[0];
+      if (!o) throw new Error("City not found");
+      const i = new URL(
+        "https://api.openweathermap.org/data/2.5/weather"
+      );
+      i.searchParams.set("lat", String(o.lat)), i.searchParams.set("lon", String(o.lon)), i.searchParams.set("units", "metric"), i.searchParams.set("appid", n);
+      const h = await fetch(i, {
+        signal: this.#e.signal
+      });
+      if (!h.ok) throw new Error("Weather not available");
+      const s = await h.json(), d = s?.main?.temp, y = this.scale === "F" ? Math.round(d * 9 / 5 + 32) : Math.round(d), u = s?.weather?.[0]?.icon, p = u && Y[u] || "help-circle", m = X(p, this.iconStyle), g = s?.name || t;
+      this.#a({
+        cityName: g,
+        iconName: m,
+        tempText: `${y}°${this.scale}`
+      });
+    } catch (n) {
+      if (n instanceof DOMException && n.name === "AbortError") return;
+      const r = n instanceof Error ? n.message : "Failed to fetch weather";
+      this.#r(r);
+    }
+  }
+}
+customElements.get("weather-widget") || customElements.define("weather-widget", Z);

package/package.json

@@ -1,24 +1,34 @@
 {
   "name": "@danilosimonatto/ionicons-minimal-weather-widget",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "type": "module",
   "license": "MIT",
   "author": "Danilo Simonatto",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "prepack": "vite build"
+  },
   "files": [
-    "weather-widget.js",
+    "dist",
     "weather-widget.d.ts",
     "astro",
+    "src",
+    "vite.config.js",
     "README.md",
     "LICENSE"
   ],
   "exports": {
     ".": {
       "types": "./weather-widget.d.ts",
-      "default": "./weather-widget.js"
+      "default": "./dist/weather-widget.js"
     },
     "./astro": "./astro/WeatherWidget.astro"
   },
   "dependencies": {
     "ionicons": "^8.0.13"
+  },
+  "devDependencies": {
+    "vite": "^7.3.1"
   }
-}
+}

package/src/styles.css

@@ -0,0 +1,29 @@
+:host {
+	--color-primary: #000;
+	display: inline-block;
+}
+
+.weather-widget {
+	display: inline-flex;
+	flex-direction: column;
+	gap: 8px;
+	color: var(--color-primary, #000);
+	text-align: center;
+	font-size: 1rem;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+.error {
+	color: #ffebee;
+	background: rgba(255, 0, 0, 0.2);
+	border-radius: 8px;
+}
+
+.weather-content {
+	display: flex;
+	flex-direction: row;
+	gap: 5px;
+	align-items: center;
+	justify-content: center;
+}

package/src/template.html

@@ -0,0 +1,36 @@
+<div
+	class="weather-widget"
+	part="root"
+>
+	<div
+		class="loading"
+		part="loading"
+	>
+		Loading…
+	</div>
+
+	<div
+		class="weather-content"
+		part="content"
+		hidden
+	>
+		<div
+			class="city-name"
+			part="city"
+		></div>
+		<ion-icon
+			class="icon"
+			aria-hidden="true"
+		></ion-icon>
+		<span
+			class="temperature"
+			part="temperature"
+		></span>
+	</div>
+
+	<div
+		class="error"
+		part="error"
+		hidden
+	></div>
+</div>

package/src/weather-widget.entry.js

@@ -0,0 +1,4 @@
+// Vite entry: pulls in the source module that defines the <weather-widget> custom element.
+import "./weather-widget.vite.js";
+
+

package/{weather-widget.js → src/weather-widget.vite.js}

@@ -1,3 +1,6 @@
+import styles from "./styles.css?raw";
+import template from "./template.html?raw";
+
 import { defineCustomElements } from "ionicons/loader";
 import { addIcons } from "ionicons";
 import {
@@ -114,20 +117,12 @@ const ICON_CODE_TO_IONICON = {
 	"13n": "snow",
 };
 
-const escapeHtml = (input) => {
-	return String(input)
-		.replaceAll("&", "&")
-		.replaceAll("<", "&lt;")
-		.replaceAll(">", "&gt;")
-		.replaceAll('"', "&quot;")
-		.replaceAll("'", "&#039;");
-};
-
 class WeatherWidgetElement extends HTMLElement {
 	static observedAttributes = ["city", "scale", "icon-style", "api-key"];
 
 	#abort = null;
 	#shadow = this.attachShadow({ mode: "open" });
+	#els = null;
 
 	connectedCallback() {
 		ensureIonicons().then(() => {
@@ -162,89 +157,61 @@ class WeatherWidgetElement extends HTMLElement {
 	}
 
 	#renderShell() {
-		this.#shadow.innerHTML = `
-			<style>
-				:host {
-					display: inline-block;
-				}
-				.weather-widget {
-					display: inline-flex;
-					flex-direction: column;
-					gap: 8px;
-					padding: 1.5rem;
-					background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-					border-radius: 16px;
-					color: white;
-					text-align: center;
-					box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-					min-width: 250px;
-					font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-				}
-				.loading,
-				.error {
-					font-size: 1rem;
-					padding: 1rem;
-				}
-				.error {
-					color: #ffebee;
-					background: rgba(255, 0, 0, 0.2);
-					border-radius: 8px;
-				}
-				.weather-content {
-					display: flex;
-					flex-direction: column;
-					gap: 12px;
-				}
-				.city-name {
-					font-size: 1.5rem;
-					font-weight: 600;
-					text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-				}
-				.weather {
-					display: flex;
-					gap: 12px;
-					align-items: center;
-					justify-content: center;
-					font-size: 2.5rem;
-					font-weight: 700;
-				}
-				.icon {
-					font-size: 3rem;
-					text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-				}
-				.temperature {
-					text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-				}
-			</style>
-			<div class="weather-widget" part="root">
-				<div class="loading" part="loading">Loading…</div>
-			</div>
-		`;
-	}
-
-	#setInner(html) {
+		this.#shadow.innerHTML = `<style>${styles}</style>${template}`;
 		const root = this.#shadow.querySelector(".weather-widget");
 		if (!root) return;
-		root.innerHTML = html;
+
+		this.#els = {
+			root,
+			loading: root.querySelector('[part="loading"]'),
+			content: root.querySelector('[part="content"]'),
+			city: root.querySelector('[part="city"]'),
+			icon: root.querySelector("ion-icon"),
+			temp: root.querySelector('[part="temperature"]'),
+			error: root.querySelector('[part="error"]'),
+		};
+	}
+
+	#showLoading() {
+		if (!this.#els) return;
+		this.#els.loading.hidden = false;
+		this.#els.content.hidden = true;
+		this.#els.error.hidden = true;
+	}
+
+	#showError(message) {
+		if (!this.#els) return;
+		this.#els.loading.hidden = true;
+		this.#els.content.hidden = true;
+		this.#els.error.hidden = false;
+		this.#els.error.textContent = message;
+	}
+
+	#showWeather({ cityName, iconName, tempText }) {
+		if (!this.#els) return;
+		this.#els.loading.hidden = true;
+		this.#els.error.hidden = true;
+		this.#els.content.hidden = false;
+
+		// Use textContent for safety; avoid innerHTML for dynamic content.
+		this.#els.city.textContent = cityName;
+		this.#els.icon.setAttribute("name", iconName);
+		this.#els.temp.textContent = tempText;
 	}
 
 	async #load() {
 		const city = this.city;
 		if (!city) {
-			this.#setInner(`<div class="error" part="error">Missing city</div>`);
+			this.#showError("Missing city");
 			return;
 		}
 
 		if (this.#abort) this.#abort.abort();
 		this.#abort = new AbortController();
 
-		this.#setInner(`<div class="loading" part="loading">Loading…</div>`);
+		this.#showLoading();
 
 		try {
-			// Mirrors the old Vue component's behavior:
-			// - OpenWeatherMap geocoding -> lat/lon
-			// - OpenWeatherMap weather in metric
-			// - Convert to Fahrenheit client-side if needed
 			const apiKey = this.apiKey;
 			if (!apiKey) throw new Error("Missing API key");
 
@@ -288,22 +255,16 @@ class WeatherWidgetElement extends HTMLElement {
 
 			const cityName = weather?.name || city;
 
-			this.#setInner(`
-				<div class="weather-content" part="content">
-					<div class="city-name" part="city">${escapeHtml(cityName)}</div>
-					<div class="weather" part="weather">
-						<ion-icon name="${iconName}" class="icon" aria-hidden="true"></ion-icon>
-						<span class="temperature" part="temperature">${temp}°${this.scale}</span>
-					</div>
-				</div>
-			`);
+			this.#showWeather({
+				cityName,
+				iconName,
+				tempText: `${temp}°${this.scale}`,
+			});
 		} catch (e) {
 			if (e instanceof DOMException && e.name === "AbortError") return;
 			const message =
 				e instanceof Error ? e.message : "Failed to fetch weather";
-			this.#setInner(
-				`<div class="error" part="error">${escapeHtml(message)}</div>`
-			);
+			this.#showError(message);
 		}
 	}
 }

package/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import path from "node:path";
+
+export default defineConfig({
+	build: {
+		// Output into dist/ to avoid overwriting source files.
+		outDir: "dist",
+		emptyOutDir: true,
+		lib: {
+			entry: path.resolve(__dirname, "src/weather-widget.entry.js"),
+			formats: ["es"],
+			fileName: () => "weather-widget.js",
+		},
+		rollupOptions: {
+			// Keep dependency behavior identical to the hand-written module:
+			// consumers will still resolve `ionicons` from this package's dependencies.
+			external: (id) => id === "ionicons" || id.startsWith("ionicons/"),
+		},
+	},
+});