@esphome/compose 0.1.2 → 0.1.3

package/dist/index.js

@@ -174,10 +174,16 @@ function useScript(metadata) {
   return [{ "script.execute": metadata.id }];
 }
 
-// src/runtime.ts
+// src/serialize.ts
 function camelToSnake(key) {
   return key.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase();
 }
+function toYamlKey(type) {
+  if (type.startsWith("lvgl-")) {
+    return type.slice(5).replace(/-/g, "_");
+  }
+  return type;
+}
 function keysToSnakeCase(obj) {
   const out = {};
   for (const [k, v] of Object.entries(obj)) {
@@ -193,6 +199,95 @@ function serializeValue(v) {
   }
   return v;
 }
+function stripUndefined(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== void 0));
+}
+function extractElementProps(el) {
+  const { children, ref, "x:custom": xCustom, ...ownProps } = el.props;
+  const propsWithId = ref != null ? { id: isRef(ref) ? ref.toString() : String(ref), ...ownProps } : ownProps;
+  const allProps = xCustom != null ? { ...propsWithId, ...xCustom } : propsWithId;
+  return { allProps, children };
+}
+function Fragment(props) {
+  const { children } = props;
+  if (children == null) return null;
+  return Array.isArray(children) ? children : [children];
+}
+function flattenFragments(elements) {
+  const out = [];
+  for (const el of elements) {
+    if (el.type === Fragment) {
+      const result = Fragment(el.props);
+      if (result != null) {
+        const nested = Array.isArray(result) ? result : [result];
+        out.push(...flattenFragments(nested));
+      }
+    } else {
+      out.push(el);
+    }
+  }
+  return out;
+}
+
+// src/lvgl.ts
+function isLvglElement(type) {
+  return typeof type === "string" && type.startsWith("lvgl-");
+}
+function resolveLvglChildren(children) {
+  if (!children) return [];
+  const arr = Array.isArray(children) ? children : [children];
+  const flat = flattenFragments(arr);
+  const resolved = [];
+  for (const el of flat) {
+    if (typeof el.type === "function") {
+      const result = el.type(el.props);
+      if (result == null) continue;
+      const rendered = Array.isArray(result) ? result : [result];
+      resolved.push(...resolveLvglChildren(rendered));
+    } else {
+      resolved.push(el);
+    }
+  }
+  return resolved;
+}
+function lvglWidgetToPlain(el) {
+  const { allProps, children } = extractElementProps(el);
+  const widgetChildren = resolveLvglChildren(children);
+  const lvglChildren = widgetChildren.filter((c) => isLvglElement(c.type));
+  const nestedWidgets = lvglChildren.map(lvglWidgetToPlain);
+  const data = { ...allProps };
+  if (nestedWidgets.length > 0) {
+    data.widgets = nestedWidgets;
+  }
+  const yamlKey = toYamlKey(el.type);
+  return { [yamlKey]: stripUndefined(keysToSnakeCase(data)) };
+}
+function buildLvglSection(el) {
+  const { allProps, children } = extractElementProps(el);
+  const resolved = resolveLvglChildren(children);
+  const pages = [];
+  const topWidgets = [];
+  for (const child of resolved) {
+    if (child.type === "lvgl-page") {
+      const { allProps: pageProps, children: pageChildren } = extractElementProps(child);
+      const pageResolved = resolveLvglChildren(pageChildren);
+      const pageWidgets = pageResolved.filter((c) => isLvglElement(c.type)).map(lvglWidgetToPlain);
+      const pageData = { ...pageProps };
+      if (pageWidgets.length > 0) {
+        pageData.widgets = pageWidgets;
+      }
+      pages.push(stripUndefined(keysToSnakeCase(pageData)));
+    } else if (isLvglElement(child.type)) {
+      topWidgets.push(lvglWidgetToPlain(child));
+    }
+  }
+  const data = { ...allProps };
+  if (pages.length > 0) data.pages = pages;
+  if (topWidgets.length > 0) data.widgets = topWidgets;
+  return stripUndefined(keysToSnakeCase(data));
+}
+
+// src/runtime.ts
 function createElement(type, props, ...children) {
   const flatChildren = children.flat().filter((c) => c != null);
   return {
@@ -203,11 +298,6 @@ function createElement(type, props, ...children) {
     }
   };
 }
-function Fragment(props) {
-  const { children } = props;
-  if (children == null) return null;
-  return Array.isArray(children) ? children : [children];
-}
 function toPlainObject(el) {
   if (el == null) return void 0;
   if (Array.isArray(el)) {
@@ -231,11 +321,18 @@ function toPlainObject(el) {
       ...childSections
     };
   }
+  if (el.type === "lvgl") {
+    const lvglData = buildLvglSection(el);
+    return { lvgl: Object.keys(lvglData).length > 0 ? lvglData : null };
+  }
+  if (isLvglElement(el.type)) {
+    return lvglWidgetToPlain(el);
+  }
   const childData = buildChildData(
     children
   );
   const data = stripUndefined(keysToSnakeCase({ ...allProps, ...childData }));
-  return { [el.type]: Object.keys(data).length > 0 ? data : null };
+  return { [toYamlKey(el.type)]: Object.keys(data).length > 0 ? data : null };
 }
 function childrenToTopLevelSections(children) {
   if (!children) return {};
@@ -261,6 +358,12 @@ function childrenToTopLevelSections(children) {
   return out;
 }
 function mergeSection(sections, child) {
+  if (child.type === "lvgl") {
+    const lvglData = buildLvglSection(child);
+    if (!sections["lvgl"]) sections["lvgl"] = [];
+    sections["lvgl"].push(Object.keys(lvglData).length > 0 ? lvglData : null);
+    return;
+  }
   const { children: grandchildren, ref, "x:custom": xCustom, ...ownProps } = child.props;
   const propsWithId = ref != null ? { id: isRef(ref) ? ref.toString() : String(ref), ...ownProps } : ownProps;
   const allProps = xCustom != null ? { ...propsWithId, ...xCustom } : propsWithId;
@@ -268,8 +371,9 @@ function mergeSection(sections, child) {
     grandchildren
   );
   const data = stripUndefined(keysToSnakeCase({ ...allProps, ...childData }));
-  if (!sections[child.type]) sections[child.type] = [];
-  sections[child.type].push(Object.keys(data).length > 0 ? data : null);
+  const yamlKey = toYamlKey(child.type);
+  if (!sections[yamlKey]) sections[yamlKey] = [];
+  sections[yamlKey].push(Object.keys(data).length > 0 ? data : null);
 }
 function buildChildData(children) {
   if (!children) return {};
@@ -283,24 +387,6 @@ function buildChildData(children) {
   }
   return out;
 }
-function flattenFragments(elements) {
-  const out = [];
-  for (const el of elements) {
-    if (el.type === Fragment) {
-      const result = Fragment(el.props);
-      if (result != null) {
-        const nested = Array.isArray(result) ? result : [result];
-        out.push(...flattenFragments(nested));
-      }
-    } else {
-      out.push(el);
-    }
-  }
-  return out;
-}
-function stripUndefined(obj) {
-  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== void 0));
-}
 function render(element) {
   return toPlainObject(Array.isArray(element) ? element : element);
 }

package/dist/index.mjs

@@ -114,10 +114,16 @@ function useScript(metadata) {
   return [{ "script.execute": metadata.id }];
 }
 
-// src/runtime.ts
+// src/serialize.ts
 function camelToSnake(key) {
   return key.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase();
 }
+function toYamlKey(type) {
+  if (type.startsWith("lvgl-")) {
+    return type.slice(5).replace(/-/g, "_");
+  }
+  return type;
+}
 function keysToSnakeCase(obj) {
   const out = {};
   for (const [k, v] of Object.entries(obj)) {
@@ -133,6 +139,95 @@ function serializeValue(v) {
   }
   return v;
 }
+function stripUndefined(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== void 0));
+}
+function extractElementProps(el) {
+  const { children, ref, "x:custom": xCustom, ...ownProps } = el.props;
+  const propsWithId = ref != null ? { id: isRef(ref) ? ref.toString() : String(ref), ...ownProps } : ownProps;
+  const allProps = xCustom != null ? { ...propsWithId, ...xCustom } : propsWithId;
+  return { allProps, children };
+}
+function Fragment(props) {
+  const { children } = props;
+  if (children == null) return null;
+  return Array.isArray(children) ? children : [children];
+}
+function flattenFragments(elements) {
+  const out = [];
+  for (const el of elements) {
+    if (el.type === Fragment) {
+      const result = Fragment(el.props);
+      if (result != null) {
+        const nested = Array.isArray(result) ? result : [result];
+        out.push(...flattenFragments(nested));
+      }
+    } else {
+      out.push(el);
+    }
+  }
+  return out;
+}
+
+// src/lvgl.ts
+function isLvglElement(type) {
+  return typeof type === "string" && type.startsWith("lvgl-");
+}
+function resolveLvglChildren(children) {
+  if (!children) return [];
+  const arr = Array.isArray(children) ? children : [children];
+  const flat = flattenFragments(arr);
+  const resolved = [];
+  for (const el of flat) {
+    if (typeof el.type === "function") {
+      const result = el.type(el.props);
+      if (result == null) continue;
+      const rendered = Array.isArray(result) ? result : [result];
+      resolved.push(...resolveLvglChildren(rendered));
+    } else {
+      resolved.push(el);
+    }
+  }
+  return resolved;
+}
+function lvglWidgetToPlain(el) {
+  const { allProps, children } = extractElementProps(el);
+  const widgetChildren = resolveLvglChildren(children);
+  const lvglChildren = widgetChildren.filter((c) => isLvglElement(c.type));
+  const nestedWidgets = lvglChildren.map(lvglWidgetToPlain);
+  const data = { ...allProps };
+  if (nestedWidgets.length > 0) {
+    data.widgets = nestedWidgets;
+  }
+  const yamlKey = toYamlKey(el.type);
+  return { [yamlKey]: stripUndefined(keysToSnakeCase(data)) };
+}
+function buildLvglSection(el) {
+  const { allProps, children } = extractElementProps(el);
+  const resolved = resolveLvglChildren(children);
+  const pages = [];
+  const topWidgets = [];
+  for (const child of resolved) {
+    if (child.type === "lvgl-page") {
+      const { allProps: pageProps, children: pageChildren } = extractElementProps(child);
+      const pageResolved = resolveLvglChildren(pageChildren);
+      const pageWidgets = pageResolved.filter((c) => isLvglElement(c.type)).map(lvglWidgetToPlain);
+      const pageData = { ...pageProps };
+      if (pageWidgets.length > 0) {
+        pageData.widgets = pageWidgets;
+      }
+      pages.push(stripUndefined(keysToSnakeCase(pageData)));
+    } else if (isLvglElement(child.type)) {
+      topWidgets.push(lvglWidgetToPlain(child));
+    }
+  }
+  const data = { ...allProps };
+  if (pages.length > 0) data.pages = pages;
+  if (topWidgets.length > 0) data.widgets = topWidgets;
+  return stripUndefined(keysToSnakeCase(data));
+}
+
+// src/runtime.ts
 function createElement(type, props, ...children) {
   const flatChildren = children.flat().filter((c) => c != null);
   return {
@@ -143,11 +238,6 @@ function createElement(type, props, ...children) {
     }
   };
 }
-function Fragment(props) {
-  const { children } = props;
-  if (children == null) return null;
-  return Array.isArray(children) ? children : [children];
-}
 function toPlainObject(el) {
   if (el == null) return void 0;
   if (Array.isArray(el)) {
@@ -171,11 +261,18 @@ function toPlainObject(el) {
       ...childSections
     };
   }
+  if (el.type === "lvgl") {
+    const lvglData = buildLvglSection(el);
+    return { lvgl: Object.keys(lvglData).length > 0 ? lvglData : null };
+  }
+  if (isLvglElement(el.type)) {
+    return lvglWidgetToPlain(el);
+  }
   const childData = buildChildData(
     children
   );
   const data = stripUndefined(keysToSnakeCase({ ...allProps, ...childData }));
-  return { [el.type]: Object.keys(data).length > 0 ? data : null };
+  return { [toYamlKey(el.type)]: Object.keys(data).length > 0 ? data : null };
 }
 function childrenToTopLevelSections(children) {
   if (!children) return {};
@@ -201,6 +298,12 @@ function childrenToTopLevelSections(children) {
   return out;
 }
 function mergeSection(sections, child) {
+  if (child.type === "lvgl") {
+    const lvglData = buildLvglSection(child);
+    if (!sections["lvgl"]) sections["lvgl"] = [];
+    sections["lvgl"].push(Object.keys(lvglData).length > 0 ? lvglData : null);
+    return;
+  }
   const { children: grandchildren, ref, "x:custom": xCustom, ...ownProps } = child.props;
   const propsWithId = ref != null ? { id: isRef(ref) ? ref.toString() : String(ref), ...ownProps } : ownProps;
   const allProps = xCustom != null ? { ...propsWithId, ...xCustom } : propsWithId;
@@ -208,8 +311,9 @@ function mergeSection(sections, child) {
     grandchildren
   );
   const data = stripUndefined(keysToSnakeCase({ ...allProps, ...childData }));
-  if (!sections[child.type]) sections[child.type] = [];
-  sections[child.type].push(Object.keys(data).length > 0 ? data : null);
+  const yamlKey = toYamlKey(child.type);
+  if (!sections[yamlKey]) sections[yamlKey] = [];
+  sections[yamlKey].push(Object.keys(data).length > 0 ? data : null);
 }
 function buildChildData(children) {
   if (!children) return {};
@@ -223,24 +327,6 @@ function buildChildData(children) {
   }
   return out;
 }
-function flattenFragments(elements) {
-  const out = [];
-  for (const el of elements) {
-    if (el.type === Fragment) {
-      const result = Fragment(el.props);
-      if (result != null) {
-        const nested = Array.isArray(result) ? result : [result];
-        out.push(...flattenFragments(nested));
-      }
-    } else {
-      out.push(el);
-    }
-  }
-  return out;
-}
-function stripUndefined(obj) {
-  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== void 0));
-}
 function render(element) {
   return toPlainObject(Array.isArray(element) ? element : element);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esphome/compose",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "ESPHome Compose SDK - TypeScript framework for generating ESPHome YAML",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -50,7 +50,6 @@
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --tsconfig tsconfig.json",
     "clean": "rimraf dist",
-    "codegen": "tsx tools/codegen/generate.ts",
     "lint": "eslint src",
     "test": "echo \"No tests yet\""
   }