fix: change the dangerouslySetInnerHTML in tsx (#1621)

Author: yifancong

packages/components/src/components/Alerts/list.module.scss

@@ -2,4 +2,6 @@
   font-size: 14px;
   font-weight: 400;
   line-height: 16px;
+  white-space: pre-wrap;
+  word-break: break-word;
 }

packages/components/src/components/Alerts/list.tsx

@@ -19,10 +19,7 @@ export const CommonList = (props: { data: Array<Rule.RuleStoreDataItem> }) => {
           background: '#fff',
         }}
         description={
-          <div
-            className={styles.description}
-            dangerouslySetInnerHTML={{ __html: description || '' }}
-          />
+          <div className={styles.description}>{description || ''}</div>
         }
         icon={
           <Button onClick={() => navigate} type="link">

packages/core/src/rules/rules/loader-performance-optimization/index.ts

@@ -42,8 +42,9 @@ export const rule = defineRule<typeof title, Config>(() => {
       const resultMap: Map<string, Array<LoaderMapValue>> = new Map();
 
       // flatten loaders
-      const loaders: SDK.LoaderTransformData[] = loader
-        .flatMap((el) => el.loaders);
+      const loaders: SDK.LoaderTransformData[] = loader.flatMap(
+        (el) => el.loaders,
+      );
 
       for (const item of loader) {
         const { path, ext } = item.resource;
@@ -96,23 +97,19 @@ export const rule = defineRule<typeof title, Config>(() => {
 
         const msg = [
           nodeModulesFilesCosts >= threshold &&
-            `<b>${
-              nodeModulesFiles.length
-            }</b> node_modules files(costs: <b>${Time.formatCosts(
+            `${nodeModulesFiles.length} node_modules files (costs: ${Time.formatCosts(
               nodeModulesFilesCosts,
-            )}</b>)`,
+            )})`,
           outofCwdFilesCosts >= threshold &&
-            `<b>${
-              outofCwdFiles.length
-            }</b> outof project files(costs: <b>${Time.formatCosts(
+            `${outofCwdFiles.length} outside project files (costs: ${Time.formatCosts(
               outofCwdFilesCosts,
-            )}</b>)`,
+            )})`,
         ]
           .filter(Boolean)
           .join(' and ');
 
         if (msg) {
-          const message = `<b>${loaderName}</b> has process ${msg}.`;
+          const message = `${loaderName} has processed ${msg}.`;
           report({
             message,
             detail: {

packages/sdk/src/sdk/server/apis/index.ts

@@ -1,5 +1,5 @@
 export * from './alerts';
-export * from './data';
+export { DataAPI } from './data';
 export * from './fs';
 export * from './loader';
 export * from './graph';