reading-vite

README.md

reading vite

• default plugins packages/vite/src/node/plugins/index.ts

  • aliasPlugin (e.g. @vite/client (packages/vite/src/node/config.ts))
  • resolvePlugin
  • esbuildPlugin
  • buildHtmlPlugin
  • importAnalysisPlugin
    • update module node metadata by statically analyzing import statements and import.meta.hot
    • transform import "some-dep" to import "some-dep?t=${lastHMRTimestamp}" when some-dep is modified before

• build command (mostly just rollup)

• dev command

  • packages/vite/src/node/server/index.ts
  • packages/vite/src/client/client.ts
  • packages/plugin-react/src/fast-refresh.ts (cf. https://github.com/facebook/react/blob/9ff738f53f228ea4343886a1e719ec2f1533d300/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap)

#
# ESM transform middleware
#

transformMiddleware =>
  viteTransformMiddleware =>
    transformRequest => doTransform =>
      PluginContainer.resolveId => ... (e.g. resolvePlugin.resolveId)
      loadAndTransform =>
        PluginContainer.load => ...
        ModuleGraph.ensureEntryFromUrl => ...
        ensureWatchedFile => FSWatcher.add
        PluginContainer.transform => ... (e.g. esbuildPlugin.transform)

#
# hmr (server)
#

FSWatcher.on('change') =>
  ModuleGraph.onFileChange
  handleHMRUpdate =>
    ModuleGraph.getModulesByFile
    invoke "handleHotUpdate" plugin hooks
    updateModules =>
      invalidate
      propagateUpdate
        # recurse importers to do hmr on depending modules.
        # or regard the module as `isSelfAccepting` e.g. if react component only exports
        # (cf. `addRefreshWrapper` hard codes `import.meta.hot.accept` (`packages/plugin-react/src/fast-refresh.ts`))
      ws.send "update"

#
# hmr (client)
#

handleMessage =>
  if "update" message
    fetchUpdate =>
      run previous `import.meta.hot.dispose` if any
      import the update module

#
# server module
#

# e.g. https://github.com/cyco130/vavite/blob/8fe5058ad464169cb9ecac5ab3e24c3fabaf5d06/packages/connect/src/index.ts#L118
ViteDevServer.ssrLoadModule => ssrLoadModule => instantiateModule =>
  ModuleGraph.ensureEntryFromUrl
  transformRequest (with ssr = true flag) => ...
  evaluate transpiled code via Function constructor

#
# data structure
#

ModuleNode
  lastHMRTimestamp
  isSelfAccepting (e.g. if `import.meta.hot.accept`)