// packages/vite/src/node/server/index.ts
import chokidar from 'chokidar'

// 监听根目录下的文件
const watcher = chokidar.watch(path.resolve(root))
// 修改文件
watcher.on('change', async (file) => {
  file = normalizePath(file)
  moduleGraph.onFileChange(file)
  await handleHMRUpdate(file, server)
})
// 新增文件
watcher.on('add', (file) => {
  handleFileAddUnlink(normalizePath(file), server)
})
// 删除文件
watcher.on('unlink', (file) => {
  handleFileAddUnlink(normalizePath(file), server, true)
})

async function handleHMRUpdate(file, server) {
  // 1. 这一部分是对配置文件和环境变量相关的文件进行处理
  const { ws, config, moduleGraph } = server
  const shortFile = getShortName(file, config.root)
  const fileName = path.basename(file)
  const isConfig = file === config.configFile
  const isConfigDependency = config.configFileDependencies.some((name) => file === name)
  const isEnv = config.inlineConfig.envFile !== false && (fileName === '.env' || fileName.startsWith('.env.'))
  if (isConfig || isConfigDependency || isEnv) {
    // auto restart server
    debugHmr(`[config change] ${colors.dim(shortFile)}`)
    config.logger.info(colors.green(`${path.relative(process.cwd(), file)} changed, restarting server...`), { clear: true, timestamp: true })
    try {
      // 服务器重新启动
      await server.restart()
    } catch (e) {
      config.logger.error(colors.red(e))
    }
    return
  }
  debugHmr(`[file change] ${colors.dim(shortFile)}`)

  // 客户端注入的文件(vite/dist/client/client.mjs)更改，直接刷新页面
  if (file.startsWith(normalizedClientDir)) {
    ws.send({
      type: 'full-reload',
      path: '*',
    })
    return
  }
  // ====================================================

  // 2. 对普通文件进行处理
  const mods = moduleGraph.getModulesByFile(file)
  const timestamp = Date.now()
  // 初始化hmr的context（我们在handleHotUpdate中拿的参数）
  const hmrContext = {
    file,
    timestamp,
    modules: mods ? [...mods] : [],
    read: () => readModifiedFile(file),
    server,
  }
  // 执行插件中 handleHotUpdate 中的钩子，得到需要更新的模块
  for (const hook of config.getSortedPluginHooks('handleHotUpdate')) {
    const filteredModules = await hook(hmrContext)
    if (filteredModules) {
      hmrContext.modules = filteredModules
    }
  }
  if (!hmrContext.modules.length) {
    // html文件不能hmr，直接刷新页面
    if (file.endsWith('.html')) {
      config.logger.info(colors.green(`page reload `) + colors.dim(shortFile), {
        clear: true,
        timestamp: true,
      })
      ws.send({
        type: 'full-reload',
        path: config.server.middlewareMode ? '*' : '/' + normalizePath(path.relative(config.root, file)),
      })
    } else {
      // loaded but not in the module graph, probably not js
      debugHmr(`[no modules matched] ${colors.dim(shortFile)}`)
    }
    return
  }
  // 这里执行主要的模块更新逻辑
  updateModules(shortFile, hmrContext.modules, timestamp, server)
}

/**
 * file: 文件路径（`src/render.ts`)
 * module: 更新的模块集合（具体长啥样看下面截图） module[]
 * timestamp: 时间戳
 * server: 服务端相关配置
 */
function updateModules(file, modules, timestamp, { config, ws }) {
  // 更新模块的集合
  const updates = []
  // 无效模块集合（？）
  const invalidatedModules = new Set()
  // 是否需要刷新页面
  let needFullReload = false
  // 对更新的模块进行遍历
  for (const mod of modules) {
    // 检测模块是否无效（即不需要更新）
    invalidate(mod, timestamp, invalidatedModules)

    if (needFullReload) {
      continue
    }
    const boundaries = new Set()
    // 查找更新的边界
    const hasDeadEnd = propagateUpdate(mod, boundaries)
    // 如果为true就刷新页面
    if (hasDeadEnd) {
      needFullReload = true
      continue
    }
    // 记录更新信息
    updates.push(
      ...[...boundaries].map(({ boundary, acceptedVia }) => ({
        type: `${boundary.type}-update`,
        timestamp,
        path: normalizeHmrUrl(boundary.url),
        explicitImportRequired: boundary.type === 'js' ? isExplicitImportRequired(acceptedVia.url) : undefined,
        acceptedPath: normalizeHmrUrl(acceptedVia.url),
      }))
    )
  }
  if (needFullReload) {
    config.logger.info(colors.green(`page reload `) + colors.dim(file), {
      clear: true,
      timestamp: true,
    })
    ws.send({
      type: 'full-reload',
    })
    return
  }
  if (updates.length === 0) {
    debugHmr(colors.yellow(`no update happened `) + colors.dim(file))
    return
  }
  // 打印信息
  config.logger.info(updates.map(({ path }) => colors.green(`hmr update `) + colors.dim(path)).join('\n'), { clear: true, timestamp: true })

  // updates：{
  // 	type: "js-update",
  // 	timestamp: 1665641766748,
  // 	path: "/src/main.ts",
  // 	explicitImportRequired: false,
  // 	acceptedPath: "/src/render.ts",
  // }
  ws.send({
    type: 'update',
    updates,
  })
}

function propagateUpdate(node, boundaries, currentChain = [node]) {
  // 是否接收自身的更新，如果接收就将本身这个模块放到热更新的边界集合中去
  if (node.isSelfAccepting) {
    boundaries.add({
      boundary: node,
      acceptedVia: node,
    })
    // 如果该模块中引用了css，则将css全部加入到边界集合中
    for (const importer of node.importers) {
      if (isCSSRequest(importer.url) && !currentChain.includes(importer)) {
        propagateUpdate(importer, boundaries, currentChain.concat(importer))
      }
    }
    return false
  }

  if (node.acceptedHmrExports) {
    boundaries.add({
      boundary: node,
      acceptedVia: node,
    })
  } else {
    // 。。。
  }
  // 不接受自身更新的，查找引用它的模块是否接收更新
  for (const importer of node.importers) {
    const subChain = currentChain.concat(importer)
    // importer如果将该模块列为acceptedHmrDeps，在将importer列入更新边界中
    if (importer.acceptedHmrDeps.has(node)) {
      boundaries.add({
        boundary: importer,
        acceptedVia: node,
      })
      continue
    }
    // 。。。
    if (currentChain.includes(importer)) {
      // 循环依赖直接终止，返回true刷新页面
      return true
    }
    if (propagateUpdate(importer, boundaries, subChain)) {
      return true
    }
  }
  // 返回false进行hmr
  return false
}

// 检查是否为无效模块，并且更新mod的信息
function invalidate(mod, timestamp, seen) {
  // 防止出现循环依赖
  if (seen.has(mod)) {
    return
  }
  seen.add(mod)
  // 更新模块上次hmr的时间
  mod.lastHMRTimestamp = timestamp
  // 置空一系列信息
  mod.transformResult = null
  mod.ssrModule = null
  mod.ssrError = null
  mod.ssrTransformResult = null

  // 查看引用该模块的文件中是否接收该模块的hmr---accptedHmrDeps
  mod.importers.forEach((importer) => {
    // 如果引用该模块的文件的acceptedHmrDeps（可接受的更新依赖模块）中不包含本次文件变动
    // 的模块，就证明该importer的不需要更新
    // 就继续对该importer进行检测，清空前置依赖的一些引用，更新信息
    if (!importer.acceptedHmrDeps.has(mod)) {
      invalidate(importer, timestamp, seen)
    }
  })
}
// 其实在我们的案例中来解释invalidate函数做了什么事：
// 我们是变动的render.ts，此时main是引用了render.ts的，所以这个importer就是main文件。
// 那我们在main的import.meta.hot.accept里面是依赖了render的，所以importer.acceptedHmrDeps
// 就有render.ts，所以main是一个有效的更新模块，即需要hmr

// 假设我们的main不依赖render，那么importer.acceptedHmrDeps.has(mod)就是false，就会对main进行
// invalidate，清空importer的引用信息更新mod对应的相关信息

async function handleMessage(payload) {
  switch (payload.type) {
    case 'connected':
      console.debug(`[vite] connected.`)
      sendMessageBuffer()
      // ws心跳检测，保证ws服务处于连接中
      setInterval(() => {
        if (socket.readyState === socket.OPEN) {
          socket.send('{"type":"ping"}')
        }
      }, __HMR_TIMEOUT__)
      break
    case 'update':
      // 触发vite插件中的对应名称的钩子
      notifyListeners('vite:beforeUpdate', payload)
      // 。。。
      payload.updates.forEach((update) => {
        // 对js文件进行处理
        if (update.type === 'js-update') {
          // 主要逻辑在这里！！！！
          queueUpdate(fetchUpdate(update))
        } else {
          // css-update
          // 。。。
          console.debug(`[vite] css hot updated: ${searchUrl}`)
        }
      })
      break
    case 'custom': {
      notifyListeners(payload.event, payload.data)
      break
    }
    case 'full-reload':
      notifyListeners('vite:beforeFullReload', payload)
      if (payload.path && payload.path.endsWith('.html')) {
        // if html file is edited, only reload the page if the browser is
        // currently on that page.
        const pagePath = decodeURI(location.pathname)
        const payloadPath = base + payload.path.slice(1)
        if (pagePath === payloadPath || payload.path === '/index.html' || (pagePath.endsWith('/') && pagePath + 'index.html' === payloadPath)) {
          location.reload()
        }
        return
      } else {
        location.reload()
      }
      break
    case 'prune':
      // 。。。。
      break
    case 'error': {
      // 。。。
      break
    }
    default: {
      const check = payload
      return check
    }
  }
}

// 将由同一src路径更改触发的多个热更新放入队列中，以便按照发送顺序调用它们。
// （否则，由于http请求往返，顺序可能不一致）
async function queueUpdate(p) {
  queued.push(p)
  // p:执行的就是下面的方法:
  // () => {
  //       for (const { deps, fn } of qualifiedCallbacks) {
  //           fn(deps.map((dep) => moduleMap.get(dep)));
  //       }
  //   };
  if (!pending) {
    pending = true
    await Promise.resolve()
    pending = false
    const loading = [...queued]
    queued = []
    ;(await Promise.all(loading)).forEach((fn) => fn && fn())
  }
}

/**
 * 这个参数就是最终服务端发送的update信息
 **/
async function fetchUpdate({ path, acceptedPath, timestamp, explicitImportRequired }) {
  const mod = hotModulesMap.get(path)
  // 获取到的mod的格式
  // {
  //   "id": "/src/render.ts",
  //   "callbacks": [
  //     {
  //       "deps": [
  //         "/src/render.ts"
  //       ],
  //       "fn": ([mod]) => deps && deps(mod)
  //     }
  //   ]
  // }
  if (!mod) {
    return
  }
  const moduleMap = new Map()
  const isSelfUpdate = path === acceptedPath
  // 过滤出来对应的依赖路径下面的callback
  const filtercb = ({ deps }) => deps.includes(acceptedPath)
  const qualifiedCallbacks = mod.callbacks.filter(filtercb)

  if (isSelfUpdate || qualifiedCallbacks.length > 0) {
    const dep = acceptedPath
    const disposer = disposeMap.get(dep)
    if (disposer) await disposer(dataMap.get(dep))
    // 获取路径的参数
    const [path, query] = dep.split(`?`)
    try {
      // 重新导入文件获取更新之后的模块
      const newMod = await import(
        /* @vite-ignore */
        base + path.slice(1) + `?${explicitImportRequired ? 'import&' : ''}t=${timestamp}${query ? `&${query}` : ''}`
      )
      moduleMap.set(dep, newMod)
    } catch (e) {
      warnFailedFetch(e, dep)
    }
  }
  return () => {
    for (const { deps, fn } of qualifiedCallbacks) {
      //  moduleMap: { key: 'src/render',value: Module }
      //  moduleMap.get(dep)获取到的是一个模块
      //  fn([Module]) ===>  ([mod]) => deps && deps(mod)
      fn(deps.map((dep) => moduleMap.get(dep)))
    }
    const loggedPath = isSelfUpdate ? path : `${acceptedPath} via ${path}`
    console.debug(`[vite] hot updated: ${loggedPath}`)
  }
}

	{
      "id": "/src/render.ts",
      "callbacks": [
        {
          "deps": [
            "/src/render.ts"
          ],
          "fn": ([mod]) => deps && deps(mod)
        }
      ]
    }

import { createHotContext as __vite__createHotContext } from '/@vite/client'
import.meta.hot = __vite__createHotContext('/src/render.ts')

export const render = () => {
  const app = document.querySelector('#app')
  app.innerHTML = `
    <h1>Helloss Vite12d</h1>
    <p id="p">\u662F\u662Ffff\u6492\u53D1\u987A\u4E30\u662Fdfd\uFF01sooo\uFF1F</p>
  `
}
export const other = () => {
  const p = document.querySelector('#p')
  p.innerHTML = `
    <p>other</p>
  `
}
if (import.meta.hot) {
  import.meta.hot.data.count = 1
  import.meta.hot.accept((mod) => mod?.render())
}

const hotModulesMap = new Map<string, HotModule>()
// 简化后的代码
/**
 * ownerPath: 当前文件的相对路径 "/src/render.ts"
 **/
export function createHotContext(ownerPath: string): ViteHotContext {
  const mod = hotModulesMap.get(ownerPath)
  if (mod) {
    mod.callbacks = []
  }

  // 2. 再来看这个函数
  function acceptDeps(deps: string[], callback: HotCallback['fn'] = () => {}) {
    // 先查找缓存，如果没缓存，就新建模块相关信息
    const mod: HotModule = hotModulesMap.get(ownerPath) || {
      id: ownerPath,
      callbacks: [],
    }
    // 修改模块的相关信息
    mod.callbacks.push({
      deps,
      fn: callback,
    })
    // 将模块信息放入hotModuleMap中
    hotModulesMap.set(ownerPath, mod)
  }

  // 1. 先来看最终的返回值，就是对上一篇中提到的hmr中的一些API进行重写
  const hot: ViteHotContext = {
    get data() {
      return dataMap.get(ownerPath)
    },

    // 我们重点关注这里，重写accept方法
    accept(deps?: any, callback?: any) {
      // 第一种情况就是，import.meta.accetpt(mod=>{}) 这样写
      if (typeof deps === 'function' || !deps) {
        // 我们上面的问题，fn就是在这里注入的，这里的deps其实就是我们传入的回调 mod=>{}
        acceptDeps([ownerPath], ([mod]) => deps && deps(mod))
      } else if (typeof deps === 'string') {
        // 第二种情况是，import.meta.accetpt('xxx', mod=>{})
        acceptDeps([deps], ([mod]) => callback && callback(mod))
      } else if (Array.isArray(deps)) {
        // 第三种情况是，import.meta.accetpt(['xxx','xxxx'], mod=>{})
        acceptDeps(deps, callback)
      } else {
        throw new Error(`invalid hot.accept() usage.`)
      }
    },

    // export names (first arg) are irrelevant on the client side, they're
    // extracted in the server for propagation
    acceptExports(_: string | readonly string[], callback?: any) {
      acceptDeps([ownerPath], callback && (([mod]) => callback(mod)))
    },

    dispose(cb) {
      disposeMap.set(ownerPath, cb)
    },

    // @ts-expect-error untyped
    prune(cb: (data: any) => void) {
      pruneMap.set(ownerPath, cb)
    },

    decline() {},

    // tell the server to re-perform hmr propagation from this module as root
    invalidate() {
      notifyListeners('vite:invalidate', { path: ownerPath })
      this.send('vite:invalidate', { path: ownerPath })
    },

    // custom events
    on(event, cb) {
      const addToMap = (map: Map<string, any[]>) => {
        const existing = map.get(event) || []
        existing.push(cb)
        map.set(event, existing)
      }
      addToMap(customListenersMap)
      addToMap(newListeners)
    },

    send(event, data) {
      messageBuffer.push(JSON.stringify({ type: 'custom', event, data }))
      sendMessageBuffer()
    },
  }

  return hot
}

// qualifiedCallbacks: {
//       "deps": [
//         "/src/render.ts"
//       ],
//       "fn": ([mod]) => deps && deps(mod)
//     }
for (const { deps, fn } of qualifiedCallbacks) {
  fn(deps.map((dep) => moduleMap.get(dep)))
}

// vite/src/node/plugins/importAnalysis.ts
if (hasHMR && !ssr) {
  debugHmr(`${isSelfAccepting ? `[self-accepts]` : isPartiallySelfAccepting ? `[accepts-exports]` : acceptedUrls.size ? `[accepts-deps]` : `[detected api usage]`} ${prettyImporter}`)
  // inject hot context
  str().prepend(
    `import { createHotContext as __vite__createHotContext } from "${clientPublicPath}";` + `import.meta.hot = __vite__createHotContext(${JSON.stringify(normalizeHmrUrl(importerModule.url))});`
  )
}