feat(web-components): support foreignObject inside an SVG

Author: aralroca

src/utils/brisa-element/index.test.ts

@@ -1103,10 +1103,33 @@ describe("utils", () => {
       );
     });
 
-    it.todo(
-      "should SVG work with foreingObject setting correctly the namespace outside the foreingObject node",
-      () => {},
-    );
+    it("should SVG work with foreingObject setting correctly the namespace outside the foreingObject node", () => {
+      function SVG({}, { h }: any) {
+        return h("svg", { width: "12cm", height: "12cm" }, [
+          "foreignObject",
+          { width: "100%", height: "100%" },
+          ["div", { xmlns: "http://www.w3.org/1999/xhtml" }, "test"],
+        ]);
+      }
+
+      customElements.define("test-svg", brisaElement(SVG));
+      document.body.innerHTML = "<test-svg />";
+
+      const testSVG = document.querySelector("test-svg") as HTMLElement;
+      const svg = testSVG?.shadowRoot?.querySelector("svg") as SVGElement;
+      const foreignObject = testSVG?.shadowRoot?.querySelector(
+        "foreignObject",
+      ) as SVGElement;
+      const div = testSVG?.shadowRoot?.querySelector("div") as HTMLElement;
+
+      expect(svg.namespaceURI).toBe("http://www.w3.org/2000/svg");
+      expect(foreignObject.namespaceURI).toBe("http://www.w3.org/2000/svg");
+      expect(div.namespaceURI).toBe("http://www.w3.org/1999/xhtml");
+
+      expect(testSVG?.shadowRoot?.innerHTML).toBe(
+        '<svg width="12cm" height="12cm"><foreignobject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">test</div></foreignobject></svg>',
+      );
+    });
 
     it.todo(
       "should reactively update the DOM after adding a new property to the web-component",

src/utils/brisa-element/index.ts

@@ -26,7 +26,8 @@ const createElement = (
   parent?: HTMLElement | DocumentFragment,
 ) => {
   return tagName === "svg" ||
-    (parent as HTMLElement)?.namespaceURI === SVG_NAMESPACE
+    ((parent as HTMLElement)?.namespaceURI === SVG_NAMESPACE &&
+      lowercase((parent as HTMLElement).tagName) !== "foreignobject")
     ? document.createElementNS(SVG_NAMESPACE, tagName)
     : document.createElement(tagName);
 };

src/utils/log-table/index.test.ts

@@ -1,15 +1,17 @@
 import { describe, it, expect, mock, afterEach } from "bun:test";
 import logTable from ".";
+import getConstants from "../../constants";
 
 const originalConsoleLog = console.log;
+const { LOG_PREFIX } = getConstants();
 
 describe("utils", () => {
   afterEach(() => {
     console.log = originalConsoleLog;
   });
   describe("logTable", () => {
     it("should log a table", () => {
-      const info = "[ \u001B[34minfo\u001B[0m ]  ";
+      const info = LOG_PREFIX.INFO;
       const data = [
         { name: "John", age: "23" },
         { name: "Jane", age: "42" },