glass-easel-miniprogram-webpack-plugin 0.1.1 → 0.2.0

package/helpers.js

@@ -1,7 +1,8 @@
 /* eslint-disable */
 
-exports.escapeJsString = (str) => str.replace(/["'\\\r\n`]/g, (c) => {
-  if (c === '\r') return '\\r'
-  if (c === '\n') return '\\n'
-  return `\\${c}`
-})
+exports.escapeJsString = (str) =>
+  str.replace(/["'\\\r\n`]/g, (c) => {
+    if (c === '\r') return '\\r'
+    if (c === '\n') return '\\n'
+    return `\\${c}`
+  })

package/index.js

@@ -1,8 +1,6 @@
-/* eslint-disable */
-
 const fs = require('fs').promises
 const path = require('path')
-const { NormalModule } = require('webpack')
+const webpack = require('webpack')
 const { RawSource } = require('webpack-sources')
 const VirtualModulesPlugin = require('webpack-virtual-modules')
 const chokidar = require('chokidar')
@@ -10,6 +8,7 @@ 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'
@@ -58,7 +57,9 @@ class StyleSheetManager {
 
   toCodeString() {
     const arr = Object.entries(this.map).map(([compPath, { srcPath }]) => {
-      const s = `backend.registerStyleSheetContent('${escapeJsString(compPath)}', require('${escapeJsString(srcPath)}'));`
+      const s = `backend.registerStyleSheetContent('${escapeJsString(
+        compPath,
+      )}', require('${escapeJsString(srcPath)}'));`
       return s
     })
     return `
@@ -97,7 +98,9 @@ class GlassEaselMiniprogramWebpackPlugin {
         if (parsed && (parsed.component === true || typeof parsed.usingComponents === 'object')) {
           staticConfig = parsed
         }
-      } catch (e) { /* empty */ }
+      } catch (e) {
+        /* empty */
+      }
       return staticConfig
     }
 
@@ -109,10 +112,19 @@ class GlassEaselMiniprogramWebpackPlugin {
     }
 
     // search for component files
-    let codeRootWatching = false
+    let codeRootPromises = null
     const searchCodeRoot = async (enableWatch) => {
-      if (codeRootWatching) return
-      codeRootWatching = true
+      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') {
@@ -155,7 +167,9 @@ class GlassEaselMiniprogramWebpackPlugin {
                 )
                 return
               }
-            } catch (e) { /* empty */ }
+            } catch (e) {
+              /* empty */
+            }
             try {
               const jsFileStat = await fs.stat(path.join(codeRoot, `${compPath}.js`))
               if (jsFileStat.isFile()) {
@@ -165,7 +179,9 @@ class GlassEaselMiniprogramWebpackPlugin {
                 }
                 return
               }
-            } catch (e) { /* empty */ }
+            } catch (e) {
+              /* empty */
+            }
           }
         }
 
@@ -183,6 +199,14 @@ class GlassEaselMiniprogramWebpackPlugin {
           // 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
@@ -196,14 +220,13 @@ class GlassEaselMiniprogramWebpackPlugin {
 
       // await readdirp(codeRoot, handleFile)
       await new Promise((resolve, reject) => {
-        const promises = []
         const watcher = chokidar.watch(codeRoot, { ignoreInitial: false })
         watcher
           .on('add', (p) => {
-            promises.push(handleFile(normalizePath(p)))
+            codeRootPromises.push(handleFile(normalizePath(p)))
           })
           .on('change', (p) => {
-            promises.push(handleFile(normalizePath(p)))
+            codeRootPromises.push(handleFile(normalizePath(p)))
           })
           .on('unlink', (p) => {
             removeEntry(normalizePath(p))
@@ -212,6 +235,8 @@ class GlassEaselMiniprogramWebpackPlugin {
             throw new Error(err)
           })
           .on('ready', () => {
+            const promises = codeRootPromises
+            codeRootPromises = []
             Promise.all(promises)
               .then(() => {
                 if (!enableWatch) return watcher.close()
@@ -232,32 +257,36 @@ class GlassEaselMiniprogramWebpackPlugin {
     })
 
     // 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
-              }
+    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
-        })
+        }
+        return data
       })
+    })
 
     // add loaders
     compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
-      NormalModule.getCompilationHooks(compilation).beforeLoaders
-        .tap(PLUGIN_NAME, (loaders, mod) => {
+      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') {
+          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') {
@@ -270,10 +299,17 @@ class GlassEaselMiniprogramWebpackPlugin {
                     }
                   }
                 })
+              } else if (extName === '.wxml' && compPath !== 'app') {
+                loaders.forEach((x) => {
+                  if (x.loader === GlassEaselMiniprogramWxmlLoader) {
+                    x.options = { compPath }
+                  }
+                })
               }
             }
           }
-        })
+        },
+      )
     })
 
     // collect virtual files
@@ -293,14 +329,18 @@ class GlassEaselMiniprogramWebpackPlugin {
             index.codeSpace.addComponentStaticConfig('${escapeJsString(compPath)}', ${json})
             index.codeSpace.addCompiledTemplate('${escapeJsString(compPath)}', {
               groupList: index.genObjectGroups,
-              content: index.genObjectGroups['${escapeJsString(compPath)}']
+              content: index.genObjectGroups[require(
+                '${escapeJsString(codeRoot)}/${escapeJsString(compPath)}.wxml'
+              )]
             })
             index.codeSpace.addStyleSheet(
               '${escapeJsString(compPath)}',
               '${escapeJsString(compPath)}',
-              ${scopeNameStr},
+              ${scopeNameStr}
             )
-            index.codeSpace.globalComponentEnv(index.globalObject, '${escapeJsString(compPath)}', () => {
+            index.codeSpace.globalComponentEnv(index.globalObject, '${escapeJsString(
+              compPath,
+            )}', () => {
               require('./${escapeJsString(path.basename(compInfo.main))}')
             })
           `,
@@ -336,7 +376,9 @@ class GlassEaselMiniprogramWebpackPlugin {
         })()
       `
       const entryFooter = `
-        var root = ab.createRoot('glass-easel-root', codeSpace, '${escapeJsString(this.defaultEntry)}')
+        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)
@@ -344,19 +386,24 @@ class GlassEaselMiniprogramWebpackPlugin {
       const entries = Object.values(params.compInfoMap).map((compInfo) => compInfo.main)
       if (params.appEntry) entries.unshift(params.appEntry)
       virtualModules.writeModule(
-        `${codeRoot}/index.js`,
-        entryHeader + entries.map((p) => `require('./${escapeJsString(p)}')\n`).join('') + entryFooter,
+        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)))
-        }))
+        await Promise.all(
+          Object.keys(params.resPathMap).map(async (p) => {
+            compilation.assets[p] = new RawSource(await fs.readFile(path.join(codeRoot, p)))
+          }),
+        )
       })
     })
   }
 }
 
 exports.GlassEaselMiniprogramWebpackPlugin = GlassEaselMiniprogramWebpackPlugin
+exports.GlassEaselMiniprogramWxmlLoader = GlassEaselMiniprogramWxmlLoader
 exports.GlassEaselMiniprogramWxssLoader = GlassEaselMiniprogramWxssLoader

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "glass-easel-miniprogram-webpack-plugin",
   "description": "The webpack plugin of the glass-easel project for MiniProgram file structure",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/wechat-miniprogram/glass-easel.git"
   },
-  "keywords": ["glass-easel"],
+  "keywords": [
+    "glass-easel"
+  ],
   "author": "wechat-miniprogram",
   "license": "MIT",
   "bugs": {
@@ -28,6 +30,6 @@
     "glass-easel-template-compiler": "0.1",
     "source-map": "^0.7.4",
     "webpack-sources": "^3.2.1",
-    "webpack-virtual-modules": "^0.4.3"
+    "webpack-virtual-modules": "^0.5.0"
   }
 }

package/wxml_loader.js

@@ -0,0 +1,9 @@
+const { escapeJsString } = require('./helpers')
+
+module.exports = function (src, prevMap, meta) {
+  const { compPath } = this.query
+  return `
+    // build time ${new Date().getTime()}
+    module.exports = '${escapeJsString(compPath)}'
+  `
+}

package/wxss_loader.js

@@ -14,17 +14,19 @@ module.exports = function (src, prevMap, meta) {
     if (prevMap) {
       const destConsumer = new SourceMapConsumer(ssSourceMap)
       const srcConsumer = new SourceMapConsumer(prevMap)
-      Promise.all([destConsumer, srcConsumer]).then(([destConsumer, srcConsumer]) => {
-        const gen = SourceMapGenerator.fromSourceMap(destConsumer)
-        gen.applySourceMap(srcConsumer, this.resourcePath)
-        destConsumer.destroy()
-        srcConsumer.destroy()
-        map = gen.toJSON()
-        callback(null, ss, map, meta)
-        return undefined
-      }).catch((err) => {
-        callback(err)
-      })
+      Promise.all([destConsumer, srcConsumer])
+        .then(([destConsumer, srcConsumer]) => {
+          const gen = SourceMapGenerator.fromSourceMap(destConsumer)
+          gen.applySourceMap(srcConsumer, this.resourcePath)
+          destConsumer.destroy()
+          srcConsumer.destroy()
+          map = gen.toJSON()
+          callback(null, ss, map, meta)
+          return undefined
+        })
+        .catch((err) => {
+          callback(err)
+        })
     } else {
       map = ssSourceMap
       callback(null, ss, map, meta)