ronantakizawa/codereview-bench huggingface dataset:
Repository: vitejs/vite
File: packages/create-vite/src/index.ts (TypeScript)

Code before:
      },
      {
        name: 'custom-vike-solid',
        display: 'Vike ↗',
        color: cyan,
        customCommand: 'npm create -- vike@latest --solid TARGET_DIR',
      },
    ],
  },
  {
    name: 'ember',
    display: 'Ember',
    color: redBright,
    variants: [
      {
        name: 'ember-app',
        display: 'Production-ready App ↗',
        color: redBright,
        customCommand: 'npx ember-cli@latest new TARGET_DIR',
      },
      {
        name: 'ember-app-ts',
        display: 'Production-ready App (TypeScript)',
        color: blueBright,
        customCommand: 'npx ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-library',
        display: 'Production and OSS ready Library',
        color: redBright,
        customCommand:
          'npx ember-cli@latest addon TARGET_DIR --blueprint @ember/addon-blueprint --pnpm',
      },
      {
        name: 'ember-library-ts',
        display: 'Production and OSS ready Library (TypeScript)',
        color: blueBright,
        customCommand:
          'npx ember-cli@latest addon TARGET_DIR --blueprint @ember/addon-blueprint --pnpm --typescript',
      },
    ],
  },
  {
    name: 'qwik',
    display: 'Qwik',
    color: blueBright,
    variants: [
      {
        name: 'qwik-ts',
        display: 'TypeScript',
        color: blueBright,

Review comment (suggestion):
```suggestion
      {
        name: 'ember-app-ts',
        display: 'TypeScript ↗',
        color: blueBright,
        customCommand: 'npx ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-app',
        display: 'JavaScript ↗',
        color: redBright,
        customCommand: 'npx ember-cli@latest new TARGET_DIR',
      },
```
To align with other templates, we prefer to keep the name simple. (also moved TS before JS and added ` ↗` to align with others).


Code after:
      },
      {
        name: 'custom-vike-solid',
        display: 'Vike ↗',
        color: cyan,
        customCommand: 'npm create -- vike@latest --solid TARGET_DIR',
      },
    ],
  },
  {
    name: 'ember',
    display: 'Ember',
    color: redBright,
    variants: [
      {
        name: 'ember-app-ts',
        display: 'TypeScript ↗',
        color: blueBright,
        customCommand:
          'npm exec -- ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-app',
        display: 'JavaScript ↗',
        color: redBright,
        customCommand: 'npm exec -- ember-cli@latest new TARGET_DIR',
      },
    ],
  },
  {
    name: 'qwik',
    display: 'Qwik',
    color: blueBright,
    variants: [
      {
        name: 'qwik-ts',
        display: 'TypeScript',
        color: blueBright,
      },
      {
        name: 'qwik',
        display: 'JavaScript',
        color: yellow,
      },
      {
        name: 'custom-qwik-city',
        display: 'QwikCity ↗',
        color: blueBright,
        customCommand: 'npm create qwik@latest basic TARGET_DIR',
      },
    ],
Repository: vitejs/vite
File: packages/create-vite/src/index.ts (TypeScript)

Code before:
      {
        name: 'custom-vike-solid',
        display: 'Vike ↗',
        color: cyan,
        customCommand: 'npm create -- vike@latest --solid TARGET_DIR',
      },
    ],
  },
  {
    name: 'ember',
    display: 'Ember',
    color: redBright,
    variants: [
      {
        name: 'ember-app',
        display: 'Production-ready App ↗',
        color: redBright,
        customCommand: 'npx ember-cli@latest new TARGET_DIR',
      },
      {
        name: 'ember-app-ts',
        display: 'Production-ready App (TypeScript)',
        color: blueBright,
        customCommand: 'npx ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-library',
        display: 'Production and OSS ready Library',
        color: redBright,
        customCommand:
          'npx ember-cli@latest addon TARGET_DIR --blueprint @ember/addon-blueprint --pnpm',
      },
      {
        name: 'ember-library-ts',
        display: 'Production and OSS ready Library (TypeScript)',
        color: blueBright,
        customCommand:
          'npx ember-cli@latest addon TARGET_DIR --blueprint @ember/addon-blueprint --pnpm --typescript',
      },
    ],
  },
  {
    name: 'qwik',
    display: 'Qwik',
    color: blueBright,
    variants: [
      {
        name: 'qwik-ts',
        display: 'TypeScript',
        color: blueBright,
      },

Review comment (suggestion):
```suggestion
```
We think we don't need library templates here as we don't have it in other categories.

Code after:
      {
        name: 'custom-vike-solid',
        display: 'Vike ↗',
        color: cyan,
        customCommand: 'npm create -- vike@latest --solid TARGET_DIR',
      },
    ],
  },
  {
    name: 'ember',
    display: 'Ember',
    color: redBright,
    variants: [
      {
        name: 'ember-app-ts',
        display: 'TypeScript ↗',
        color: blueBright,
        customCommand:
          'npm exec -- ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-app',
        display: 'JavaScript ↗',
        color: redBright,
        customCommand: 'npm exec -- ember-cli@latest new TARGET_DIR',
      },
    ],
  },
  {
    name: 'qwik',
    display: 'Qwik',
    color: blueBright,
    variants: [
      {
        name: 'qwik-ts',
        display: 'TypeScript',
        color: blueBright,
      },
      {
        name: 'qwik',
        display: 'JavaScript',
        color: yellow,
      },
      {
        name: 'custom-qwik-city',
        display: 'QwikCity ↗',
        color: blueBright,
        customCommand: 'npm create qwik@latest basic TARGET_DIR',
      },
    ],
  },
Repository: vitejs/vite
File: packages/create-vite/src/index.ts (TypeScript)

Code before:
          'npm create -- tsrouter-app@latest TARGET_DIR --framework Solid --interactive',
      },
      {
        name: 'custom-vike-solid',
        display: 'Vike ↗',
        color: cyan,
        customCommand: 'npm create -- vike@latest --solid TARGET_DIR',
      },
    ],
  },
  {
    name: 'ember',
    display: 'Ember',
    color: redBright,
    variants: [
      {
        name: 'ember-app-ts',
        display: 'TypeScript ↗',
        color: blueBright,
        customCommand: 'npx ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-app',
        display: 'JavaScript ↗',
        color: redBright,
        customCommand: 'npx ember-cli@latest new TARGET_DIR',
      },
    ],
  },
  {
    name: 'qwik',
    display: 'Qwik',
    color: blueBright,
    variants: [
      {
        name: 'qwik-ts',
        display: 'TypeScript',
        color: blueBright,
      },
      {
        name: 'qwik',
        display: 'JavaScript',
        color: yellow,
      },
      {
        name: 'custom-qwik-city',
        display: 'QwikCity ↗',
        color: blueBright,
        customCommand: 'npm create qwik@latest basic TARGET_DIR',
      },
    ],

Review comment (suggestion):
```suggestion
        customCommand: 'npm exec -- ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-app',
        display: 'JavaScript ↗',
        color: redBright,
        customCommand: 'npm exec -- ember-cli@latest new TARGET_DIR',
```
Just noticed that we should use `npm exec` instead of `npx` here because of https://github.com/vitejs/vite/blob/18fb620adcc88906848ab56528ad6a72bedd51e2/packages/create-vite/src/index.ts#L874


Code after:
          'npm create -- tsrouter-app@latest TARGET_DIR --framework Solid --interactive',
      },
      {
        name: 'custom-vike-solid',
        display: 'Vike ↗',
        color: cyan,
        customCommand: 'npm create -- vike@latest --solid TARGET_DIR',
      },
    ],
  },
  {
    name: 'ember',
    display: 'Ember',
    color: redBright,
    variants: [
      {
        name: 'ember-app-ts',
        display: 'TypeScript ↗',
        color: blueBright,
        customCommand:
          'npm exec -- ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-app',
        display: 'JavaScript ↗',
        color: redBright,
        customCommand: 'npm exec -- ember-cli@latest new TARGET_DIR',
      },
    ],
  },
  {
    name: 'qwik',
    display: 'Qwik',
    color: blueBright,
    variants: [
      {
        name: 'qwik-ts',
        display: 'TypeScript',
        color: blueBright,
      },
      {
        name: 'qwik',
        display: 'JavaScript',
        color: yellow,
      },
      {
        name: 'custom-qwik-city',
        display: 'QwikCity ↗',
        color: blueBright,
        customCommand: 'npm create qwik@latest basic TARGET_DIR',
      },
Repository: vitejs/vite
File: packages/create-vite/src/index.ts (TypeScript)

Code before:
      },
      {
        name: 'custom-tanstack-router-solid',
        display: 'TanStack Router ↗',
        color: cyan,
        customCommand:
          'npm create -- tsrouter-app@latest TARGET_DIR --framework Solid --interactive',
      },
      {
        name: 'custom-vike-solid',
        display: 'Vike ↗',
        color: cyan,
        customCommand: 'npm create -- vike@latest --solid TARGET_DIR',
      },
    ],
  },
  {
    name: 'ember',
    display: 'Ember',
    color: redBright,
    variants: [
      {
        name: 'ember-app-ts',
        display: 'TypeScript ↗',
        color: blueBright,
        customCommand: 'npm exec -- ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-app',
        display: 'JavaScript ↗',
        color: redBright,
        customCommand: 'npm exec -- ember-cli@latest new TARGET_DIR',
      },
    ],
  },
  {
    name: 'qwik',
    display: 'Qwik',
    color: blueBright,
    variants: [
      {
        name: 'qwik-ts',
        display: 'TypeScript',
        color: blueBright,
      },
      {
        name: 'qwik',
        display: 'JavaScript',
        color: yellow,
      },
      {

Review comment (suggestion):
```suggestion
        customCommand:
          'npm exec -- ember-cli@latest new TARGET_DIR --typescript',
```

Code after:
      },
      {
        name: 'custom-tanstack-router-solid',
        display: 'TanStack Router ↗',
        color: cyan,
        customCommand:
          'npm create -- tsrouter-app@latest TARGET_DIR --framework Solid --interactive',
      },
      {
        name: 'custom-vike-solid',
        display: 'Vike ↗',
        color: cyan,
        customCommand: 'npm create -- vike@latest --solid TARGET_DIR',
      },
    ],
  },
  {
    name: 'ember',
    display: 'Ember',
    color: redBright,
    variants: [
      {
        name: 'ember-app-ts',
        display: 'TypeScript ↗',
        color: blueBright,
        customCommand:
          'npm exec -- ember-cli@latest new TARGET_DIR --typescript',
      },
      {
        name: 'ember-app',
        display: 'JavaScript ↗',
        color: redBright,
        customCommand: 'npm exec -- ember-cli@latest new TARGET_DIR',
      },
    ],
  },
  {
    name: 'qwik',
    display: 'Qwik',
    color: blueBright,
    variants: [
      {
        name: 'qwik-ts',
        display: 'TypeScript',
        color: blueBright,
      },
      {
        name: 'qwik',
        display: 'JavaScript',
        color: yellow,
      },
Repository: vitejs/vite
File: packages/vite/src/node/baseEnvironment.ts (TypeScript)

Code before:
import colors from 'picocolors'
import type { Logger } from './logger'
import type { ResolvedConfig, ResolvedEnvironmentOptions } from './config'
import type { Plugin } from './plugin'

const environmentColors = [
  colors.blue,
  colors.magenta,
  colors.green,
  colors.gray,
]

export function getDefaultResolvedEnvironmentOptions(
  config: ResolvedConfig,
): ResolvedEnvironmentOptions {
  return {
    define: config.define,
    resolve: config.resolve,
    consumer: 'server',
    optimizeDeps: config.optimizeDeps,
    dev: config.dev,
    build: config.build,
    plugins: config.plugins,
  }
}

export class PartialEnvironment {
  name: string
  getTopLevelConfig(): ResolvedConfig {
    return this._topLevelConfig
  }

  config: ResolvedConfig & ResolvedEnvironmentOptions

  logger: Logger

  /**
   * @internal
   */
  _options: ResolvedEnvironmentOptions
  /**
   * @internal
   */
  _topLevelConfig: ResolvedConfig

  constructor(
    name: string,
    topLevelConfig: ResolvedConfig,

Review comment (suggestion):
For environments that aren't in the config, we are using here the config plugins without expanding `applyToEnvironment`. Maybe we should directly disallow the creation of an environment that isn't in the resolved config.

Code after:
import colors from 'picocolors'
import type { Logger } from './logger'
import type { ResolvedConfig, ResolvedEnvironmentOptions } from './config'
import type { Plugin } from './plugin'

const environmentColors = [
  colors.blue,
  colors.magenta,
  colors.green,
  colors.gray,
]

export class PartialEnvironment {
  name: string
  getTopLevelConfig(): ResolvedConfig {
    return this._topLevelConfig
  }

  config: ResolvedConfig & ResolvedEnvironmentOptions

  logger: Logger

  /**
   * @internal
   */
  _options: ResolvedEnvironmentOptions
  /**
   * @internal
   */
  _topLevelConfig: ResolvedConfig

  constructor(
    name: string,
    topLevelConfig: ResolvedConfig,
    options: ResolvedEnvironmentOptions = topLevelConfig.environments[name],
  ) {
    // only allow some characters so that we can use name without escaping for directory names
    // and make users easier to access with `environments.*`
    if (!/^[\w$]+$/.test(name)) {
      throw new Error(
        `Invalid environment name "${name}". Environment names must only contain alphanumeric characters and "$", "_".`,
      )
    }
    this.name = name
    this._topLevelConfig = topLevelConfig
    this._options = options
    this.config = new Proxy(
      options as ResolvedConfig & ResolvedEnvironmentOptions,
Repository: vitejs/vite
File: packages/vite/src/node/config.ts (TypeScript)

Code before:
  return {
    define: options.define,
    resolve,
    keepProcessEnv:
      options.keepProcessEnv ??
      (isSsrTargetWebworkerEnvironment ? false : consumer === 'server'),
    consumer,
    optimizeDeps: resolveDepOptimizationOptions(
      options.optimizeDeps,
      resolve.preserveSymlinks,
      forceOptimizeDeps,
      consumer,
    ),
    dev: resolveDevEnvironmentOptions(
      options.dev,
      environmentName,
      consumer,
      skipSsrTransform,
      preTransformRequests,
    ),
    build: resolveBuildEnvironmentOptions(
      options.build ?? {},
      logger,
      consumer,
    ),
    plugins: undefined as any, // to be resolved later
  }
}

export function getDefaultEnvironmentOptions(
  config: UserConfig,
): EnvironmentOptions {
  return {
    define: config.define,
    resolve: {
      ...config.resolve,
      // mainFields and conditions are not inherited
      mainFields: undefined,
      conditions: undefined,
    },
    dev: config.dev,
    build: config.build,
  }
}

export interface PluginHookUtils {
  getSortedPlugins: <K extends keyof Plugin>(
    hookName: K,
  ) => PluginWithRequiredHook<K>[]
  getSortedPluginHooks: <K extends keyof Plugin>(
    hookName: K,

Review comment (suggestion):
```suggestion
    plugins: undefined!, // to be resolved later
```

Code after:
  return {
    define: options.define,
    resolve,
    keepProcessEnv:
      options.keepProcessEnv ??
      (isSsrTargetWebworkerEnvironment ? false : consumer === 'server'),
    consumer,
    optimizeDeps: resolveDepOptimizationOptions(
      options.optimizeDeps,
      resolve.preserveSymlinks,
      forceOptimizeDeps,
      consumer,
    ),
    dev: resolveDevEnvironmentOptions(
      options.dev,
      environmentName,
      consumer,
      skipSsrTransform,
      preTransformRequests,
    ),
    build: resolveBuildEnvironmentOptions(
      options.build ?? {},
      logger,
      consumer,
    ),
    plugins: undefined!, // to be resolved later
  }
}

export function getDefaultEnvironmentOptions(
  config: UserConfig,
): EnvironmentOptions {
  return {
    define: config.define,
    resolve: {
      ...config.resolve,
      // mainFields and conditions are not inherited
      mainFields: undefined,
      conditions: undefined,
    },
    dev: config.dev,
    build: config.build,
  }
}

export interface PluginHookUtils {
  getSortedPlugins: <K extends keyof Plugin>(
    hookName: K,
  ) => PluginWithRequiredHook<K>[]
  getSortedPluginHooks: <K extends keyof Plugin>(
    hookName: K,
Repository: vitejs/vite
File: packages/vite/src/node/config.ts (TypeScript)

Code before:
      ...workerNormalPlugins,
      ...workerPostPlugins,
    ]
    workerConfig = await runConfigHook(
      workerConfig,
      workerUserPlugins,
      configEnv,
    )

    const workerResolved: ResolvedConfig = {
      ...workerConfig,
      ...resolved,
      isWorker: true,
      mainConfig: resolved,
      bundleChain,
    }

    // Plugins resolution needs the resolved config (minus plugins) so we need to mutate here
    ;(workerResolved.plugins as Plugin[]) = await resolvePlugins(
      workerResolved,
      workerPrePlugins,
      workerNormalPlugins,
      workerPostPlugins,
    )

    // During Build the client environment is used to bundler the worker
    // Avoid overriding the mainConfig (resolved.environments.client)
    ;(workerResolved.environments as Record<
      string,
      ResolvedEnvironmentOptions
    >) = {
      ...workerResolved.environments,
      client: {
        ...workerResolved.environments.client,
        plugins: await resolveEnvironmentPlugins(
          new PartialEnvironment('client', workerResolved),
        ),
      },
    }

    // run configResolved hooks
    await Promise.all(
      createPluginHookUtils(workerResolved.plugins)
        .getSortedPluginHooks('configResolved')
        .map((hook) => hook.call(resolvedConfigContext, workerResolved)),
    )

    return workerResolved
  }

  const resolvedWorkerOptions: ResolvedWorkerOptions = {

Review comment (suggestion):
```suggestion
    // During Build the client environment is used to bundle the worker
```

Code after:
      ...workerNormalPlugins,
      ...workerPostPlugins,
    ]
    workerConfig = await runConfigHook(
      workerConfig,
      workerUserPlugins,
      configEnv,
    )

    const workerResolved: ResolvedConfig = {
      ...workerConfig,
      ...resolved,
      isWorker: true,
      mainConfig: resolved,
      bundleChain,
    }

    // Plugins resolution needs the resolved config (minus plugins) so we need to mutate here
    ;(workerResolved.plugins as Plugin[]) = await resolvePlugins(
      workerResolved,
      workerPrePlugins,
      workerNormalPlugins,
      workerPostPlugins,
    )

    // During Build the client environment is used to bundle the worker
    // Avoid overriding the mainConfig (resolved.environments.client)
    ;(workerResolved.environments as Record<
      string,
      ResolvedEnvironmentOptions
    >) = {
      ...workerResolved.environments,
      client: {
        ...workerResolved.environments.client,
        plugins: await resolveEnvironmentPlugins(
          new PartialEnvironment('client', workerResolved),
        ),
      },
    }

    // run configResolved hooks
    await Promise.all(
      createPluginHookUtils(workerResolved.plugins)
        .getSortedPluginHooks('configResolved')
        .map((hook) => hook.call(resolvedConfigContext, workerResolved)),
    )

    return workerResolved
  }

  const resolvedWorkerOptions: ResolvedWorkerOptions = {
Repository: vitejs/vite
File: packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/index.ts (TypeScript)

Code before:

export const parent = import.meta.glob('../../playground/src/*.ts', {
  query: '?url',
  import: 'default',
})

export const rootMixedRelative = import.meta.glob(
  ['/*.ts', '../fixture-b/*.ts'],
  { query: '?url', import: 'default' },
)

export const cleverCwd1 = import.meta.glob(
  './node_modules/framework/**/*.page.js',
)

export const cleverCwd2 = import.meta.glob([
  './modules/*.ts',
  '../fixture-b/*.ts',
  '!**/index.ts',
])

export const customBase = import.meta.glob('./**/*.ts', { base: './' })

export const customRootBase = import.meta.glob('./**/*.ts', {
  base: '/fixture-b',
})


Review comment (suggestion):
```suggestion
})

export const customBaseParent = import.meta.glob('/fixture-b/**/*.ts', {
  base: '/fixture-a',
})
```
I think it'd be nice to have a test case that generates an output that includes `../`.


Code after:

export const parent = import.meta.glob('../../playground/src/*.ts', {
  query: '?url',
  import: 'default',
})

export const rootMixedRelative = import.meta.glob(
  ['/*.ts', '../fixture-b/*.ts'],
  { query: '?url', import: 'default' },
)

export const cleverCwd1 = import.meta.glob(
  './node_modules/framework/**/*.page.js',
)

export const cleverCwd2 = import.meta.glob([
  './modules/*.ts',
  '../fixture-b/*.ts',
  '!**/index.ts',
])

export const customBase = import.meta.glob('./**/*.ts', { base: './' })

export const customRootBase = import.meta.glob('./**/*.ts', {
  base: '/fixture-b',
})

export const customBaseParent = import.meta.glob('/fixture-b/**/*.ts', {
  base: '/fixture-a',
})
Repository: vitejs/vite
File: playground/tailwind/__test__/tailwind.spec.ts (TypeScript)

Code before:
import { expect, test } from 'vitest'
import { editFile, getColor, isServe, page, untilBrowserLogAfter } from '~utils'

test('should render', async () => {
  expect(await page.textContent('#pagetitle')).toBe('Page title')
})

test.runIf(isServe)('HMR works with HTML', async () => {
  await expect.poll(() => getColor('.html')).toBe('oklch(0.623 0.214 259.815)')

  editFile('index.html', (code) =>
    code.replace('"html text-blue-500"', '"html text-green-500"'),
  )
  await expect.poll(() => getColor('.html')).toBe('oklch(0.723 0.219 149.579)')
})

test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
  const el = page.locator('#view1-text')
  expect(await getColor(el)).toBe('oklch(0.627 0.194 149.214)')

  await untilBrowserLogAfter(
    () =>
      editFile('src/views/view1.js', (code) =>
        code.replace('|view1|', '|view1 updated|'),
      ),
    [
      '[vite] css hot updated: /index.css',
      '[vite] hot updated: /src/views/view1.js via /src/main.js',
    ],
    false,
  )
  await expect.poll(() => el.textContent()).toMatch('|view1 updated|')

  await untilBrowserLogAfter(
    () =>
      editFile('src/views/view1.js', (code) =>
        code.replace('text-green-600', 'text-orange-600'),
      ),
    [
      '[vite] css hot updated: /index.css',

Review comment (bug):
This is still a full reload and that's expected, right? Is it just a wrong test name or is there any changed compared to the previous behavior?

Code after:
import { expect, test } from 'vitest'
import { editFile, getColor, isServe, page, untilBrowserLogAfter } from '~utils'

test('should render', async () => {
  expect(await page.textContent('#pagetitle')).toBe('Page title')
})

test.runIf(isServe)(
  'full reload happens when the HTML is changed',
  async () => {
    await expect
      .poll(() => getColor('.html'))
      .toBe('oklch(0.623 0.214 259.815)')

    editFile('index.html', (code) =>
      code.replace('"html text-blue-500"', '"html text-green-500"'),
    )
    await expect
      .poll(() => getColor('.html'))
      .toBe('oklch(0.723 0.219 149.579)')
  },
)

test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
  const el = page.locator('#view1-text')
  expect(await getColor(el)).toBe('oklch(0.627 0.194 149.214)')

  await untilBrowserLogAfter(
    () =>
      editFile('src/views/view1.js', (code) =>
        code.replace('|view1|', '|view1 updated|'),
      ),
    [
      '[vite] css hot updated: /index.css',
      '[vite] hot updated: /src/views/view1.js via /src/main.js',
    ],
    false,
  )
  await expect.poll(() => el.textContent()).toMatch('|view1 updated|')