fix some tests

src/tests/integration/context-test.gts

@@ -49,7 +49,7 @@ class ThemedButton extends Component {
     buttonClass: '',
   };
 }
-
+//
 module('Integration | Context API', function () {
   test('context decorator falling back to root context', async function (assert) {
     await render(

src/tests/integration/modifier-test.gts

@@ -25,7 +25,7 @@ module('Integration | Internal | modifier', function () {
   });
   if (REACTIVE_MODIFIERS) {
     test('modifiers may be reactive', async function (assert) {
-      assert.expect(5);
+      assert.expect(6);
       const value = cell(3);
       let removeCount = 0;
       const modifier = (element: HTMLDivElement, v: number) => {

src/tests/utils.ts

@@ -1,7 +1,7 @@
 import { type ComponentReturnType, destroyElementSync, renderComponent } from '@/utils/component';
 import { getDocument } from '@/utils/dom-api';
 import { withRehydration } from '@/utils/ssr/rehydration';
-import { getRoot, resetNodeCounter, setRoot, resetRoot } from '@/utils/dom';
+import { getRoot, resetNodeCounter, setRoot, resetRoot, createRoot } from '@/utils/dom';
 import { renderInBrowser } from '@/utils/ssr/ssr';
 import { runDestructors } from '@/utils/component';
 import { registerDestructor } from '@/utils/glimmer/destroyable';
@@ -17,23 +17,25 @@ export async function cleanupRender() {
 
 export function rehydrate(component: ComponentReturnType) {
   let cmp: any = null;
+  let root = createRoot();
+  setRoot(root);
   withRehydration(() => {
     // @ts-expect-error typings mismatch
     cmp = new component();
     return cmp;
   }, renderTarget());
-  if (!getRoot()) {
-    setRoot(cmp.ctx || cmp);
-  }
+
 }
 export async function ssr(component: any) {
   if (getRoot()) {
     throw new Error('Root already exists');
   }
   resetNodeCounter();
   let cmp: any = null;
+  let root = {};
+  setRoot(root);
   const content = await renderInBrowser(() => {
-    cmp = new component({});
+    cmp = new component(root);
     return cmp;
   });
   renderTarget().innerHTML = content;
@@ -42,7 +44,6 @@ export async function ssr(component: any) {
   } else {
     await Promise.all(runDestructors(cmp));
   }
-  const root = getRoot();
   if (root && cmp !== root) {
     await Promise.all(runDestructors(root));
   }

src/utils/component.ts

@@ -23,7 +23,7 @@ import {
   FRAGMENT_TYPE,
   PARENT_GRAPH,
 } from './shared';
-import { addChild, getRoot, setRoot } from './dom';
+import { addChild, createRoot, getRoot, Root, setRoot } from './dom';
 import { provideContext } from './context';
 
 export type ComponentRenderTarget =
@@ -105,12 +105,12 @@ export function renderComponent(
       }
     } else {
       if (appRoot === null) {
-        setRoot(owner || component.ctx || (component as any));
+        setRoot(createRoot());
       }
     }
   }
 
-  console.log('context provided', getRoot(),  api);
+  // console.log('context provided', getRoot(),  api);
   provideContext(getRoot()!, RENDERING_CONTEXT, api);
 
   if ($template in component && isFn(component[$template])) {
@@ -403,7 +403,7 @@ function runDestructorsSync(targetNode: Component<any>) {
   }
 }
 export function runDestructors(
-  target: Component<any>,
+  target: Component<any> | Root,
   promises: Array<Promise<void>> = [],
 ): Array<Promise<void>> {
   destroy(target);

src/utils/context.ts

@@ -1,9 +1,9 @@
 import { registerDestructor } from './glimmer/destroyable';
 import { Component } from './component';
 import { PARENT_GRAPH } from './shared';
-import { getRoot } from './dom';
+import { getRoot, Root } from './dom';
 
-const CONTEXTS = new WeakMap<Component<any>, Map<symbol, any>>();
+const CONTEXTS = new WeakMap<Component<any> | Root, Map<symbol, any>>();
 
 export function context(contextKey: symbol): (klass: any, key: string, descriptor?: PropertyDescriptor & { initializer?: () => any } ) => void {
   return function contextDecorator(
@@ -19,8 +19,8 @@ export function context(contextKey: symbol): (klass: any, key: string, descripto
   }
 };
 
-export function getContext<T>(ctx: Component<any>, key: symbol): T | null {
-  let current: Component<any> | null = ctx;
+export function getContext<T>(ctx: Component<any> | Root, key: symbol): T | null {
+  let current: Component<any> | Root | null = ctx;
   while (current) {
     const context = CONTEXTS.get(current);
     if (context?.has(key)) {
@@ -35,7 +35,7 @@ export function getContext<T>(ctx: Component<any>, key: symbol): T | null {
 }
 
 export function provideContext<T>(
-  ctx: Component<any>,
+  ctx: Component<any> | Root,
   key: symbol,
   value: T,
 ): void {
@@ -50,6 +50,6 @@ export function provideContext<T>(
   });
 }
 
-function findParentComponent(component: Component<any>): Component<any> | null {
+function findParentComponent(component: Component<any> | Root): Component<any> | Root | null {
   return PARENT_GRAPH.get(component)! ?? null;
 }

src/utils/dom.ts

@@ -82,7 +82,8 @@ export const $PROPS_SYMBOL = Symbol('props');
 const $_className = 'className';
 
 let unstableWrapperId: number = 0;
-let ROOT: Component<any> | null = null;
+export class Root {};
+let ROOT: Root | null = null;
 let api = HTMLAPI;
 
 export const $_MANAGERS = {
@@ -214,11 +215,14 @@ export function $_helperHelper(params: any, hash: any) {
     throw new Error('Unable to use helper with non-ember helpers');
   }
 }
-
+export function createRoot() {
+  const root = new Root();
+  return root;
+}
 export function resetRoot() {
   ROOT = null;
 }
-export function setRoot(root: Component<any>) {
+export function setRoot(root: Root) {
   if (IS_DEV_MODE) {
     if (ROOT) {
       throw new Error('Root already exists');
@@ -496,11 +500,14 @@ function _DOM(
   ctx: any,
 ): Node {
   NODE_COUNTER++;
+  let oldAPI = api;
   api = getContext<typeof HTMLAPI>(ctx, RENDERING_CONTEXT)!;
   if (!api) {
-    debugger;
     api = getContext<typeof HTMLAPI>(ctx, RENDERING_CONTEXT)!;
   }
+  if (!api) {
+    api = oldAPI;
+  }
   const element = api.element(tag);
   if (IS_DEV_MODE) {
     $DEBUG_REACTIVE_CONTEXTS.push(`${tag}`);
@@ -1075,7 +1082,7 @@ function text(
 function getRenderTargets(debugName: string) {
   const ifPlaceholder = IS_DEV_MODE ? api.comment(debugName) : api.comment('');
   let outlet = isRehydrationScheduled()
-    ? ifPlaceholder.parentElement!
+    ? (ifPlaceholder.parentElement || api.fragment())
     : api.fragment();
 
   if (!ifPlaceholder.isConnected) {

src/utils/shared.ts

@@ -6,6 +6,7 @@ import {
 } from '@/utils/component';
 import { type AnyCell } from './reactive';
 import { type BasicListComponent } from './control-flow/list';
+import { Root } from './dom';
 
 export const isTag = Symbol('isTag');
 export const $template = 'template' as const;
@@ -51,7 +52,7 @@ export function isTagLike(child: unknown): child is AnyCell {
 }
 
 export const RENDER_TREE = new WeakMap<Component<any>, Set<Component>>();
-export const PARENT_GRAPH = new WeakMap<Component<any>, Component<any>>();
+export const PARENT_GRAPH = new WeakMap<Component<any> | Root, Component<any>>();
 export const BOUNDS = new WeakMap<
   Component<any>,
   Array<HTMLElement | Comment>
@@ -118,7 +119,10 @@ export function addToTree(
   // @todo - case 42
   associateDestroyable(node, [
     () => {
-      const tree = RENDER_TREE.get(ctx)!;
+      const tree = RENDER_TREE.get(ctx);
+      if (tree === undefined) {
+        return;
+      }
       tree.delete(node);
       if (tree.size === 0) {
         RENDER_TREE.delete(ctx);

src/utils/ssr/rehydration-dom-api.ts

@@ -156,6 +156,11 @@ export const api = {
     targetIndex: number = 0,
   ) {
     if (isRehydrationScheduled()) {
+      if (import.meta.env.DEV) {
+        if (!parent) {
+          debugger;
+        }
+      }
       // in this case likely child is a text node, and we don't need to append it, we need to prepend it
       const childNodes = Array.from(parent.childNodes);
       const maybeIndex = childNodes.indexOf(child as any);

src/utils/ssr/ssr.ts

@@ -13,10 +13,15 @@ type EnvironmentParams = {
 export async function renderInBrowser(
   componentRenderFn: (rootNode: HTMLElement) => ComponentReturnType,
 ) {
+  if (import.meta.env.DEV) {
+    if (!getRoot()) {
+      throw new Error('Unable to detect render root');
+    }
+  }
   const doc = getDocument();
   const rootNode = doc.createElement('div');
   // @todo - add destructor
-  renderComponent(componentRenderFn(rootNode), rootNode);
+  renderComponent(componentRenderFn(rootNode), rootNode, getRoot());
   const html = rootNode.innerHTML;
   rootNode.remove();
   return html;