[WIP]: Better Analysis tool

.node-version

@@ -0,0 +1 @@
+v18.20.0

.vscode/settings.json

@@ -2,6 +2,7 @@
   "editor.tabSize": 2,
   "editor.inlineSuggest.showToolbar": "always",
   "biome.enabled": true,
+  "editor.formatOnSave": true,
   "editor.defaultFormatter": "biomejs.biome",
   "[typescript]": {
     "editor.defaultFormatter": "biomejs.biome"

js-plugins/visualizer/client.config.ts

@@ -0,0 +1,78 @@
+import path from 'node:path';
+import { transform } from '@babel/core';
+import { JsPlugin, defineConfig } from '@farmfe/core';
+import postCSSPlugin from '@farmfe/js-plugin-postcss';
+import stylexExtendBabelPlugin from '@stylex-extend/babel-plugin';
+import stylexBabelPlugin from '@stylexjs/babel-plugin';
+import Pages from 'vite-plugin-pages';
+import { visualizer } from './src/server';
+
+const defaultWd = process.cwd();
+
+function stylex() {
+  return <JsPlugin>{
+    name: 'stylex',
+    transform: {
+      filters: {
+        moduleTypes: ['ts', 'tsx']
+      },
+      executor(param) {
+        // console.log(param.resolvedPath);
+        // console.log(param);
+        if (
+          param.resolvedPath === 'farmfe_plugin_react_is_react_refresh_boundary'
+        ) {
+          return param;
+        }
+        const res = transform(param.content, {
+          filename: param.resolvedPath,
+          parserOpts: {
+            plugins: ['jsx', 'typescript']
+          },
+          plugins: [
+            stylexExtendBabelPlugin.withOptions({
+              unstable_moduleResolution: {
+                type: 'commonJS',
+                rootDir: __dirname
+              },
+              transport: 'props'
+            }),
+            stylexBabelPlugin.withOptions({
+              dev: false,
+              runtimeInjection: false,
+              unstable_moduleResolution: {
+                type: 'commonJS',
+                rootDir: __dirname
+              }
+            })
+          ]
+        });
+        if (res && 'stylex' in res.metadata) {
+          if (
+            Array.isArray(res.metadata.stylex) &&
+            res.metadata.stylex.length > 0
+          ) {
+            return {
+              content: res.code,
+              sourceMap: res?.map,
+              moduleType: 'tsx',
+              ignorePreviousSourceMap: true
+            };
+          }
+        }
+        return param;
+      }
+    }
+  };
+}
+
+export default defineConfig({
+  root: path.join(defaultWd, './src/client'),
+  plugins: [stylex(), '@farmfe/plugin-react', postCSSPlugin(), visualizer()],
+  vitePlugins: [
+    Pages({
+      resolver: 'react',
+      dirs: path.join(defaultWd, './src/client/pages')
+    })
+  ]
+});

js-plugins/visualizer/package.json

@@ -3,7 +3,6 @@
   "version": "1.1.4",
   "main": "./build/cjs/index.cjs",
   "types": "./build/cjs/index.d.ts",
-  "type": "module",
   "exports": {
     ".": {
       "import": "./build/esm/index.mjs",
@@ -14,41 +13,48 @@
     "./package.json": "./package.json"
   },
   "license": "MIT",
-  "dependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
-    "@guolao/vue-monaco-editor": "^1.5.1",
-    "@types/ws": "^8.5.4",
-    "axios": "^1.5.0",
-    "bufferutil": "^4.0.8",
-    "core-js": "^3.30.1",
-    "envinfo": "^7.11.1",
-    "sirv": "^2.0.3",
-    "utf-8-validate": "^6.0.3",
-    "ws": "^8.14.2"
-  },
   "devDependencies": {
     "@farmfe/js-plugin-dts": "workspace:*",
     "@farmfe/js-plugin-less": "workspace:*",
     "@farmfe/js-plugin-postcss": "workspace:*",
+    "less": "^4.2.2",
     "@farmfe/js-plugin-vue": "workspace:*",
-    "@types/envinfo": "^7.8.3",
-    "@types/koa": "^2.13.5",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@farmfe/plugin-react": "workspace:*",
     "autoprefixer": "^10.4.14",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.1",
-    "ant-design-vue": "^4.1.2",
-    "pinia": "^2.1.7",
-    "koa": "^2.13.4",
+    "react":"18",
+    "react-dom":"18",
+    "react-refresh": "0.14.0",
+    "@types/react":"18",
+    "@types/react-dom":"18",
     "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.2"
+    "tailwindcss": "^3.3.2",
+    "vite-bundle-analyzer":"^0.17.0",
+    "squarified": "^0.3.5",
+    "vite-plugin-pages":"^0.32.4",
+    "react-router": "^6.22.3",
+    "react-router-dom": "^6.22.3",
+    "@jridgewell/source-map": "^0.3.6",
+    "@stylexjs/postcss-plugin":"^0.10.1",
+    "@stylexjs/stylex":"^0.10.1",
+    "@stylexjs/babel-plugin":"^0.10.1",
+    "@babel/core": "^7.23.9",
+    "@types/babel__core": "^7.20.5",
+    "@stylex-extend/babel-plugin":"^0.6.0",
+    "@stylex-extend/react":"^0.6.0",
+    "@stylex-extend/core":"^0.6.0",
+    "clsx": "^2.1.1",
+    "foxact":"^0.2.29",
+    "unplugin-icons": "^0.22.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@iconify-json/ph": "^1.1.12"
   },
   "scripts": {
-    "start": "cd src/client && farm start",
+    "start": "farm start --config ./client.config.ts",
     "build": "pnpm build:plugin && cross-env FARM_FORMAT=esm farm build && pnpm build:client",
     "build:plugin": "farm build",
-    "build:client": "cd src/client && farm build",
-    "preview": "cd src/client && farm preview",
+    "build:client": "farm build --config ./client.config.ts",
+    "preview": "farm preview --config ./client.config.ts",
     "prepublishOnly": "npm run build"
   },
   "files": [

js-plugins/visualizer/postcss.config.js

@@ -0,0 +1,44 @@
+const styleXPlugin = require("@stylexjs/babel-plugin");
+const stylexExtendPlugin = require("@stylex-extend/babel-plugin");
+
+module.exports = {
+  plugins: {
+    "@stylexjs/postcss-plugin": {
+      include: [
+        "src/client/pages/**/*.{js,jsx,ts,tsx}",
+        "src/client/themes/**/*.{js,jsx,ts,tsx}",
+        "src/client/components/**/*.{js,jsx,ts,tsx}",
+      ],
+      babelConfig: {
+        parserOpts: {
+          plugins: ["jsx", "typescript"],
+        },
+        plugins: [
+          [
+            stylexExtendPlugin,
+            {
+              unstable_moduleResolution: {
+                type: "commonJS",
+                rootDir: __dirname,
+              },
+              transport: "props",
+            },
+          ],
+          [
+            styleXPlugin,
+            {
+              runtimeInjection: false,
+              dev: false,
+              // Required for CSS variable support
+              unstable_moduleResolution: {
+                type: "commonJS",
+                rootDir: __dirname,
+              },
+            },
+          ],
+        ],
+      },
+    },
+    autoprefixer: {},
+  },
+};

js-plugins/visualizer/src/client/src/api/index.ts → js-plugins/visualizer/src/client/application.tsx

@@ -1,4 +1,17 @@
-import { Resource } from '@farmfe/core';
+/// <reference types="vite-plugin-pages/client-react" />
+import { Suspense } from 'react';
+import { useRoutes } from 'react-router-dom';
+import routes from '~react-pages';
+import './stylex.css';
+import './reset.css'
+
+
+export function App() {
+  return <Suspense fallback={<p>Loading...</p>}>{useRoutes(routes)}</Suspense>;
+}
+
+/**
+ * import { Resource } from '@farmfe/core';
 import { Module } from '@farmfe/core/binding/binding';
 import type { FarmEnvInfo } from '../../../node/utils/envinfo';
 import { http } from '../http';
@@ -24,3 +37,4 @@ export function getResource(id: string): Promise<string> {
 export function getPluginStats(): Promise<string> {
   return http.get('/__record/stats');
 }
+ */

js-plugins/visualizer/src/client/components/button/button.tsx

@@ -0,0 +1,148 @@
+import { inline } from '@stylex-extend/core'
+import * as stylex from '@stylexjs/stylex'
+import { clsx } from 'clsx'
+import React from 'react'
+import { useScale, withScale } from '../../composables'
+
+interface Props {
+  icon?: React.ReactNode
+  auto?: boolean
+  type?: 'default' | 'secondary'
+}
+
+type ButtonProps =
+  & Props
+  & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof Props>
+
+const styles = stylex.create({
+  text: {
+    position: 'relative',
+    zIndex: 1,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textAlign: 'center',
+    lineHeight: 'inherit',
+    top: '-1px'
+  },
+  icon: {
+    position: 'absolute',
+    right: 'auto',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    display: 'flex',
+    justifyContent: 'center',
+    color: '#666',
+    alignItems: 'center',
+    zIndex: 1,
+    ':not(#_)  svg': {
+      background: 'transparent',
+      height: 'calc(var(--button-height) / 2.35)',
+      width: 'calc(var(--button-height) / 2.35)'
+    }
+  }
+})
+
+function getButtonChildrenWithIcon(
+  auto: boolean,
+  icon: React.ReactNode,
+  children: React.ReactNode
+) {
+  if (!icon) { return <div {...stylex.props(styles.text)}>{children}</div> }
+  if (icon && !children) {
+    return (
+      <span
+        {...stylex.props(
+          styles.icon,
+          inline({ position: 'static', transform: 'none' })
+        )}
+      >
+        {icon}
+      </span>
+    )
+  }
+  return (
+    <>
+      <span {...stylex.props(styles.icon)}>{icon}</span>
+      <div {...stylex.props(styles.text)}>{children}</div>
+    </>
+  )
+}
+
+const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const {
+      type = 'default',
+      className: userClassName,
+      style: userStyle,
+      auto = false,
+      icon,
+      children,
+      ...rest
+    } = props
+
+    const { SCALES } = useScale()
+    const { className, style } = stylex.props(
+      inline({
+        boxSizing: 'border-box',
+        borderRadius: '6px',
+        fontWeight: 400,
+        userSelect: 'none',
+        outline: 'none',
+        textTransform: 'capitalize',
+        justifyContent: 'center',
+        textAlign: 'center',
+        whiteSpace: 'nowrap',
+        transition: 'background-color 200ms ease 0s, box-shadow 200ms ease 0ms, border 200ms ease 0ms, color 200ms ease 0ms',
+        position: 'relative',
+        overflow: 'hidden',
+        color: {
+          default: '#666',
+          ':hover': '#000'
+        },
+        backgroundColor: '#fff',
+        border: '1px solid #eaeaea',
+        cursor: 'pointer',
+        width: 'initial',
+        ':hover': {
+          borderColor: '#000'
+        },
+        minWidth: auto ? 'min-content' : SCALES.width(10.5),
+        lineHeight: SCALES.height(2.5),
+        fontSize: SCALES.font(0.875),
+        height: SCALES.height(2.5),
+        padding: `${SCALES.pt(0)} ${auto ? SCALES.pr(1.15) : SCALES.pr(1.375)} ${SCALES.pt(0)} ${
+          auto ? SCALES.pl(1.15) : SCALES.pl(1.375)
+        }`,
+        margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${
+          SCALES.ml(
+            0
+          )
+        }`,
+        '--button-height': SCALES.height(2.5),
+        '--button-icon-padding': SCALES.pl(0.727),
+        ...(auto && { width: 'auto' }),
+        ...(type === 'secondary' && {
+          backgroundColor: '#000',
+          borderColor: '#000',
+          color: '#fff'
+        })
+      })
+    )
+
+    const classes = clsx('button', className, userClassName)
+
+    return (
+      <button
+        ref={ref}
+        className={classes}
+        style={{ ...style, ...userStyle }}
+        {...rest}
+        type="button"
+      >
+        {getButtonChildrenWithIcon(auto, icon, children)}
+      </button>
+    )
+  }
+)
+
+export const Button = withScale(ButtonComponent)

js-plugins/visualizer/src/client/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button';