fix(elements): accept <glyph-camera> alias as scene's parent camera (#4)

Author: apresmoi

packages/glyphcss/src/elements/GlyphSceneElement.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { GlyphSceneElement } from "./GlyphSceneElement";
 import { GlyphPerspectiveCameraElement } from "./GlyphPerspectiveCameraElement";
+import { GlyphOrthographicCameraElement } from "./GlyphOrthographicCameraElement";
 
 // Register elements if not already registered.
 if (!customElements.get("glyph-scene")) {
@@ -9,6 +10,13 @@ if (!customElements.get("glyph-scene")) {
 if (!customElements.get("glyph-perspective-camera")) {
   customElements.define("glyph-perspective-camera", GlyphPerspectiveCameraElement);
 }
+if (!customElements.get("glyph-orthographic-camera")) {
+  customElements.define("glyph-orthographic-camera", GlyphOrthographicCameraElement);
+}
+if (!customElements.get("glyph-camera")) {
+  class GlyphCameraElement extends GlyphOrthographicCameraElement {}
+  customElements.define("glyph-camera", GlyphCameraElement);
+}
 
 describe("GlyphSceneElement", () => {
   let camEl: GlyphPerspectiveCameraElement;
@@ -139,8 +147,17 @@ describe("GlyphSceneElement", () => {
     expect(() => {
       document.body.appendChild(orphanScene);
     }).toThrow(
-      "glyphcss: <glyph-scene> must be placed inside a <glyph-perspective-camera> or <glyph-orthographic-camera>.",
+      "glyphcss: <glyph-scene> must be placed inside a <glyph-camera>, <glyph-perspective-camera>, or <glyph-orthographic-camera>.",
     );
     orphanScene.remove();
   });
+
+  it("mounts inside the <glyph-camera> alias (orthographic alias)", () => {
+    const aliasCam = document.createElement("glyph-camera");
+    const aliasHost = document.createElement("glyph-scene") as GlyphSceneElement;
+    aliasCam.appendChild(aliasHost);
+    expect(() => { document.body.appendChild(aliasCam); }).not.toThrow();
+    expect(aliasHost.getScene()).not.toBeNull();
+    aliasCam.remove();
+  });
 });

packages/glyphcss/src/elements/GlyphSceneElement.ts

@@ -91,7 +91,11 @@ export class GlyphSceneElement extends ELEMENT_BASE {
     let el: HTMLElement | null = this.parentElement;
     while (el) {
       const tag = el.tagName.toLowerCase();
-      if (tag === "glyph-perspective-camera" || tag === "glyph-orthographic-camera") {
+      if (
+        tag === "glyph-perspective-camera" ||
+        tag === "glyph-orthographic-camera" ||
+        tag === "glyph-camera"
+      ) {
         return el as HTMLElement & { getCamera?: () => unknown };
       }
       el = el.parentElement;
@@ -114,7 +118,7 @@ export class GlyphSceneElement extends ELEMENT_BASE {
     const cameraAncestor = this._findCameraAncestor();
     if (!cameraAncestor) {
       throw new Error(
-        "glyphcss: <glyph-scene> must be placed inside a <glyph-perspective-camera> or <glyph-orthographic-camera>.",
+        "glyphcss: <glyph-scene> must be placed inside a <glyph-camera>, <glyph-perspective-camera>, or <glyph-orthographic-camera>.",
       );
     }
     const cam = typeof cameraAncestor.getCamera === "function"