preact-homeassistant 0.2.2 → 0.3.0

package/dist/index.js

@@ -1,29 +1,11 @@
 import { jsx, jsxs } from "preact/jsx-runtime";
 import { createContext, render } from "preact";
 import { useRef, useMemo, useState, useEffect, useContext } from "preact/hooks";
-const CACHE_PREFIX = "preact-ha:";
-const CACHE_EXPIRY_MS = 24 * 60 * 60 * 1e3;
-function loadFromCache(key) {
-  try {
-    const raw = localStorage.getItem(`${CACHE_PREFIX}${key}`);
-    if (!raw) return void 0;
-    const entry = JSON.parse(raw);
-    if (Date.now() - entry.timestamp > CACHE_EXPIRY_MS) {
-      localStorage.removeItem(`${CACHE_PREFIX}${key}`);
-      return void 0;
-    }
-    return entry.data;
-  } catch {
-    return void 0;
-  }
+function readCache(cache, key) {
+  return cache.get(key)?.data;
 }
-function saveToCache(key, data) {
-  try {
-    const entry = { data, timestamp: Date.now() };
-    localStorage.setItem(`${CACHE_PREFIX}${key}`, JSON.stringify(entry));
-  } catch (e) {
-    console.warn("[preact-homeassistant cache] Failed to save:", e);
-  }
+function writeCache(cache, key, data) {
+  cache.set(key, { data });
 }
 function useCallbackStable(callback) {
   const callbackRef = useRef(callback);
@@ -36,18 +18,30 @@ function useCallbackStable(callback) {
   }
   return stableRef.current;
 }
+const noopSubscribeToHass = () => () => {
+};
 const HAContext = createContext(null);
-function HAProvider({ hass, subscribeToEntity, children }) {
+function HAProvider({
+  hass,
+  subscribeToEntity,
+  subscribeToHass,
+  cache,
+  children
+}) {
   const hassRef = useRef(hass);
   hassRef.current = hass;
   const getHass = useCallbackStable(() => hassRef.current);
+  const cacheRef = useRef();
+  if (!cacheRef.current) cacheRef.current = cache ?? /* @__PURE__ */ new Map();
+  const resolvedSubscribeToHass = subscribeToHass ?? noopSubscribeToHass;
   const store = useMemo(
     () => ({
-      hass: hassRef.current,
       getHass,
-      subscribeToEntity
+      subscribeToEntity,
+      subscribeToHass: resolvedSubscribeToHass,
+      cache: cacheRef.current
     }),
-    [getHass, subscribeToEntity]
+    [getHass, subscribeToEntity, resolvedSubscribeToHass]
   );
   return /* @__PURE__ */ jsx(HAContext.Provider, { value: store, children });
 }
@@ -62,23 +56,45 @@ function useEntity(entityId) {
   const store = useHAStore();
   const cacheKey = `entity:${entityId}`;
   const [entity, setEntity] = useState(() => {
-    const current = store.hass?.states[entityId];
+    const current = store.getHass()?.states[entityId];
     if (current) return current;
-    return loadFromCache(cacheKey);
+    return readCache(store.cache, cacheKey);
   });
   useEffect(() => {
     const unsubscribe = store.subscribeToEntity(entityId, (newEntity) => {
       setEntity(newEntity);
-      saveToCache(cacheKey, newEntity);
+      writeCache(store.cache, cacheKey, newEntity);
     });
     return unsubscribe;
-  }, [entityId, store.subscribeToEntity, cacheKey]);
+  }, [entityId, store.subscribeToEntity, store.cache, cacheKey]);
   return entity;
 }
 function useHass() {
   const store = useHAStore();
   return { getHass: store.getHass };
 }
+function useHassValue(selector, isEqual = Object.is) {
+  const store = useHAStore();
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  const isEqualRef = useRef(isEqual);
+  isEqualRef.current = isEqual;
+  const [value, setValue] = useState(() => selectorRef.current(store.getHass()));
+  useEffect(() => {
+    const unsubscribe = store.subscribeToHass(() => {
+      const next = selectorRef.current(store.getHass());
+      setValue((prev) => isEqualRef.current(prev, next) ? prev : next);
+    });
+    return unsubscribe;
+  }, [store.subscribeToHass, store.getHass]);
+  return value;
+}
+function useHassConfig() {
+  return useHassValue((hass) => hass?.config);
+}
+function useDarkMode() {
+  return useHassValue((hass) => hass?.themes?.darkMode ?? false);
+}
 function useService(entityId) {
   const { getHass } = useHass();
   return useCallbackStable(((service, data) => {
@@ -89,10 +105,19 @@ function useService(entityId) {
   }));
 }
 function useCachedFetch(cacheKey, fetcher, deps) {
-  const [data, setData] = useState(() => loadFromCache(cacheKey));
+  const store = useHAStore();
+  const [data, setData] = useState(() => readCache(store.cache, cacheKey));
   const [isFresh, setIsFresh] = useState(false);
   const [isFetching, setIsFetching] = useState(false);
   const [error, setError] = useState(void 0);
+  const dataKeyRef = useRef(cacheKey);
+  if (cacheKey !== dataKeyRef.current) {
+    dataKeyRef.current = cacheKey;
+    setIsFresh(false);
+    setError(void 0);
+    const cached = readCache(store.cache, cacheKey);
+    if (cached !== void 0) setData(cached);
+  }
   const fetchIdRef = useRef(0);
   const doFetch = useCallbackStable(async () => {
     const fetchId = ++fetchIdRef.current;
@@ -103,7 +128,7 @@ function useCachedFetch(cacheKey, fetcher, deps) {
       if (fetchId === fetchIdRef.current) {
         setData(result);
         setIsFresh(true);
-        saveToCache(cacheKey, result);
+        writeCache(store.cache, cacheKey, result);
       }
     } catch (err) {
       if (fetchId === fetchIdRef.current) {
@@ -126,97 +151,62 @@ function useCachedFetch(cacheKey, fetcher, deps) {
   }, [data, isFresh, isFetching]);
   return { data, status, error, refetch: doFetch };
 }
-function useCalendarEvents(entityId, options) {
-  const { getHass } = useHass();
-  const [events, setEvents] = useState(void 0);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(void 0);
-  const fetchIdRef = useRef(0);
-  const fetchEvents = useCallbackStable(async () => {
-    const hass = getHass();
-    if (!hass?.connection) {
-      setError(new Error("Home Assistant connection not available"));
-      return;
-    }
-    const fetchId = ++fetchIdRef.current;
-    setLoading(true);
-    setError(void 0);
-    try {
-      const result = await hass.connection.sendMessagePromise({
-        type: "call_service",
-        domain: "calendar",
-        service: "get_events",
-        service_data: {
-          start_date_time: options.start.toISOString(),
-          end_date_time: options.end.toISOString()
-        },
-        target: { entity_id: entityId },
-        return_response: true
-      });
-      if (fetchId === fetchIdRef.current) {
-        const entityEvents = result.response?.[entityId]?.events ?? [];
-        setEvents(entityEvents);
-        setLoading(false);
-      }
-    } catch (err) {
-      if (fetchId === fetchIdRef.current) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setLoading(false);
+function calendarEventsCacheKey(entityIds, range) {
+  return `events:${entityIds.join(",")}:${range.start.getTime()}-${range.end.getTime()}`;
+}
+async function fetchCalendarRange(hass, entityIds, range) {
+  if (!hass?.connection) {
+    throw new Error("Home Assistant connection not available");
+  }
+  if (entityIds.length === 0) {
+    return [];
+  }
+  const results = await Promise.all(
+    entityIds.map(async (entityId) => {
+      try {
+        const result = await hass.connection.sendMessagePromise({
+          type: "call_service",
+          domain: "calendar",
+          service: "get_events",
+          service_data: {
+            start_date_time: range.start.toISOString(),
+            end_date_time: range.end.toISOString()
+          },
+          target: { entity_id: entityId },
+          return_response: true
+        });
+        const calendarEvents = result.response?.[entityId]?.events ?? [];
+        return calendarEvents.map(
+          (event) => ({ ...event, calendarId: entityId })
+        );
+      } catch (err) {
+        console.error(`Failed to fetch events for ${entityId}:`, err);
+        return [];
       }
-    }
-  });
-  useEffect(() => {
-    fetchEvents();
-  }, [entityId, options.start.getTime(), options.end.getTime(), fetchEvents]);
-  return { events, loading, error, refetch: fetchEvents };
+    })
+  );
+  return results.flat();
 }
-function useMultiCalendarEvents(entityIds, options) {
+function useCalendarEvents(entityIds, options) {
   const store = useHAStore();
   const { getHass } = useHass();
   const debounceTimerRef = useRef(null);
   const entityIdsKey = entityIds.join(",");
   const dateRangeKey = `${options.start.getTime()}-${options.end.getTime()}`;
   const cacheKey = `events:${entityIdsKey}:${dateRangeKey}`;
-  const fetcher = useCallbackStable(async () => {
-    const hass = getHass();
-    if (!hass?.connection) {
-      throw new Error("Home Assistant connection not available");
-    }
-    if (entityIds.length === 0) {
-      return [];
-    }
-    const results = await Promise.all(
-      entityIds.map(async (entityId) => {
-        try {
-          const result = await hass.connection.sendMessagePromise({
-            type: "call_service",
-            domain: "calendar",
-            service: "get_events",
-            service_data: {
-              start_date_time: options.start.toISOString(),
-              end_date_time: options.end.toISOString()
-            },
-            target: { entity_id: entityId },
-            return_response: true
-          });
-          const calendarEvents = result.response?.[entityId]?.events ?? [];
-          return calendarEvents.map(
-            (event) => ({ ...event, calendarId: entityId })
-          );
-        } catch (err) {
-          console.error(`Failed to fetch events for ${entityId}:`, err);
-          return [];
-        }
-      })
-    );
-    return results.flat();
-  });
+  const fetcher = useCallbackStable(() => fetchCalendarRange(getHass(), entityIds, options));
   const {
     data: events,
     status,
     error,
     refetch
   } = useCachedFetch(cacheKey, fetcher, [entityIdsKey, dateRangeKey]);
+  const prefetch = useCallbackStable((range) => {
+    const key = calendarEventsCacheKey(entityIds, range);
+    if (store.cache.has(key)) return;
+    fetchCalendarRange(getHass(), entityIds, range).then((result) => writeCache(store.cache, key, result)).catch(() => {
+    });
+  });
   const debouncedRefetch = useCallbackStable(() => {
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
@@ -234,7 +224,7 @@ function useMultiCalendarEvents(entityIds, options) {
       }
     };
   }, [entityIdsKey, store.subscribeToEntity, debouncedRefetch]);
-  return { events, status, error, refetch };
+  return { events, status, error, refetch, prefetch };
 }
 function useWeatherForecast(entityId, type) {
   const store = useHAStore();
@@ -313,6 +303,7 @@ function registerRawStyles(styles) {
 function getAllStyles() {
   return styleRegistry.join("\n");
 }
+const TEARDOWN_GRACE_MS = 5e3;
 function registerPreactCard(options) {
   const {
     type,
@@ -323,36 +314,55 @@ function registerPreactCard(options) {
     UnconfiguredComponent,
     getStubConfig
   } = options;
-  class HACard extends HTMLElement {
+  class BaseHACard extends HTMLElement {
     _hass;
     _config;
-    _shadowRoot;
-    _hasRendered = false;
-    _entityChangeListeners = /* @__PURE__ */ new Map();
-    // Pending tree teardown — see disconnectedCallback.
-    _unmountTimer;
-    constructor() {
-      super();
-      this._shadowRoot = this.attachShadow({ mode: "open" });
+    _teardownTimer;
+    _renderUnconfigured() {
     }
     connectedCallback() {
-      if (this._unmountTimer !== void 0) {
-        clearTimeout(this._unmountTimer);
-        this._unmountTimer = void 0;
+      if (this._teardownTimer !== void 0) {
+        clearTimeout(this._teardownTimer);
+        this._teardownTimer = void 0;
       }
-      if (this._hass && this._config && !this._hasRendered) {
+      this._maybeRenderOnConnect();
+    }
+    _maybeRenderOnConnect() {
+      if (this._hass && this._config) {
         this._render();
       }
     }
     disconnectedCallback() {
-      if (this._unmountTimer !== void 0) return;
-      this._unmountTimer = setTimeout(() => {
-        this._unmountTimer = void 0;
-        if (this.isConnected) return;
-        render(null, this._shadowRoot);
-        this._hasRendered = false;
-        this._entityChangeListeners.clear();
-      }, 100);
+      if (this._teardownTimer !== void 0) clearTimeout(this._teardownTimer);
+      this._teardownTimer = setTimeout(() => {
+        render(null, this._getRenderRoot());
+        this._teardownTimer = void 0;
+      }, TEARDOWN_GRACE_MS);
+    }
+    setConfig(config) {
+      this._config = config;
+      if (this._hass && this.isConnected) {
+        this._render();
+      }
+    }
+    _render() {
+      if (!this._config || !this._hass) {
+        this._renderUnconfigured();
+        return;
+      }
+      this._renderTree();
+    }
+  }
+  class HACard extends BaseHACard {
+    _shadowRoot;
+    _entityChangeListeners = /* @__PURE__ */ new Map();
+    _hassChangeListeners = /* @__PURE__ */ new Set();
+    constructor() {
+      super();
+      this._shadowRoot = this.attachShadow({ mode: "open" });
+    }
+    _getRenderRoot() {
+      return this._shadowRoot;
     }
     set hass(hass) {
       const prevStates = this._hass?.states;
@@ -364,16 +374,11 @@ function registerPreactCard(options) {
           listeners.forEach((listener) => listener(newState));
         }
       }
+      this._hassChangeListeners.forEach((listener) => listener());
       if (!prevStates && this._config && this.isConnected) {
         this._render();
       }
     }
-    setConfig(config) {
-      this._config = config;
-      if (this._hass && this.isConnected) {
-        this._render();
-      }
-    }
     _subscribeToEntity = (entityId, callback) => {
       if (!this._entityChangeListeners.has(entityId)) {
         this._entityChangeListeners.set(entityId, /* @__PURE__ */ new Set());
@@ -389,21 +394,33 @@ function registerPreactCard(options) {
         }
       };
     };
-    _render() {
-      if (!this._config || !this._hass) {
-        if (UnconfiguredComponent) {
-          render(/* @__PURE__ */ jsx(UnconfiguredComponent, {}), this._shadowRoot);
-        }
-        return;
-      }
+    _subscribeToHass = (callback) => {
+      this._hassChangeListeners.add(callback);
+      return () => {
+        this._hassChangeListeners.delete(callback);
+      };
+    };
+    _renderTree() {
       render(
-        /* @__PURE__ */ jsxs(HAProvider, { hass: this._hass, subscribeToEntity: this._subscribeToEntity, children: [
-          /* @__PURE__ */ jsx("style", { children: getAllStyles() }),
-          /* @__PURE__ */ jsx(Component, { config: this._config })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          HAProvider,
+          {
+            hass: this._hass,
+            subscribeToEntity: this._subscribeToEntity,
+            subscribeToHass: this._subscribeToHass,
+            children: [
+              /* @__PURE__ */ jsx("style", { children: getAllStyles() }),
+              /* @__PURE__ */ jsx(Component, { config: this._config })
+            ]
+          }
+        ),
         this._shadowRoot
       );
-      this._hasRendered = true;
+    }
+    _renderUnconfigured() {
+      if (UnconfiguredComponent) {
+        render(/* @__PURE__ */ jsx(UnconfiguredComponent, {}), this._shadowRoot);
+      }
     }
     static getConfigElement() {
       if (ConfigComponent) {
@@ -418,13 +435,19 @@ function registerPreactCard(options) {
   customElements.define(type, HACard);
   if (ConfigComponent) {
     const EditorComponent = ConfigComponent;
-    class HACardEditor extends HTMLElement {
-      _hass;
-      _config;
+    class HACardEditor extends BaseHACard {
+      _getRenderRoot() {
+        return this;
+      }
+      // The editor re-renders on every hass update: it passes `hass` straight to
+      // HA's <ha-form>/<ha-selector>, whose entity pickers need a fresh hass to
+      // stay current. (Unlike the card, which renders once then subscribes.)
       set hass(hass) {
         this._hass = hass;
         this._render();
       }
+      // Render whenever config arrives, regardless of connection — HA may set
+      // config/hass before connecting the editor element.
       setConfig(config) {
         this._config = config;
         this._render();
@@ -438,8 +461,8 @@ function registerPreactCard(options) {
           })
         );
       };
-      _render() {
-        if (!this._hass || !this._config) return;
+      // Render to light DOM so HA's custom elements (ha-form etc.) work.
+      _renderTree() {
         render(
           /* @__PURE__ */ jsx(
             EditorComponent,
@@ -463,21 +486,62 @@ function registerPreactCard(options) {
     ""
   );
 }
+function useResizeObserver(ref, callback, deps = []) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const fire = () => {
+      if (!element.isConnected) return;
+      callbackRef.current({
+        width: element.offsetWidth,
+        height: element.offsetHeight
+      });
+    };
+    const observer = new ResizeObserver(fire);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const isFirstRun = useRef(true);
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+    const element = ref.current;
+    if (!element || !element.isConnected) return;
+    callbackRef.current({
+      width: element.offsetWidth,
+      height: element.offsetHeight
+    });
+  }, deps);
+}
+function useWidth(ref) {
+  const [width, setWidth] = useState(void 0);
+  useResizeObserver(ref, (size) => {
+    if (size.width === 0) return;
+    setWidth((prev) => prev === size.width ? prev : size.width);
+  });
+  return width;
+}
 export {
   HAProvider,
   css,
   getAllStyles,
-  loadFromCache,
   registerPreactCard,
   registerRawStyles,
-  saveToCache,
   useCachedFetch,
   useCalendarEvents,
   useCallbackStable,
+  useDarkMode,
   useEntity,
   useHass,
-  useMultiCalendarEvents,
+  useHassConfig,
+  useHassValue,
+  useResizeObserver,
   useService,
-  useWeatherForecast
+  useWeatherForecast,
+  useWidth
 };
 //# sourceMappingURL=index.js.map