feat(svg): implement svg handling

Author: plusgut

src/babel-plugin-transform-jsx.cjs

@@ -42,10 +42,13 @@ module.exports = function (babel) {
       },
       JSXElement(path, state) {
         const openingElement = path.get("openingElement");
-        const typeValue = openingElement.node.name.name;
-        const type = t.react.isCompatTag(typeValue)
-          ? t.stringLiteral(typeValue)
-          : t.identifier(typeValue);
+
+        const typeValue = openingElement.node.name;
+        const type = t.isJSXNamespacedName(typeValue)
+          ? t.stringLiteral(`${typeValue.namespace.name}:${typeValue.name.name}`)
+          : t.react.isCompatTag(typeValue.name)
+            ? t.stringLiteral(typeValue.name)
+            : t.identifier(typeValue.name);
         const children = t.react
           .buildChildren(path.node)
           .map((child) => t.arrowFunctionExpression([], child));

src/reconciler/host.ts

@@ -40,9 +40,25 @@ export const hostReconcile: Reconciler = (opt) => {
       // create new element
       const element = untracked(() => {
         const shadowElement = opt.shadowElement as ShadowHostElement;
-        return typeof shadowElement.type === "string"
-          ? document.createElement(shadowElement.type)
-          : new shadowElement.type();
+
+        if (typeof shadowElement.type === "string") {
+          const elementParts = shadowElement.type.split(":");
+          if (elementParts.length === 1) {
+            return document.createElement(shadowElement.type);
+          } else if (elementParts.length === 2) {
+            if (elementParts[0] === "svg") {
+              return document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                elementParts[1],
+              );
+            } else {
+              throw new Error(`Unsupported namespace: ${elementParts[0]}`);
+            }
+          } else {
+            throw new Error("element cant have several namespaces");
+          }
+        }
+        return new shadowElement.type();
       });
 
       opt.shadowCache.node = element;

src/types.ts

@@ -85,9 +85,9 @@ export namespace JSX {
       onplusneweventasync?: (evt: PlusnewAsyncEvent) => void;
     };
   } & {
-    [Tag in keyof SVGElementTagNameMap]: IntrinsicElementAttributes<
-      SVGElementTagNameMap[Tag]
-    > & {
+    [Tag in keyof SVGElementTagNameMap as Tag extends "svg"
+      ? Tag
+      : `svg:${Tag}`]: IntrinsicElementAttributes<SVGElementTagNameMap[Tag]> & {
       children?: ShadowElement;
       onplusnewerror?: (evt: PlusnewErrorEvent) => void;
       onplusneweventasync?: (evt: PlusnewAsyncEvent) => void;

test/svg.test.tsx

@@ -0,0 +1,43 @@
+import { expect } from "@esm-bundle/chai";
+import { createComponent, mount } from "@plusnew/webcomponent";
+
+describe("svg", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it("async event dispatch", async () => {
+    const Component = createComponent(
+      "test-svg",
+      class Component extends HTMLElement {
+        render(this: Component) {
+          return (
+            <svg>
+              <svg:circle />
+            </svg>
+          );
+        }
+      },
+    );
+
+    mount(container, <Component />);
+
+    expect(container.childNodes.length).to.equal(1);
+
+    const component = container.childNodes[0] as HTMLElement;
+    const element = component.shadowRoot?.childNodes[0] as SVGElement;
+
+    expect(element.tagName).to.eql("SVG");
+    expect((element.childNodes[0] as Element).tagName).to.eql("circle");
+    expect((element.childNodes[0] as Element).namespaceURI).to.eql(
+      "http://www.w3.org/2000/svg",
+    );
+  });
+});