chore: add code formatting workflow

.github/workflows/quality.yml

@@ -34,3 +34,28 @@ jobs:
 
       - name: Tests Run With Seeding
         run: pnpm run test:unit --sequence.seed=$CURRENT_TIME
+
+  code-formatting:
+    name: Prettier code formatting
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Code Checkout
+        uses: "actions/checkout@v4"
+
+      - name: Pnpm Installation
+        uses: pnpm/action-setup@v3
+        with:
+            version: 9.x
+
+      - name: NodeJS Initialization
+        uses: actions/setup-node@v4
+        with:
+            node-version: 20
+            cache: 'pnpm'
+
+      - name: Dependencies Installation
+        run: pnpm i
+        shell: bash
+
+      - name: Code Formatting
+        run: pnpm run audit:format

package.json

@@ -8,14 +8,16 @@
     "dev": "vite build --watch --mode development",
     "build": "vite build",
     "preview": "vite preview",
+    "audit:format": "prettier -c src/",
+    "fix:format": "prettier --write src/",
     "test:unit": "vitest",
     "test:coverage": "vitest run --coverage"
   },
   "author": "",
   "license": "MIT",
-  "dependencies": {},
   "devDependencies": {
     "@vitest/coverage-v8": "^2.0.5",
+    "prettier": "^3.3.3",
     "vite": "^5.3.5",
     "vitest": "^2.0.5"
   }

src/deepReplace-helper.js

@@ -9,20 +9,22 @@ export default function deepReplace(variables, templateConfig) {
   if (templateConfig.default) {
     variableArray = variableArray.concat(templateConfig.default);
   }
-  let jsonConfig = templateConfig.card ? JSON.stringify(templateConfig.card) : JSON.stringify(templateConfig.element);
-  variableArray.forEach(variable => {
+  let jsonConfig = templateConfig.card
+    ? JSON.stringify(templateConfig.card)
+    : JSON.stringify(templateConfig.element);
+  variableArray.forEach((variable) => {
     const key = Object.keys(variable)[0];
     const value = Object.values(variable)[0];
-    if (typeof value === 'number' || typeof value === 'boolean') {
-      const rxp2 = new RegExp(`"\\[\\[${key}\\]\\]"`, 'gm');
+    if (typeof value === "number" || typeof value === "boolean") {
+      const rxp2 = new RegExp(`"\\[\\[${key}\\]\\]"`, "gm");
       jsonConfig = jsonConfig.replace(rxp2, value);
     }
-    if (typeof value === 'object') {
-      const rxp2 = new RegExp(`"\\[\\[${key}\\]\\]"`, 'gm');
+    if (typeof value === "object") {
+      const rxp2 = new RegExp(`"\\[\\[${key}\\]\\]"`, "gm");
       const valueString = JSON.stringify(value);
       jsonConfig = jsonConfig.replace(rxp2, valueString);
     } else {
-      const rxp = new RegExp(`\\[\\[${key}\\]\\]`, 'gm');
+      const rxp = new RegExp(`\\[\\[${key}\\]\\]`, "gm");
       jsonConfig = jsonConfig.replace(rxp, value);
     }
   });

src/getLovelace.helper.js

@@ -1,9 +1,9 @@
 export function getLovelaceCast() {
-  let root = document.querySelector('hc-main');
+  let root = document.querySelector("hc-main");
   root = root && root.shadowRoot;
-  root = root && root.querySelector('hc-lovelace');
+  root = root && root.querySelector("hc-lovelace");
   root = root && root.shadowRoot;
-  root = root && root.querySelector('hui-view');
+  root = root && root.querySelector("hui-view");
 
   if (root) {
     const ll = root.lovelace;
@@ -15,15 +15,19 @@ export function getLovelaceCast() {
 }
 
 export function getLovelace() {
-  let root = document.querySelector('home-assistant');
+  let root = document.querySelector("home-assistant");
   root = root && root.shadowRoot;
-  root = root && root.querySelector('home-assistant-main');
+  root = root && root.querySelector("home-assistant-main");
   root = root && root.shadowRoot;
-  root = root && root.querySelector('app-drawer-layout partial-panel-resolver, ha-drawer partial-panel-resolver');
+  root =
+    root &&
+    root.querySelector(
+      "app-drawer-layout partial-panel-resolver, ha-drawer partial-panel-resolver",
+    );
   root = (root && root.shadowRoot) || root;
-  root = root && root.querySelector('ha-panel-lovelace');
+  root = root && root.querySelector("ha-panel-lovelace");
   root = root && root.shadowRoot;
-  root = root && root.querySelector('hui-root');
+  root = root && root.querySelector("hui-root");
 
   if (root) {
     const ll = root.lovelace;

src/streamline-card.js

@@ -74,27 +74,27 @@ export {};
       const lovelace = getLovelace() || getLovelaceCast();
       if (!lovelace.config && !lovelace.config.streamline_templates) {
         throw new Error(
-          "The object streamline_templates doesn't exist in your main lovelace config."
+          "The object streamline_templates doesn't exist in your main lovelace config.",
         );
       }
 
       const templateConfig =
         lovelace.config.streamline_templates[this._originalConfig.template];
       if (!templateConfig) {
         throw new Error(
-          `The template "${this._originalConfig.template}" doesn't exist in streamline_templates`
+          `The template "${this._originalConfig.template}" doesn't exist in streamline_templates`,
         );
       } else if (!(templateConfig.card || templateConfig.element)) {
         throw new Error(
-          "You should define either a card or an element in the template"
+          "You should define either a card or an element in the template",
         );
       } else if (templateConfig.card && templateConfig.element) {
         throw new Error("You can define a card and an element in the template");
       }
 
       this._config = deepReplace(
         this._originalConfig.variables,
-        templateConfig
+        templateConfig,
       );
 
       const hassState = this._hass?.states ?? undefined;
@@ -140,6 +140,6 @@ export {};
   console.info(
     `%c Streamline Card %c ${version}`,
     "background-color:#c2b280;color:#242424;padding:4px 4px 4px 8px;border-radius:20px 0 0 20px;font-family:sans-serif;",
-    "background-color:#5297ff;color:#242424;padding:4px 8px 4px 4px;border-radius:0 20px 20px 0;font-family:sans-serif;"
+    "background-color:#5297ff;color:#242424;padding:4px 8px 4px 4px;border-radius:0 20px 20px 0;font-family:sans-serif;",
   );
 })();