dsh-design-studio 0.11.0 → 0.12.0

package/lib/serve.js

@@ -22,6 +22,14 @@ import { tokenize } from './gallery/html.js'
 
 export const INTERNAL = '/__dsh_design__/'
 const PICKER_FILE = path.join(path.dirname(fileURLToPath(import.meta.url)), 'picker.js')
+const DRAFT_JS = path.join(path.dirname(fileURLToPath(import.meta.url)), 'draft-page.js')
+// 草稿往外吐：模型一点点流的时候来多少吐多少（不拖后腿，右侧栏中途才来看也是先把写到的一口气给）；
+// 整页一下子到的（模型服务把参数憋到最后一块给：一块 DRAFT_LUMP 字以上、紧跟着就写完了，或者来看时已经写完、draft.js 记着是整段到的）才排队，
+// 每 50ms 一截、约 60 拍（3 秒）放完，一截至少 100 字
+const DRAFT_TICK = 50
+const DRAFT_STEP = 100
+const DRAFT_SPREAD = 60
+const DRAFT_LUMP = 1500
 const MAX_SERVERS = 8
 const MAX_HTML = 8 * 1024 * 1024 // 要注入脚本的 HTML 最多读这么大
 const UP_HOSTS = ['127.0.0.1', '::1'] // 开发服务器可能只听其中一个
@@ -160,7 +168,10 @@ export function resolveInRoot(root, pathname) {
   let rel
   try { rel = decodeURIComponent(pathname) } catch { return null }
   if (rel.includes('\0')) return null
+  if (path.sep === '\\') rel = rel.replace(/\\/g, '/') // Windows：反斜杠也是分隔符，先换成 / 再去掉 ..（不然 ..\ 绕得出去）
   const abs = path.resolve(root, '.' + path.posix.normalize('/' + rel))
+  const base = path.resolve(root)
+  if (abs !== base && !abs.startsWith(base + path.sep)) return null // 文件还不存在（正在写的草稿）也不许出根目录
   let real
   try { real = fs.realpathSync(abs) } catch { return { abs, real: null } }
   if (!inRoot(root, real)) return null
@@ -224,7 +235,77 @@ export function trustedOrigins(hosts) {
  * @param opts.parents  () → 还有哪些 DSH 页面的源能嵌预览（DSH 网页端的地址）
  * @param opts.strict   { html(buf) → 这份 HTML 是别人做的、没改过吗, root(dir) → 这个目录是别人做的设计吗 }：是就加硬规矩
  */
-export function createHub({ log = () => {}, onChange = () => {}, history = null, parents = () => [], strict = null } = {}) {
+/**
+ * 草稿页往外吐的时候，在 doctype 后面插上草稿脚本（插在 doctype 前面会进怪异模式）。
+ * 开头可能被切成好几块：攒到能判断为止。
+ */
+export function draftInjector(tag) {
+  const LIMIT = 4096
+  let buf = ''
+  let done = false
+  let mid = false // 开头的注释太长：已经先吐出去一截，buf 接着在注释里面
+  let open = false // 看到 buf 末尾时还在一段没收尾的注释里
+  return {
+    push(text) {
+      if (done) return text
+      buf += text
+      let out = ''
+      let inCmt = mid
+      let i = inCmt ? 0 : /^\uFEFF?\s*/.exec(buf)[0].length // buf[0, i) 看过了：空白、完整的注释
+      const at = (k) => {
+        done = true
+        const s = out + buf.slice(0, k) + tag + buf.slice(k)
+        buf = ''
+        return s
+      }
+      // 还得等：攒太多了就先把看过的（注释里的也行，留两个字防 --> 被切开）吐出去，接着等 doctype
+      const hold = () => {
+        open = inCmt
+        if (buf.length <= LIMIT) return out
+        const k = inCmt ? Math.max(i, buf.length - 2) : i
+        out += buf.slice(0, k)
+        buf = buf.slice(k)
+        mid = inCmt
+        return out
+      }
+      // 开头的注释跳过去（<!-- license --> 后面才是 doctype）；doctype 后面插，没有 doctype 就插在注释后面
+      for (;;) {
+        if (inCmt) {
+          const e = buf.indexOf('-->', i)
+          if (e < 0) return hold()
+          inCmt = false
+          i = e + 3
+          i += /^\s*/.exec(buf.slice(i))[0].length
+          continue
+        }
+        const rest = buf.slice(i)
+        if (!rest) return hold()
+        if (rest.startsWith('<!--')) {
+          inCmt = true
+          i += 4
+          continue
+        }
+        if (rest.length < 9 && ('<!doctype'.startsWith(rest.toLowerCase()) || '<!--'.startsWith(rest))) return hold() // 还没到全
+        if (/^<!doctype/i.test(rest)) {
+          const e = buf.indexOf('>', i)
+          if (e >= 0) return at(e + 1)
+          return rest.length > LIMIT ? at(i) : hold() // 这么长还没完：不像 doctype，不等了
+        }
+        return at(i)
+      }
+    },
+    flush() {
+      if (done) return ''
+      done = true
+      // 停在一段没写完的注释里：先把注释收上，脚本才会跑
+      const out = open ? buf + '-->' + tag : mid ? buf + tag : tag + buf
+      buf = ''
+      return out
+    },
+  }
+}
+
+export function createHub({ log = () => {}, onChange = () => {}, history = null, parents = () => [], strict = null, drafts = null } = {}) {
   const strictHtml = (buf) => { try { return !!(strict && strict.html && strict.html(buf)) } catch (e) { log(e); return true } }
   const strictRoot = (dir) => { try { return !!(strict && strict.root && strict.root(dir)) } catch (e) { log(e); return true } }
   const strictVer = (dir) => { try { return !!(strict && strict.versions && strict.versions(dir)) } catch (e) { log(e); return true } }
@@ -257,6 +338,97 @@ export function createHub({ log = () => {}, onChange = () => {}, history = null,
     return [...new Set([DESKTOP_ORIGIN, ...more.filter((o) => typeof o === 'string' && o)])]
   }
 
+  function draftJs(res) {
+    fs.readFile(DRAFT_JS, 'utf8', (err, src) => {
+      if (err) return send(res, 500, 'draft script missing')
+      send(res, 200, src, { 'Content-Type': MIME['.js'] })
+    })
+  }
+
+  /** 正在写的那一页（地址带 ?__ddp_draft=）：先吐出已经写到的，之后来一截吐一截，写完收尾（浏览器边收边画） */
+  function serveDraft(req, res, entry, pathname) {
+    if (entry.kind !== 'file' || !drafts || strictRoot(entry.root)) return send(res, 404, 'not found')
+    if (req.method !== 'GET' && req.method !== 'HEAD') return send(res, 405, 'method not allowed')
+    const hit = resolveInRoot(entry.root, pathname)
+    if (!hit) return send(res, 403, 'forbidden')
+    let want = ''
+    try { want = new URL(req.url, 'http://x').searchParams.get('__ddp_draft') || '' } catch { /* route 里已经验过 */ }
+    const got = drafts.get(hit.abs)
+    // 地址里的编号对得上才给：同一个文件又开始重写（别的会话、或下一次写）时，旧框子拿到的是真文件，不串到新的那份
+    const d = got && String(got.id) === want ? got : null
+    if (!d) return serveFile(req, res, entry, pathname) // 已经写完收走了：给真文件
+    res.writeHead(200, { 'Content-Type': MIME['.html'], 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff' })
+    if (req.method === 'HEAD') return res.end()
+    const inj = draftInjector(`<script src="${INTERNAL}draft.js"></script>`)
+    let off = () => {}
+    let ended = false
+    // 一大段一下子到：排着队一截截放，看着还是一段段长出来的；<head> 里的样式看不见，一口气给。
+    // step 是 0 = 没在排队，来多少吐多少
+    const q = { buf: '', body: false, src: false, timer: null, step: 0, big: false }
+    const spread = (len) => Math.max(DRAFT_STEP, Math.ceil(len / DRAFT_SPREAD))
+    const stop = () => {
+      ended = true
+      clearTimeout(q.timer)
+      off()
+    }
+    const pump = () => {
+      q.timer = null
+      if (ended) return
+      if (q.big) {
+        q.big = false
+        if (q.src) q.step = Math.max(q.step, spread(q.buf.length)) // 一大块到了紧跟着就写完了：整页憋到最后给的，慢放
+      }
+      let n = q.buf.length
+      if (!q.body) {
+        const m = /<body\b[^>]*>/i.exec(q.buf) || /<\/head\s*>/i.exec(q.buf)
+        if (m) {
+          q.body = true
+          n = m.index + m[0].length
+          if (q.step) q.step = spread(q.buf.length - n) // 剩下的正文按原来的时长放
+        } else if (q.src) q.body = true // 写完了也没找到 <body>：整页都按拍子放
+      }
+      if (q.body && q.step && n === q.buf.length) n = Math.min(n, q.step)
+      if (n < q.buf.length && /[\ud800-\udbff]/.test(q.buf[n - 1] || '')) n++ // 别把表情切成两半
+      const s = inj.push(q.buf.slice(0, n))
+      q.buf = q.buf.slice(n)
+      try { if (s) res.write(s) } catch (e) { log(e) }
+      if (q.buf) q.timer = setTimeout(pump, DRAFT_TICK)
+      else if (!q.src) q.step = 0 // 放完了：之后又是一点点流的，来多少吐多少
+      else {
+        stop()
+        try { res.end(inj.flush()) } catch (e) { log(e) }
+      }
+    }
+    // how：'lump' 慢放；'now' 一口气给；不填 = 流过来的一块，一大块的话等这一下过完看是不是紧跟着就写完了
+    const out = (text, how) => {
+      if (ended) return
+      if (text) {
+        q.buf += text
+        if (how === 'lump') q.step = Math.max(q.step, spread(q.buf.length))
+        else if (!how && text.length >= DRAFT_LUMP) q.big = true
+      }
+      if (q.big) {
+        if (!q.timer) q.timer = setTimeout(pump, 0)
+        return
+      }
+      if (!q.timer) pump()
+    }
+    const finish = () => {
+      q.src = true
+      out('')
+    }
+    off = drafts.sub(hit.abs, (ev) => {
+      if (ev.text) out(ev.text)
+      if (ev.done) finish()
+    })
+    res.on('close', stop)
+    res.on('error', stop)
+    // 来看时已经写到的：整段一下子到、已经写完的补放一遍；别的（还在写，或一路流着写完、右侧栏换了个框重新打开的）一口气给
+    if (d.done) q.src = true // 先记下已经写完（找不到 <body> 的页面靠它整页按拍子放）
+    out(d.text, d.done && d.lump ? 'lump' : 'now')
+    if (d.done) finish()
+  }
+
   function picker(res, entry) {
     fs.readFile(PICKER_FILE, 'utf8', (err, src) => {
       if (err) return send(res, 500, 'picker missing')
@@ -504,6 +676,9 @@ export function createHub({ log = () => {}, onChange = () => {}, history = null,
     let pathname
     try { pathname = new URL(req.url, 'http://x').pathname } catch { return send(res, 400, 'bad url') }
     if (pathname === INTERNAL + 'picker.js') return picker(res, entry)
+    if (pathname === INTERNAL + 'draft.js') return draftJs(res)
+    // 草稿就挂在这一屏自己的地址上（/menu.html?__ddp_draft=…），页面里的相对地址（tokens.css、图片）照常对得上
+    if (entry.kind === 'file' && /[?&]__ddp_draft=/.test(req.url)) return serveDraft(req, res, entry, pathname)
     if (pathname === INTERNAL + 'events') {
       if (entry.kind === 'file') return events(req, res, entry)
       return send(res, 204, '')
@@ -534,6 +709,7 @@ export function createHub({ log = () => {}, onChange = () => {}, history = null,
     if (have) {
       touch(have)
       await have.ready
+      if (have.kind === 'file' && !have.watcher) watch(have) // 先开的时候目录还没建（边写边看的第一屏）：现在补上监听
       return { key, origin: have.origin }
     }
     evict()

package/lib/tweaks.js

@@ -273,44 +273,65 @@ function cssFiles(root, realRoot = '') {
   return [...css, ...listScreens(root)].filter((rel) => ownFile(root, realRoot, rel))
 }
 
+/** 外观面板里直接改的设计变量：{ '--名字': 值 } → [[名字, 值]]（名字、值都要老实：值里不能有 ; { } < 换行） */
+export function cleanVars(vars) {
+  if (!vars || typeof vars !== 'object' || Array.isArray(vars)) return []
+  const out = []
+  for (const [name, v] of Object.entries(vars)) {
+    const value = String(v == null ? '' : v).trim()
+    if (!/^--[A-Za-z0-9_-]{1,60}$/.test(name) || !value || value.length > 200 || /[;{}<>\n\r\\]/.test(value)) continue
+    out.push([name, value])
+    if (out.length >= 60) break
+  }
+  return out
+}
+
 /**
- * 写回：values = { id: 值 }。CSS 变量改样式里的默认值，属性写到每屏的 <html> 上，tweaks.json 的 value 跟着改。
+ * 写回：values = { id: 值 }（调节滑块），vars = { '--名字': 值 }（外观面板里直接改的设计变量）。
+ * CSS 变量改样式里的默认值，属性写到每屏的 <html> 上，tweaks.json 的 value 跟着改。
  * @returns { ok, changed: [{ id, label, from, to }], files: [相对路径], missed: [{ id, label }] }（missed：样式里找不到这个变量的默认值）
  */
-export function applyTweaks(root, values) {
+export function applyTweaks(root, values, vars) {
   const r0 = readTweaks(root)
-  if (!r0 || !r0.list.length) return { ok: false, reason: 'no-tweaks' }
+  const hasTw = !!(r0 && r0.list.length && values && Object.keys(values).length)
+  const varList = cleanVars(vars)
+  if (!hasTw && !varList.length) return { ok: false, reason: 'no-tweaks' }
   let realRoot
   try { realRoot = fs.realpathSync(root) } catch { return { ok: false, reason: 'no-tweaks' } }
   // tweaks.json 是软链接（指到别处）就不写：写回只改设计目录自己的文件
-  if (!ownFile(root, realRoot, TWEAKS_FILE)) return { ok: false, reason: 'no-tweaks' }
+  const twOwn = !!(r0 && r0.list.length) && ownFile(root, realRoot, TWEAKS_FILE)
+  if (hasTw && !twOwn) return { ok: false, reason: 'no-tweaks' }
   const file = path.join(root, TWEAKS_FILE)
-  const raw = JSON.parse(fs.readFileSync(file, 'utf8'))
-  const arr = Array.isArray(raw) ? raw : raw.tweaks
+  let raw = null
+  try { raw = twOwn ? JSON.parse(fs.readFileSync(file, 'utf8')) : null } catch { if (hasTw) return { ok: false, reason: 'no-tweaks' } }
+  const arr = raw ? (Array.isArray(raw) ? raw : raw.tweaks) : []
   const texts = new Map()
   const read = (rel) => (texts.has(rel) ? texts.get(rel) : fs.readFileSync(path.join(root, rel), 'utf8'))
   const changed = []
   const missed = []
-  for (const k of r0.list) {
-    if (!values || !Object.hasOwn(values, k.id)) continue
+  // 先把所有文件里顶层的声明都改掉（哪份样式后加载就是哪份生效，全改才稳）；一处都没有再退到 @media 里的第一处
+  const writeVar = (name, value) => {
+    for (const nested of [false, true]) {
+      let done = false
+      for (const rel of cssFiles(root, realRoot)) {
+        let t
+        try { t = read(rel) } catch { continue }
+        const next = /\.html?$/i.test(rel) ? setVarInHtml(t, name, value, nested) : setVarDecl(t, name, value, nested)
+        if (next === null) continue
+        texts.set(rel, next)
+        done = true
+        if (nested) break
+      }
+      if (done) return true
+    }
+    return false
+  }
+  for (const k of hasTw ? r0.list : []) {
+    if (!Object.hasOwn(values, k.id)) continue
     const v = normValue(k, values[k.id])
     if (v == null || v === k.value) continue
     if (k.var) {
-      // 先把所有文件里顶层的声明都改掉（哪份样式后加载就是哪份生效，全改才稳）；一处都没有再退到 @media 里的第一处
-      let done = false
-      for (const nested of [false, true]) {
-        for (const rel of cssFiles(root, realRoot)) {
-          let t
-          try { t = read(rel) } catch { continue }
-          const next = /\.html?$/i.test(rel) ? setVarInHtml(t, k.var, cssValue(k, v), nested) : setVarDecl(t, k.var, cssValue(k, v), nested)
-          if (next === null) continue
-          texts.set(rel, next)
-          done = true
-          if (nested) break
-        }
-        if (done) break
-      }
-      if (!done) { missed.push({ id: k.id, label: k.label }); continue }
+      if (!writeVar(k.var, cssValue(k, v))) { missed.push({ id: k.id, label: k.label }); continue }
     } else {
       for (const rel of listScreens(root)) {
         if (!ownFile(root, realRoot, rel)) continue
@@ -321,8 +342,21 @@ export function applyTweaks(root, values) {
     if (arr[k.i] && typeof arr[k.i] === 'object') arr[k.i].value = k.kind === 'range' ? v : String(v)
     changed.push({ id: k.id, label: k.label, from: shownValue(k, k.value), to: shownValue(k, v) })
   }
+  let twChanged = changed.length
+  for (const [name, value] of varList) {
+    if (!writeVar(name, value)) { missed.push({ id: name, label: name }); continue }
+    changed.push({ id: name, label: name, from: '', to: value })
+    // 有颜色滑块管着这个变量：tweaks.json 里它的值跟着改，滑块和文件对得上（不然滑块还显示旧颜色）
+    if (raw) for (const k of r0.list) {
+      if (k.var !== name || k.kind !== 'color' || !arr[k.i] || typeof arr[k.i] !== 'object') continue
+      const v = normValue(k, value)
+      if (v == null || v === normValue(k, arr[k.i].value)) continue // 和这次已经改过的比（同一次保存里滑块也动了这个变量）
+      arr[k.i].value = v
+      twChanged++
+    }
+  }
   if (!changed.length) return { ok: true, changed, files: [], missed }
-  texts.set(TWEAKS_FILE, JSON.stringify(raw, null, 2) + '\n')
+  if (twChanged) texts.set(TWEAKS_FILE, JSON.stringify(raw, null, 2) + '\n')
   for (const [rel, t] of texts) fs.writeFileSync(path.join(root, rel), t)
   return { ok: true, changed, files: [...texts.keys()], missed }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-design-studio",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1 test/*.mjs"