@taro-hmr-compile/plugin-webpack 0.0.1-alpha.8 → 0.0.1

package/src/patch/hmr-patch-plugin.ts

@@ -1,6 +1,7 @@
 import type {Compilation, Compiler} from 'webpack'
 import {RawSource} from 'webpack-sources'
-import {HMR_PATCH_ASSET} from '../constants'
+import path from 'node:path'
+import {HMR_PATCH_ASSET, HMR_PATCH_STYLE_ASSET} from '../constants'
 import {HmrCompilerPlugin} from '../compile/hmr-compiler-plugin'
 import {HmrPatchRuntimePlugin} from './hmr-patch-runtime-plugin'
 import {HmrPatchProcessor, HmrPatchProcessorOptions} from "./hmr-patch-processor";
@@ -10,6 +11,7 @@ const HOT_UPDATE_MANIFEST_SUFFIX = '.hot-update.json'
 const HOT_UPDATE_SCRIPT_SUFFIX = '.hot-update.js'
 const STYLE_ASSET_PATTERN = /\.(?:css|wxss|acss|ttss|qss|jxss)(?:\.map)?$/i
 const TEMPLATE_RUNTIME_ASSET_PATTERN = /(?:^|\/)(?:base\.wxml|utils\.wxs)$/i
+const STYLE_ENTRY_ASSET = 'app.wxss'
 
  type HmrPatchPluginOptions = Partial<HmrPatchProcessorOptions>
 
@@ -25,6 +27,8 @@ export class HmrPatchPlugin {
 
     private readonly patchProcessor: HmrPatchProcessor
 
+    private readonly preservedAssets = new Set([HMR_PATCH_ASSET, STYLE_ENTRY_ASSET, HMR_PATCH_STYLE_ASSET])
+
     private readonly emittedAssetSources = new Map<string, string>()
 
     constructor(options: HmrPatchPluginOptions) {
@@ -35,13 +39,18 @@ export class HmrPatchPlugin {
         new HmrPatchRuntimePlugin().apply(compiler)
 
         compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
-            HmrCompilerPlugin.getCompilationHooks(compilation).chunkModulesRendered.tap(PLUGIN_NAME, (source, isBootstrapChunk) => {
-                this.patchProcessor.processChunkModules({compilation, source, isBootstrapChunk})
+            HmrCompilerPlugin.getCompilationHooks(compilation).chunkModulesRendered.tap(PLUGIN_NAME, options => {
+                this.patchProcessor.processChunkModules({compilation, ...options})
             })
 
             // 等 Webpack 生成完整的 hot-update assets 后，再统一转换成固定的 patch.js。
             const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
-            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => this.processAssets(compilation))
+            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => {
+                if (compilation.errors.length > 0 || !compilation.hash) return
+                this.processStyleAssets(compilation)
+                this.processAssets(compilation)
+            })
+                this.removeHotUpdateAssets(compilation)
         })
 
         compiler.hooks.afterEmit.tap(PLUGIN_NAME, compilation => {
@@ -82,10 +91,40 @@ export class HmrPatchPlugin {
         this.previousHash = toHash
     }
 
+    /** 将 Webpack 汇总后的 App 样式放入固定 patch 文件，App 入口只保留稳定引用。 */
+    private processStyleAssets(compilation: Compilation) {
+        const entryAsset = compilation.getAsset(STYLE_ENTRY_ASSET)
+        const source = entryAsset?.source.source().toString()
+        if (!source) return
+
+        const importPath = path.posix.relative(path.posix.dirname(STYLE_ENTRY_ASSET), HMR_PATCH_STYLE_ASSET)
+        const patchImport = importPath.startsWith('.') ? importPath : `./${importPath}`
+        const alreadyPatched = source.trim() === `@import "${patchImport}";` || source.trim() === `@import '${patchImport}';`
+
+        if (!alreadyPatched) {
+            const patchDirectory = path.posix.dirname(HMR_PATCH_STYLE_ASSET)
+            const sourceDirectory = path.posix.dirname(STYLE_ENTRY_ASSET)
+            const patchSource = source.replace(/(@import\s+)(["'])([^"']+)\2/g, (match, prefix: string, quote: string, request: string) => {
+                if (/^(?:[a-z]+:|\/|#)/i.test(request)) return match
+                const resolved = path.posix.normalize(path.posix.join(sourceDirectory, request))
+                const relative = path.posix.relative(patchDirectory, resolved)
+                return `${prefix}${quote}${relative.startsWith('.') ? relative : `./${relative}`}${quote}`
+            })
+            this.emitAsset(compilation, HMR_PATCH_STYLE_ASSET, new RawSource(patchSource))
+        }
+
+        this.emitAsset(compilation, STYLE_ENTRY_ASSET, new RawSource(`@import ${JSON.stringify(patchImport)};\n`))
+    }
+
+    private emitAsset(compilation: Compilation, assetName: string, source: RawSource) {
+        if (compilation.getAsset(assetName)) compilation.updateAsset(assetName, source)
+        else compilation.emitAsset(assetName, source)
+    }
+
     /** 热更新转换完成后，保留固定 patch 与发生变化的模板、平台样式资产。 */
     private removeSupersededAssets(compilation: Compilation) {
         compilation.getAssets().forEach(asset => {
-            if (asset.name === HMR_PATCH_ASSET) return
+            if (this.preservedAssets.has(asset.name)) return
             if (!isPassthroughAsset(asset.name)) return compilation.deleteAsset(asset.name)
 
             const source = asset.source.source().toString()
@@ -108,4 +147,13 @@ export class HmrPatchPlugin {
         this.emittedAssetSources.clear()
         this.patchProcessor.reset()
     }
+    /** 补丁已从 hot-update assets 生成后，在 Webpack 写盘前从本次 compilation 移除它们。 */
+    private removeHotUpdateAssets(compilation: Compilation) {
+        compilation.getAssets().forEach(asset => {
+            if (asset.name.endsWith(HOT_UPDATE_MANIFEST_SUFFIX) || asset.name.endsWith(HOT_UPDATE_SCRIPT_SUFFIX)) {
+                compilation.deleteAsset(asset.name)
+            }
+        })
+    }
+
 }

package/src/patch/hmr-patch-processor.ts

@@ -1,23 +1,18 @@
-import {type Compilation,} from "webpack";
-import generator from '@babel/generator'
+import {type Chunk, type Compilation,} from "webpack";
 import {
     parseHotUpdateAssets,
     ParseHotUpdateAssetsOptions,
     parseChunkAsset, mergeUpdatePatches, generatePatchAssetSource,
 } from "./utils";
-import {createHash} from "crypto";
+import isNil from 'lodash/isNil'
 import {ModuleFactory, UpdatePatchSource} from "./types";
 import {DEFAULT_HMR_PATCH_HISTORY_LIMIT} from "../constants";
 
-interface ModuleHash {
-    moduleId: string;
-    factoryHash: string;
-}
-
 interface ProcessChunkModulesOptions {
     source: string
     compilation: Compilation,
-    isBootstrapChunk: boolean
+    isBootstrapChunk: boolean,
+    chunk: Chunk
 }
 
 export interface HmrPatchProcessorOptions {
@@ -31,7 +26,14 @@ interface ProcessUpdateOptions extends ParseHotUpdateAssetsOptions {
 
 type BootstrapFactories = Map<string, ModuleFactory>
 
-type ModuleHashesByFullHash = Map<string, Map<string, ModuleHash>>
+type ModuleHashes = Map<string, Set<string>>
+
+type ModuleHashesByFullHash = Map<string, ModuleHashes>
+
+const areModuleHashesEqual = (left: Set<string> | undefined, right: Set<string> | undefined): boolean => {
+    if (!left || !right || left.size !== right.size) return false
+    return Array.from(left).every(hash => right.has(hash))
+}
 
 export class HmrPatchProcessor {
     private readonly bootstrapFactories: BootstrapFactories = new Map()
@@ -62,9 +64,9 @@ export class HmrPatchProcessor {
 
         const changedModuleIds = new Set<string>()
         moduleIds.forEach(moduleId => {
-            const fromFactoryHash = fromModuleHashes.get(moduleId)?.factoryHash
-            const toFactoryHash = toModuleHashes.get(moduleId)?.factoryHash
-            if (fromFactoryHash !== toFactoryHash) changedModuleIds.add(moduleId)
+            const fromModuleHash = fromModuleHashes.get(moduleId)
+            const toModuleHash = toModuleHashes.get(moduleId)
+            if (!areModuleHashesEqual(fromModuleHash, toModuleHash)) changedModuleIds.add(moduleId)
         })
 
         return changedModuleIds
@@ -87,7 +89,9 @@ export class HmrPatchProcessor {
             return Array.from(tempPatchInfo.removedModules.values()).filter(item => changedModuleIds.has(item))
         })()
 
-        this.recentUpdatePatches.push({type: 'update', moduleFactories, fromHash, toHash, removedModules})
+        const {runtimeModules} = tempPatchInfo
+
+        this.recentUpdatePatches.push({type: 'update', moduleFactories, runtimeModules, fromHash, toHash, removedModules})
 
         const patchHistoryLimit = Math.max(1, this.opts.patchHistoryLimit ?? DEFAULT_HMR_PATCH_HISTORY_LIMIT)
 
@@ -103,28 +107,44 @@ export class HmrPatchProcessor {
     }
 
     processChunkModules(opt: ProcessChunkModulesOptions) {
-        const {hash: fullHash} = opt.compilation
-        const modules = parseChunkAsset(opt.source)
+        const {chunk, compilation, isBootstrapChunk, source} = opt
+        const {hash: fullHash} = compilation
+        const modules = parseChunkAsset(source)
         modules.forEach(moduleFactory => {
             const {moduleId, factory} = moduleFactory
 
-            if (opt.isBootstrapChunk) {
-                const compilationFactories = this.bootstrapFactoriesByCompilation.get(opt.compilation) ?? new Map()
+            if (isBootstrapChunk) {
+                const compilationFactories = this.bootstrapFactoriesByCompilation.get(compilation) ?? new Map()
                 compilationFactories.set(moduleId, {moduleId, factory})
-                this.bootstrapFactoriesByCompilation.set(opt.compilation, compilationFactories)
+                this.bootstrapFactoriesByCompilation.set(compilation, compilationFactories)
             }
+        })
+
+        if (!fullHash) return
+
+        const moduleHashes = (() => {
+            const hasCurFullHashModuleHashMap = this.moduleHashesByFullHash.has(fullHash)
+            if (!hasCurFullHashModuleHashMap) this.moduleHashesByFullHash.set(fullHash, new Map())
+            return this.moduleHashesByFullHash.get(fullHash)!
+        })()
+
+        const { chunkGraph, codeGenerationResults } = compilation
+
+        Array.from(chunkGraph.getChunkModulesIterable(chunk)).forEach(module => {
+            const moduleId = chunkGraph.getModuleId(module)
+
+            if (isNil(moduleId)) return
 
-            if (!fullHash) return
+            const normalizedModuleId = String(moduleId)
 
-            const moduleHashes = (() => {
-                const hasCurFullHashModuleHashMap = this.moduleHashesByFullHash.has(fullHash)
-                if (!hasCurFullHashModuleHashMap) this.moduleHashesByFullHash.set(fullHash, new Map())
-                return this.moduleHashesByFullHash.get(fullHash)!
-            })()
+            // 获取模块在当前 chunk.runtime 下的 Hash，优先从 codeGenerationResults 获取，如果没有对应的代码生成结果，则回退到 chunkGraph 获取
+            const moduleHash = codeGenerationResults?.has(module, chunk.runtime)
+                ? codeGenerationResults.getHash(module, chunk.runtime)
+                : chunkGraph.getModuleHash(module, chunk.runtime)
 
-            const {code: source} = generator(factory, {compact: true, comments: false, minified: true,})
-            const factoryHash = createHash('sha256').update(source).digest('hex')
-            moduleHashes.set(moduleId, {moduleId, factoryHash})
+            const hashes = moduleHashes.get(normalizedModuleId) ?? new Set<string>()
+            hashes.add(moduleHash)
+            moduleHashes.set(normalizedModuleId, hashes)
         })
     }
 

package/src/patch/hmr-patch-runtime-plugin.ts

@@ -64,7 +64,7 @@ ${webpack.RuntimeGlobals.require}.miniHmr.preparePatch = function(patch, applyHa
   currentUpdateChunks = {};
   currentUpdate = Object.assign({}, patch.modules);
   currentUpdateRemovedChunks = [];
-  currentUpdateRuntime = [];
+  currentUpdateRuntime = patch.runtimeModules ? patch.runtimeModules.slice() : [];
 
   if (patch.removedModules) {
     patch.removedModules.forEach(function(moduleId) {

package/src/patch/types.ts

@@ -14,6 +14,7 @@ export interface UpdatePatchSource {
     fromHash: string
     toHash: string
     moduleFactories: ModuleFactory[]
+    runtimeModules: Expression[]
     removedModules: string[]
 }
 

package/src/patch/utils.ts

@@ -17,7 +17,7 @@ const parseModuleFactories = (expression: ObjectExpression) => {
 
     const moduleFactories = new Map<string, ModuleFactory>()
 
-    if (!t.isObjectExpression(expression)) return moduleFactories.values()
+    if (!t.isObjectExpression(expression)) return Array.from(moduleFactories.values())
 
     expression.properties.forEach(property => {
         if (!t.isObjectProperty(property) || !t.isExpression(property.value)) throw new Error('[taro-hmr-compile] HMR 模块对象包含无法识别的属性')
@@ -33,7 +33,7 @@ const parseModuleFactories = (expression: ObjectExpression) => {
         moduleFactories.set(moduleId, {factory, moduleId})
     })
 
-    return moduleFactories.values()
+    return Array.from(moduleFactories.values())
 }
 
 
@@ -50,6 +50,7 @@ export const parseHotUpdateAssets = (opt: ParseHotUpdateAssetsOptions) => {
     const {manifests, scripts} = opt
 
     const moduleFactories = new Map<string, ModuleFactory>()
+    const runtimeModules: t.Expression[] = []
 
     scripts.forEach(asset => {
 
@@ -63,11 +64,12 @@ export const parseHotUpdateAssets = (opt: ParseHotUpdateAssetsOptions) => {
 
                 if (!t.isStringLiteral(callee.property) || !callee.property.value.startsWith('webpackHotUpdate')) return
 
-                const [_, modules] = nodePath.node.arguments
+                const [, modules, runtime] = nodePath.node.arguments
 
                 if (!t.isObjectExpression(modules)) return
 
                 parseModuleFactories(modules).forEach(module => moduleFactories.set(module.moduleId, module))
+                if (t.isExpression(runtime)) runtimeModules.push(runtime)
             },
         })
     })
@@ -83,7 +85,7 @@ export const parseHotUpdateAssets = (opt: ParseHotUpdateAssetsOptions) => {
         tempRemoveModules.forEach(removedModule => removedModules.add(String(removedModule)))
     }, [])
 
-    return {moduleFactories, removedModules}
+    return {moduleFactories, runtimeModules, removedModules}
 }
 
 /**
@@ -126,7 +128,8 @@ export const mergeUpdatePatches = (basePatch: UpdatePatchSource, nextPatch: Upda
         type: 'update',
         fromHash: basePatch.fromHash,
         toHash: nextPatch.toHash,
-        moduleFactories: [...moduleFactories.values()],
+        moduleFactories: Array.from(moduleFactories.values()),
+        runtimeModules: [...basePatch.runtimeModules, ...nextPatch.runtimeModules],
         removedModules: [...removedModules],
     }
 }
@@ -147,6 +150,7 @@ export const generatePatchAssetSource = (opt: generatePatchAssetSourceOpts): str
         fromHash: "FROM_HASH",
         toHash: "TO_HASH",
         modules: MODULES,
+        runtimeModules: RUNTIME_MODULES,
         removedModules: REMOVED_MODULES
     })`)
     const buildPatchAsset = template.program('module.exports = PATCHES;')
@@ -165,6 +169,7 @@ export const generatePatchAssetSource = (opt: generatePatchAssetSourceOpts): str
                 FROM_HASH: patch.fromHash,
                 TO_HASH: patch.toHash,
                 MODULES: t.objectExpression(updateModules),
+                RUNTIME_MODULES: t.arrayExpression(patch.runtimeModules),
                 REMOVED_MODULES: t.arrayExpression(patch.removedModules.map(moduleId => t.stringLiteral(moduleId))),
             })
         }),

package/src/types/taro-service.d.ts

@@ -0,0 +1,15 @@
+import type { IProjectConfig } from '@tarojs/taro/types/compile'
+import type { IComponentConfig } from '@tarojs/taro/types/compile/hooks'
+
+declare module '@tarojs/service' {
+    interface IPluginContext {
+        modifyComponentConfig: (
+            callback: (args: {
+                componentConfig: IComponentConfig
+                config: IProjectConfig
+            }) => void,
+        ) => void
+    }
+}
+
+export {}