Astro: function to Element

index.astro

---
/**
 * @param moduleId Path to component
 */
function function2AstroComponent<Args extends any>(
  callback: (...arg: Args[]) => any
): (...arg: Args[]) => any & {
  isAstroComponentFactory: true;
  propagation: "none";
  name: string;
  moduleId: string;
} {
  const fn = (...args: Args[]) => {
    return callback(...args);
  };
  Object.defineProperty(fn, "name", { value: callback.name, writable: false });

  fn.isAstroComponentFactory = true;
  fn.moduleId = callback.name + ".astro";
  fn.propagation = "none";
  return fn;
}
const TR = function2AstroComponent((_astroMetadata, props: any, childRenderer: any, ...extra) => {
  const children = childRenderer.default();
  // Children pieces directly to html string
  const res = String.raw({ raw: children.htmlParts }, ...children.expressions);

  // Log everything to better break down what information we can use.
  console.log(props, children, res, ...extra);
  
  // Astro can handle the child object directly so we just Astro it. 
  return children;
});
---

<TR x="y">
  <br>
  my children
  <br>
  {true ? "hi" : "hello"}
  <br>
</TR>
<!-- 
 ! 
 ! Renders:
 !   ```html
 !   <br>
 !   my children
 !   <br> hi<br>
 !   ```
 !
-->