오픈소스 번들러 vite 코드를 읽으며 배운 것들

import type { CommonServerOptions } from '../http' import { httpServerStart, resolveHttpServer, resolveHttpsConfig, setClientErrorHandler, } from '../http'

// 잘못된 예시 (런타임에는 쓰이지 않지만 import로 가져옴) import { SomeType } from './types' const x: SomeType = { ... }

import type { SomeType } from './types' const x: SomeType = { ... }

export interface PromiseWithResolvers<T> { promise: Promise<T> resolve: (value: T | PromiseLike<T>) => void reject: (reason?: any) => void } export function promiseWithResolvers<T>(): PromiseWithResolvers<T> { let resolve: any let reject: any const promise = new Promise<T>((_resolve, _reject) => { resolve = _resolve reject = _reject }) return { promise, resolve, reject } }

const ready = promiseWithResolvers<void>() // 어떤 이벤트 핸들러에서 초기화 완료 후 호출 window.addEventListener('load', () => { ready.resolve() }) // 이후 어딘가에서 기다림 await ready.promise console.log('초기화 완료')

const clientAlias = [ { find: /^\/?@vite\/env/, replacement: path.posix.join(FS_PREFIX, normalizePath(ENV_ENTRY)), }, { find: /^\/?@vite\/client/, replacement: path.posix.join(FS_PREFIX, normalizePath(CLIENT_ENTRY)), }, ]

path.join('a', 'b') // POSIX (Mac/Linux): 'a/b' // Windows: 'a\\b'

path.posix.join('a', 'b') // 항상 'a/b' path.win32.join('a', 'b') // 항상 'a\\b'

/@vite/client /@vite/env

normalizePath('C:\\vite\\client.js') // -> 'C:/vite/client.js'

// 초기화 작업을 시작하지만 완료를 기다리지 않음 const initPublicFilesPromise = initPublicFiles(config) // 다른 설정 작업 계속 진행... // 나중에 서버가 요청을 처리하기 전에 초기화 완료를 확인 await initPublicFilesPromise

// Step 1: 비동기 작업을 실행만 해두고 const initPublicFilesPromise = initPublicFiles(config) // Step 2: 다른 작업을 동시에 진행 await resolvePlugins(config) setupWatcher() // Step 3: 마지막에만 기다리면 OK await initPublicFilesPromise

const watcher = watchEnabled ? (chokidar.watch( // config file dependencies and env file might be outside of root [ root, ...config.configFileDependencies, ...getEnvFilesForMode(config.mode, config.envDir), // Watch the public directory explicitly because it might be outside // of the root directory. ...(publicDir && publicFiles ? [publicDir] : []), ], resolvedWatchOptions, ) as FSWatcher) : createNoopWatcher(resolvedWatchOptions)

getModuleById(id: string): ModuleNode | undefined { const clientModule = this._client.getModuleById(id) const ssrModule = this._ssr.getModuleById(id) if (!clientModule && !ssrModule) { return } return this.getBackwardCompatibleModuleNodeDual(clientModule, ssrModule) }

get transformResult(): TransformResult | null { return this._clientModule?.transformResult ?? null } get ssrTransformResult(): TransformResult | null { return this._ssrModule?.transformResult ?? null }

invalidateModule( mod: ModuleNode, seen = new Set<ModuleNode>(), timestamp: number = Date.now(), isHmr: boolean = false, /** @internal */ softInvalidate = false, ): void { if (mod._clientModule) { // 클라이언트 모듈 무효화 로직 } if (mod._ssrModule) { // SSR 모듈 무효화 로직 } }

function createBackwardCompatibleModuleSet( moduleGraph: ModuleGraph, prop: ModuleSetNames, module: EnvironmentModuleNode, ): Set<ModuleNode> { return { [Symbol.iterator]() { return this.keys() }, has(key) { if (!key.id) { return false } const keyModule = moduleGraph ._getModuleGraph(module.environment) .getModuleById(key.id) return keyModule !== undefined && module[prop].has(keyModule) }, values() { return this.keys() }, keys() { return mapIterator(module[prop].keys(), (mod) => moduleGraph.getBackwardCompatibleModuleNode(mod), ) }, get size() { return module[prop].size }, forEach(callback, thisArg) { return module[prop].forEach((mod) => { const backwardCompatibleMod = moduleGraph.getBackwardCompatibleModuleNode(mod) callback.call( thisArg, backwardCompatibleMod, backwardCompatibleMod, this, ) }) }, // There are several methods missing. We can implement them if downstream // projects are relying on them: add, clear, delete, difference, intersection, // sDisjointFrom, isSubsetOf, isSupersetOf, symmetricDifference, union } as Set<ModuleNode> }

const target = { name: 'vite' } const handler = { get(target, prop) { console.log(`accessing ${prop}`) return target[prop] } } const proxy = new Proxy(target, handler) console.log(proxy.name) // "accessing name" → "vite"

// maintain consistency with the server instance after restarting. const reflexServer = new Proxy(server, { get: (_, property: keyof ViteDevServer) => { return server[property] }, set: (_, property: keyof ViteDevServer, value: never) => { server[property] = value return true }, })

// 서버 재시작 전: server === oldInstance // 서버 재시작 후: server === newInstance // 그러나 const myServer = server 로 저장해둔 곳은 여전히 oldInstance를 참조 중

const target = { name: 'old' } let actualTarget = target const proxy = new Proxy({}, { get(_, prop) { return actualTarget[prop] }, set(_, prop, value) { actualTarget[prop] = value return true }, }) // 중간에 실제 대상을 교체해도... actualTarget = { name: 'new' } console.log(proxy.name) // 'new'

/** * Lex import.meta.hot.accept() for accepted deps. * Since hot.accept() can only accept string literals or array of string * literals, we don't really need a heavy @babel/parse call on the entire source. * * @returns selfAccepts */ export function lexAcceptedHmrDeps( code: string, start: number, urls: Set<{ url: string; start: number; end: number }>, ): boolean { let state: LexerState = LexerState.inCall // the state can only be 2 levels deep so no need for a stack let prevState: LexerState = LexerState.inCall let currentDep: string = '' function addDep(index: number) { urls.add({ url: currentDep, start: index - currentDep.length - 1, end: index + 1, }) currentDep = '' } for (let i = start; i < code.length; i++) { const char = code.charAt(i) switch (state) { case LexerState.inCall: case LexerState.inArray: if (char === `'`) { prevState = state state = LexerState.inSingleQuoteString } else if (char === `"`) { prevState = state state = LexerState.inDoubleQuoteString } else if (char === '`') { prevState = state state = LexerState.inTemplateString } else if (whitespaceRE.test(char)) { continue } else { if (state === LexerState.inCall) { if (char === `[`) { state = LexerState.inArray } else { // reaching here means the first arg is neither a string literal // nor an Array literal (direct callback) or there is no arg // in both case this indicates a self-accepting module return true // done } } else { if (char === `]`) { return false // done } else if (char === ',') { continue } else { error(i) } } } break case LexerState.inSingleQuoteString: if (char === `'`) { addDep(i) if (prevState === LexerState.inCall) { // accept('foo', ...) return false } else { state = prevState } } else { currentDep += char } break case LexerState.inDoubleQuoteString: if (char === `"`) { addDep(i) if (prevState === LexerState.inCall) { // accept('foo', ...) return false } else { state = prevState } } else { currentDep += char } break case LexerState.inTemplateString: if (char === '`') { addDep(i) if (prevState === LexerState.inCall) { // accept('foo', ...) return false } else { state = prevState } } else if (char === '$' && code.charAt(i + 1) === '{') { error(i) } else { currentDep += char } break default: throw new Error('unknown import.meta.hot lexer state') } } return false }

import.meta.hot.accept(() => { console.log('이 모듈이 업데이트되었습니다'); }) // 또는 import.meta.hot.accept();

import.meta.hot.accept(['./foo.js', './bar.js'], () => { console.log('foo 또는 bar가 변경되었습니다'); });

if (char === `[`) { state = LexerState.inArray } else { // 문자열도 배열도 아닌 경우 → self-accepting return true }

const enum LexerState { inCall, inSingleQuoteString, inDoubleQuoteString, inTemplateString, inArray, }