feat(chrome-devtools): add customValueValidate (#3400)

Author: KyrieLii

.changeset/neat-jars-type.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/devtools': patch
+---
+
+feat(chrome-devtools): add option customValueValidate for form component

packages/chrome-devtools/src/App.tsx

@@ -17,6 +17,7 @@ const App = (props: RootComponentProps) => {
     getVersion,
     handleSnapshot,
     handleProxyAddress,
+    customValueValidate,
   } = props;
   const [module, setModule] = useState(window.__FEDERATION__?.moduleInfo || {});
 
@@ -37,6 +38,7 @@ const App = (props: RootComponentProps) => {
               getVersion={getVersion}
               handleSnapshot={handleSnapshot}
               handleProxyAddress={handleProxyAddress}
+              customValueValidate={customValueValidate}
             />
           ) : (
             <Empty description={'No ModuleInfo Detected'} />

packages/chrome-devtools/src/component/Form/index.tsx

@@ -58,6 +58,7 @@ const FormComponent = (props: FormProps & RootComponentProps) => {
     versionList,
     setVersionList,
     getVersion,
+    customValueValidate,
   } = props;
   const { moduleInfo } = window.__FEDERATION__;
   let { producer } = separateType(moduleInfo);
@@ -145,7 +146,12 @@ const FormComponent = (props: FormProps & RootComponentProps) => {
       };
     }
 
-    if (validateCustom(value) || validateSemver(value) || validatePort(value)) {
+    if (
+      validateCustom(value) ||
+      validateSemver(value) ||
+      validatePort(value) ||
+      customValueValidate?.(value)
+    ) {
       statusSet[index].valueStatus = true;
       flushSync(() => setFormStatus(statusSet));
       return callback();

packages/chrome-devtools/src/component/Layout/index.tsx

@@ -50,6 +50,7 @@ const Layout = (
     setVersionList,
     getVersion,
     handleProxyAddress,
+    customValueValidate,
   } = props;
   const { producer } = separateType(moduleInfo);
   const [condition, setCondition] = useState(statusInfo.processing);
@@ -209,6 +210,7 @@ const Layout = (
           versionList={versionList}
           setVersionList={setVersionList}
           getVersion={getVersion}
+          customValueValidate={customValueValidate}
         />
       </Form>
 

packages/chrome-devtools/src/utils/types/common.ts

@@ -13,4 +13,5 @@ export interface RootComponentProps {
   setVersionList?: React.Dispatch<React.SetStateAction<Array<Array<string>>>>;
   getVersion?: (moduleName: string) => Promise<Array<string>>;
   handleProxyAddress?: (address: string) => string;
+  customValueValidate?: (schema: string) => boolean;
 }