Squashed commit of the following:

commit 33bc438
Author: kanno <812137533@qq.com>
Date:   Tue May 14 16:25:33 2024 +0800

    chore: make test happy

commit 9295f02
Author: kanno <812137533@qq.com>
Date:   Tue May 14 16:21:48 2024 +0800

    feat(server): setup fullpath

commit 8a2dcb6
Author: kanno <812137533@qq.com>
Date:   Sat May 11 10:31:38 2024 +0800

    chore: bump deps

commit 81b4809
Author: kanno <812137533@qq.com>
Date:   Thu May 9 14:03:04 2024 +0800

    chore: pass ci

commit c2d06aa
Author: kanno <812137533@qq.com>
Date:   Thu May 9 14:00:32 2024 +0800

    chore: update lock

commit 4a161d7
Author: kanno <812137533@qq.com>
Date:   Thu May 9 13:59:14 2024 +0800

    chore: add new workflow

commit 1805e4a
Author: kanno <812137533@qq.com>
Date:   Thu May 9 09:34:45 2024 +0800

    chore: switch swc minify

commit d356f60
Author: kanno <812137533@qq.com>
Date:   Thu May 9 00:14:41 2024 +0800

    chore: update workflow

commit dd4ae58
Author: kanno <812137533@qq.com>
Date:   Wed May 8 23:10:39 2024 +0800

    style: migrate to inline

commit c91ed04
Author: kanno <812137533@qq.com>
Date:   Sun May 5 23:33:56 2024 +0800

    fix: layout

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
   "eslint.experimental.useFlatConfig": true,
-  "typescript.tsdk": "node_modules\\typescript\\lib",
   "[markdown]":{
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"

.yarn/patches/@rollup-plugin-esm-shim-npm-0.1.6-d8e3018c76.patch

@@ -0,0 +1,34 @@
+diff --git a/dist/cjs/index.js b/dist/cjs/index.js
+index abf5597a5fa4f0c0fab637b5259f1474715bbb18..84f0b11ae8c2a45caac5e113230d68385f37835a 100644
+--- a/dist/cjs/index.js
++++ b/dist/cjs/index.js
+@@ -7,9 +7,9 @@ var MagicString = require('magic-string');
+ const CJSyntaxRegex = /__filename|__dirname|require\(|require\.resolve\(/;
+ const ESMShim = `
+ // -- Shims --
+-import cjsUrl from 'node:url';
+-import cjsPath from 'node:path';
+-import cjsModule from 'node:module';
++import cjsUrl from 'url';
++import cjsPath from 'path';
++import cjsModule from 'module';
+ const __filename = cjsUrl.fileURLToPath(import.meta.url);
+ const __dirname = cjsPath.dirname(__filename);
+ const require = cjsModule.createRequire(import.meta.url);
+diff --git a/dist/es/index.js b/dist/es/index.js
+index 05fa7900c116d3ca3c4fe341bb4c2d95a6075ed2..6baeb2d3766d565aee7caea7a97024737f8c97bc 100644
+--- a/dist/es/index.js
++++ b/dist/es/index.js
+@@ -3,9 +3,9 @@ import MagicString from 'magic-string';
+ const CJSyntaxRegex = /__filename|__dirname|require\(|require\.resolve\(/;
+ const ESMShim = `
+ // -- Shims --
+-import cjsUrl from 'node:url';
+-import cjsPath from 'node:path';
+-import cjsModule from 'node:module';
++import cjsUrl from 'url';
++import cjsPath from 'path';
++import cjsModule from 'module';
+ const __filename = cjsUrl.fileURLToPath(import.meta.url);
+ const __dirname = cjsPath.dirname(__filename);
+ const require = cjsModule.createRequire(import.meta.url);

Makefile

@@ -0,0 +1,33 @@
+client-analyze:
+	@echo "Analyzing client code..."
+	@yarn run vite build src/client --config analyze.config.ts
+	awk '{ print }' dist/client/stats.json > src/client/data.json
+
+build-all:cleanup  build-server build-client
+
+cleanup:
+	-rm -rf dist
+
+build-client:
+	@echo "Building client code..."
+	@yarn run vite build src/client
+
+build-server:
+	@echo "Building server code..."
+	@yarn run rollup --config rollup.config.ts --configPlugin swc3
+
+dev-server:
+	@echo "Starting server in development mode..."
+	@yarn run rollup --config rollup.config.ts --configPlugin swc3 --watch
+
+dev-client:
+	@echo "Starting client in development mode..."
+	@yarn run vite src/client
+
+test:
+	@echo "Running tests..."
+	@yarn run test
+
+lint:
+	@echo "Linting code..."
+	@yarn run lint

__tests__/stats/normal/index.ts

@@ -14,5 +14,5 @@ export default createMockStats('normal.js',
     moduleIds: [],
     type: 'chunk'
   }, [
-    { id: 'normal.js', label: 'normal.js', statSize: getByteLen(code), parsedSize: getByteLen(code), mapSize: getByteLen(map) }
+    { filename: 'normal.js', label: 'normal.js', statSize: getByteLen(code), parsedSize: getByteLen(code), mapSize: getByteLen(map) }
   ])

analyze.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig, mergeConfig } from 'vite'
+import { analyzer } from './src/server'
+import conf from './src/client/vite.config'
+
+const c = conf({ command: 'build', mode: 'production' })
+export default mergeConfig(c, defineConfig({
+  plugins: [...c.plugins!, analyzer({ analyzerMode: 'json' })]
+}))

package.json

@@ -28,10 +28,10 @@
   "devDependencies": {
     "@carrotsearch/foamtree": "^3.5.1",
     "@iconify-json/ph": "^1.1.12",
-    "@rollup/plugin-esm-shim": "^0.1.6",
+    "@rollup/plugin-esm-shim": "patch:@rollup/plugin-esm-shim@npm%3A0.1.6#~/.yarn/patches/@rollup-plugin-esm-shim-npm-0.1.6-d8e3018c76.patch",
     "@rollup/plugin-json": "^6.1.0",
-    "@stylex-extend/core": "^0.2.2",
-    "@stylex-extend/react": "^0.2.1",
+    "@stylex-extend/core": "^0.3.1",
+    "@stylex-extend/react": "^0.3.1",
     "@stylexjs/stylex": "^0.5.1",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
@@ -46,16 +46,17 @@
     "eslint": "^8.49.0",
     "eslint-config-kagura": "^2.2.1",
     "foxact": "^0.2.29",
+    "lightningcss": "^1.24.1",
     "preact": "^10.19.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^4.13.0",
     "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-swc3": "^0.11.1",
+    "rollup-plugin-swc3": "^0.11.2",
     "typescript": "^5.2.2",
     "unplugin-icons": "^0.18.5",
     "vite": "^5.2.8",
-    "vite-plugin-stylex-dev": "^0.6.0"
+    "vite-plugin-stylex-dev": "^0.7.3"
   },
   "license": "MIT",
   "author": "kanno",
@@ -114,7 +115,8 @@
     "unbox-primitive": "npm:@nolyfill/unbox-primitive@latest",
     "which-boxed-primitive": "npm:@nolyfill/which-boxed-primitive@latest",
     "which-typed-array": "npm:@nolyfill/which-typed-array@latest",
-    "@types/react": "^18.2.31"
+    "@types/react": "^18.2.31",
+    "@stylex-extend/babel-plugin": "^0.3.1"
   },
   "dependencies": {
     "picocolors": "^1.0.0",

rollup.config.ts

@@ -19,13 +19,16 @@ export default defineConfig([
       { file: 'dist/index.js', format: 'cjs', exports: 'named' }
     ],
     plugins: [
-      json(), shim(),
-      swc(), minify({ mangle: true, module: true, compress: true, sourceMap: true })
+      json(),
+      shim(),
+      swc(),
+      minify({ mangle: true, module: true, compress: true, sourceMap: true })
     ]
   },
   {
     input: 'src/server/index.ts',
     output: { file: 'dist/index.d.ts' },
-    plugins: [dts()] 
+    plugins: [dts()],
+    external
   }
 ])

src/client/application.tsx

@@ -59,7 +59,7 @@ export function App() {
               <Text p font="12px">
                 path:
                 {' '}
-                {tooltipContent.id}
+                {tooltipContent.filename}
               </Text>
             </>
           )}

src/client/components/button/button-drip.tsx

@@ -32,25 +32,6 @@ const expand = stylex.keyframes({
   }
 })
 
-const styles = stylex.create({
-  drip: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0
-  },
-  svg: {
-    position: 'absolute',
-    animationName: expand,
-    animationDuration: '350ms',
-    animationTimingFunction: 'ease-in',
-    animationFillMode: 'forwards',
-    width: '1rem',
-    height: '1rem'
-  }
-})
-
 const ButtonDrip: React.FC<ButtonDrip> = ({
   x,
   y,
@@ -71,8 +52,32 @@ const ButtonDrip: React.FC<ButtonDrip> = ({
   })
 
   return (
-    <div ref={dripRef} {...stylex.props(styles.drip)}>
-      <svg width="20" height="20" viewBox="0 0 20 20" {...stylex.props(styles.svg)} style={{ top, left }}>
+    <div
+      ref={dripRef}
+      stylex={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      }}
+    >
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        stylex={{
+          position: 'absolute',
+          top,
+          left,
+          animationName: expand,
+          animationDuration: '350ms',
+          animationTimingFunction: 'ease-in',
+          animationFillMode: 'forwards',
+          width: '1rem',
+          height: '1rem'
+        }}
+      >
         <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
           <g fill={color}>
             <rect width="100%" height="100%" rx="10" />