glass-easel-miniprogram-webpack-plugin 0.2.1 → 0.3.1

package/index.js

@@ -1,409 +1,526 @@
-const fs = require('fs').promises
-const path = require('path')
-const webpack = require('webpack')
-const { RawSource } = require('webpack-sources')
-const VirtualModulesPlugin = require('webpack-virtual-modules')
-const chokidar = require('chokidar')
-const { TmplGroup } = require('glass-easel-template-compiler')
-
-const { escapeJsString } = require('./helpers')
-
-const GlassEaselMiniprogramWxmlLoader = path.join(__dirname, 'wxml_loader.js')
-const GlassEaselMiniprogramWxssLoader = path.join(__dirname, 'wxss_loader.js')
-
-const PLUGIN_NAME = 'GlassEaselMiniprogramWebpackPlugin'
-
+"use strict";
+/* eslint-disable @typescript-eslint/no-var-requires */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlassEaselMiniprogramWebpackPlugin = exports.GlassEaselMiniprogramWxssLoader = exports.GlassEaselMiniprogramWxmlLoader = void 0;
+const node_fs_1 = require("node:fs");
+const path = __importStar(require("node:path"));
+const webpack_1 = require("webpack");
+const glass_easel_template_compiler_1 = require("glass-easel-template-compiler");
+const helpers_1 = require("./helpers");
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const chokidar = require('chokidar');
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const { RawSource } = require('webpack-sources');
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const VirtualModulesPlugin = require('webpack-virtual-modules');
+exports.GlassEaselMiniprogramWxmlLoader = path.join(__dirname, 'wxml_loader.js');
+exports.GlassEaselMiniprogramWxssLoader = path.join(__dirname, 'wxss_loader.js');
+const PLUGIN_NAME = 'GlassEaselMiniprogramWebpackPlugin';
+const CACHE_ETAG = 1;
+const readCache = (compiler, key) => new Promise((resolve) => {
+    const cacheKey = `${PLUGIN_NAME}|${key}`;
+    compiler.cache.get(cacheKey, CACHE_ETAG, (err, cache) => {
+        if (!err && cache !== undefined) {
+            resolve(cache);
+        }
+        else {
+            resolve(undefined);
+        }
+    });
+});
+const writeCache = (compiler, key, value) => new Promise((resolve) => {
+    const cacheKey = `${PLUGIN_NAME}|${key}`;
+    compiler.cache.store(cacheKey, CACHE_ETAG, value, (_err) => {
+        resolve();
+    });
+});
 class StyleSheetManager {
-  constructor() {
-    this.map = Object.create(null)
-    this.enableStyleScope = Object.create(null)
-    this.scopeNameInc = 0
-  }
-
-  add(compPath, srcPath) {
-    let scopeNameNum = this.scopeNameInc
-    this.scopeNameInc += 1
-    let scopeName = ''
-    do {
-      const n = scopeNameNum % 52
-      let c
-      if (n >= 26) {
-        c = String.fromCharCode(n - 26 + 97)
-      } else {
-        c = String.fromCharCode(n + 65)
-      }
-      scopeName += c
-      scopeNameNum = Math.floor(scopeNameNum / 52)
-    } while (scopeNameNum > 0)
-    this.map[compPath] = {
-      srcPath,
-      scopeName,
+    constructor(disableClassPrefix) {
+        this.map = Object.create(null);
+        this.enableStyleScope = Object.create(null);
+        this.scopeNameInc = 0;
+        this.disableClassPrefix = disableClassPrefix;
     }
-  }
-
-  setStyleIsolation(compPath, styleIsolation, isComponent) {
-    const enabled = styleIsolation
-      ? styleIsolation !== 'shared' && styleIsolation !== 'page-shared'
-      : isComponent
-    this.enableStyleScope[compPath] = enabled
-  }
-
-  getScopeName(compPath) {
-    if (this.enableStyleScope[compPath]) {
-      return this.map[compPath].scopeName
+    add(compPath, srcPath) {
+        let scopeNameNum = this.scopeNameInc;
+        this.scopeNameInc += 1;
+        let scopeName = '';
+        do {
+            const n = scopeNameNum % 52;
+            let c;
+            if (n >= 26) {
+                c = String.fromCharCode(n - 26 + 97);
+            }
+            else {
+                c = String.fromCharCode(n + 65);
+            }
+            scopeName += c;
+            scopeNameNum = Math.floor(scopeNameNum / 52);
+        } while (scopeNameNum > 0);
+        this.map[compPath] = {
+            srcPath,
+            scopeName,
+        };
     }
-    return undefined
-  }
-
-  toCodeString() {
-    const arr = Object.entries(this.map).map(([compPath, { srcPath }]) => {
-      const s = `backend.registerStyleSheetContent('${escapeJsString(
-        compPath,
-      )}', require('${escapeJsString(srcPath)}'));`
-      return s
-    })
-    return `
-      function (backend) { ${arr.join('')} }
-    `
-  }
-}
-
-class GlassEaselMiniprogramWebpackPlugin {
-  constructor(options) {
-    this.path = options.path || './src'
-    this.resourceFilePattern = options.resourceFilePattern || /\.(jpg|jpeg|png|gif|html)$/
-    this.defaultEntry = 'pages/index/index'
-    this.virtualModules = new VirtualModulesPlugin()
-  }
-
-  apply(compiler) {
-    // search paths
-    const codeRoot = path.resolve(this.path)
-    const params = {
-      globalStaticConfig: {},
-      compInfoMap: Object.create(null),
-      resPathMap: Object.create(null),
-      appEntry: null,
-      tmplGroup: new TmplGroup(),
-      styleSheetManager: new StyleSheetManager(),
+    setStyleIsolation(compPath, styleIsolation, isComponent) {
+        const enabled = styleIsolation
+            ? styleIsolation !== 'shared' && styleIsolation !== 'page-shared'
+            : isComponent;
+        this.enableStyleScope[compPath] = enabled;
     }
-
-    // determine a path is a component path or not, returning the json content if true
-    const isCompPath = async (relPath) => {
-      if (!relPath) return null
-      let staticConfig = null
-      try {
-        const json = await fs.readFile(path.join(codeRoot, `${relPath}.json`), { encoding: 'utf8' })
-        const parsed = JSON.parse(json)
-        if (parsed && (parsed.component === true || typeof parsed.usingComponents === 'object')) {
-          staticConfig = parsed
+    getScopeName(compPath) {
+        var _a;
+        if (this.disableClassPrefix)
+            return undefined;
+        if (this.enableStyleScope[compPath]) {
+            return (_a = this.map[compPath]) === null || _a === void 0 ? void 0 : _a.scopeName;
         }
-      } catch (e) {
-        /* empty */
+        return undefined;
+    }
+    toCodeString() {
+        const arr = Object.entries(this.map).map(([compPath, { srcPath }]) => {
+            const s = `backend.registerStyleSheetContent('${(0, helpers_1.escapeJsString)(compPath)}', require('${(0, helpers_1.escapeJsString)(srcPath)}'));`;
+            return s;
+        });
+        return `
+      function (backend) {
+        backend.registerStyleSheetContent('app', require('./app.wxss'))
+        ${arr.join('')}
       }
-      return staticConfig
+    `;
     }
-
-    // determine a file is located in the code root or not, returning relative path if true
-    const normalizePath = (absPath) => {
-      const p = path.relative(codeRoot, absPath)
-      if (p.split(path.sep, 1)[0] === '..') return null
-      return p.split(path.sep).join('/')
+}
+class GlassEaselMiniprogramWebpackPlugin {
+    constructor(options) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        this.virtualModules = new VirtualModulesPlugin();
+        this.path = options.path || './src';
+        this.resourceFilePattern = options.resourceFilePattern || /\.(jpg|jpeg|png|gif)$/;
+        this.defaultEntry = options.defaultEntry || 'pages/index/index';
+        this.customBootstrap = options.customBootstrap || false;
+        this.disableClassPrefix = options.disableClassPrefix || false;
     }
-
-    // search for component files
-    let codeRootPromises = null
-    const searchCodeRoot = async (enableWatch) => {
-      if (codeRootPromises) {
-        // wait a short while for changes
-        await new Promise((resolve) => {
-          setTimeout(resolve, 250)
-        })
-        const promises = codeRootPromises
-        codeRootPromises = []
-        await Promise.all(promises)
-        return
-      }
-      codeRootPromises = []
-      const handleFile = async (relPath) => {
-        // for app.json, spread the global field
-        if (relPath === 'app.json') {
-          try {
-            const json = await fs.readFile(path.join(codeRoot, relPath), { encoding: 'utf8' })
-            const staticConfig = JSON.parse(json)
-            if (staticConfig.usingComponents) {
-              params.globalStaticConfig = {
-                usingComponents: staticConfig.usingComponents,
-              }
-            }
-          } catch (e) {
-            params.globalStaticConfig = {}
-          }
-          return
-        }
-
-        // for app.ts or app.js, load it first
-        if (relPath === 'app.ts' || relPath === 'app.js') {
-          params.appEntry = relPath
-        }
-
-        // find component by json files
-        const extName = path.extname(relPath)
-        if (extName === '.json') {
-          const staticConfig = await isCompPath(relPath.slice(0, -extName.length))
-          if (staticConfig) {
-            const compPath = relPath.slice(0, -5)
+    apply(compiler) {
+        const codeRoot = path.resolve(this.path);
+        const compInfoMap = Object.create(null);
+        const resPathMap = Object.create(null);
+        const wxmlContentMap = Object.create(null);
+        let globalStaticConfig = {};
+        let appEntry = null;
+        const depsTmplGroup = new glass_easel_template_compiler_1.TmplGroup();
+        const styleSheetManager = new StyleSheetManager(this.disableClassPrefix);
+        // cleanup wasm modules
+        compiler.hooks.shutdown.tap(PLUGIN_NAME, () => {
+            depsTmplGroup.free();
+        });
+        // determine a file is located in the code root or not, returning relative path if true
+        const normalizePath = (absPath) => {
+            const p = path.relative(codeRoot, absPath);
+            if (p.split(path.sep, 1)[0] === '..')
+                return null;
+            return p.split(path.sep).join('/');
+        };
+        // determine a path is a component path or not, returning the json content if true
+        const isCompPath = (relPath) => __awaiter(this, void 0, void 0, function* () {
+            if (!relPath)
+                return null;
+            let staticConfig = null;
             try {
-              const tsFileStat = await fs.stat(path.join(codeRoot, `${compPath}.ts`))
-              if (tsFileStat.isFile()) {
-                params.compInfoMap[compPath] = {
-                  main: `${compPath}.ts`,
-                  staticConfig,
+                const json = yield node_fs_1.promises.readFile(path.join(codeRoot, `${relPath}.json`), { encoding: 'utf8' });
+                const parsed = JSON.parse(json);
+                if (parsed && (parsed.component === true || typeof parsed.usingComponents === 'object')) {
+                    staticConfig = parsed;
                 }
-                params.styleSheetManager.setStyleIsolation(
-                  compPath,
-                  staticConfig.styleIsolation,
-                  !!staticConfig.component,
-                )
-                return
-              }
-            } catch (e) {
-              /* empty */
             }
-            try {
-              const jsFileStat = await fs.stat(path.join(codeRoot, `${compPath}.js`))
-              if (jsFileStat.isFile()) {
-                params.compInfoMap[compPath] = {
-                  main: `${compPath}.js`,
-                  staticConfig,
-                }
-                return
-              }
-            } catch (e) {
-              /* empty */
+            catch (e) {
+                /* empty */
             }
-          }
-        }
-
-        // add wxml
-        if (extName === '.wxml') {
-          const src = await fs.readFile(path.join(codeRoot, relPath), { encoding: 'utf8' })
-          params.tmplGroup.addTmpl(relPath.slice(0, -extName.length), src)
-          // TODO support wxml file remove
-        }
-
-        // add wxss
-        if (extName === '.wxss') {
-          const srcPath = path.join(codeRoot, relPath)
-          params.styleSheetManager.add(relPath.slice(0, -extName.length), srcPath)
-          // TODO support wxss file remove
-        }
-
-        // add wxs
-        if (extName === '.wxs') {
-          const src = await fs.readFile(path.join(codeRoot, relPath), { encoding: 'utf8' })
-          const scriptPath = relPath.slice(0, -extName.length)
-          params.tmplGroup.addScript(scriptPath, src)
-          // TODO support wxs file remove
-        }
-
-        // find resource files
-        if (this.resourceFilePattern.test(relPath)) {
-          params.resPathMap[relPath] = true
-        }
-      }
-
-      const removeEntry = (relPath) => {
-        delete params.resPathMap[relPath]
-        delete params.compInfoMap[relPath]
-      }
-
-      // await readdirp(codeRoot, handleFile)
-      await new Promise((resolve, reject) => {
-        const watcher = chokidar.watch(codeRoot, { ignoreInitial: false })
-        watcher
-          .on('add', (p) => {
-            codeRootPromises.push(handleFile(normalizePath(p)))
-          })
-          .on('change', (p) => {
-            codeRootPromises.push(handleFile(normalizePath(p)))
-          })
-          .on('unlink', (p) => {
-            removeEntry(normalizePath(p))
-          })
-          .on('error', (err) => {
-            throw new Error(err)
-          })
-          .on('ready', () => {
-            const promises = codeRootPromises
-            codeRootPromises = []
-            Promise.all(promises)
-              .then(() => {
-                if (!enableWatch) return watcher.close()
-                return null
-              })
-              .then(resolve)
-              .catch(reject)
-          })
-      })
-    }
-
-    // init component list before run
-    compiler.hooks.beforeRun.tapPromise(PLUGIN_NAME, async () => {
-      await searchCodeRoot(false)
-    })
-    compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, async () => {
-      await searchCodeRoot(true)
-    })
-
-    // rewrite component entry paths
-    compiler.resolverFactory.hooks.resolver.for('normal').tap(PLUGIN_NAME, (resolver) => {
-      resolver.hooks.result.tap(PLUGIN_NAME, (data) => {
-        const absPath = data.path
-        const extName = path.extname(absPath)
-        if (extName === '.js' || extName === '.ts') {
-          const relPath = normalizePath(absPath)
-          if (relPath && params.compInfoMap[relPath.slice(0, -3)]) {
-            const redirected = `${absPath.slice(0, -3)}.component`
-            if (data.context.issuer !== redirected) {
-              data.path = redirected
-            }
-          }
-        }
-        return data
-      })
-    })
-
-    // add loaders
-    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
-      webpack.NormalModule.getCompilationHooks(compilation).beforeLoaders.tap(
-        PLUGIN_NAME,
-        (loaders, mod) => {
-          const absPath = mod.resource
-          const extName = path.extname(absPath)
-          if (
-            extName === '.ts' ||
-            extName === '.js' ||
-            extName === '.wxml' ||
-            extName === '.wxss'
-          ) {
-            const relPath = path.relative(codeRoot, absPath).split(path.sep).join('/')
-            const compPath = relPath.slice(0, -extName.length)
-            if (params.compInfoMap[compPath] || compPath === 'app') {
-              if (extName === '.wxss') {
-                loaders.forEach((x) => {
-                  if (x.loader === GlassEaselMiniprogramWxssLoader) {
-                    x.options = {
-                      classPrefix: params.styleSheetManager.getScopeName(compPath),
-                      relPath,
+            return staticConfig;
+        });
+        // search for component files
+        let codeRootWatching = false;
+        const searchCodeRoot = (enableWatch) => __awaiter(this, void 0, void 0, function* () {
+            if (codeRootWatching)
+                return;
+            codeRootWatching = true;
+            const handleFile = (relPath) => __awaiter(this, void 0, void 0, function* () {
+                // for app.json, spread the global field
+                if (relPath === 'app.json') {
+                    try {
+                        const json = yield node_fs_1.promises.readFile(path.join(codeRoot, relPath), { encoding: 'utf8' });
+                        const staticConfig = JSON.parse(json);
+                        if (staticConfig.usingComponents) {
+                            globalStaticConfig = {
+                                usingComponents: staticConfig.usingComponents,
+                            };
+                        }
+                    }
+                    catch (e) {
+                        globalStaticConfig = {};
+                    }
+                    return;
+                }
+                // for app.ts or app.js, load it first
+                if (relPath === 'app.ts' || relPath === 'app.js') {
+                    appEntry = relPath;
+                }
+                // find component by json files
+                const extName = path.extname(relPath);
+                if (extName === '.json') {
+                    const staticConfig = yield isCompPath(relPath.slice(0, -extName.length));
+                    if (staticConfig) {
+                        const compPath = relPath.slice(0, -extName.length);
+                        const absPath = path.join(codeRoot, `${compPath}.wxss`);
+                        let hasWxss = false;
+                        try {
+                            hasWxss = (yield node_fs_1.promises.stat(absPath)).isFile();
+                        }
+                        catch (e) {
+                            /* empty */
+                        }
+                        try {
+                            const tsFileStat = yield node_fs_1.promises.stat(path.join(codeRoot, `${compPath}.ts`));
+                            if (tsFileStat.isFile()) {
+                                compInfoMap[compPath] = {
+                                    main: `${compPath}.ts`,
+                                    taskConfig: staticConfig.taskConfig,
+                                    hasWxss,
+                                };
+                                styleSheetManager.add(compPath, absPath);
+                                styleSheetManager.setStyleIsolation(compPath, staticConfig.styleIsolation, !!staticConfig.component);
+                                return;
+                            }
+                        }
+                        catch (e) {
+                            /* empty */
+                        }
+                        try {
+                            const jsFileStat = yield node_fs_1.promises.stat(path.join(codeRoot, `${compPath}.js`));
+                            if (jsFileStat.isFile()) {
+                                compInfoMap[compPath] = {
+                                    main: `${compPath}.js`,
+                                    taskConfig: staticConfig.taskConfig,
+                                    hasWxss,
+                                };
+                                return;
+                            }
+                        }
+                        catch (e) {
+                            /* empty */
+                        }
+                    }
+                }
+                // find wxss file for components
+                if (extName === '.wxss') {
+                    const compPath = relPath.slice(0, -5);
+                    if (compInfoMap[compPath]) {
+                        compInfoMap[compPath].hasWxss = true;
+                    }
+                }
+                // find resource files
+                if (this.resourceFilePattern.test(relPath)) {
+                    resPathMap[relPath] = true;
+                }
+            });
+            const removeEntry = (relPath) => {
+                delete resPathMap[relPath];
+                const extName = path.extname(relPath);
+                const compPath = relPath.slice(0, -extName.length);
+                if (compInfoMap[compPath]) {
+                    if (extName === '.json') {
+                        delete compInfoMap[compPath];
+                    }
+                    else if (extName === '.wxss') {
+                        compInfoMap[compPath].hasWxss = false;
+                    }
+                }
+            };
+            // await readdirp(codeRoot, handleFile)
+            yield new Promise((resolve, reject) => {
+                const promises = [];
+                /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+                const watcher = chokidar.watch(codeRoot, { ignoreInitial: false });
+                watcher
+                    .on('add', (p) => {
+                    const normalized = normalizePath(p);
+                    if (normalized) {
+                        promises.push(handleFile(normalized));
                     }
-                  }
                 })
-              } else if (extName === '.wxml' && compPath !== 'app') {
-                loaders.forEach((x) => {
-                  if (x.loader === GlassEaselMiniprogramWxmlLoader) {
-                    x.options = { compPath }
-                  }
+                    .on('unlink', (p) => {
+                    const normalized = normalizePath(p);
+                    if (normalized)
+                        removeEntry(normalized);
                 })
-              }
-            }
-          }
-        },
-      )
-    })
-
-    // collect virtual files
-    const virtualModules = this.virtualModules
-    virtualModules.apply(compiler)
-    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
-      // add virtual component js file
-      Object.keys(params.compInfoMap).forEach((compPath) => {
-        const compInfo = params.compInfoMap[compPath]
-        const json = JSON.stringify(compInfo.staticConfig)
-        const scopeName = params.styleSheetManager.getScopeName(compPath)
-        const scopeNameStr = scopeName === undefined ? undefined : `'${scopeName}'`
-        virtualModules.writeModule(
-          path.join(codeRoot, `${compPath}.component`),
+                    .on('ready', () => {
+                    Promise.all(promises)
+                        .then(() => {
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+                        if (!enableWatch)
+                            return watcher.close();
+                        return null;
+                    })
+                        .then(resolve)
+                        .catch(reject);
+                });
+                /* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+            });
+        });
+        // init component list before run
+        compiler.hooks.beforeRun.tapPromise(PLUGIN_NAME, () => __awaiter(this, void 0, void 0, function* () {
+            yield searchCodeRoot(false);
+        }));
+        compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, () => __awaiter(this, void 0, void 0, function* () {
+            yield searchCodeRoot(true);
+        }));
+        // rewrite component entry paths
+        compiler.resolverFactory.hooks.resolver.for('normal').tap(PLUGIN_NAME, (resolver) => {
+            resolver.hooks.result.tap(PLUGIN_NAME, (data) => {
+                var _a;
+                if (data.path === false)
+                    return data;
+                const absPath = data.path;
+                const extName = path.extname(absPath);
+                if (extName === '.js' || extName === '.ts') {
+                    const relPath = normalizePath(absPath);
+                    if (relPath && compInfoMap[relPath.slice(0, -3)]) {
+                        const redirected = `${absPath.slice(0, -3)}.glass-easel-component`;
+                        if (((_a = data.context) === null || _a === void 0 ? void 0 : _a.issuer) !== redirected) {
+                            data.path = redirected;
+                        }
+                    }
+                }
+                return data;
+            });
+        });
+        // collect virtual files
+        const virtualModules = this.virtualModules;
+        virtualModules.apply(compiler);
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            // add loaders
+            webpack_1.NormalModule.getCompilationHooks(compilation).beforeLoaders.tap(PLUGIN_NAME, (loaders, mod) => {
+                const absPath = mod.resource;
+                const extName = path.extname(absPath);
+                if (extName === '.wxml' || extName === '.wxss') {
+                    const relPath = path.relative(codeRoot, absPath).split(path.sep).join('/');
+                    const compPath = relPath.slice(0, -extName.length);
+                    if (extName === '.wxss') {
+                        loaders.forEach((x) => {
+                            if (x.loader === exports.GlassEaselMiniprogramWxssLoader) {
+                                x.options = {
+                                    classPrefix: styleSheetManager.getScopeName(compPath),
+                                    relPath,
+                                };
+                            }
+                        });
+                    }
+                    else if (extName === '.wxml') {
+                        loaders.forEach((x) => {
+                            if (x.loader === exports.GlassEaselMiniprogramWxmlLoader) {
+                                x.options = {
+                                    addTemplate(content) {
+                                        wxmlContentMap[compPath] = content;
+                                        depsTmplGroup.addTmpl(compPath, content);
+                                        const deps = depsTmplGroup
+                                            .getDirectDependencies(compPath)
+                                            .concat(depsTmplGroup.getScriptDependencies(compPath));
+                                        return {
+                                            compPath,
+                                            deps,
+                                            codeRoot,
+                                        };
+                                    },
+                                };
+                            }
+                        });
+                    }
+                }
+            });
+            // do some rebuild after all module compilation done
+            compilation.hooks.finishModules.tapPromise(PLUGIN_NAME, (modules) => __awaiter(this, void 0, void 0, function* () {
+                const tasks = [];
+                let indexModule;
+                const tmplGroup = new glass_easel_template_compiler_1.TmplGroup();
+                // collect compilation results
+                // eslint-disable-next-line no-restricted-syntax
+                for (const m of modules) {
+                    if (m.type !== 'javascript/auto')
+                        continue;
+                    const module = m;
+                    if (module.resource === `${codeRoot}/index.js`) {
+                        indexModule = module;
+                        continue;
+                    }
+                    const absPath = module.resource;
+                    const extName = path.extname(absPath);
+                    if (extName === '.wxml') {
+                        if (module.loaders.some((x) => x.loader === exports.GlassEaselMiniprogramWxmlLoader)) {
+                            // check wxml results, read cache if needed
+                            const relPath = path.relative(codeRoot, absPath).split(path.sep).join('/');
+                            const compPath = relPath.slice(0, -extName.length);
+                            // eslint-disable-next-line no-loop-func
+                            tasks.push((() => __awaiter(this, void 0, void 0, function* () {
+                                let content = wxmlContentMap[compPath];
+                                if (content) {
+                                    // TODO use compiled content as better cache
+                                    yield writeCache(compiler, relPath, content);
+                                }
+                                else {
+                                    const s = yield readCache(compiler, relPath);
+                                    if (s === undefined) {
+                                        throw new Error(`Cannot find WXML compilation result for ${relPath} (webpack cache broken?)`);
+                                    }
+                                    content = s;
+                                }
+                                if (typeof content === 'string') {
+                                    tmplGroup.addTmpl(compPath, content);
+                                }
+                            }))());
+                        }
+                    }
+                }
+                // write index module
+                yield Promise.all(tasks);
+                yield new Promise((resolve) => {
+                    updateVirtualIndexFile(tmplGroup);
+                    tmplGroup.free();
+                    compilation.rebuildModule(indexModule, () => resolve());
+                });
+            }));
+            // add virtual component js file
+            const updateComponentJsFile = (compPath) => {
+                const compInfo = compInfoMap[compPath];
+                const scopeName = styleSheetManager.getScopeName(compPath);
+                const scopeNameStr = scopeName === undefined ? undefined : `'${scopeName}'`;
+                const jsonSrcPath = path.join(codeRoot, `${compPath}.json`);
+                const wxmlSrcPath = path.join(codeRoot, `${compPath}.wxml`);
+                const wxssSrcPath = path.join(codeRoot, `${compPath}.wxss`);
+                const addStyleSheet = compInfo.hasWxss
+                    ? `
+            require('${(0, helpers_1.escapeJsString)(wxssSrcPath)}')
+            codeSpace.addStyleSheet(
+              '${(0, helpers_1.escapeJsString)(compPath)}',
+              '${(0, helpers_1.escapeJsString)(compPath)}',
+              ${scopeNameStr}
+            )
           `
-            var index = require('${escapeJsString(codeRoot)}/index.js')
-            index.codeSpace.addComponentStaticConfig('${escapeJsString(compPath)}', ${json})
-            index.codeSpace.addCompiledTemplate('${escapeJsString(compPath)}', {
+                    : '';
+                virtualModules.writeModule(path.join(codeRoot, `${compPath}.glass-easel-component`), `
+            var index = require('${(0, helpers_1.escapeJsString)(codeRoot)}/index.js')
+            var codeSpace = index.codeSpace
+            var staticConfig = require('${(0, helpers_1.escapeJsString)(jsonSrcPath)}')
+            staticConfig.usingComponents = Object.assign(
+              {},
+              index.globalUsingComponents,
+              staticConfig.usingComponents
+            )
+            codeSpace.addComponentStaticConfig('${(0, helpers_1.escapeJsString)(compPath)}', staticConfig)
+            codeSpace.addCompiledTemplate('${(0, helpers_1.escapeJsString)(compPath)}', {
               groupList: index.genObjectGroups,
-              content: index.genObjectGroups[require(
-                '${escapeJsString(codeRoot)}/${escapeJsString(compPath)}.wxml'
-              )]
+              content: index.genObjectGroups[require('${(0, helpers_1.escapeJsString)(wxmlSrcPath)}')]
             })
-            index.codeSpace.addStyleSheet(
-              '${escapeJsString(compPath)}',
-              '${escapeJsString(compPath)}',
-              ${scopeNameStr}
-            )
-            index.codeSpace.globalComponentEnv(index.globalObject, '${escapeJsString(
-              compPath,
-            )}', () => {
-              require('./${escapeJsString(path.basename(compInfo.main))}')
+            ${addStyleSheet}
+            codeSpace.globalComponentEnv(index.globalObject, '${(0, helpers_1.escapeJsString)(compPath)}', () => {
+              require('./${(0, helpers_1.escapeJsString)(path.basename(compInfo.main))}')
             })
-          `,
-        )
-      })
-
-      // add virtual index file
-      const entryHeader = `
-        var adapter = require('glass-easel-miniprogram-adapter')
-        var glassEasel = adapter.glassEasel
-        var env = new adapter.MiniProgramEnv()
-        exports.env = env
-        var backend = new glassEasel.domlikeBackend.CurrentWindowBackendContext()
-        backend.onEvent((target, type, detail, options) => {
-          let cur = target
-          while (cur && !cur.__wxElement) cur = cur.parentNode
-          if (!cur) return
-          glassEasel.triggerEvent(target.__wxElement, type, detail, options)
-        })
-        var ab = env.associateBackend(backend)
-        ;(${params.styleSheetManager.toCodeString()})(ab)
-        var codeSpace = env.createCodeSpace('', true)
-        codeSpace.addStyleSheet('app', 'app')
-        exports.codeSpace = codeSpace
-        exports.genObjectGroups = ${params.tmplGroup.getTmplGenObjectGroups()}
-        exports.globalObject = (function () {
-          if (typeof this !== 'undefined') { return this }
-          if (typeof globalThis !== 'undefined') { return globalThis }
-          if (typeof self !== 'undefined') { return self }
-          if (typeof window !== 'undefined') { return window }
-          if (typeof global !== 'undefined') { return global }
-          throw new Error('The global object cannot be recognized')
-        })()
-      `
-      const entryFooter = `
-        var root = ab.createRoot('glass-easel-root', codeSpace, '${escapeJsString(
-          this.defaultEntry,
-        )}')
-        var placeholder = document.createElement('span')
-        document.body.appendChild(placeholder)
-        root.attach(document.body, placeholder)
-      `
-      const entries = Object.values(params.compInfoMap).map((compInfo) => compInfo.main)
-      if (params.appEntry) entries.unshift(params.appEntry)
-      virtualModules.writeModule(
-        path.join(codeRoot, 'index.js'),
-        entryHeader +
-          entries.map((p) => `require('./${escapeJsString(p)}')\n`).join('') +
-          entryFooter,
-      )
-
-      // copy res files
-      compilation.hooks.additionalAssets.tapPromise(PLUGIN_NAME, async () => {
-        await Promise.all(
-          Object.keys(params.resPathMap).map(async (p) => {
-            compilation.assets[p] = new RawSource(await fs.readFile(path.join(codeRoot, p)))
-          }),
-        )
-      })
-    })
-  }
+          `);
+            };
+            Object.keys(compInfoMap).forEach((compPath) => updateComponentJsFile(compPath));
+            // add virtual index file
+            const updateVirtualIndexFile = (tmplGroup) => {
+                const entryHeader = `
+          var adapter = require('glass-easel-miniprogram-adapter')
+          var glassEasel = adapter.glassEasel
+          var env = new adapter.MiniProgramEnv()
+          exports.env = env
+          var codeSpace = env.createCodeSpace('', true)
+          codeSpace.addStyleSheet('app', 'app')
+          exports.codeSpace = codeSpace
+          exports.genObjectGroups = ${tmplGroup ? tmplGroup.getTmplGenObjectGroups() : '{}'}
+          exports.globalUsingComponents = ${JSON.stringify(globalStaticConfig.usingComponents)}
+          exports.globalObject = (function () {
+            if (typeof this !== 'undefined') { return this }
+            if (typeof globalThis !== 'undefined') { return globalThis }
+            if (typeof self !== 'undefined') { return self }
+            if (typeof window !== 'undefined') { return window }
+            if (typeof global !== 'undefined') { return global }
+            throw new Error('The global object cannot be recognized')
+          })()
+        `;
+                const entryFooter = `
+          var initWithBackend = function (backend) {
+            var ab = env.associateBackend(backend)
+            ;(${styleSheetManager.toCodeString()})(ab)
+            return ab
+          }
+          exports.initWithBackend = initWithBackend
+          var registerGlobalEventListener = function (backend) {
+            backend.onEvent((target, type, detail, options) => {
+              glassEasel.triggerEvent(target, type, detail, options)
+            })
+          }
+          exports.registerGlobalEventListener = registerGlobalEventListener
+        `;
+                const bootstrap = this.customBootstrap
+                    ? ''
+                    : `
+            var backend = new glassEasel.CurrentWindowBackendContext()
+            registerGlobalEventListener(backend)
+            var ab = initWithBackend(backend)
+            var root = ab.createRoot('glass-easel-root', codeSpace, '${(0, helpers_1.escapeJsString)(this.defaultEntry)}')
+            var placeholder = document.createElement('span')
+            document.body.appendChild(placeholder)
+            root.attach(document.body, placeholder)
+          `;
+                const entries = Object.values(compInfoMap).map((compInfo) => compInfo.main);
+                if (appEntry)
+                    entries.unshift(appEntry);
+                virtualModules.writeModule(path.join(codeRoot, 'index.js'), entryHeader +
+                    entries.map((p) => `require('./${(0, helpers_1.escapeJsString)(p)}')\n`).join('') +
+                    entryFooter +
+                    bootstrap);
+            };
+            updateVirtualIndexFile();
+            // copy res files
+            compilation.hooks.additionalAssets.tapPromise(PLUGIN_NAME, () => __awaiter(this, void 0, void 0, function* () {
+                yield Promise.all(Object.keys(resPathMap).map((p) => __awaiter(this, void 0, void 0, function* () {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+                    compilation.assets[p] = new RawSource(yield node_fs_1.promises.readFile(path.join(codeRoot, p)));
+                })));
+            }));
+        });
+    }
 }
-
-exports.GlassEaselMiniprogramWebpackPlugin = GlassEaselMiniprogramWebpackPlugin
-exports.GlassEaselMiniprogramWxmlLoader = GlassEaselMiniprogramWxmlLoader
-exports.GlassEaselMiniprogramWxssLoader = GlassEaselMiniprogramWxssLoader
+exports.GlassEaselMiniprogramWebpackPlugin = GlassEaselMiniprogramWebpackPlugin;