@danilosimonatto/ionicons-minimal-weather-widget 0.1.1 → 0.2.0

package/README.md

@@ -29,6 +29,27 @@ You can then use the custom element in your HTML:
 ></weather-widget>
 ```
 
+## Astro
+
+Astro frontmatter runs on the server/build step, but this package registers a **browser custom element** (it uses `window`, `HTMLElement`, and `customElements`). That means the widget must still be loaded **client-side**.
+
+To make this easy, the package ships an Astro wrapper component that includes the needed module import for you:
+
+```astro
+---
+import WeatherWidget from "@danilosimonatto/ionicons-minimal-weather-widget/astro";
+---
+
+<WeatherWidget city="Milan" apiKey={import.meta.env.PUBLIC_OPENWEATHER_API_KEY} />
+```
+
+Props:
+
+- `city` (string, required)
+- `apiKey` (string, required)
+- `scale` ("C" | "F", optional, default "C")
+- `iconStyle` ("filled" | "outline" | "sharp", optional, default "filled")
+
 ## Options
 
 | Attribute    | Type                             | Description                                        | Example      |
@@ -56,6 +77,26 @@ You can then use the custom element in your HTML:
 - 🎨 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

@@ -0,0 +1,31 @@
+---
+type Props = {
+	city: string;
+	scale?: "C" | "F";
+	iconStyle?: "filled" | "outline" | "sharp";
+	apiKey: string;
+};
+
+const {
+	city,
+	scale = "C",
+	iconStyle = "filled",
+	apiKey,
+} = Astro.props as Props;
+---
+
+<weather-widget
+	city={city}
+	scale={scale}
+	icon-style={iconStyle}
+	api-key={apiKey}
+></weather-widget>
+
+<!--
+	This package defines a browser custom element, so it must be loaded client-side.
+	By placing this import in an inline module script, Astro/Vite will bundle it and
+	run it in the browser without the user needing a separate script file.
+-->
+<script type="module">
+	import "../dist/weather-widget.js";
+</script>

package/dist/weather-widget.js

@@ -0,0 +1,241 @@
+import { defineCustomElements as f } from "ionicons/loader";
+import { addIcons as w } from "ionicons";
+import { helpCircleSharp as b, helpCircleOutline as S, helpCircle as x, snowSharp as C, snowOutline as O, 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 z, cloudyOutline as L, cloudy as $, partlySunnySharp as F, partlySunnyOutline as R, partlySunny as T, moonSharp as W, moonOutline as j, moon as K, sunnySharp as _, sunnyOutline as D, sunny as H } from "ionicons/icons";
+const B = `: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: row;
+	gap: 12px;
+	font-size: 2.5rem;
+	font-weight: 700;
+	align-items: center;
+	justify-content: center;
+}
+
+.city-name {
+	font-size: 1.5rem;
+	font-weight: 600;
+	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.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);
+}
+`, 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 || (w({
+    sunny: H,
+    sunnyOutline: D,
+    sunnySharp: _,
+    moon: K,
+    moonOutline: j,
+    moonSharp: W,
+    partlySunny: T,
+    partlySunnyOutline: R,
+    partlySunnySharp: F,
+    cloudy: $,
+    cloudyOutline: L,
+    cloudySharp: z,
+    cloudyNight: U,
+    cloudyNightOutline: N,
+    cloudyNightSharp: M,
+    rainy: q,
+    rainyOutline: P,
+    rainySharp: A,
+    thunderstorm: v,
+    thunderstormOutline: I,
+    thunderstormSharp: k,
+    snow: E,
+    snowOutline: O,
+    snowSharp: C,
+    helpCircle: x,
+    helpCircleOutline: S,
+    helpCircleSharp: b
+  }), a = f(window)), a;
+}
+const Q = (n) => String(n || "").toUpperCase() === "F" ? "F" : "C", V = (n) => n === "outline" || n === "sharp" || n === "filled" ? n : "filled", X = (n, t) => t === "filled" ? n : `${n}-${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"];
+  #n = null;
+  #e = this.attachShadow({ mode: "open" });
+  #t = null;
+  connectedCallback() {
+    G().then(() => {
+      this.#o(), this.#i();
+    });
+  }
+  disconnectedCallback() {
+    this.#n && this.#n.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.#e.innerHTML = `<style>${B}</style>${J}`;
+    const t = this.#e.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: e, 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", e), this.#t.temp.textContent = r);
+  }
+  async #i() {
+    const t = this.city;
+    if (!t) {
+      this.#r("Missing city");
+      return;
+    }
+    this.#n && this.#n.abort(), this.#n = new AbortController(), this.#s();
+    try {
+      const e = this.apiKey;
+      if (!e) 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", e);
+      const c = await fetch(r, { signal: this.#n.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", e);
+      const h = await fetch(i, {
+        signal: this.#n.signal
+      });
+      if (!h.ok) throw new Error("Weather not available");
+      const s = await h.json(), d = s?.main?.temp, p = this.scale === "F" ? Math.round(d * 9 / 5 + 32) : Math.round(d), u = s?.weather?.[0]?.icon, y = u && Y[u] || "help-circle", m = X(y, this.iconStyle), g = s?.name || t;
+      this.#a({
+        cityName: g,
+        iconName: m,
+        tempText: `${p}°${this.scale}`
+      });
+    } catch (e) {
+      if (e instanceof DOMException && e.name === "AbortError") return;
+      const r = e instanceof Error ? e.message : "Failed to fetch weather";
+      this.#r(r);
+    }
+  }
+}
+customElements.get("weather-widget") || customElements.define("weather-widget", Z);

package/package.json

@@ -1,22 +1,34 @@
 {
   "name": "@danilosimonatto/ionicons-minimal-weather-widget",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "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,55 @@
+: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: row;
+	gap: 12px;
+	font-size: 2.5rem;
+	font-weight: 700;
+	align-items: center;
+	justify-content: center;
+}
+
+.city-name {
+	font-size: 1.5rem;
+	font-weight: 600;
+	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.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);
+}

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/"),
+		},
+	},
+});