feat(javascript): add ReactUIComponentProvider for UI component collection #319

Introduce `ReactUIComponentProvider` to collect UI components from JavaScript and TypeScript files. This includes updating configuration files and refactoring existing code to use the new provider.

Author: phodal

core/src/223/main/resources/META-INF/autodev-core.xml

@@ -217,6 +217,11 @@
                         interface="cc.unitmesh.devti.provider.RevisionProvider"
                         dynamic="true">
         </extensionPoint>
+
+        <!--  Bridge -->
+        <extensionPoint qualifiedName="cc.unitmesh.uiComponentProvider"
+                        interface="cc.unitmesh.devti.bridge.provider.UiComponentProvider"
+                        dynamic="true"/>
     </extensionPoints>
 
     <applicationListeners>

core/src/233/main/resources/META-INF/autodev-core.xml

@@ -193,10 +193,10 @@
         <!-- Lang Sketch Provider -->
         <extensionPoint qualifiedName="cc.unitmesh.langSketchProvider"
                         interface="cc.unitmesh.devti.sketch.ui.LanguageSketchProvider"
-                        dynamic="true" />
+                        dynamic="true"/>
         <extensionPoint qualifiedName="cc.unitmesh.sketchToolchainProvider"
                         interface="cc.unitmesh.devti.sketch.SketchToolchainProvider"
-                        dynamic="true" />
+                        dynamic="true"/>
 
         <extensionPoint qualifiedName="cc.unitmesh.relatedClassProvider"
                         beanClass="com.intellij.lang.LanguageExtensionPoint" dynamic="true">
@@ -217,6 +217,11 @@
                         interface="cc.unitmesh.devti.provider.RevisionProvider"
                         dynamic="true">
         </extensionPoint>
+
+        <!--  Bridge -->
+        <extensionPoint qualifiedName="cc.unitmesh.uiComponentProvider"
+                        interface="cc.unitmesh.devti.bridge.provider.UiComponentProvider"
+                        dynamic="true"/>
     </extensionPoints>
 
     <applicationListeners>
@@ -262,14 +267,14 @@
         <action id="cc.unitmesh.devti.inlayCompleteCode"
                 class="cc.unitmesh.devti.actions.completion.InlayCompleteCodeAction"
                 text="Inlay Complete Code (AutoDev)"
-                description="Inlay complete code!" >
+                description="Inlay complete code!">
             <keyboard-shortcut keymap="$default" first-keystroke="alt PERIOD"/>
             <add-to-group group-id="ShowIntentionsGroup" relative-to-action="ShowIntentionActions" anchor="after"/>
         </action>
         <action id="cc.unitmesh.devti.disposeInlayCompleteCode"
                 class="cc.unitmesh.devti.actions.completion.InlayCompleteCodeDisposedAction"
                 text="Disposed Inlay Complete Code"
-                description="Disposed Inlay complete code!" >
+                description="Disposed Inlay complete code!">
             <keyboard-shortcut keymap="$default" first-keystroke="ESCAPE"/>
         </action>
 
@@ -358,7 +363,7 @@
 
         <group id="AutoDev.ToolWindow.Chat.TitleActions">
             <action id="AutoDev.ToolWindow.NewChatAction" class="cc.unitmesh.devti.gui.toolbar.NewChatAction"/>
-<!--            <action id="AutoDev.ToolWindow.NewSketchAction" class="cc.unitmesh.devti.gui.toolbar.NewSketchAction"/>-->
+            <!--            <action id="AutoDev.ToolWindow.NewSketchAction" class="cc.unitmesh.devti.gui.toolbar.NewSketchAction"/>-->
         </group>
 
         <group id="AutoDev.ToolWindow.Message.Toolbar.Assistant">
@@ -388,7 +393,8 @@
                 icon="cc.unitmesh.devti.AutoDevIcons.AI_COPILOT"
                 class="cc.unitmesh.devti.actions.chat.AutoTestInMenuAction">
 
-            <add-to-group group-id="ProjectViewPopupMenu" anchor="after" relative-to-action="ProjectViewPopupMenuRefactoringGroup" />
+            <add-to-group group-id="ProjectViewPopupMenu" anchor="after"
+                          relative-to-action="ProjectViewPopupMenuRefactoringGroup"/>
             <add-to-group group-id="RefactoringMenu" anchor="last"/>
             <add-to-group group-id="EditorTabPopupMenu" anchor="last"/>
         </action>

core/src/main/kotlin/cc/unitmesh/devti/bridge/provider/UiComponentProvider.kt

@@ -0,0 +1,24 @@
+package cc.unitmesh.devti.bridge.provider
+
+import cc.unitmesh.devti.bridge.tools.UiComponent
+import com.intellij.openapi.extensions.ExtensionPointName
+import com.intellij.openapi.project.Project
+import com.intellij.serviceContainer.LazyExtensionInstance
+import com.intellij.util.xmlb.annotations.Attribute
+
+abstract class UiComponentProvider : LazyExtensionInstance<UiComponentProvider>() {
+    @Attribute("implementationClass")
+    var implementationClass: String? = null
+
+    override fun getImplementationClassName(): String? = implementationClass
+
+    open fun collect(project: Project): List<UiComponent> {
+        return emptyList()
+    }
+
+    companion object {
+        val EP_NAME: ExtensionPointName<UiComponentProvider> =
+            ExtensionPointName.create("cc.unitmesh.uiComponentProvider")
+    }
+
+}

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/bridge/ReactUIComponentProvider.kt

@@ -0,0 +1,61 @@
+package cc.unitmesh.ide.javascript.bridge
+
+import cc.unitmesh.devti.bridge.provider.UiComponentProvider
+import cc.unitmesh.devti.bridge.tools.UiComponent
+import cc.unitmesh.ide.javascript.flow.ReactAutoPage
+import cc.unitmesh.ide.javascript.util.ReactPsiUtil
+import com.intellij.lang.javascript.JavaScriptFileType
+import com.intellij.lang.javascript.TypeScriptJSXFileType
+import com.intellij.lang.javascript.dialects.ECMA6LanguageDialect
+import com.intellij.lang.javascript.dialects.TypeScriptJSXLanguageDialect
+import com.intellij.lang.javascript.psi.JSFile
+import com.intellij.openapi.diagnostic.logger
+import com.intellij.openapi.project.Project
+import com.intellij.psi.PsiManager
+import com.intellij.psi.search.FileTypeIndex
+import com.intellij.psi.search.GlobalSearchScope
+import com.intellij.psi.search.ProjectScope
+import kotlin.collections.plusAssign
+
+class ReactUIComponentProvider : UiComponentProvider() {
+    override fun collect(project: Project): List<UiComponent> {
+        val searchScope: GlobalSearchScope = ProjectScope.getContentScope(project)
+        val psiManager = PsiManager.getInstance(project)
+
+        val virtualFiles =
+            FileTypeIndex.getFiles(JavaScriptFileType.INSTANCE, searchScope) +
+                    FileTypeIndex.getFiles(TypeScriptJSXFileType.INSTANCE, searchScope)
+
+        val components = mutableListOf<UiComponent>()
+        virtualFiles.forEach { file ->
+            val jsFile = (psiManager.findFile(file) ?: return@forEach) as? JSFile ?: return@forEach
+            if (jsFile.isTestFile) return@forEach
+
+            components += buildComponent(jsFile) ?: return@forEach
+        }
+
+        return components
+    }
+
+    companion object {
+        fun buildComponent(jsFile: JSFile): List<UiComponent>? {
+            return when (jsFile.language) {
+                is TypeScriptJSXLanguageDialect,
+                is ECMA6LanguageDialect
+                    -> {
+                    val dsComponents = ReactPsiUtil.tsxComponentToComponent(jsFile)
+                    if (dsComponents.isEmpty()) {
+                        logger<ReactAutoPage>().warn("no component found in ${jsFile.name}")
+                    }
+                    dsComponents
+                }
+
+                else -> {
+                    logger<ReactAutoPage>().warn("unknown language: ${jsFile.language}")
+                    null
+                }
+            }
+        }
+
+    }
+}

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/flow/ReactAutoPage.kt

@@ -1,6 +1,7 @@
 package cc.unitmesh.ide.javascript.flow
 
 import cc.unitmesh.devti.bridge.tools.UiComponent
+import cc.unitmesh.ide.javascript.bridge.ReactUIComponentProvider
 import cc.unitmesh.ide.javascript.util.ReactPsiUtil
 import com.intellij.lang.javascript.JavaScriptFileType
 import com.intellij.lang.javascript.TypeScriptJSXFileType
@@ -53,15 +54,15 @@ class ReactAutoPage(
             if (jsFile.isTestFile) return@forEach
 
             when {
-                path.contains("views") -> buildComponent(jsFile)?.let {
+                path.contains("views") -> ReactUIComponentProvider.buildComponent(jsFile)?.let {
                     pages += it
                 }
 
-                path.contains("pages") -> buildComponent(jsFile)?.let {
+                path.contains("pages") -> ReactUIComponentProvider.buildComponent(jsFile)?.let {
                     pages += it
                 }
 
-                path.contains("components") -> buildComponent(jsFile)?.let {
+                path.contains("components") -> ReactUIComponentProvider.buildComponent(jsFile)?.let {
                     components += it
                 }
 
@@ -82,25 +83,6 @@ class ReactAutoPage(
 
     override fun getComponents(): List<UiComponent> = components
 
-    private fun buildComponent(jsFile: JSFile): List<UiComponent>? {
-        return when (jsFile.language) {
-            is TypeScriptJSXLanguageDialect,
-            is ECMA6LanguageDialect
-            -> {
-                val dsComponents = ReactPsiUtil.tsxComponentToComponent(jsFile)
-                if (dsComponents.isEmpty()) {
-                    logger<ReactAutoPage>().warn("no component found in ${jsFile.name}")
-                }
-                dsComponents
-            }
-
-            else -> {
-                logger<ReactAutoPage>().warn("unknown language: ${jsFile.language}")
-                null
-            }
-        }
-    }
-
     override fun getRoutes(): Map<String, String> {
         return this.routes.map {
             when (it.key) {

javascript/src/main/resources/cc.unitmesh.javascript.xml

@@ -44,5 +44,7 @@
                              implementationClass="cc.unitmesh.ide.javascript.provider.JavaScriptLivingDocumentation"/>
 
         <buildSystemProvider implementation="cc.unitmesh.ide.javascript.provider.JavaScriptBuildSystemProvider" />
+
+        <uiComponentProvider implementation="cc.unitmesh.ide.javascript.bridge.ReactUIComponentProvider"/>
     </extensions>
 </idea-plugin>

javascript/src/test/kotlin/cc/unitmesh/ide/javascript/util/ReactPsiUtilTest.kt

@@ -4,9 +4,11 @@ import com.intellij.lang.javascript.JavascriptLanguage
 import com.intellij.lang.javascript.psi.JSFile
 import com.intellij.psi.PsiFileFactory
 import com.intellij.testFramework.LightPlatformTestCase
+import org.intellij.lang.annotations.Language
 
 class ReactPsiUtilTest : LightPlatformTestCase() {
     fun testShouldHandleExportReactComponent() {
+        @Language("TypeScript JSX")
         val code = """
             interface AppProps {
               Component: any;