[WIP]: Better Analysis tool

.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/src/client/farm.config.ts → js-plugins/visualizer/client.config.ts

@@ -1,10 +1,13 @@
+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 '../server';
+import { visualizer } from './src/server';
+
+const defaultWd = process.cwd();
 
 function stylex() {
   return <JsPlugin>{
@@ -64,11 +67,12 @@ function stylex() {
 }
 
 export default defineConfig({
+  root: path.join(defaultWd, './src/client'),
   plugins: [stylex(), '@farmfe/plugin-react', postCSSPlugin(), visualizer()],
   vitePlugins: [
     Pages({
       resolver: 'react',
-      dirs: 'pages'
+      dirs: path.join(defaultWd, './src/client/pages')
     })
   ]
 });

js-plugins/visualizer/package.json

@@ -41,14 +41,20 @@
     "@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"
+    "@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/src/client/postcss.config.js → js-plugins/visualizer/postcss.config.js

@@ -5,9 +5,9 @@ module.exports = {
   plugins: {
     "@stylexjs/postcss-plugin": {
       include: [
-        "pages/**/*.{js,jsx,ts,tsx}",
-        "themes/**/*.{js,jsx,ts,tsx}",
-        "components/**/*.{js,jsx,ts,tsx}",
+        "src/client/pages/**/*.{js,jsx,ts,tsx}",
+        "src/client/themes/**/*.{js,jsx,ts,tsx}",
+        "src/client/components/**/*.{js,jsx,ts,tsx}",
       ],
       babelConfig: {
         parserOpts: {

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';

js-plugins/visualizer/src/client/components/checkbox/checkbox-group.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { useScale, withScale } from '../../composables'
+import { CheckboxProvider } from './context'
+
+interface Props {
+  value: string[]
+  disabled?: boolean
+  onChange?: (values: string[]) => void
+}
+
+export type CheckboxGroupProps = Props & Omit<React.HTMLAttributes<unknown>, keyof Props>
+
+const defaultValue: string[] = []
+
+function CheckboxGroupComponent(props: React.PropsWithChildren<CheckboxGroupProps>) {
+  const { children, value = defaultValue, disabled = false, onChange, ...rest } = props
+  const { SCALES } = useScale()
+  const [selfValue, setSelfValue] = useState<string[]>(value)
+
+  const updateState = useCallback((val: string, checked: boolean) => {
+    const removed = selfValue.filter((v) => v !== val)
+    const next = checked ? [...removed, val] : removed
+    setSelfValue(next)
+    onChange?.(next)
+  }, [selfValue, onChange])
+
+  const contextValue = useMemo(() => {
+    return {
+      disabledAll: disabled,
+      values: value,
+      inGroup: true,
+      updateState
+    }
+  }, [disabled, value, updateState])
+
+  return (
+    <CheckboxProvider value={contextValue}>
+      <div
+        stylex={{
+          width: SCALES.width(1, 'auto'),
+          height: SCALES.height(1, 'auto'),
+          padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+          margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+          ':not(#_) label': {
+            marginRight: `calc(${SCALES.font(1)} * 2)`,
+            '--checkbox-size': SCALES.font(1)
+          },
+          ':not(#_) label:last-of-type': {
+            marginRight: 0
+          }
+        }}
+        {...rest}
+      >
+        {children}
+      </div>
+    </CheckboxProvider>
+  )
+}
+
+export const CheckboxGroup = withScale(CheckboxGroupComponent)