feat: React properties vite plugin

flow-server/src/main/resources/plugins/plugins.json

@@ -7,6 +7,7 @@
     "rollup-plugin-postcss-lit-custom",
     "react-function-location-plugin",
     "rollup-plugin-vaadin-i18n",
-    "vite-plugin-service-worker"
+    "vite-plugin-service-worker",
+    "react-component-properties-plugin"
   ]
 }

flow-server/src/main/resources/plugins/react-component-properties-plugin/package.json

@@ -0,0 +1,28 @@
+{
+  "description": "React component properties finds the JSX element properties",
+  "keywords": [
+    "plugin",
+    "copilot"
+  ],
+  "name": "@vaadin/react-component-properties-plugin",
+  "version": "0.0.4",
+  "main": "index.ts",
+  "private": true,
+  "author": "Vaadin Ltd",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/vaadin/copilot/issues"
+  },
+  "files": [
+    "index.ts"
+  ],
+  "dependencies": {
+    "magic-string": "0.30.17"
+  },
+  "peerDependencies": {
+    "vite": "6.x"
+  },
+  "devDependencies": {
+    "@types/node": "22.x"
+  }
+}

flow-server/src/main/resources/vite.generated.ts

@@ -29,7 +29,7 @@ import checker from 'vite-plugin-checker';
 import postcssLit from '#buildFolder#/plugins/rollup-plugin-postcss-lit-custom/rollup-plugin-postcss-lit.js';
 import vaadinI18n from '#buildFolder#/plugins/rollup-plugin-vaadin-i18n/rollup-plugin-vaadin-i18n.js';
 import serviceWorkerPlugin from '#buildFolder#/plugins/vite-plugin-service-worker';
-
+import reactComponentPropertiesPlugin from '#buildFolder#/plugins/react-component-properties-plugin';
 import { createRequire } from 'module';
 
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -799,7 +799,8 @@ export const vaadinConfig: UserConfigFn = (env) => {
       checker({
         typescript: true
       }),
-      productionMode && visualizer({ brotliSize: true, filename: bundleSizeFile })
+      productionMode && visualizer({ brotliSize: true, filename: bundleSizeFile }),
+      devMode && reactComponentPropertiesPlugin()
     ]
   };
 };

flow-server/src/test/java/com/vaadin/flow/server/frontend/TaskInstallFrontendBuildPluginsTest.java

@@ -69,7 +69,8 @@ public void getPluginsReturnsExpectedList() {
                 "theme-loader", "theme-live-reload-plugin",
                 "build-status-plugin", "rollup-plugin-postcss-lit-custom",
                 "react-function-location-plugin", "rollup-plugin-vaadin-i18n",
-                "vite-plugin-service-worker" };
+                "vite-plugin-service-worker",
+                "react-component-properties-plugin" };
         final List<String> plugins = FrontendPluginsUtil.getPlugins();
         Assert.assertEquals("Unexpected number of plugins in 'plugins.json'",
                 expectedPlugins.length, plugins.size());

flow-tests/test-frontend/vite-basics/src/main/frontend/BasicReactComponent.tsx

@@ -0,0 +1,4 @@
+
+export function BasicReactComponent(props: Readonly<{ name?: string }>){
+    return <div data-test-id="basic-react-component">{props.name ?? 'Unknown'}</div>
+}

flow-tests/test-frontend/vite-basics/src/main/frontend/JSXInstricElementsDef.d.ts

@@ -0,0 +1,9 @@
+// Sample of IntrinsicElements to mimic the react-types loaded
+// via node modules. Used by ReactPropertiesPlugin
+
+declare namespace JSX {
+    interface IntrinsicElements {
+        h1: { text: string };
+        div: { [key: string]: any, "aria-label": string };
+    }
+}

flow-tests/test-frontend/vite-basics/src/main/frontend/ReactComponentProperties.tsx

@@ -0,0 +1,43 @@
+import { BasicReactComponent as BasicReactComponentAlias} from "./BasicReactComponent";
+
+export default function ReactComponentProperties(){
+    return (
+        <div data-test-id="react-component-properties">
+            <ComponentWithInlineProps  name={'fooName'} surname={'fooSurname'} />
+            <ComponentWithoutProps></ComponentWithoutProps>
+            <h1 data-test-id="simple-header">Header 1</h1>
+            <ComponentWithInterfaceProps label={"fooLabel"}></ComponentWithInterfaceProps>
+            <ComponentWithAnyProps />
+            <BasicReactComponentAlias />
+        </div>
+    )
+}
+
+const ComponentWithoutProps = () => {
+    return <span data-test-id="component-without-props"></span>
+}
+const ComponentWithInlineProps = (props: { name: string, surname: string, sex?: 'M' | 'F'}) => {
+    const { name, surname, sex } = props;
+    return (
+        <div data-test-id="component-with-inline-props">
+            <h4>{name} - ${surname}</h4>
+            <h5>{sex ?? 'Unknown'}</h5>
+        </div>
+    )
+}
+interface ComponentWithInterfaceProperties {
+    label: string;
+}
+const ComponentWithInterfaceProps = (props: ComponentWithInterfaceProperties) => {
+    return (
+        <div data-test-id="component-with-interface-props">
+            {props.label}
+        </div>
+    )
+}
+
+const ComponentWithAnyProps = (props: any) => {
+    return (
+        <h5 data-test-id="component-with-any-props">This component has any typed props</h5>
+    )
+}

flow-tests/test-frontend/vite-basics/src/main/frontend/routes.tsx

@@ -1,10 +1,11 @@
 import { createBrowserRouter, RouteObject } from 'react-router';
 import { serverSideRoutes } from 'Frontend/generated/flow/Flow';
 import ReactComponents from './ReactComponents';
-
+import ReactComponentProperties from "./ReactComponentProperties";
 function build() {
   const routes = [
     { path: 'react-components',  element: <ReactComponents/> },
+    { path: 'react-component-properties', element: <ReactComponentProperties />},
     ...serverSideRoutes
   ] as RouteObject[];
   return {

flow-tests/test-frontend/vite-basics/src/test/java/com/vaadin/viteapp/ReactComponentPropertiesIT.java

@@ -0,0 +1,126 @@
+package com.vaadin.viteapp;
+
+import com.vaadin.flow.testutil.ChromeBrowserTest;
+import org.junit.Assert;
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+
+import java.util.List;
+import java.util.Map;
+
+public class ReactComponentPropertiesIT extends ChromeBrowserTest {
+
+    private static final String DATA_TEST_ID = "data-test-id";
+
+    @Before
+    public void openView() {
+        getDriver().get(getTestURL());
+        waitForDevServer();
+    }
+
+    @Override
+    protected String getTestPath() {
+        return "/react-component-properties";
+    }
+
+    @Test
+    public void inlinePropsCanFound() {
+        var componentWithInlinePropsElement = $("*")
+                .withAttribute(DATA_TEST_ID, "component-with-inline-props")
+                .waitForFirst();
+        Map<String, Object> debugPropertiesFromFiberNode = getDebugPropertiesFromFiberNode(
+                componentWithInlinePropsElement);
+        var error = (Boolean) debugPropertiesFromFiberNode.get("error");
+        Assert.assertFalse(error);
+        debugPropertiesFromFiberNode.get("properties");
+        List<?> properties = (List<?>) debugPropertiesFromFiberNode
+                .get("properties");
+        Assert.assertFalse(properties.isEmpty());
+    }
+
+    @Test
+    public void intrinsicPropsCanFoundInWindow() {
+        var h1 = $("*").withAttribute(DATA_TEST_ID, "simple-header")
+                .waitForFirst();
+        Map<String, Object> debugPropertiesFromFiberNode = getDebugPropertiesFromFiberNode(
+                h1);
+        Assert.assertNull(debugPropertiesFromFiberNode);
+        Map<String, Object> debugPropertiesFromWindow = getDebugPropertiesFromWindow(
+                h1);
+        Assert.assertNotNull(debugPropertiesFromWindow);
+        Assert.assertFalse((Boolean) debugPropertiesFromWindow.get("error"));
+        Assert.assertFalse(
+                ((List<?>) debugPropertiesFromWindow.get("properties"))
+                        .isEmpty());
+    }
+
+    @Test
+    public void interfacePropsCanFound() {
+        var compWithInterfaceProps = $("*")
+                .withAttribute(DATA_TEST_ID, "component-with-interface-props")
+                .waitForFirst();
+        Map<String, Object> debugPropertiesFromFiberNode = getDebugPropertiesFromFiberNode(
+                compWithInterfaceProps);
+        Assert.assertNotNull(debugPropertiesFromFiberNode);
+        assertError(debugPropertiesFromFiberNode, false);
+    }
+
+    @Test
+    public void componentWithoutPropsShouldHaveAnError() {
+        var element = $("*")
+                .withAttribute(DATA_TEST_ID, "component-with-any-props")
+                .waitForFirst();
+        Assert.assertNull(getDebugPropertiesFromFiberNode(element));
+        Map<String, Object> debugPropertiesFromWindow = getDebugPropertiesFromWindow(
+                "ComponentWithAnyProps");
+        assertError(debugPropertiesFromWindow, true);
+    }
+
+    @Test
+    public void componentWithAliasShouldWork() {
+        var element = $("*")
+                .withAttribute(DATA_TEST_ID, "basic-react-component")
+                .waitForFirst();
+        Map<String, Object> debugPropertiesFromFiberNode = getDebugPropertiesFromFiberNode(
+                element);
+        assertError(debugPropertiesFromFiberNode, false);
+        List<?> properties = (List<?>) debugPropertiesFromFiberNode
+                .get("properties");
+        Assert.assertEquals(1, properties.size());
+        Map<String, ?> propertyValues = (Map<String, ?>) properties.get(0);
+        Assert.assertEquals("Name", propertyValues.get("label"));
+
+    }
+
+    private void assertError(Map<String, Object> propObj, boolean expected) {
+        var error = (Boolean) propObj.get("error");
+        Assert.assertEquals(expected, error);
+    }
+
+    private Map<String, Object> getDebugPropertiesFromWindow(
+            WebElement element) {
+        String tagName = element.getTagName();
+        return getDebugPropertiesFromWindow(tagName);
+    }
+
+    private Map<String, Object> getDebugPropertiesFromWindow(String tagName) {
+        return (Map<String, Object>) executeScript(
+                """
+                        return window.Vaadin.copilot.ReactProperties.properties[arguments[0]];
+                        """,
+                tagName);
+    }
+
+    private Map<String, Object> getDebugPropertiesFromFiberNode(
+            WebElement element) {
+        return (Map<String, Object>) executeScript(
+                """
+                        const key = Object.keys(arguments[0]).filter(a => a.startsWith("__reactFiber"))[0];
+                        const fiber = arguments[0][key];
+                        return fiber.return.type?.__debugProperties;
+                        """,
+                element);
+    }
+
+}