DEV: Add component function to component owner (#1563)

* Add component funciton to dev component * Create nice-dogs-draw.md
solidjs · Feb 20, 2023 · 2446976 · 2446976
1 parent 04aaaf5
commit 2446976
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/.changeset/nice-dogs-draw.md b/.changeset/nice-dogs-draw.md
@@ -0,0 +1,6 @@
+---
+"solid-js": patch
+---
+
+Add a reference to the component funciton to DevComponent owner.
+Rename DevComponent's property from `componentName` to `name`.
diff --git a/packages/solid/src/reactive/signal.ts b/packages/solid/src/reactive/signal.ts
@@ -136,7 +136,7 @@ export function createRoot<T>(fn: RootFunction<T>, detachedOwner?: typeof Owner)
         : fn
       : () => fn(() => untrack(() => cleanNode(root)));
 
-  if ("_SOLID_DEV_") DevHooks.afterCreateOwner && DevHooks.afterCreateOwner(root);;
+  if ("_SOLID_DEV_") DevHooks.afterCreateOwner && DevHooks.afterCreateOwner(root);
 
   Owner = root;
   Listener = null;
@@ -1048,7 +1048,8 @@ export function resumeEffects(e: Computation<any>[]) {
 
 export interface DevComponent<T> extends Memo<unknown> {
   props: T;
-  componentName: string;
+  name: string;
+  component: (props: T) => unknown;
 }
 
 // Dev
@@ -1066,7 +1067,8 @@ export function devComponent<P, V>(Comp: (props: P) => V, props: P): V {
   c.props = props;
   c.observers = null;
   c.observerSlots = null;
-  c.componentName = Comp.name;
+  c.name = Comp.name;
+  c.component = Comp;
   updateComputation(c);
   return (c.tValue !== undefined ? c.tValue : c.value) as V;
 }
@@ -1632,14 +1634,19 @@ function castError(err: unknown): Error {
   return new Error(typeof err === "string" ? err : "Unknown error", { cause: err });
 }
 function runErrors(fns: ((err: any) => void)[], err: any) {
-  for (const f of fns) f(err)
+  for (const f of fns) f(err);
 }
 function handleError(err: unknown) {
   const fns = ERROR && lookup(Owner, ERROR);
   if (!fns) throw err;
   const error = castError(err);
   if (Effects)
-    Effects!.push({ fn() { runErrors(fns, error); }, state: STALE } as unknown as Computation<any>);
+    Effects!.push({
+      fn() {
+        runErrors(fns, error);
+      },
+      state: STALE
+    } as unknown as Computation<any>);
   else runErrors(fns, error);
 }
 

diff --git a/packages/solid/test/dev.spec.ts b/packages/solid/test/dev.spec.ts
@@ -5,8 +5,10 @@ import {
   createEffect,
   createComputed,
   DEV,
-  createContext
+  createContext,
+  createComponent
 } from "../src";
+import type { DevComponent } from "../src/reactive/signal";
 import { createStore, unwrap, DEV as STORE_DEV } from "../store/src";
 
 describe("Dev features", () => {
@@ -139,4 +141,17 @@ describe("Dev features", () => {
     expect(cb).toHaveBeenCalledTimes(2);
     expect(cb).toHaveBeenCalledWith(unwrap(s.inner), "foo", 2, 1);
   });
+
+  test("createComponent should create a component owner in DEV", () => {
+    createRoot(() => {
+      const props = {};
+      createComponent(function MyComponent() {
+        const owner = getOwner() as DevComponent<{}>;
+        expect(owner.name).toBe("MyComponent");
+        expect(owner.props).toBe(props);
+        expect(owner.component).toBe(MyComponent);
+        return null;
+      }, props);
+    });
+  });
 });