dsh-design-studio 0.4.1 → 0.6.0

package/lib/serve.js

@@ -25,7 +25,7 @@ const MAX_HTML = 8 * 1024 * 1024 // 要注入脚本的 HTML 最多读这么大
 const UP_HOSTS = ['127.0.0.1', '::1'] // 开发服务器可能只听其中一个
 const DEBOUNCE_MS = 120
 
-const MIME = {
+export const MIME = {
   '.html': 'text/html; charset=utf-8',
   '.htm': 'text/html; charset=utf-8',
   '.css': 'text/css; charset=utf-8',
@@ -56,8 +56,9 @@ const MIME = {
 }
 
 // 改动通知里不算的：版本库、依赖、系统垃圾
-const EXPORTS = /^(exports([\\/][^\\/]+\.png)?|refs([\\/][^\\/]+\.(png|jpe?g|gif|webp))?)$/i // 导出的图片、参考图（和第一次建的 exports / refs 目录）：不算设计改了
+const EXPORTS = /^(exports([\\/][^\\/]+\.(png|pdf|pptx))?|refs([\\/][^\\/]+\.(png|jpe?g|gif|webp))?)$/i // 导出的图片 / PDF / PPT、参考图（和第一次建的 exports / refs 目录）：不算设计改了
 const IGNORED = /(^|[\\/])(\.git|node_modules|\.DS_Store|\.next|\.cache|\.turbo)([\\/]|$)/
+const HANDOFF = /^handoff([\\/]|$)/i // 转成代码的交接包（说明和截图）：不算设计改了，也别在截图时把页面刷掉
 
 /** 只认本机名 + 自己的端口（防 DNS 重绑定：外站把域名解析到 127.0.0.1 也进不来） */
 export function hostOk(host, port) {
@@ -65,11 +66,26 @@ export function hostOk(host, port) {
   return h === `127.0.0.1:${port}` || h === `localhost:${port}` || h === `[::1]:${port}`
 }
 
-/** 在 </body> 前（没有就在末尾）插入选取脚本 */
+/**
+ * 最先跑的一小段：记下页面脚本报错、没载出来的样式表 / 脚本（设计体检报给模型）。
+ * picker 在 </body> 前，等它装上，前面脚本的报错早过去了
+ */
+export const ERR_CATCHER = '<script>(()=>{if(window.__dshErrs)return;const L=window.__dshErrs=[];const add=(x)=>{if(L.length<30)L.push(x)};' +
+  'addEventListener("error",(e)=>{const t=e.target;if(t&&t!==window&&t.tagName){add({res:1,tag:t.tagName.toLowerCase(),src:String(t.currentSrc||t.src||t.href||"").slice(0,300)})}' +
+  'else add({msg:String(e.message||"").slice(0,300),src:String(e.filename||"").slice(0,300),line:e.lineno||0})},true);' +
+  'addEventListener("unhandledrejection",(e)=>{const r=e.reason;add({msg:String((r&&r.message)||r).slice(0,300),src:"",line:0})})})()</script>'
+
+/** 放进 <head> 最前面；没写 <head> 就放在 <html> / <!doctype> 后面（放到 doctype 前面页面会进怪异模式） */
+export function headInsert(html, tag) {
+  const m = /<head\b[^>]*>/i.exec(html) || /<html\b[^>]*>/i.exec(html) || /^\s*<!doctype\b[^>]*>/i.exec(html)
+  return m ? html.slice(0, m.index + m[0].length) + tag + html.slice(m.index + m[0].length) : tag + html
+}
+
+/** 在 </body> 前（没有就在末尾）插入选取脚本，<head> 最前面放报错记录 */
 export function injectPicker(html) {
   const tag = `<script src="${INTERNAL}picker.js"></script>`
   const i = html.toLowerCase().lastIndexOf('</body>')
-  return i >= 0 ? html.slice(0, i) + tag + html.slice(i) : html + tag
+  return headInsert(i >= 0 ? html.slice(0, i) + tag + html.slice(i) : html + tag, ERR_CATCHER)
 }
 
 /** 真实路径在不在根目录（也取真实路径）里面 */
@@ -142,7 +158,7 @@ export function trustedOrigins(hosts) {
 
 /**
  * @param opts.log 出错时写日志
- * @param opts.onChange (key, file) 目录里有文件改了（file 目标）
+ * @param opts.onChange (key, file, files) 目录里有文件改了（file 目标；files：这一批的相对路径）
  * @param opts.history  设计版本（lib/history.js）：/__dsh_design__/v/<版本>/<文件> 给出那一版的文件
  * @param opts.parents  () → 还有哪些 DSH 页面的源能嵌预览（DSH 网页端的地址）
  */
@@ -256,15 +272,16 @@ export function createHub({ log = () => {}, onChange = () => {}, history = null,
     try {
       entry.watcher = fs.watch(entry.root, { recursive: true }, (_type, name) => {
         const rel = String(name || '')
-        if (IGNORED.test(rel) || /(^|[\\/])\./.test(rel) || EXPORTS.test(rel)) return
+        if (IGNORED.test(rel) || /(^|[\\/])\./.test(rel) || EXPORTS.test(rel) || HANDOFF.test(rel)) return
         last = rel
         batch.add(rel.split(path.sep).join('/'))
         clearTimeout(timer)
         timer = setTimeout(() => {
-          const files = [...batch].slice(0, 50)
+          // 一批改了太多文件就不列了（空的 = 不知道改了啥，页面整屏刷新），列一半会漏掉这一屏用到的
+          const files = batch.size > 50 ? [] : [...batch]
           batch.clear()
           for (const c of entry.clients) c.write(`event: change\ndata: ${JSON.stringify({ file: last, files })}\n\n`)
-          try { onChange(entry.key, path.join(entry.root, last)) } catch (e) { log(e) }
+          try { onChange(entry.key, path.join(entry.root, last), files) } catch (e) { log(e) }
         }, DEBOUNCE_MS)
       })
       entry.watcher.on('error', (e) => log(e))