@taro-hmr-compile/plugin-webpack 0.0.1-alpha.10

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

@@ -0,0 +1,119 @@
+import {parse} from '@babel/parser'
+import generate from '@babel/generator'
+import webpack from 'webpack'
+
+const PLUGIN_NAME = 'HmrPatchRuntimePlugin'
+
+const hotRuntimeCode = `
+var applyQueue = Promise.resolve();
+
+${webpack.RuntimeGlobals.require}.miniHmr = {
+  shouldApplyBootstrapPatch: function(patch) {
+    if (!patch) return false;
+
+    return Object.keys(patch.modules).some(function(moduleId) {
+      return !Object.prototype.hasOwnProperty.call(${webpack.RuntimeGlobals.moduleFactories}, moduleId);
+    });
+  },
+  applyBootstrapPatch: function(patch) {
+    if (!patch) return [];
+
+    // 微信要求 Page() 在页面脚本求值期间同步注册。bootstrap 只补齐缺失工厂，
+    // 不会覆盖现有模块；必须在 Page Chunk startup 继续执行前同步完成。
+    var installedModules = [];
+    Object.keys(patch.modules).forEach(function(moduleId) {
+      if (!Object.prototype.hasOwnProperty.call(${webpack.RuntimeGlobals.moduleFactories}, moduleId)) {
+        ${webpack.RuntimeGlobals.moduleFactories}[moduleId] = patch.modules[moduleId];
+        installedModules.push(moduleId);
+      }
+    });
+    return installedModules;
+  },
+  applyUpdatePatch: function(patch) {
+    if (!patch) return Promise.resolve();
+    
+    globalThis.log('apply update patch %O', patch);
+
+    var task = applyQueue.then(function() {
+      var runtimeHash = ${webpack.RuntimeGlobals.getFullHash}();
+
+      if (runtimeHash === patch.toHash) return;
+
+      currentUpdateApplyHandlers = [];
+
+      ${webpack.RuntimeGlobals.require}.miniHmr.preparePatch(patch, currentUpdateApplyHandlers);
+
+      return setStatus('ready')
+        .then(function() { return hotApply(); })
+        .then(function(updatedModules) {
+          ${webpack.RuntimeGlobals.getFullHash} = function() { return patch.toHash; };
+          return updatedModules;
+        });
+    });
+
+    // 单次失败不能阻塞后续 patch
+    applyQueue = task.catch(function() {});
+
+    return task;
+  }
+};
+`;
+
+const chunkLoadingRuntimeCode = `
+${webpack.RuntimeGlobals.require}.miniHmr.preparePatch = function(patch, applyHandlers) {
+  currentUpdateChunks = {};
+  currentUpdate = Object.assign({}, patch.modules);
+  currentUpdateRemovedChunks = [];
+  currentUpdateRuntime = patch.runtimeModules ? patch.runtimeModules.slice() : [];
+
+  if (patch.removedModules) {
+    patch.removedModules.forEach(function(moduleId) {
+      currentUpdate[moduleId] = false;
+    });
+  }
+
+  applyHandlers.push(applyHandler);
+};
+`
+
+const injectRuntime = (source: string, injectedCode: string) => {
+    const runtime = parse(source, {sourceType: 'script'})
+    const injected = parse(injectedCode, {sourceType: 'script'})
+
+    runtime.program.body.push(...injected.program.body)
+
+    return generate(runtime).code
+}
+
+export class HmrPatchRuntimePlugin {
+    apply(compiler: webpack.Compiler) {
+        compiler.hooks.thisCompilation.tap(
+            PLUGIN_NAME,
+            compilation => {
+                compilation.hooks.additionalTreeRuntimeRequirements.tap(PLUGIN_NAME, (_chunk, runtimeRequirements) => {
+                    runtimeRequirements.add(webpack.RuntimeGlobals.require)
+                    runtimeRequirements.add(webpack.RuntimeGlobals.getFullHash)
+                })
+
+                compilation.hooks.runtimeModule.tap(PLUGIN_NAME, runtimeModule => {
+                    const injectedCode = {
+                        HotModuleReplacementRuntimeModule: hotRuntimeCode,
+                        JsonpChunkLoadingRuntimeModule: chunkLoadingRuntimeCode,
+                    }[runtimeModule.constructor.name]
+
+                    if (!injectedCode) return
+
+                    const generate = runtimeModule.generate.bind(runtimeModule)
+
+                    runtimeModule.generate = () => {
+                        const source = generate()
+
+                        if (!source) return source
+
+                        return injectRuntime(source, injectedCode)
+                    }
+                })
+            },
+        )
+    }
+}

package/src/patch/types.ts

@@ -0,0 +1,20 @@
+import type {Expression} from "@babel/types";
+
+export interface ModuleFactory {
+    factory: Expression,
+    moduleId: string
+}
+
+export interface HotUpdateManifest {
+    m?: Array<string | number>
+}
+
+export interface UpdatePatchSource {
+    type: 'update'
+    fromHash: string
+    toHash: string
+    moduleFactories: ModuleFactory[]
+    runtimeModules: Expression[]
+    removedModules: string[]
+}
+

package/src/patch/utils.ts

@@ -0,0 +1,179 @@
+import * as t from "@babel/types";
+import {parse} from "@babel/parser";
+import traverse from "@babel/traverse";
+import template from "@babel/template";
+import generator from "@babel/generator";
+import {Asset} from "webpack";
+import {HotUpdateManifest, ModuleFactory} from "./types";
+import type {ObjectExpression} from "@babel/types";
+import {UpdatePatchSource} from "./types";
+
+
+/**
+ * 解析模块 Factory
+ * @param expression
+ */
+const parseModuleFactories = (expression: ObjectExpression) => {
+
+    const moduleFactories = new Map<string, ModuleFactory>()
+
+    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 模块对象包含无法识别的属性')
+
+        const {key, value: factory} = property
+
+        const moduleId = (() => {
+            if (t.isStringLiteral(key) || t.isNumericLiteral(key)) return String(key.value)
+            if (t.isIdentifier(key) && !property.computed) return key.name
+            throw new Error('[taro-hmr-compile] Chunk 模块对象包含无法识别的模块 ID')
+        })()
+
+        moduleFactories.set(moduleId, {factory, moduleId})
+    })
+
+    return Array.from(moduleFactories.values())
+}
+
+
+export interface ParseHotUpdateAssetsOptions {
+    manifests: Readonly<Asset>[]
+    scripts: Readonly<Asset>[]
+}
+
+/**
+ * 解析热更新产物
+ * @param opt
+ */
+export const parseHotUpdateAssets = (opt: ParseHotUpdateAssetsOptions) => {
+    const {manifests, scripts} = opt
+
+    const moduleFactories = new Map<string, ModuleFactory>()
+    const runtimeModules: t.Expression[] = []
+
+    scripts.forEach(asset => {
+
+        const ast = parse(asset.source.source().toString(), {sourceType: 'script'})
+
+        traverse(ast, {
+            CallExpression(nodePath) {
+                const {callee} = nodePath.node
+
+                if (!t.isMemberExpression(callee) || !t.isIdentifier(callee.object, {name: 'wx'})) return
+
+                if (!t.isStringLiteral(callee.property) || !callee.property.value.startsWith('webpackHotUpdate')) return
+
+                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)
+            },
+        })
+    })
+
+    const removedModules = new Set<string>()
+
+    manifests.forEach((module) => {
+
+        const manifest = JSON.parse(module.source.source().toString()) as HotUpdateManifest
+
+        const {m: tempRemoveModules = []} = manifest
+
+        tempRemoveModules.forEach(removedModule => removedModules.add(String(removedModule)))
+    }, [])
+
+    return {moduleFactories, runtimeModules, removedModules}
+}
+
+/**
+ * 解析 chunk 产物
+ * @param source
+ */
+export const parseChunkAsset = (source: string): Map<string, ModuleFactory> => {
+    const ast = parse(`(${source})`, {sourceType: 'script'})
+
+    const [statement] = ast.program.body
+
+    if (!t.isExpressionStatement(statement) || !t.isObjectExpression(statement.expression)) throw new Error('[taro-hmr-compile] Chunk 模块段不是对象表达式')
+
+    const moduleFactories = new Map<string, ModuleFactory>()
+
+    parseModuleFactories(statement.expression).forEach(module => moduleFactories.set(module.moduleId, module))
+
+    return moduleFactories
+}
+
+export const mergeUpdatePatches = (basePatch: UpdatePatchSource, nextPatch: UpdatePatchSource,): UpdatePatchSource => {
+    if (basePatch.toHash !== nextPatch.fromHash) throw new Error(`[taro-hmr-compile] 无法合并不连续的 HMR patch：${basePatch.toHash} !== ${nextPatch.fromHash}`)
+
+    const moduleFactories = new Map(basePatch.moduleFactories.map(moduleFactory => [moduleFactory.moduleId, moduleFactory]))
+
+    const removedModules = new Set(basePatch.removedModules)
+
+    nextPatch.moduleFactories.forEach(moduleFactory => {
+        const {moduleId} = moduleFactory
+        moduleFactories.set(moduleId, moduleFactory)
+        removedModules.delete(moduleId)
+    })
+
+    nextPatch.removedModules.forEach(moduleId => {
+        moduleFactories.delete(moduleId)
+        removedModules.add(moduleId)
+    })
+
+    return {
+        type: 'update',
+        fromHash: basePatch.fromHash,
+        toHash: nextPatch.toHash,
+        moduleFactories: Array.from(moduleFactories.values()),
+        runtimeModules: [...basePatch.runtimeModules, ...nextPatch.runtimeModules],
+        removedModules: [...removedModules],
+    }
+}
+
+export interface generatePatchAssetSourceOpts {
+    bootstrapFactories: Map<string, ModuleFactory>
+    recentUpdatePatches: UpdatePatchSource[]
+}
+
+export const generatePatchAssetSource = (opt: generatePatchAssetSourceOpts): string => {
+    const {bootstrapFactories, recentUpdatePatches} = opt
+    const buildBootstrapPatch = template.expression(`({
+        type: 'bootstrap',
+        modules: MODULES
+    })`)
+    const buildUpdatePatch = template.expression(`({
+        type: 'update',
+        fromHash: "FROM_HASH",
+        toHash: "TO_HASH",
+        modules: MODULES,
+        runtimeModules: RUNTIME_MODULES,
+        removedModules: REMOVED_MODULES
+    })`)
+    const buildPatchAsset = template.program('module.exports = PATCHES;')
+    const bootstrapModules = Array.from(bootstrapFactories.values()).map((moduleFactory) => {
+        const {moduleId, factory} = moduleFactory
+        return t.objectProperty(t.stringLiteral(moduleId), factory)
+    })
+    const patchNodes = [
+        buildBootstrapPatch({MODULES: t.objectExpression(bootstrapModules)}),
+        ...recentUpdatePatches.map(patch => {
+            const updateModules = patch.moduleFactories.map((moduleFactory) => {
+                const {moduleId, factory} = moduleFactory
+                return t.objectProperty(t.stringLiteral(moduleId), factory)
+            })
+            return buildUpdatePatch({
+                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))),
+            })
+        }),
+    ]
+
+    return generator(buildPatchAsset({PATCHES: t.arrayExpression(patchNodes)})).code
+}

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

@@ -0,0 +1,40 @@
+import {HmrCompileServer} from '@taro-hmr-compile/core/compiler'
+import type {Compiler} from 'webpack'
+import {HmrCompilerPlugin} from '../compile/hmr-compiler-plugin'
+import {log} from "../log";
+
+const serverLog = log.extend('HmrServerPlugin')
+
+const PLUGIN_NAME = 'HmrServerPlugin'
+
+export interface HmrServerPluginOptions {
+    host?: string
+    port?: number
+}
+
+export class HmrServerPlugin extends HmrCompileServer {
+    private compiler?: Compiler
+
+    constructor(private readonly options: HmrServerPluginOptions) {
+        super()
+    }
+
+    apply(compiler: Compiler) {
+        this.compiler = compiler
+
+        compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, async () => {
+            if (this.isServerRunning) return
+            const {port = 8080, host} = this.options
+            serverLog('start server %O', {port, host})
+            await this.start(port, host)
+        })
+
+        compiler.hooks.watchClose.tap(PLUGIN_NAME, () => this.stop())
+    }
+
+    override compile(page: string) {
+        serverLog('receive compile %s', page)
+        if (!this.compiler) throw new Error('[taro-hmr-compile] Compiler 尚未初始化')
+        HmrCompilerPlugin.getCompilerHooks(this.compiler).compileRequested.call(page)
+    }
+}

package/src/utils.ts

@@ -0,0 +1,25 @@
+import {readConfig, resolveMainFilePath} from '@tarojs/helper'
+import type {IPluginContext} from '@tarojs/service'
+import type {AppConfig} from '@tarojs/taro'
+import path from 'path'
+
+export const getAppConfig = (ctx: IPluginContext): AppConfig => {
+    const sourceRoot = ctx.initialConfig.sourceRoot || 'src'
+    
+    const appConfigPath = resolveMainFilePath(path.resolve(ctx.paths.appPath, sourceRoot, 'app.config'))
+
+    return readConfig(appConfigPath, ctx.initialConfig)
+}
+
+export const getAllPages = (appConfig: AppConfig): string[] => {
+    const subPackages = [
+        ...(appConfig.subPackages ?? []),
+        ...(appConfig.subpackages ?? []),
+    ]
+
+    const subPackagePages = subPackages.flatMap(({root, pages}) =>
+        pages.map(page => `${root.replace(/\/+$/, '')}/${page.replace(/^\/+/, '')}`)
+    )
+
+    return [...(appConfig.pages ?? []), ...subPackagePages]
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "module": "commonjs",
+    "strict": true,
+    "sourceMap": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    // 声明文件生成到的文件目录
+    "outDir": "./dist/",
+    "skipLibCheck": true,
+    /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext", "dom"],
+    "types": ["@types/node"],
+  },
+  "include": ["src"],
+
+}