update react views to have displayName as the component name

Author: dumconstantin

packages/engine.babel-plugin-hmr/specs/__snapshots__/general.spec.ts.snap

@@ -104,6 +104,9 @@ const result = viewRandomId({
       },
     },
   },
+  meta: {
+    name: "result",
+  },
   type: "view",
   buildId: "unique_id",
 });
@@ -121,6 +124,9 @@ const result2 = viewRandomId({
       },
     },
   },
+  meta: {
+    name: "result2",
+  },
   type: "view",
   buildId: "unique_id",
 });
@@ -151,6 +157,9 @@ export const result = viewRandomId({
       },
     },
   },
+  meta: {
+    name: "result",
+  },
   type: "view",
   buildId: "unique_id",
 });

packages/engine.babel-plugin-syntax/specs/__snapshots__/view.spec.ts.snap

@@ -24,6 +24,9 @@ const foo = viewRandomId({
       },
     },
   },
+  meta: {
+    name: "foo",
+  },
   type: "view",
   buildId: "unique_id",
 });
@@ -43,6 +46,9 @@ const bar = viewRandomId({
       },
     },
   },
+  meta: {
+    name: "bar",
+  },
   type: "view",
   buildId: "unique_id",
 });
@@ -73,6 +79,9 @@ const foo = viewRandomId({
       },
     },
   },
+  meta: {
+    name: "foo",
+  },
   type: "view",
   buildId: "unique_id",
 });
@@ -92,6 +101,9 @@ const foo = viewRandomId({
   props: {
     type: "PASSTHROUGH",
   },
+  meta: {
+    name: "foo",
+  },
   type: "view",
   buildId: "unique_id",
 });
@@ -114,6 +126,9 @@ const foo = viewRandomId({
   props: {
     type: "PASSTHROUGH",
   },
+  meta: {
+    name: "foo",
+  },
   type: "view",
   buildId: "unique_id",
 });
@@ -136,6 +151,9 @@ const foo = viewRandomId({
   props: {
     type: "PASSTHROUGH",
   },
+  meta: {
+    name: "foo",
+  },
   type: "view",
   buildId: "unique_id",
 });
@@ -164,6 +182,9 @@ const foo = viewRandomId({
       },
     },
   },
+  meta: {
+    name: "foo",
+  },
   type: "view",
   buildId: "unique_id",
 });

packages/engine.babel-plugin-syntax/src/utils/instrumentView.ts

@@ -100,9 +100,13 @@ export const instrumentView = (
     }
     node.init = t.callExpression(t.identifier(alias), [t.identifier(configId)]);
   } else {
+    const meta = rawObjectCompiler(babel, {
+      name: metaProps.name
+    });
     const result = t.objectExpression([
       t.objectProperty(t.identifier("fn"), fn),
       t.objectProperty(t.identifier("props"), props),
+      t.objectProperty(t.identifier("meta"), meta),
       t.objectProperty(t.identifier("type"), t.stringLiteral("view")),
       t.objectProperty(t.identifier("buildId"), t.stringLiteral(buildId)),
     ]);

packages/engine.react/specs/basic.spec.tsx

@@ -29,6 +29,7 @@ test("Simple load of a react component", async () => {
     return <div data-testid="foo">{foo}</div>;
   };
 
+  Component.displayName;
   expect(Component.displayName).not.toBeUndefined();
 
   const app = engine({

packages/engine.react/specs/events.spec.tsx

@@ -37,6 +37,7 @@ test("Simple load of a react component", async () => {
     return <div data-testid="foo">{foo}</div>;
   };
 
+  Component.displayName;
   expect(Component.displayName).not.toBeUndefined();
 
   const on = jest.fn();

packages/engine.react/specs/viewInstance.spec.tsx

@@ -67,6 +67,7 @@ test("should create a state instance for a view", async () => {
     );
   };
 
+  Component.displayName;
   expect(Component.displayName).not.toBeUndefined();
 
   let get;

packages/engine.react/src/view.tsx

@@ -102,7 +102,7 @@ export function view(config: ViewConfig) {
     emit: RenderContext["emit"];
     config: ViewConfig;
     static contextType = ViewContext;
-    static displayName = `${config.meta?.relativeFilePath}::${config.meta?.name}:${config.meta?.location?.start.line}`;
+    static displayName = config.meta?.name;
     stateUpdate: any = {};
     fn: any;
     isComponentMounted: boolean = false;