one/dist/cjs/vite/plugins/clientTreeShakePlugin.test.cjs

One is a new React Framework that makes Vite serve both native and web.

var import_vitest = require("vitest");
var import_clientTreeShakePlugin = require("./clientTreeShakePlugin.cjs");
(0, import_vitest.describe)("clientTreeShakePlugin", () => {
  (0, import_vitest.describe)("transformTreeShakeClient", () => {
    (0, import_vitest.it)("should remove loader export and its imports", async () => {
      const code = `
import { serverOnlyModule } from 'server-only-pkg'
import { Text } from 'react-native'
import { useLoader } from 'one'

export function loader() {
  return serverOnlyModule()
}

export default function Page() {
  const data = useLoader(loader)
  return <Text>{data}</Text>
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/app/index.tsx");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).not.toContain("server-only-pkg");
      (0, import_vitest.expect)(result.code).toContain("react-native");
      (0, import_vitest.expect)(result.code).toContain("one");
    });
    (0, import_vitest.it)("should remove loader export with dynamic import", async () => {
      const code = `
import { Text } from 'react-native'
import { useLoader } from 'one'

export async function loader() {
  const { serverFn } = await import('server-only-pkg')
  return serverFn()
}

export default function Page() {
  const data = useLoader(loader)
  return <Text>{data}</Text>
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/app/index.tsx");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).not.toContain("server-only-pkg");
    });
    (0, import_vitest.it)("should remove loader with const arrow function export", async () => {
      const code = `
import { serverOnlyModule } from 'server-only-pkg'
import { Text } from 'react-native'
import { useLoader } from 'one'

export const loader = async () => {
  return serverOnlyModule()
}

export default function Page() {
  const data = useLoader(loader)
  return <Text>{data}</Text>
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/app/index.tsx");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).not.toContain("server-only-pkg");
    });
    (0, import_vitest.it)("should handle multiple imports where only some are used in loader", async () => {
      const code = `
import { serverFn } from 'server-only-pkg'
import { sharedUtil } from 'shared-pkg'
import { Text } from 'react-native'
import { useLoader } from 'one'

export function loader() {
  return serverFn()
}

export default function Page() {
  const data = useLoader(loader)
  return <Text>{sharedUtil(data)}</Text>
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/app/index.tsx");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).not.toContain("server-only-pkg");
      (0, import_vitest.expect)(result.code).toContain("shared-pkg");
    });
    (0, import_vitest.it)("should remove generateStaticParams and its imports", async () => {
      const code = `
import { getRoutes } from 'server-only-pkg'
import { Text } from 'react-native'

export function generateStaticParams() {
  return getRoutes()
}

export default function Page() {
  return <Text>Hello</Text>
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/app/[slug].tsx");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).not.toContain("server-only-pkg");
    });
    (0, import_vitest.it)("should not transform files without loader or generateStaticParams", async () => {
      const code = `
import { Text } from 'react-native'

export default function Page() {
  return <Text>Hello</Text>
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/app/index.tsx");
      (0, import_vitest.expect)(result).toBeUndefined();
    });
    (0, import_vitest.it)("should embed routeId in loader stub when root is provided", async () => {
      const code = `
import { serverOnlyModule } from 'server-only-pkg'
import { useLoader } from 'one'

export async function loader() {
  return serverOnlyModule()
}

export default function Layout() {
  const data = useLoader(loader)
  return data
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/project/app/_layout.tsx", "/project");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).toContain('export function loader() {return "./_layout.tsx"}');
      (0, import_vitest.expect)(result.code).not.toContain("__vxrn__loader__");
    });
    (0, import_vitest.it)("should embed routeId with render mode suffix in loader stub", async () => {
      const code = `
import { serverOnlyModule } from 'server-only-pkg'
import { useLoader } from 'one'

export async function loader() {
  return serverOnlyModule()
}

export default function Layout() {
  const data = useLoader(loader)
  return data
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/project/app/user+ssr.tsx", "/project");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).toContain('export function loader() {return "./user+ssr.tsx"}');
    });
    (0, import_vitest.it)("should fall back to __vxrn__loader__ stub when no root provided", async () => {
      const code = `
import { serverOnlyModule } from 'server-only-pkg'
import { useLoader } from 'one'

export async function loader() {
  return serverOnlyModule()
}

export default function Page() {
  const data = useLoader(loader)
  return data
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/app/index.tsx");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).toContain("__vxrn__loader__");
    });
    (0, import_vitest.it)("should not transform route file when loader is imported (no inline declaration)", async () => {
      const code = `
import { loader } from './loaders/my-loader'
import { useLoader } from 'one'

export { loader }

export default function Layout() {
  const data = useLoader(loader)
  return data
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/project/app/_layout.tsx", "/project");
      (0, import_vitest.expect)(result).toBeUndefined();
    });
    (0, import_vitest.it)("should tree-shake server imports from source file where loader is defined", async () => {
      const sourceCode = `
import { db } from 'server-only-db'

export async function loader() {
  return db.query('SELECT * FROM users')
}

export function helperUsedByClient() {
  return 'hello'
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(sourceCode, "/project/app/loaders/my-loader.ts", "/project");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).not.toContain("server-only-db");
      (0, import_vitest.expect)(result.code).toContain("helperUsedByClient");
      (0, import_vitest.expect)(result.code).toContain('export function loader() {return "./loaders/my-loader.ts"}');
    });
    (0, import_vitest.it)("should not transform re-export from source syntax", async () => {
      const code = `
export { loader } from './loaders/shared-loader'
import { useLoader } from 'one'

export default function Page() {
  return 'hello'
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/project/app/page.tsx", "/project");
      (0, import_vitest.expect)(result).toBeUndefined();
    });
    (0, import_vitest.it)("should preserve type-only imports during tree shaking", async () => {
      const code = `
import type { SomeType } from 'types-pkg'
import { serverFn } from 'server-only-pkg'
import { Text } from 'react-native'
import { useLoader } from 'one'

export function loader(): SomeType {
  return serverFn()
}

export default function Page() {
  const data = useLoader(loader)
  return <Text>{data}</Text>
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/app/index.tsx");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).toContain("types-pkg");
      (0, import_vitest.expect)(result.code).not.toContain("server-only-pkg");
    });
    (0, import_vitest.it)("should preserve type imports even when used only in loader", async () => {
      const code = `
import type { APIGuildMember } from '@discordjs/core'
import { getClient } from 'discord-client'
import { Text } from 'react-native'
import { useLoader } from 'one'

export function loader(): APIGuildMember {
  return getClient()
}

export default function Page() {
  const data = useLoader(loader)
  return <Text>{JSON.stringify(data)}</Text>
}
`;
      const result = await (0, import_clientTreeShakePlugin.transformTreeShakeClient)(code, "/app/index.tsx");
      (0, import_vitest.expect)(result).toBeDefined();
      (0, import_vitest.expect)(result.code).toContain("@discordjs/core");
      (0, import_vitest.expect)(result.code).not.toContain("discord-client");
    });
  });
});