Shrink bundle size (#1653)

* shrink bundle size:
- use `oxc-parser` for AST parsing
- remove previous AST related packages
- remove unused packages
- update some packages

* add tests for `compound-components` transformer

* use oxc-parser types

* infer types

* move `removeReactImport` to it's own file, add tests

* dedupe tests

* enhance `addToConfig` to inline/multiline detection and indentation

* infer types

Author: SutuSebastian

bun.lock

@@ -267,17 +267,17 @@
     "@floating-ui/core": "1.7.3",
     "@floating-ui/react": "0.27.16",
     "@iarna/toml": "2.2.5",
-    "@typescript-eslint/typescript-estree": "8.46.2",
     "chokidar": "4.0.3",
     "classnames": "2.5.1",
     "comment-json": "4.4.1",
     "debounce": "2.2.0",
     "deepmerge-ts": "7.1.5",
     "klona": "2.0.6",
+    "magic-string": "0.30.21",
+    "oxc-parser": "0.112.0",
     "package-manager-detector": "1.5.0",
-    "recast": "0.23.11",
-    "tailwind-merge-v2": "npm:[email protected]",
-    "tailwind-merge-v3": "npm:[email protected]"
+    "tailwind-merge@2": "npm:[email protected]",
+    "tailwind-merge@3": "npm:[email protected]"
   },
   "devDependencies": {
     "@farmfe/core": "1.7.11",
@@ -295,19 +295,15 @@
     "@typescript-eslint/parser": "8.46.2",
     "@vitejs/plugin-react": "4.3.4",
     "@vitest/coverage-v8": "2.1.8",
-    "acorn": "8.15.0",
-    "ast-types": "0.14.2",
     "autoprefixer": "10.4.24",
     "esbuild": "0.25.11",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-vitest": "0.5.4",
-    "estree-walker": "3.0.3",
     "jsdom": "25.0.1",
-    "minimatch": "10.0.3",
     "next": "16.0.7",
     "react-icons": "5.5.0",
-    "rolldown": "1.0.0-beta.45",
-    "rollup": "4.52.5",
+    "rolldown": "1.0.0-rc.3",
+    "rollup": "4.57.1",
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-use-client": "1.4.0",
     "typescript": "5.6.3",

packages/ui/package.json

@@ -12,7 +12,6 @@ entries = entries
   .sort();
 
 const external = [
-  "ast-types",
   "child_process",
   "fs/promises",
   "klona/json",

packages/ui/rollup.config.js

@@ -61,21 +61,101 @@ describe("extractClassList", () => {
     const result = await extractClassList(content);
     expect(result).toEqual(["btn-primary", "card-default"]);
   });
+
+  it("should handle TypeScript type annotations", async () => {
+    const content = `
+      const theme: ButtonTheme = createTheme({
+        base: "flex items-center",
+        color: {
+          primary: "bg-blue-500 text-white"
+        }
+      });
+    `;
+
+    const result = await extractClassList(content);
+    expect(result).toEqual(["bg-blue-500", "flex", "items-center", "text-white"]);
+  });
+
+  it("should handle TypeScript as const assertion", async () => {
+    const content = `
+      const theme = createTheme({
+        button: "rounded-lg px-4 py-2"
+      } as const);
+    `;
+
+    const result = await extractClassList(content);
+    expect(result).toEqual(["px-4", "py-2", "rounded-lg"]);
+  });
+
+  it("should handle TypeScript satisfies operator", async () => {
+    const content = `
+      const theme = createTheme({
+        card: "shadow-lg border rounded-xl"
+      }) satisfies CardTheme;
+    `;
+
+    const result = await extractClassList(content);
+    expect(result).toEqual(["border", "rounded-xl", "shadow-lg"]);
+  });
+
+  it("should handle TypeScript generic type parameter", async () => {
+    const content = `
+      const theme = createTheme<ButtonTheme>({
+        base: "inline-flex justify-center",
+        size: {
+          sm: "text-sm px-3",
+          lg: "text-lg px-6"
+        }
+      });
+    `;
+
+    const result = await extractClassList(content);
+    expect(result).toEqual(["inline-flex", "justify-center", "px-3", "px-6", "text-lg", "text-sm"]);
+  });
+
+  it("should handle nested TypeScript objects with type annotations", async () => {
+    const content = `
+      interface Theme {
+        root: { base: string };
+      }
+      
+      const buttonTheme: Theme = createTheme({
+        root: {
+          base: "font-medium focus:ring-4"
+        }
+      });
+    `;
+
+    const result = await extractClassList(content);
+    expect(result).toEqual(["focus:ring-4", "font-medium"]);
+  });
+
+  it("should handle export with type annotation", async () => {
+    const content = `
+      export const accordionTheme: AccordionTheme = createTheme({
+        root: "divide-y divide-gray-200",
+        content: "p-5"
+      });
+    `;
+
+    const result = await extractClassList(content);
+    expect(result).toEqual(["divide-gray-200", "divide-y", "p-5"]);
+  });
 });
 
 describe("extractDependencyList", () => {
   it("should extract named imports", async () => {
     const content = `
-      import { Button, Card } from '@flowbite/react';
+      import { Button, Card } from 'flowbite-react';
     `;
     const result = await extractDependencyList(content);
     expect(result).toEqual(["Button", "Card"]);
   });
 
   it("should handle multiple import statements", async () => {
     const content = `
-      import { Button } from '@flowbite/react';
-      import { Modal, Table } from '@flowbite/react';
+      import { Button } from 'flowbite-react';
+      import { Modal, Table } from 'flowbite-react';
     `;
     const result = await extractDependencyList(content);
     expect(result).toEqual(["Button", "Modal", "Table"]);
@@ -88,17 +168,83 @@ describe("extractDependencyList", () => {
 
   it("should ignore default imports", async () => {
     const content = `
-        import Default, { Named } from '@flowbite/react';
+        import Default, { Named } from 'flowbite-react';
       `;
     const result = await extractDependencyList(content);
     expect(result).toEqual(["Named"]);
   });
 
   it("should sort imports alphabetically", async () => {
     const content = `
-        import { Zebra, Beta, Alpha } from '@flowbite/react';
+        import { Zebra, Beta, Alpha } from 'flowbite-react';
       `;
     const result = await extractDependencyList(content);
     expect(result).toEqual(["Alpha", "Beta", "Zebra"]);
   });
+
+  it("should omit type-only import declarations", async () => {
+    const content = `
+      import { Button } from 'flowbite-react';
+      import type { CardTheme } from 'flowbite-react';
+    `;
+    const result = await extractDependencyList(content);
+    expect(result).toEqual(["Button"]);
+  });
+
+  it("should omit inline type imports", async () => {
+    const content = `
+      import { type ModalProps, Modal, type ModalTheme } from 'flowbite-react';
+    `;
+    const result = await extractDependencyList(content);
+    expect(result).toEqual(["Modal"]);
+  });
+
+  it("should omit mixed type imports", async () => {
+    const content = `
+      import { Button, type ButtonProps } from 'flowbite-react';
+      import type { CardTheme } from 'flowbite-react';
+    `;
+    const result = await extractDependencyList(content);
+    expect(result).toEqual(["Button"]);
+  });
+
+  it("should handle aliased imports", async () => {
+    const content = `
+      import { Button as FlowbiteButton, Card as FlowbiteCard } from 'flowbite-react';
+    `;
+    const result = await extractDependencyList(content);
+    expect(result).toEqual(["Button", "Card"]);
+  });
+
+  it("should handle mixed default, named, and type imports", async () => {
+    const content = `
+      import React, { useState, type FC } from 'react';
+      import { Accordion, AccordionPanel } from 'flowbite-react';
+    `;
+    const result = await extractDependencyList(content);
+    expect(result).toEqual(["Accordion", "AccordionPanel", "useState"]);
+  });
+
+  it("should handle namespace imports", async () => {
+    const content = `
+      import * as Flowbite from 'flowbite-react';
+      import { Table } from 'flowbite-react';
+    `;
+    const result = await extractDependencyList(content);
+    expect(result).toEqual(["Table"]);
+  });
+
+  it("should handle TSX component file with imports", async () => {
+    const content = `
+      import type { FC, ReactNode } from 'react';
+      import { Button, Card, Modal } from 'flowbite-react';
+      import { theme } from './theme';
+
+      export const MyComponent: FC<{ children: ReactNode }> = ({ children }) => {
+        return <Card><Button>{children}</Button></Card>;
+      };
+    `;
+    const result = await extractDependencyList(content);
+    expect(result).toEqual(["Button", "Card", "Modal", "theme"]);
+  });
 });

packages/ui/scripts/generate-metadata.test.ts

@@ -1,6 +1,5 @@
-import { parse } from "acorn";
 import { Glob } from "bun";
-import { walk, type Node } from "estree-walker";
+import { parseSync, Visitor } from "oxc-parser";
 import prettier from "prettier";
 
 const outputDir = "src/metadata";
@@ -86,39 +85,35 @@ async function generateClassList(): Promise<{
  */
 export async function extractClassList(content: string): Promise<string[]> {
   const classList = new Set<string>();
-  const transpiler = new Bun.Transpiler({
-    loader: "ts",
-  });
-  const transpiledContent = transpiler.transformSync(content);
-  const ast = parse(transpiledContent, {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  });
+  const result = parseSync("theme.ts", content);
+
+  if (result.errors.length > 0) {
+    return [];
+  }
+
   let isInsideCreateTheme = false;
 
-  walk(ast as Node, {
-    enter(node) {
-      if (isCreateThemeNode(node)) {
+  const visitor = new Visitor({
+    CallExpression(node) {
+      if (node.callee.type === "Identifier" && node.callee.name === "createTheme") {
         isInsideCreateTheme = true;
       }
-      if (isInsideCreateTheme) {
-        if (node.type === "Literal" && typeof node.value === "string") {
-          for (const className of node.value.split(/\s+/)) {
-            if (className) classList.add(className);
-          }
-        }
-      }
     },
-    leave(node) {
-      if (isCreateThemeNode(node)) {
+    "CallExpression:exit"(node) {
+      if (node.callee.type === "Identifier" && node.callee.name === "createTheme") {
         isInsideCreateTheme = false;
       }
     },
+    Literal(node) {
+      if (isInsideCreateTheme && node.type === "Literal" && typeof node.value === "string") {
+        for (const className of node.value.split(/\s+/)) {
+          if (className) classList.add(className);
+        }
+      }
+    },
   });
 
-  function isCreateThemeNode(node: Node) {
-    return node.type === "CallExpression" && "name" in node.callee && node.callee.name === "createTheme";
-  }
+  visitor.visit(result.program);
 
   return [...classList].sort();
 }
@@ -162,36 +157,40 @@ async function generateDependencyList(): Promise<void> {
 
 /**
  * Extracts and sorts a list of imported component names from TypeScript/TSX content.
- * The function transpiles the content, parses it into an AST, and walks through import declarations
- * to collect component names.
+ * The function parses the content into an AST and walks through import declarations
+ * to collect component names. Type-only imports are excluded.
  *
  * @param content - The TypeScript/TSX source code content to analyze
  * @returns {Promise<string[]>} A sorted array of unique component names that are imported in the source code
  * @example
  * const content = `
  *   import { Button, Card } from 'some-library';
- *   import { Table } from 'other-library';
+ *   import type { ButtonProps } from 'some-library';
  * `;
  * const dependencies = await extractDependencyList(content);
- * // returns ['Button', 'Card', 'Table']
+ * // returns ['Button', 'Card'] (type imports are excluded)
  */
 export async function extractDependencyList(content: string): Promise<string[]> {
   const componentImports = new Set<string>();
-  const transpiler = new Bun.Transpiler({
-    loader: "tsx",
-  });
-  const transpiledContent = transpiler.transformSync(content);
-  const ast = parse(transpiledContent, {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  });
+  const result = parseSync("component.tsx", content);
+
+  if (result.errors.length > 0) {
+    return [];
+  }
+
+  const visitor = new Visitor({
+    ImportDeclaration(node) {
+      if (node.importKind === "type") {
+        return;
+      }
 
-  walk(ast as Node, {
-    enter(node) {
-      if (node.type === "ImportDeclaration") {
-        if ("specifiers" in node && Array.isArray(node.specifiers)) {
-          for (const specifier of node.specifiers) {
-            if ("imported" in specifier && "name" in specifier.imported) {
+      if (Array.isArray(node.specifiers)) {
+        for (const specifier of node.specifiers) {
+          if (specifier.type === "ImportSpecifier") {
+            if (specifier.importKind === "type") {
+              continue;
+            }
+            if (specifier.imported.type === "Identifier") {
               componentImports.add(specifier.imported.name);
             }
           }
@@ -200,6 +199,8 @@ export async function extractDependencyList(content: string): Promise<string[]>
     },
   });
 
+  visitor.visit(result.program);
+
   return [...componentImports].sort();
 }