sdk add data process

nonzzz · Feb 10, 2025 · f661b59 · f661b59
1 parent 526f32e
commit f661b59
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 9 deletions.
diff --git a/examples/sdk/index.html b/examples/sdk/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+    window.analyzeModule = []
+      window.defaultSizes = 'parsed'
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- <script type="module" src="./main.js"></script> -->
+    <script type="module" src="./react.jsx"></script>
+  </body>
+</html>
diff --git a/examples/sdk/main.js b/examples/sdk/main.js
@@ -0,0 +1,12 @@
+import { AnalyzerClient } from 'vite-bundle-analyzer/sdk/browser'
+import 'vite-bundle-analyzer/sdk/browser.css'
+import data from '../../src/client/data.json' with { type: 'json' }
+
+const client = new AnalyzerClient()
+
+client.render('#app')
+
+client.setOptions({
+  sizes: 'statSize',
+  analyzeModule: data
+})
diff --git a/examples/sdk/package.json b/examples/sdk/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "sdk-example",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vite-bundle-analyzer": "workspace: *"
+  }
+}
diff --git a/examples/sdk/react.jsx b/examples/sdk/react.jsx
@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react'
+import DOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
+import { AnalyzerClient } from 'vite-bundle-analyzer/sdk/browser'
+import 'vite-bundle-analyzer/sdk/browser.css'
+import data from '../../src/client/data.json' with { type: 'json' }
+
+const element = document.querySelector('#app')
+
+export function App() {
+  const client = new AnalyzerClient()
+  useEffect(() => {
+    client.render('#app')
+    client.setOptions({
+      sizes: 'statSize',
+      analyzeModule: data
+    })
+  }, [])
+
+  return <div />
+}
+
+ReactDOM.createRoot(element).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/examples/sdk/vite.config.ts b/examples/sdk/vite.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/client/application.tsx b/src/client/application.tsx
@@ -33,7 +33,7 @@ function ModuleSize(props: ModuleSizeProps) {
 export function App() {
   const treeMapRef = useRef<TreemapComponentInstance>()
   const [tooltipVisible, setTooltipVisible] = useState<boolean>(false)
-  const [tooltipContent, setTooltipContent] = useState<NativeModule | null>(null)
+  const [tooltipContent, setTooltipContent] = useState<NativeModule & { filename: string, label: string } | null>(null)
 
   const contexts = [
     <ApplicationProvider key="app" />,

diff --git a/src/client/context.ts b/src/client/context.ts
@@ -29,8 +29,8 @@ export const SIZE_RECORD: Record<typeof window['defaultSizes'], Sizes> = {
 }
 
 const defaultApplicationContext = <ApplicationConfig> {
-  sizes: SIZE_RECORD[window.defaultSizes],
-  analyzeModule: window.analyzeModule,
+  sizes: SIZE_RECORD[window.defaultSizes] || 'statSize',
+  analyzeModule: window.analyzeModule || [],
   scence: new Set(),
   ui: { Main: null, SideBar: null },
   updateScence: noop

diff --git a/src/client/receiver.tsx b/src/client/receiver.tsx
@@ -1,11 +1,12 @@
 import { useEffect } from 'react'
-import { useUpdateAnalyzeModule, useUpdateUI } from './context'
-import type { SendFilterMessage, SendUIMessage } from './special'
+import { useToggleSize, useUpdateAnalyzeModule, useUpdateUI } from './context'
+import type { SendFilterMessage, SendUIMessage, UpdateOptionsMessage } from './special'
 import { createMagicEvent } from './special'
 
 export function Receiver() {
   const updateUI = useUpdateUI()
   const updateAnalyzeModule = useUpdateAnalyzeModule()
+  const toggleSize = useToggleSize()
   useEffect(() => {
     const handler = (evt: CustomEvent<SendUIMessage>) => {
       if (evt.detail.Component) {
@@ -19,10 +20,21 @@ export function Receiver() {
       }
     }
 
+    const updateOptionsHandler = (evt: CustomEvent<UpdateOptionsMessage>) => {
+      if (evt.detail.sizes) {
+        toggleSize(evt.detail.sizes)
+      }
+      if (evt.detail.analyzeModule) {
+        updateAnalyzeModule(evt.detail.analyzeModule)
+      }
+    }
+
     // @ts-expect-error custom-event
     window.addEventListener('send:ui', handler)
     // @ts-expect-error custom-event
     window.addEventListener('send:filter', filterHandler)
+    // @ts-expect-error custom-event
+    window.addEventListener('update:options', updateOptionsHandler)
 
     const evt = createMagicEvent('client:ready', {})
     window.dispatchEvent(evt)
@@ -31,8 +43,10 @@ export function Receiver() {
       window.removeEventListener('send:ui', handler)
       // @ts-expect-error custom-event
       window.removeEventListener('send:filter', filterHandler)
+      // @ts-expect-error custom-event
+      window.removeEventListener('update:options', updateOptionsHandler)
     }
-  }, [updateUI, updateAnalyzeModule])
+  }, [updateUI, updateAnalyzeModule, toggleSize])
 
   return <div />
 }
diff --git a/src/client/special/index.ts b/src/client/special/index.ts
@@ -1,6 +1,6 @@
-import type { Module } from '../interface'
+import type { Module, Sizes } from '../interface'
 
-export const ALLOWED_MAGIC_TYPE = ['graph:click', 'client:ready', 'send:ui', 'send:filter'] as const
+export const ALLOWED_MAGIC_TYPE = ['graph:click', 'client:ready', 'send:ui', 'send:filter', 'update:options'] as const
 
 export type AllowedMagicType = typeof ALLOWED_MAGIC_TYPE[number]
 
@@ -20,3 +20,8 @@ export interface SendUIMessage {
 export interface SendFilterMessage {
   analyzeModule: Module[]
 }
+
+export interface UpdateOptionsMessage {
+  sizes: Sizes
+  analyzeModule: Module[]
+}
diff --git a/src/sdk/browser.tsx b/src/sdk/browser.tsx
@@ -1,10 +1,25 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { App } from '../client/application'
+import type { Module, Sizes } from '../client/interface'
+
+export interface ClientOptions {
+  sizes: Sizes
+  analyzeModule: Module[]
+}
 
 // eslint-disable-next-line react-prefer-function-component/react-prefer-function-component
 export class AnalyzerClient {
   private container?: Element
+  private flag: (() => void) | false
+  private clientOptions: ClientOptions
+  constructor() {
+    this.flag = false
+    this.clientOptions = {
+      sizes: 'statSize',
+      analyzeModule: []
+    }
+  }
   render(el?: string | Element) {
     let container: Element | null
     if (el) {
@@ -27,9 +42,29 @@ export class AnalyzerClient {
     )
   }
 
+  private syncModuleOptions() {
+    const evt = new CustomEvent('update:options', { detail: this.clientOptions })
+    window.dispatchEvent(evt)
+  }
+
+  setOptions(opts: ClientOptions) {
+    this.container = undefined
+    this.clientOptions = { ...this.clientOptions, ...opts }
+    if (!this.flag) {
+      this.flag = () => this.syncModuleOptions()
+      window.addEventListener('client:ready', this.flag)
+    } else {
+      this.syncModuleOptions()
+    }
+  }
+
   destroy() {
     if (this.container) {
       ReactDOM.createRoot(this.container).unmount()
+      if (this.flag) {
+        window.removeEventListener('client:ready', this.flag)
+        this.flag = false
+      }
     }
   }
 }
diff --git a/src/sdk/vite.config.mts b/src/sdk/vite.config.mts
@@ -21,7 +21,8 @@ export default defineConfig({
       formats: ['es', 'cjs'],
       fileName: (format) => `browser.${format === 'es' ? 'mjs' : 'js'}`,
       cssFileName: 'browser'
-    }
+    },
+    minify: false
   },
   resolve: {
     alias: [