useTemplate and other small fixes

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 4.0.2
+## @hakit/components
+- BUGFIX - All cards using `modalProps` previously will spread the values first, and then provide internal defaults, making it impossible to overwrite values for the modal in some cases, additionally the MediaPlayerCard modal props were never spread through to the modal [discussion](https://github.com/shannonhochkins/ha-component-kit/discussions/159)
+
+## @hakit/core
+- NEW - useTemplate - a new hook to subscribe to changes for a custom template, processed exactly the same way that home assistant does when providing templates to yaml code
+- NEW - LOCALES - locales updated based on home assistant updates. [issue](https://github.com/shannonhochkins/ha-component-kit/issues/158)
+
 # 4.0.0
 ## @hakit/components
 - NEW - [AlarmCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-alarmcard--docs)  - A new card to interact with alarm entities, this has a custom popup with keypad control and automate `features` added to the code when a `defaultCode` is present. [issue](https://github.com/shannonhochkins/ha-component-kit/issues/148)

hakit/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Hakit",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "slug": "hakit",
   "init": false,
   "ingress": true,

hakit/server/routes/run-application.ts

@@ -105,13 +105,13 @@ export async function runApplication(app: Express) {
     try {
       if (!nextJsBuilt) {
         const installDependencies = `cd ${join(APP_DIRECTORY, 'app')} && npm ci`;
-        // const buildNextApp = `cd ${join(APP_DIRECTORY, 'app')} && SKIP_LINTING=true SKIP_TYPE_CHECKING=true npm run build`;
+        const buildNextApp = `cd ${join(APP_DIRECTORY, 'app')} && SKIP_LINTING=true SKIP_TYPE_CHECKING=true npm run build`;
 
         try {
           console.log('Installing dependencies');
           execSync(installDependencies, { stdio: 'inherit' });
-          // console.log('Building Next.js application');
-          // execSync(buildNextApp, { stdio: 'inherit' });
+          console.log('Building Next.js application');
+          execSync(buildNextApp, { stdio: 'inherit' });
           console.log('Next.js application built successfully');
         } catch (error) {
           console.error('Error building Next.js application:', translateError(error));

hass-connect-fake/index.tsx

@@ -104,6 +104,8 @@ class MockWebSocket {
   close() {}
 }
 
+let renderTemplatePrevious = 'on';
+
 class MockConnection extends Connection {
   private _mockListeners: { [event: string]: ((data: any) => void)[] };
   private _mockResponses: {
@@ -174,6 +176,16 @@ class MockConnection extends Connection {
       if (params.forecast_type === 'hourly') {
         callback(hourlyForecast as Result);
       }
+    } else if (params && params.type === 'render_template') {
+      if (renderTemplatePrevious === 'on') {
+        callback({
+          result: 'The entity is on!!'
+        } as Result);
+      } else {
+        callback({
+          result: 'The entity is not on!!'
+        } as Result);
+      }
     } else {
       callback(mockHistory as Result);
     }
@@ -237,6 +249,10 @@ const useStore = create<Store>((set) => ({
           ...newEntities[entityId],
         };
       });
+      // used to mock out the render_template service
+      if (state.entities['light.fake_light_1']) {
+        renderTemplatePrevious = state.entities['light.fake_light_1'].state;
+      }
       if (!state.ready) {
         return {
           ready: true,

hass-connect-fake/mocks/mockConnection.tsx

@@ -40,7 +40,7 @@ export const mocked = {
   },
   subscribeEntities: jest.fn().mockImplementation((_: null, subScribeFn: (entities: HassEntities) => void) => {
     subScribeFn(ENTITIES);
-  })
+  }),
 }
 
 jest.mock('home-assistant-js-websocket', () => mocked);

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hakit/components",
   "type": "module",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "private": false,
   "keywords": [
     "react",
@@ -69,7 +69,7 @@
     "@emotion/react": ">=10.x",
     "@emotion/styled": ">=10.x",
     "@fullcalendar/react": ">=6.x.x",
-    "@hakit/core": "^4.0.1",
+    "@hakit/core": "^4.0.2",
     "@use-gesture/react": ">=10.x",
     "autolinker": ">=4.x",
     "framer-motion": ">=10.x",

packages/components/src/Cards/ClimateCard/index.tsx

@@ -143,11 +143,11 @@ function _ClimateCard({
         serviceData={serviceData}
         layoutType={layoutType}
         modalProps={{
-          ...modalProps,
           hvacModes: havacModesToUse,
           hideCurrentTemperature,
           hideHvacModes,
           hvacModeLabels,
+          ...modalProps,
         }}
         onClick={() => {
           if (isUnavailable || disabled || typeof onClick !== "function") return;

packages/components/src/Cards/FamilyCard/PersonCard/index.tsx

@@ -166,8 +166,8 @@ function _PersonCard({
       ${cssStyles ?? ""}
     `}
       modalProps={{
-        ...modalProps,
         stateTitle: stateText,
+        ...modalProps,
       }}
       {...rest}
     >

packages/components/src/Cards/MediaPlayerCard/index.tsx

@@ -156,6 +156,7 @@ function _MediaPlayerCard({
   className,
   cssStyles,
   key,
+  modalProps,
   ...rest
 }: MediaPlayerCardProps) {
   const entity = useEntity(_entity);
@@ -307,6 +308,7 @@ function _MediaPlayerCard({
           groupedEntities,
           allEntityIds,
           onClose: () => setIsGroupingModalOpen(false),
+          ...modalProps,
         }}
         entity={_entity}
         // @ts-expect-error - don't know the entity name, so we can't know the service type

packages/components/src/Cards/VacuumCard/index.tsx

@@ -68,14 +68,14 @@ function _VacuumCard({
     <StyledVacuumCard
       className={`${className ?? ""} vacuum-card`}
       modalProps={{
-        ...modalProps,
         stateTitle: titleValue,
         locatingNode,
         hideCurrentBatteryLevel,
         hideState,
         hideUpdated,
         hideToolbar,
         shortcuts,
+        ...modalProps,
       }}
       entity={_entity}
       // @ts-expect-error - don't know the entity name, so we can't know the service type

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hakit/core",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "private": false,
   "type": "module",
   "keywords": [

packages/core/scripts/sync-locales/index.ts

@@ -72,11 +72,15 @@ async function scrapeHomeAssistant(): Promise<[fileName: string, contents: strin
       // Navigate to the page
       await page.goto('http://homeassistant.local:8123/lovelace/home');
 
-      // Wait for some time to allow all requests to be intercepted
-      await page.waitForNetworkIdle({
-        idleTime: 5000,
-        timeout: 5000,
-      }); // Adjust the timeout as necessary
+      try {
+        // Wait for some time to allow all requests to be intercepted
+        await page.waitForNetworkIdle({
+          idleTime: 5000,
+          timeout: 5000,
+        }); // Adjust the timeout as necessary
+      } catch (e) {
+        // ignore
+      }
 
       await browser.close();
     })();

packages/core/src/hooks/index.ts

@@ -24,5 +24,6 @@ export { default as locales } from "./useLocale/locales";
 export { subscribeAreaRegistry, type AreaRegistryEntry } from "./useAreas/subscribe/areas";
 export { subscribeEntityRegistry, type EntityRegistryEntry } from "./useAreas/subscribe/entities";
 export { subscribeDeviceRegistry, type DeviceRegistryEntry } from "./useAreas/subscribe/devices";
+export { useTemplate, type TemplateParams } from "./useTemplate";
 export { useCamera, type CameraEntityExtended, type UseCameraOptions } from "./useCamera";
 export * from "./useCamera/constants";