[experiment] Tres renderer

package.json

@@ -74,8 +74,12 @@
     "@playwright/test": "^1.40.1",
     "@types/babel__core": "^7.20.5",
     "@types/qunit": "^2.19.9",
+    "@types/three": "^0.164.0",
     "autoprefixer": "^10.4.16",
     "backburner.js": "^2.8.0",
+    "express": "^4.18.2",
+    "glint-environment-gxt": "file:./glint-environment-gxt",
+    "happy-dom": "^13.0.6",
     "nyc": "^15.1.0",
     "postcss": "^8.4.33",
     "prettier": "^3.1.1",
@@ -93,16 +97,14 @@
     "vite-plugin-circular-dependency": "^0.2.1",
     "vite-plugin-dts": "^3.7.0",
     "vitest": "^1.1.1",
-    "zx": "^7.2.3",
-    "express": "^4.18.2",
-    "happy-dom": "^13.0.6",
-    "glint-environment-gxt": "file:./glint-environment-gxt"
+    "zx": "^7.2.3"
   },
   "dependencies": {
     "@babel/core": "^7.23.6",
-    "decorator-transforms": "1.1.0",
     "@babel/preset-typescript": "^7.23.3",
     "@glimmer/syntax": "^0.87.1",
-    "content-tag": "^1.2.2"
+    "content-tag": "^1.2.2",
+    "decorator-transforms": "1.1.0",
+    "three": "^0.164.1"
   }
 }

plugins/utils.ts

@@ -344,6 +344,16 @@ function hasStableChildsForControlNode(
   return hasStableChild;
 }
 
+export function isComponentNode(node: HBSNode) {
+  if (node.tag && node.tag.toLowerCase() !== node.tag) {
+    return true;
+  }
+  if (node.tag.startsWith('Tres')) {
+    return true;
+  }
+  return false;
+}
+
 export function serializeNode(
   node: string | null | HBSNode | HBSControlExpression | ComplexJSType,
   ctxName = 'this',
@@ -439,9 +449,7 @@ export function serializeNode(
       return `${SYMBOLS.IF}(${arrayName}, ${trueBranch}, ${falseBranch}, ${ctxName})`;
     }
   } else if (
-    typeof node === 'object' &&
-    node.tag &&
-    node.tag.toLowerCase() !== node.tag
+    typeof node === 'object' && isComponentNode(node)
   ) {
     const hasSplatAttrs = node.attributes.find((attr) => {
       return attr[0] === '...attributes';

src/utils/component.ts

@@ -19,8 +19,6 @@ import {
 } from './shared';
 import { addChild, getRoot, setRoot } from './dom';
 
-const FRAGMENT_TYPE = 11; // Node.DOCUMENT_FRAGMENT_NODE
-
 export type ComponentRenderTarget =
   | HTMLElement
   | DocumentFragment
@@ -163,31 +161,7 @@ export class Component<T extends Props = any>
   template!: ComponentReturnType;
 }
 
-function destroyNode(node: Node) {
-  if (IS_DEV_MODE) {
-    if (node === undefined) {
-      console.warn(`Trying to destroy undefined`);
-      return;
-    } else if (node.nodeType === FRAGMENT_TYPE) {
-      return;
-    }
-    const parent = node.parentNode;
-    if (parent !== null) {
-      parent.removeChild(node);
-    } else {
-      if (import.meta.env.SSR) {
-        console.warn(`Node is not in DOM`, node.nodeType, node.nodeName);
-        return;
-      }
-      throw new Error(`Node is not in DOM`);
-    }
-  } else {
-    if (node.nodeType === FRAGMENT_TYPE) {
-      return;
-    }
-    node.parentNode!.removeChild(node);
-  }
-}
+
 
 export function destroyElementSync(
   component:
@@ -217,14 +191,14 @@ export function destroyElementSync(
         );
       }
     } else {
-      destroyNode(component);
+      api.destroy(component);
     }
   }
 }
 
 function internalDestroyNode(el: Node | ComponentReturnType) {
   if ('nodeType' in el) {
-    destroyNode(el);
+    api.destroy(el);
   } else {
     destroyNodes(el[$nodes]);
   }
@@ -260,7 +234,9 @@ export async function destroyElement(
       if (component.ctx) {
         const destructors: Array<Promise<void>> = [];
         runDestructors(component.ctx, destructors);
-        await Promise.all(destructors);
+        if (destructors.length) {
+          await Promise.all(destructors);
+        }
       }
       try {
         destroyNodes(component[$nodes]);
@@ -271,7 +247,7 @@ export async function destroyElement(
         );
       }
     } else {
-      await destroyNode(component);
+      api.destroy(component);
     }
   }
 }

src/utils/control-flow/if.ts

@@ -79,7 +79,7 @@ export function ifCondition(
   associateDestroyable(ctx, [
     () => {
       if (placeholder.isConnected) {
-        placeholder.parentNode!.removeChild(placeholder);
+        api.destroy(placeholder);
       }
     },
     runExistingDestructors,
@@ -93,7 +93,7 @@ export function ifCondition(
           const newPlaceholder = IS_DEV_MODE
             ? api.comment('if-error-placeholder')
             : api.comment('');
-          api.insert(placeholder.parentNode!, newPlaceholder, placeholder);
+          api.insert(api.parentNode(placeholder)!, newPlaceholder, placeholder);
           runExistingDestructors().then(async () => {
             removeDestructor(ctx, runExistingDestructors);
             if (!newPlaceholder.isConnected) {
@@ -137,7 +137,7 @@ export function ifCondition(
           $DEBUG_REACTIVE_CONTEXTS.pop();
         }
         renderElement(
-          placeholder.parentNode || target,
+          api.parentNode(placeholder) || target,
           prevComponent,
           placeholder,
         );
@@ -184,7 +184,7 @@ export function ifCondition(
           $DEBUG_REACTIVE_CONTEXTS.pop();
         }
         renderElement(
-          placeholder.parentNode || target,
+          api.parentNode(placeholder) || target,
           prevComponent,
           placeholder,
         );

src/utils/control-flow/list.ts

@@ -221,11 +221,13 @@ export class BasicListComponent<T extends { id: number }> {
       ? this.getTargetNode(amountOfExistingKeys)
       : bottomMarker;
     let seenKeys = 0;
+    let targetParent = api.parentNode(targetNode)!;
     items.forEach((item, index) => {
       // @todo - fix here
       if (seenKeys === amountOfExistingKeys && targetNode === bottomMarker) {
         // optimization for appending items case
         targetNode = this.getTargetNode(0);
+        targetParent = api.parentNode(targetNode)!;
       }
       const key = keyForItem(item);
       const maybeRow = keyMap.get(key);
@@ -249,7 +251,7 @@ export class BasicListComponent<T extends { id: number }> {
         keyMap.set(key, row);
         indexMap.set(key, index);
         row.forEach((item) => {
-          renderElement(targetNode.parentNode!, item, targetNode);
+          renderElement(targetParent, item, targetNode);
         });
       } else {
         seenKeys++;
@@ -265,23 +267,24 @@ export class BasicListComponent<T extends { id: number }> {
     rowsToMove.forEach(([row, index]) => {
       const nextItem = items[index + 1];
       if (nextItem === undefined) {
-        renderElement(bottomMarker.parentNode!, row, bottomMarker);
+        renderElement(api.parentNode(bottomMarker)!, row, bottomMarker);
       } else {
         const nextKey = keyForItem(nextItem);
         const nextRow = keyMap.get(nextKey)!;
         const firstNode = getFirstNode(nextRow);
         if (nextRow !== undefined && firstNode !== undefined) {
-          const parent = firstNode.parentNode!;
+          const parent = api.parentNode(firstNode)!;
           renderElement(parent, row, firstNode);
         }
       }
     });
 
     if (targetNode !== bottomMarker) {
-      const parent = targetNode.parentNode!;
-      const trueParent = bottomMarker.parentNode!;
+      const parent = api.parentNode(targetNode)!;
+      const trueParent = api.parentNode(bottomMarker)!;
       // parent may not exist in rehydration
       if (!IN_SSR_ENV) {
+        // TODO: move to dom API
         parent && parent.removeChild(targetNode);
       }
       if (trueParent !== parent) {

src/utils/dom-api.ts

@@ -1,75 +1 @@
-import { getNodeCounter, incrementNodeCounter } from '@/utils/dom';
-import { IN_SSR_ENV, noop } from './shared';
-
-let $doc =
-  typeof document !== 'undefined'
-    ? document
-    : (undefined as unknown as Document);
-export function setDocument(newDocument: Document) {
-  $doc = newDocument;
-}
-export function getDocument() {
-  return $doc;
-}
-export const api = {
-  addEventListener(node: Node, eventName: string, fn: EventListener) {
-    if (import.meta.env.SSR) {
-      return noop;
-    }
-    node.addEventListener(eventName, fn);
-    if (RUN_EVENT_DESTRUCTORS_FOR_SCOPED_NODES) {
-      return () => {
-        node.removeEventListener(eventName, fn);
-      };
-    } else {
-      return noop;
-    }
-  },
-  attr(element: HTMLElement, name: string, value: string | null) {
-    element.setAttribute(name, value === null ? '' : value);
-  },
-  prop(element: HTMLElement, name: string, value: any) {
-    // @ts-ignore
-    element[name] = value;
-    return value;
-  },
-  comment(text = '') {
-    if (IN_SSR_ENV) {
-      incrementNodeCounter();
-      return $doc.createComment(`${text} $[${getNodeCounter()}]`);
-    } else {
-      if (IS_DEV_MODE) {
-        return $doc.createComment(text);
-      } else {
-        return $doc.createComment('');
-      }
-    }
-  },
-  text(text: string | number = '') {
-    return $doc.createTextNode(text as string);
-  },
-  textContent(node: Node, text: string) {
-    node.textContent = text;
-  },
-  fragment() {
-    return $doc.createDocumentFragment();
-  },
-  element(tagName = ''): HTMLElement {
-    return $doc.createElement(tagName);
-  },
-  append(
-    parent: HTMLElement | Node,
-    child: HTMLElement | Node,
-    // @ts-ignore
-    targetIndex: number = 0,
-  ) {
-    this.insert(parent, child, null);
-  },
-  insert(
-    parent: HTMLElement | Node,
-    child: HTMLElement | Node,
-    anchor?: HTMLElement | Node | null,
-  ) {
-    parent.insertBefore(child, anchor || null);
-  },
-};
+export { api, getDocument, setDocument } from './renderers/dom/dom-api';