Make Farm compatible with most Vite plugins

[wre232114]

What problem does this feature solve?

It's hard to build a new ecosystem from scratch, to make Farm production-ready as quick as possible, Farm chooses to be compatible with Vite since 0.13.

For the Future, Farm team will focus on Rust - write faster tools in Rust, instead of re-develop existing JS Plugins, Farm will try to reuse Vite's ecosystem as much as possible.

Because Farm uses a rollup-style plugin system, Farm can be compatible with Vite easily. Currently, Farm has compatible with following hooks, Farm will be compatible with most Vite plugins hook in 1.0.

Plugin Compatibility

Build stage hooks to be supported:

• config
• configResolved
• configureServer
• apply
• buildStart
• resolveId
• load
• transform
• buildEnd
• handleHotUpdate
• transformIndexHtml
• shouldTransformCachedModule
• moduledParsed

Generate stage hook to be supported:

• renderChunk
• argumentChunkHash
• generateBundle
• writeBundle
• renderStart
• closeBundle

Generate stage hook supported since V0.15

Other hooks are not supported.

API Compatibility

import.meta.hot

• accept
• dispose
• prune
• data
• decline
• invalidate
• on
• off
• send

import.meta.hot supported since 0.15

ViteDevServer

• config: transformed from Farm's server config.
• middlewares: fully supported
• httpServer: fully supported
• watcher: fully supported
• ws: fully supported
• moduleGraph: partial supported.
• pluginContainer
• resolvedUrls: does not support
• transfromRequest: does not support
• transformIndexHtml: does not support
• ssrLoadModule: does not support
• ssrFixStacktrace: not supported. do nothing as Farm does not need it.
• reloadModule: does not support
• listen: does not support
• restart: does not support
• close: does not support
• bindCLIShortcuts: does not support

config

following field supported:

pluginContainer

export interface PluginContainer {
  options: InputOptions
  getModuleInfo(id: string): ModuleInfo | null
  buildStart(options: InputOptions): Promise<void>
  resolveId(
    id: string,
    importer?: string,
    options?: {
      attributes?: Record<string, string>
      custom?: CustomPluginOptions
      skip?: Set<Plugin>
      ssr?: boolean
      /**
       * @internal
       */
      scan?: boolean
      isEntry?: boolean
    },
  ): Promise<PartialResolvedId | null>
  transform(
    code: string,
    id: string,
    options?: {
      inMap?: SourceDescription['map']
      ssr?: boolean
    },
  ): Promise<{ code: string; map: SourceMap | { mappings: '' } | null }>
  load(
    id: string,
    options?: {
      ssr?: boolean
    },
  ): Promise<LoadResult | null>
  watchChange(
    id: string,
    change: { event: 'create' | 'update' | 'delete' },
  ): Promise<void>
  close(): Promise<void>
}

moduleGraph

ModuleNode: partially supported

export class ModuleNode {
  /**
   * Public served url path, starts with /
   * The same as url in Farm, cause Farm may not serve module separately
   */
  url: string
  /**
   * Resolved file system path + query
   */
  id: string | null = null
  file: string | null = null
  type: 'js' | 'css'

  // following fields are not supported

  // info?: ModuleInfo
  // meta?: Record<string, any>
  // importers = new Set<ModuleNode>()
  // clientImportedModules = new Set<ModuleNode>()
  // ssrImportedModules = new Set<ModuleNode>()
  // acceptedHmrDeps = new Set<ModuleNode>()
  // acceptedHmrExports: Set<string> | null = null
  // importedBindings: Map<string, Set<string>> | null = null
  // isSelfAccepting?: boolean
  // transformResult: TransformResult | null = null
  // ssrTransformResult: TransformResult | null = null
  // ssrModule: Record<string, any> | null = null
  // ssrError: Error | null = null
  // lastHMRTimestamp = 0
  // lastInvalidationTimestamp = 0

  // get importedModules(): Set<ModuleNode> {
  //  const importedModules = new Set(this.clientImportedModules)
  //  for (const module of this.ssrImportedModules) {
  //    importedModules.add(module)
  //  }
  //  return importedModules
  // }
}

watcher

What does the proposed API look like?

Using Vite plugins in Farm out of box:

import { defineConfig } from '@farmfe/core';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  // using plugins in vitePlugins and everything would work fine
  vitePlugins: [vue()]
});