[feat]: nested rendering contexts

src/utils/component.ts

@@ -9,7 +9,7 @@ import type {
   Invoke,
   ComponentReturn,
 } from '@glint/template/-private/integration';
-import { api } from '@/utils/dom-api';
+import { api, RENDERING_CONTEXT } from '@/utils/dom-api';
 import {
   isFn,
   $template,
@@ -24,6 +24,7 @@ import {
   PARENT_GRAPH,
 } from './shared';
 import { addChild, getRoot, setRoot } from './dom';
+import { provideContext } from './context';
 
 export type ComponentRenderTarget =
   | HTMLElement
@@ -109,6 +110,9 @@ export function renderComponent(
     }
   }
 
+  console.log('context provided', getRoot(),  api);
+  provideContext(getRoot()!, RENDERING_CONTEXT, api);
+
   if ($template in component && isFn(component[$template])) {
     return renderComponent(
       component[$template](),

src/utils/control-flow/if.ts

@@ -19,6 +19,7 @@ import {
   isFn,
   isPrimitive,
   isTagLike,
+  addToTree
 } from '@/utils/shared';
 import { opcodeFor } from '@/utils/vm';
 
@@ -48,6 +49,7 @@ export class IfCondition {
     this.setupCondition(maybeCondition);
     this.trueBranch = trueBranch;
     this.falseBranch = falseBranch;
+    addToTree(parentContext, this);
     this.destructors.push(opcodeFor(this.condition, this.syncState.bind(this)));
     associateDestroyable(parentContext, [this.destroy.bind(this)]);
     if (IS_DEV_MODE) {

src/utils/control-flow/list.ts

@@ -19,6 +19,7 @@ import {
   isPrimitive,
   isTagLike,
   LISTS_FOR_HMR,
+  addToTree,
 } from '@/utils/shared';
 import { isRehydrationScheduled } from '@/utils/ssr/rehydration';
 
@@ -98,6 +99,7 @@ export class BasicListComponent<T extends { id: number }> {
     topMarker: Comment,
   ) {
     this.ItemComponent = ItemComponent;
+    addToTree(ctx, this);
     this.parentCtx = ctx;
     const mainNode = outlet;
     this[$nodes] = [];

src/utils/dom-api.ts

@@ -1,6 +1,8 @@
 import { getNodeCounter, incrementNodeCounter } from '@/utils/dom';
 import { IN_SSR_ENV, noop } from './shared';
 
+export const RENDERING_CONTEXT = Symbol('RENDERING_CONTEXT');
+
 let $doc =
   typeof document !== 'undefined'
     ? document

src/utils/dom.ts

@@ -26,7 +26,7 @@ import {
   destroy,
   registerDestructor,
 } from './glimmer/destroyable';
-import { api, getDocument } from '@/utils/dom-api';
+import { api as HTMLAPI, getDocument, RENDERING_CONTEXT } from '@/utils/dom-api';
 import {
   isFn,
   isPrimitive,
@@ -47,6 +47,7 @@ import { isRehydrationScheduled } from './ssr/rehydration';
 import { createHotReload } from './hmr';
 import { IfCondition } from './control-flow/if';
 import { CONSTANTS } from '../../plugins/symbols';
+import { getContext } from './context';
 
 type RenderableType = Node | ComponentReturnType | string | number;
 type ShadowRootMode = 'open' | 'closed' | null;
@@ -82,6 +83,7 @@ const $_className = 'className';
 
 let unstableWrapperId: number = 0;
 let ROOT: Component<any> | null = null;
+let api = HTMLAPI;
 
 export const $_MANAGERS = {
   component: {
@@ -494,6 +496,11 @@ function _DOM(
   ctx: any,
 ): Node {
   NODE_COUNTER++;
+  api = getContext<typeof HTMLAPI>(ctx, RENDERING_CONTEXT)!;
+  if (!api) {
+    debugger;
+    api = getContext<typeof HTMLAPI>(ctx, RENDERING_CONTEXT)!;
+  }
   const element = api.element(tag);
   if (IS_DEV_MODE) {
     $DEBUG_REACTIVE_CONTEXTS.push(`${tag}`);
@@ -626,6 +633,7 @@ export function $_inElement(
 ) {
   return component(
     function UnstableChildWrapper(this: Component<any>) {
+      $_GET_ARGS(this, arguments);
       if (IS_DEV_MODE) {
         // @ts-expect-error construct signature
         this.debugName = `InElement-${unstableWrapperId++}`;
@@ -660,6 +668,9 @@ export function $_ucw(
 ) {
   return component(
     function UnstableChildWrapper(this: Component<any>) {
+      // console.log(this, ...arguments);
+      $_GET_ARGS(this, arguments);
+      // debugger;
       if (IS_DEV_MODE) {
         // @ts-expect-error construct signature
         this.debugName = `UnstableChildWrapper-${unstableWrapperId++}`;
@@ -837,6 +848,7 @@ function _component(
   fw: FwType,
   ctx: Component<any>,
 ) {
+  args['_context'] = ctx;
   let comp = _comp;
   if (WITH_EMBER_INTEGRATION) {
     if ($_MANAGERS.component.canHandle(_comp)) {
@@ -897,7 +909,10 @@ function _component(
   }
   if (instance.ctx !== null) {
     // for now we adding only components with context
+    // debugger;
     addToTree(ctx, instance.ctx);
+    // addToTree(ctx, instance);
+
     if (IS_DEV_MODE) {
       setBounds(instance);
     }
@@ -1163,6 +1178,13 @@ const ArgProxyHandler = {
 };
 export function $_GET_ARGS(ctx: any, args: any) {
   ctx[$args] = ctx[$args] || args[0] || {};
+  const parentContext = ctx[$args]['_context'];
+  if (parentContext) {
+    // console.log('context', parentContext, ctx);
+    addToTree(parentContext, ctx);
+  } else {
+    addToTree(getRoot()!, ctx);
+  }
 }
 export function $_GET_SLOTS(ctx: any, args: any) {
   return (args[0] || {})[$SLOTS_SYMBOL] || ctx[$args]?.[$SLOTS_SYMBOL] || {};
@@ -1238,6 +1260,7 @@ export function $_dc(
   const destructor = opcodeFor(_cmp, (value: any) => {
     if (typeof value !== 'function') {
       result = value;
+      addToTree(ctx, result);
       return;
     }
     if (value !== ref) {

src/utils/provider.ts

@@ -0,0 +1,28 @@
+import { Component } from "./component";
+import { $template } from "./shared";
+import { provideContext } from './context';
+import { getDocument, RENDERING_CONTEXT } from "./dom-api";
+
+// SVG DOM API
+const svgDomApi = {
+    element: (tagName: string): SVGElement => {
+      return getDocument().createElementNS('http://www.w3.org/2000/svg', tagName) as SVGElement;
+    },
+    setAttribute: (element: SVGElement, name: string, value: string) => {
+      element.setAttribute(name, value);
+    },
+    append: (parent: SVGElement, child: SVGElement) => {
+      parent.appendChild(child);
+    },
+};
+
+export class SvgProvider extends Component {
+    constructor() {
+        super(...arguments);
+        provideContext(this, RENDERING_CONTEXT, svgDomApi);
+
+    }
+    [$template]() {
+        return [];
+    }
+}

src/utils/shared.ts

@@ -102,6 +102,9 @@ export function addToTree(
   node: Component<any>,
   debugName?: string,
 ) {
+  // if (node.toString() === '[object Object]') {
+  //   debugger;
+  // }
   if (IS_DEV_MODE) {
     if ('nodeType' in node) {
       throw new Error('invalid node');