vite#InlineConfig TypeScript Examples

build = async (classNamesModule: string) => {
    const config: InlineConfig = {
        root: path.join(currentDirectory, 'fixtures'),
        logLevel: 'warn',
        plugins: [
            cssBind({classNamesModule}),
        ],
    };
    const bundle = await vite.build(config) as RollupOutput;
    return bundle.output[0].code;
}

build = async () => {
    const config: InlineConfig = {
        root: path.join(currentDirectory, 'fixtures'),
        logLevel: 'warn',
        plugins: [
            cssForceModules(),
        ],
    };
    const bundle = await vite.build(config) as RollupOutput;
    const cssAsset = bundle.output.find(v => path.extname(v.fileName) === '.css');
    return cssAsset?.type === 'asset' ? cssAsset.source.toString() : '';
}

build = async (options?: Options) => {
    const config: InlineConfig = {
        root: path.join(currentDirectory, 'fixtures'),
        logLevel: 'warn',
        plugins: [
            svgToComponent(options),
        ],
    };
    const bundle = await vite.build(config) as RollupOutput;
    return bundle;
}

build = async (options: Pick<VirtualEntryOptions, 'favicon'>) => {
    const entries = [
        createEntry('index'),
        createEntry('about'),
    ];
    const entryOptions: VirtualEntryOptions = {
        ...options,
        entries,
        publicPath: '/',
        defaultEntry: entries[0],
        buildTarget: 'stable',
        customizeMiddleware: () => {},
    };
    const config: InlineConfig = {
        root: path.join(currentDirectory, 'fixtures'),
        logLevel: 'warn',
        build: {
            rollupOptions: {
                input: Object.entries(entries).reduce(
                    (input, [name, {entry}]) => Object.assign(input, {[name]: entry}),
                    {} as Record<string, string>
                ),
            },
        },
        plugins: [
            virtualEntry(entryOptions),
        ],
    };
    const bundle = await vite.build(config) as RollupOutput;
    return {
        assets: bundle.output.filter((v: any): v is OutputAsset => v.type === 'asset'),
        chunks: bundle.output.filter((v: any): v is OutputChunk => v.type === 'chunk'),
    };
}

useDevConfig = async (): Promise<InlineConfig> => {
  const { userConfig } = await resolveConfig()
  const { port, plugins, viteConfigure } = userConfig

  const presetConfig = {
    root: CWD,
    resolve: {
      extensions: VITE_RESOLVE_EXTENSIONS,
      alias: {}
    },
    server: {
      port
    },
    plugins: [Vue({ include: [/\.vue$/, /\.md$/] }), Jsx(), ...plugins]
  }

  return merge(presetConfig, viteConfigure)
}

useUMDconfig = (input, name, mini = false): InlineConfig => {
  return {
    logLevel: 'silent',
    build: {
      lib: {
        name,
        formats: ['umd'],
        fileName: mini ? `${name}.min` : `${name}`,
        entry: input
      },
      minify: mini ? 'terser' : false,
      rollupOptions: {
        external: ['vue'],
        output: {
          assetFileNames: (assetInfo) => {
            if (assetInfo.name === 'style.css') return 'main.css'
          },
          dir: UMD_PATH,
          exports: 'named',
          globals: {
            vue: 'Vue'
          }
        }
      }
    }
  }
}

async function generatePackageJson(
  viteConfig: ResolvedConfig,
  clientBuildOptions: InlineConfig,
  serverBuildOptions: NonNullable<BuildOptions['serverOptions']>
) {
  if (serverBuildOptions.packageJson === false) return

  const outputFile = (
    serverBuildOptions.build?.rollupOptions?.output as OutputOptions
  )?.file

  const ssrOutput = path.parse(
    outputFile ||
      ((viteConfig.build?.ssr || serverBuildOptions.build?.ssr) as string)
  )

  const moduleFormat =
    (viteConfig.build?.rollupOptions?.output as OutputOptions)?.format ||
    (serverBuildOptions.build?.rollupOptions?.output as OutputOptions)?.format

  const packageJson = {
    main: outputFile ? ssrOutput.base : ssrOutput.name + '.js',
    type: /^esm?$/i.test(moduleFormat || '') ? 'module' : 'commonjs',
    ssr: {
      // This can be used later to serve static assets
      assets: (
        await fs.readdir(clientBuildOptions.build?.outDir as string)
      ).filter((file) => !/(index\.html|manifest\.json)$/i.test(file)),
    },
    ...(serverBuildOptions.packageJson || {}),
  }

  await fs.writeFile(
    path.join(serverBuildOptions.build?.outDir as string, 'package.json'),
    JSON.stringify(packageJson, null, 2),
    'utf-8'
  )
}

useBuildConfig = async (): Promise<InlineConfig> => {
  const devConf = await useDevConfig()
  return {
    base: '/',
    mode: 'production',
    ...devConf
  }
}

export async function createSsrServer(
  options: InlineConfig & { polyfills?: boolean } = {}
) {
  // Enable SSR in the plugin
  process.env.__DEV_MODE_SSR = 'true'

  const viteServer = await createViteServer({
    ...options,
    server: options.server || { ...options },
  })

  if (options.polyfills !== false) {
    if (!globalThis.fetch) {
      const fetch = await import('node-fetch')
      // @ts-ignore
      globalThis.fetch = fetch.default || fetch
    }
  }

  const isMiddlewareMode =
    // @ts-ignore
    options?.middlewareMode || options?.server?.middlewareMode

  return new Proxy(viteServer, {
    get(target, prop, receiver) {
      if (prop === 'listen') {
        return async (port?: number) => {
          const server = await target.listen(port)

          if (!isMiddlewareMode) {
            printServerInfo(server)
          }

          return server
        }
      }

      return Reflect.get(target, prop, receiver)
    },
  })
}

startViteFixture = async (
  fixtureName: string,
  { mode = 'development', port = 3000 }: ViteFixtureOptions,
): Promise<TestServer> => {
  const root = path.dirname(
    require.resolve(`@fixtures/${fixtureName}/package.json`),
  );

  const config: InlineConfig = {
    configFile: false,
    root,
    logLevel: 'error',
    plugins: [vanillaExtractPlugin()],
    server: {
      port,
      force: true,
    },
    build: {
      cssCodeSplit: false,
    },
  };

  if (mode === 'development') {
    const server = await createServer(config);

    await server.listen();

    return {
      type: 'vite',
      url: `http://localhost:${port}`,
      close: () => {
        return server.close();
      },
    };
  }

  const result = await build(config);
  const closeServer = await serveAssets({ port, dir: path.join(root, 'dist') });

  if (!('output' in result)) {
    throw new Error('Unexpected build output');
  }

  const { fileName: stylesheet } =
    result.output.find((asset) => asset.name?.endsWith('.css')) || {};

  return {
    type: 'vite',
    url: `http://localhost:${port}`,
    stylesheet,
    close: closeServer,
  };
}