@neuxnet/neux-cli 0.2.3

package/src/core/web.js

@@ -0,0 +1,649 @@
+import fs from 'node:fs'
+import fsp from 'node:fs/promises'
+import http from 'node:http'
+import os from 'node:os'
+import path from 'node:path'
+import { spawn } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+import { DiminaCliError } from './errors.js'
+import { buildProject, buildLogicOnlyProject, buildStyleOnlyProject, buildViewOnlyProject } from './compiler.js'
+import { inspectProject } from './project.js'
+import { resolvePath, writeJson } from './fs.js'
+import { createProjectWatcher } from './watch.js'
+import { defaultOut } from './defaults.js'
+import { emitLifecycleEvent } from './lifecycle.js'
+import { createProxyHandler } from './proxy.js'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const bundledContainerDir = path.resolve(__dirname, '../../assets/container')
+const MAX_PORT_RETRY = 20
+const DEFAULT_WEB_SERVER_URL = 'https://demo-c.paas.superapp.neuvision.cn'
+const STYLE_HOT_UPDATE_EXTENSIONS = new Set([
+  '.wxss',
+  '.nxss',
+  '.ddss',
+  '.acss',
+  '.css',
+  '.less',
+  '.scss',
+  '.sass',
+])
+const VIEW_HOT_UPDATE_EXTENSIONS = new Set([
+  '.wxml',
+  '.nxml',
+  '.ddml',
+  '.axml',
+])
+const LOGIC_HOT_UPDATE_EXTENSIONS = new Set([
+  '.js',
+  '.ts',
+])
+const WATCH_LOCK_DIR = 'neux-dev-locks'
+
+function contentType(filePath) {
+  const ext = path.extname(filePath)
+  if (ext === '.html') return 'text/html; charset=utf-8'
+  if (ext === '.json') return 'application/json; charset=utf-8'
+  if (ext === '.js') return 'text/javascript; charset=utf-8'
+  if (ext === '.css') return 'text/css; charset=utf-8'
+  if (ext === '.png') return 'image/png'
+  if (ext === '.jpg' || ext === '.jpeg') return 'image/jpeg'
+  if (ext === '.svg') return 'image/svg+xml'
+  return 'application/octet-stream'
+}
+
+function candidateContainerDirs() {
+  return [
+    process.env.DIMINA_WEB_CONTAINER_DIR,
+    bundledContainerDir,
+    path.resolve(process.cwd(), 'fe/packages/container/dist'),
+    path.resolve(process.cwd(), '../fe/packages/container/dist'),
+    path.resolve(process.cwd(), 'packages/container/dist'),
+  ].filter(Boolean)
+}
+
+async function findDefaultContainerDir() {
+  for (const dir of candidateContainerDirs()) {
+    if (fs.existsSync(path.join(dir, 'index.html'))) return dir
+  }
+  throw new DiminaCliError(
+    'DIMINA_WEB_CONTAINER_NOT_FOUND',
+    'Dimina web container dist not found. Run `npm run sync:container` in the CLI package, run `pnpm --dir fe --filter @dimina/container build`, or pass --container-dir.',
+  )
+}
+
+function openBrowser(url) {
+  const command = process.platform === 'darwin'
+    ? 'open'
+    : process.platform === 'win32'
+      ? 'cmd'
+      : 'xdg-open'
+  const args = process.platform === 'win32' ? ['/c', 'start', '', url] : [url]
+  const child = spawn(command, args, { detached: true, stdio: 'ignore' })
+  child.unref()
+}
+
+function resolveRequest(root, requestPath) {
+  const resolved = path.resolve(path.join(root, path.normalize(requestPath)))
+  if (resolved === root || resolved.startsWith(root + path.sep)) return resolved
+  return null
+}
+
+function sendFile(res, filePath, headers = {}) {
+  fs.stat(filePath, (error, stat) => {
+    if (error || !stat.isFile()) {
+      res.writeHead(404)
+      res.end('Not found')
+      return
+    }
+    res.writeHead(200, { 'Content-Type': contentType(filePath), ...headers })
+    fs.createReadStream(filePath).pipe(res)
+  })
+}
+
+async function acquireWatchLock(outputDir) {
+  // Keep the lock outside the project and compiler output trees.
+  const lockName = `${Buffer.from(path.resolve(outputDir)).toString('base64url')}.lock`
+  const lockPath = path.join(os.tmpdir(), WATCH_LOCK_DIR, lockName)
+  await fsp.mkdir(path.dirname(lockPath), { recursive: true })
+
+  for (let attempt = 0; attempt < 2; attempt++) {
+    try {
+      const handle = await fsp.open(lockPath, 'wx')
+      await handle.writeFile(JSON.stringify({ pid: process.pid, createdAt: new Date().toISOString() }))
+      await handle.close()
+      return async () => {
+        try {
+          await fsp.unlink(lockPath)
+        }
+        catch (error) {
+          if (error.code !== 'ENOENT') throw error
+        }
+      }
+    }
+    catch (error) {
+      if (error.code !== 'EEXIST') throw error
+      let lock = null
+      try {
+        lock = JSON.parse(await fsp.readFile(lockPath, 'utf8'))
+      }
+      catch {
+        // A partially written lock can be removed and recreated once.
+      }
+      const pid = Number(lock?.pid)
+      let running = false
+      if (Number.isInteger(pid) && pid > 0) {
+        try {
+          process.kill(pid, 0)
+          running = true
+        }
+        catch (probeError) {
+          running = probeError.code !== 'ESRCH'
+        }
+      }
+      if (running) {
+        throw new DiminaCliError(
+          'DIMINA_DEV_ALREADY_RUNNING',
+          `Another dev server is already using ${outputDir}. Stop it before starting a second watcher.`,
+          { outputDir, pid },
+        )
+      }
+      await fsp.unlink(lockPath).catch(unlinkError => {
+        if (unlinkError.code !== 'ENOENT') throw unlinkError
+      })
+    }
+  }
+
+  throw new DiminaCliError('DIMINA_DEV_LOCK_FAILED', `Unable to lock dev output directory: ${outputDir}`)
+}
+
+export function classifyHotUpdate(event = {}) {
+  const ext = path.extname(event.path || '').toLowerCase()
+  // .nxs 可能影响多个页面/组件的模板脚本依赖，当前没有可靠的增量影响面分析，保持整页 reload。
+  if (ext === '.nxs') return 'reload'
+  if (VIEW_HOT_UPDATE_EXTENSIONS.has(ext)) return 'view-update'
+  if (LOGIC_HOT_UPDATE_EXTENSIONS.has(ext)) return 'logic-update'
+  return STYLE_HOT_UPDATE_EXTENSIONS.has(ext) ? 'style-update' : 'reload'
+}
+
+function getHotUpdateTypes(event = {}) {
+  const events = Array.isArray(event.events) && event.events.length ? event.events : [event]
+  const types = [...new Set(events.map(item => classifyHotUpdate(item)))]
+  if (types.length === 0) return ['reload']
+  if (types.includes('reload')) return ['reload']
+  return ['style-update', 'view-update', 'logic-update'].filter(type => types.includes(type))
+}
+
+function getEventForHotUpdateType(event = {}, type) {
+  const events = Array.isArray(event.events) && event.events.length ? event.events : [event]
+  return [...events].reverse().find(item => classifyHotUpdate(item) === type) || event
+}
+
+export function createHotUpdatePayloads(event = {}, buildResults = []) {
+  return buildResults.map(({ updateType, buildResult, appInfo, event: typedEvent }) => ({
+    type: ['style-update', 'view-update', 'logic-update'].includes(updateType) ? updateType : 'reload',
+    changedPath: typedEvent?.path || event?.path,
+    appId: appInfo?.appId,
+    updatedPages: buildResult?.updatedPages,
+  }))
+}
+
+export function liveReloadScript() {
+  return `<script>
+(() => {
+  const source = new EventSource('/__dimina_live_reload');
+  const refreshStylesheets = (doc, timestamp) => {
+    if (!doc) return;
+    for (const link of doc.querySelectorAll('link[rel="stylesheet"][href]')) {
+      const url = new URL(link.href, doc.baseURI);
+      url.searchParams.set('__dimina_hmr', timestamp);
+      link.href = url.toString();
+    }
+  };
+  const refreshAllStylesheets = () => {
+    const timestamp = String(Date.now());
+    refreshStylesheets(document, timestamp);
+    for (const frame of document.querySelectorAll('iframe')) {
+      try {
+        refreshStylesheets(frame.contentDocument, timestamp);
+      } catch {}
+    }
+  };
+  const applyHotUpdate = (handler, payload) => {
+    try {
+      if (typeof handler !== 'function') {
+        window.location.reload();
+        return;
+      }
+      const result = handler(payload);
+      if (result && typeof result.then === 'function') {
+        result.then((handled) => {
+          if (handled === false || handled == null) window.location.reload();
+        }).catch(() => window.location.reload());
+        return;
+      }
+      if (result === false || result == null) {
+        window.location.reload();
+      }
+    } catch {
+      window.location.reload();
+    }
+  };
+  source.addEventListener('style-update', refreshAllStylesheets);
+  source.addEventListener('view-update', (event) => {
+    const payload = JSON.parse(event.data || '{}');
+    applyHotUpdate(window.__diminaHotUpdateView, payload);
+  });
+  source.addEventListener('logic-update', (event) => {
+    const payload = JSON.parse(event.data || '{}');
+    applyHotUpdate(window.__diminaHotUpdateLogic, payload);
+  });
+  source.addEventListener('reload', () => location.reload());
+})();
+</script>`
+}
+
+async function sendIndex(res, filePath, liveReload) {
+  if (!liveReload) return sendFile(res, filePath)
+  try {
+    const html = await fsp.readFile(filePath, 'utf8')
+    const body = html.includes('</body>')
+      ? html.replace('</body>', `${liveReloadScript()}</body>`)
+      : `${html}${liveReloadScript()}`
+    res.writeHead(200, {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-store',
+    })
+    res.end(body)
+  }
+  catch {
+    res.writeHead(404)
+    res.end('Not found')
+  }
+}
+
+export async function startWebServer({
+  containerDir,
+  outputDir,
+  host,
+  port,
+  liveReload = false,
+  proxy = true,
+  proxyAllowedOrigins,
+}) {
+  const containerRoot = path.resolve(containerDir)
+  const outputRoot = path.resolve(outputDir)
+  const clients = new Set()
+  const proxyHandler = proxy ? createProxyHandler({ allowedOrigins: proxyAllowedOrigins }) : null
+  const server = http.createServer(async (req, res) => {
+    let pathname
+    try {
+      pathname = decodeURIComponent(new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`).pathname)
+    }
+    catch {
+      res.writeHead(400)
+      res.end('Bad request')
+      return
+    }
+
+    if (pathname === '/proxy') {
+      if (!proxyHandler) {
+        res.writeHead(404)
+        res.end('Not Found')
+        return
+      }
+      await proxyHandler(req, res)
+      return
+    }
+
+    if (liveReload && pathname === '/__dimina_live_reload') {
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream; charset=utf-8',
+        'Cache-Control': 'no-cache, no-transform',
+        Connection: 'keep-alive',
+      })
+      res.write('\n')
+      clients.add(res)
+      req.on('close', () => clients.delete(res))
+      return
+    }
+
+    const outputFile = resolveRequest(outputRoot, pathname)
+    if (outputFile && fs.existsSync(outputFile) && fs.statSync(outputFile).isFile()) {
+      sendFile(res, outputFile, liveReload ? { 'Cache-Control': 'no-store' } : {})
+      return
+    }
+
+    const containerFile = resolveRequest(containerRoot, pathname)
+    if (containerFile && fs.existsSync(containerFile) && fs.statSync(containerFile).isFile()) {
+      sendFile(res, containerFile, liveReload ? { 'Cache-Control': 'no-store' } : {})
+      return
+    }
+
+    const ext = path.extname(pathname).toLowerCase()
+    if (ext && ext !== '.html') {
+      res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8', 'Cache-Control': 'no-store' })
+      res.end('Not Found')
+      return
+    }
+
+    sendIndex(res, path.join(containerRoot, 'index.html'), liveReload)
+  })
+
+  server.reload = (payload = {}) => {
+    const type = ['style-update', 'view-update', 'logic-update'].includes(payload.type) ? payload.type : 'reload'
+    const data = JSON.stringify({
+      ...payload,
+      type,
+    })
+    for (const client of clients) client.write(`event: ${type}\ndata: ${data}\n\n`)
+  }
+
+  try {
+    await listenWithPortFallback(server, host, port)
+  }
+  catch (error) {
+    throw new DiminaCliError('DIMINA_WEB_SERVER_FAILED', `Failed to start web server: ${error.message}`, {
+      host,
+      port,
+      cause: error.code,
+      attemptedPorts: error.attemptedPorts,
+    })
+  }
+
+  return server
+}
+
+async function listenOnce(server, host, port) {
+  await new Promise((resolve, reject) => {
+    server.once('error', reject)
+    server.listen(port, host, () => {
+      server.off('error', reject)
+      resolve()
+    })
+  })
+}
+
+async function listenWithPortFallback(server, host, initialPort) {
+  const port = Number.parseInt(initialPort, 10)
+  const startPort = Number.isFinite(port) ? port : 7788
+  if (startPort === 0) {
+    await listenOnce(server, host, 0)
+    return
+  }
+
+  const attemptedPorts = []
+  for (let offset = 0; offset <= MAX_PORT_RETRY; offset++) {
+    const nextPort = startPort + offset
+    attemptedPorts.push(nextPort)
+    try {
+      await listenOnce(server, host, nextPort)
+      return
+    }
+    catch (error) {
+      if (error.code !== 'EADDRINUSE' || offset === MAX_PORT_RETRY) {
+        error.attemptedPorts = attemptedPorts
+        throw error
+      }
+    }
+  }
+}
+
+async function buildWebProject(options, outputDir, projectInfo) {
+  const runBuild = options.withBuildOutputRedirect || (action => action())
+  const buildResult = await runBuild(() => buildProject({
+    ...options,
+    out: outputDir,
+  }))
+  const appInfo = buildResult.compilerResult || {
+    appId: projectInfo.appId,
+    name: projectInfo.name,
+    path: projectInfo.entryPath,
+  }
+
+  await fsp.mkdir(outputDir, { recursive: true })
+  await writeJson(path.join(outputDir, 'appList.json'), [appInfo])
+
+  return { buildResult, appInfo }
+}
+
+async function buildWebStyleOnlyProject(options, outputDir, appInfo, event) {
+  const runBuild = options.withBuildOutputRedirect || (action => action())
+  const buildResult = await runBuild(() => buildStyleOnlyProject({
+    ...options,
+    out: outputDir,
+    changedPath: event?.path,
+  }))
+
+  return {
+    buildResult,
+    appInfo,
+  }
+}
+
+async function buildWebViewOnlyProject(options, outputDir, appInfo, event) {
+	const runBuild = options.withBuildOutputRedirect || (action => action())
+	const buildResult = await runBuild(() => buildViewOnlyProject({
+    ...options,
+    out: outputDir,
+    changedPath: event?.path,
+  }))
+
+  return {
+    buildResult,
+    appInfo,
+	}
+}
+
+async function buildWebLogicOnlyProject(options, outputDir, appInfo, event) {
+	const runBuild = options.withBuildOutputRedirect || (action => action())
+	const buildResult = await runBuild(() => buildLogicOnlyProject({
+		...options,
+		out: outputDir,
+		changedPath: event?.path,
+	}))
+
+	return {
+		buildResult,
+		appInfo,
+	}
+}
+
+export async function startWeb(options = {}) {
+  const command = options.command || 'web'
+  const projectInfo = await inspectProject(options)
+  const outputDir = resolvePath(
+    options.out || options.output || defaultOut(command),
+  )
+  const containerDir = options.containerDir
+    ? resolvePath(options.containerDir)
+    : await findDefaultContainerDir()
+  const host = options.host || '127.0.0.1'
+  const port = Number.parseInt(options.port ?? 7788, 10)
+  const releaseWatchLock = options.watch ? await acquireWatchLock(outputDir) : null
+  await emitLifecycleEvent(options, 'build-start', { command, projectPath: projectInfo.projectPath, outputDir })
+  let buildResult
+  let appInfo
+  try {
+    const initial = await buildWebProject(options, outputDir, projectInfo)
+    buildResult = initial.buildResult
+    appInfo = initial.appInfo
+    await emitLifecycleEvent(options, 'build-success', { command, buildResult, appInfo, outputDir })
+  }
+  catch (error) {
+    await releaseWatchLock?.()
+    await emitLifecycleEvent(options, 'build-error', { command, error, outputDir })
+    throw error
+  }
+
+  let server
+  try {
+    server = await startWebServer({
+      containerDir,
+      outputDir,
+      host,
+      port,
+      liveReload: !!options.watch,
+      proxy: options.proxy !== false,
+      proxyAllowedOrigins: options.proxyAllowedOrigins,
+    })
+  }
+  catch (error) {
+    await releaseWatchLock?.()
+    throw error
+  }
+  const address = server.address()
+  const resolvedPort = typeof address === 'object' && address ? address.port : port
+  const serverUrl = `http://${host}:${resolvedPort}`
+  const entry = appInfo.path || projectInfo.entryPath
+  const documentationServerUrl = projectInfo.neuxCli?.serverUrl || DEFAULT_WEB_SERVER_URL
+  const locale = options.lang || process.env.NEUX_CLI_LANG || 'en'
+  const url = `${serverUrl}/?appId=${encodeURIComponent(appInfo.appId)}&entry=${encodeURIComponent(entry)}&page=${encodeURIComponent(entry)}&neuxCliServerUrl=${encodeURIComponent(documentationServerUrl)}&lang=${encodeURIComponent(locale)}`
+
+  if (options.open !== false) {
+    openBrowser(url)
+  }
+
+  let watcher = null
+  let rebuilding = false
+  let pendingRebuildEvent = null
+
+  async function rebuild(event) {
+    if (rebuilding) {
+      pendingRebuildEvent = event
+      return
+    }
+    rebuilding = true
+    try {
+      await options.onBuildStart?.({ event, outputDir })
+      await emitLifecycleEvent(options, 'build-start', { command, changedPath: event?.path, event, outputDir })
+      const reloadPayloads = []
+      const updateTypes = getHotUpdateTypes(event)
+      let lastUpdateType = updateTypes[updateTypes.length - 1] || 'reload'
+      for (const requestedType of updateTypes) {
+        let updateType = requestedType
+        const typedEvent = getEventForHotUpdateType(event, updateType)
+        let next
+        if (updateType === 'style-update') {
+          try {
+            next = await buildWebStyleOnlyProject(options, outputDir, appInfo, typedEvent)
+          }
+          catch {
+            updateType = 'reload'
+            next = await buildWebProject(options, outputDir, projectInfo)
+          }
+        }
+        else if (updateType === 'view-update') {
+          try {
+            next = await buildWebViewOnlyProject(options, outputDir, appInfo, typedEvent)
+          }
+          catch {
+            updateType = 'reload'
+            next = await buildWebProject(options, outputDir, projectInfo)
+          }
+        }
+        else if (updateType === 'logic-update') {
+          try {
+            next = await buildWebLogicOnlyProject(options, outputDir, appInfo, typedEvent)
+          }
+          catch {
+            updateType = 'reload'
+            next = await buildWebProject(options, outputDir, projectInfo)
+          }
+        }
+        else {
+          next = await buildWebProject(options, outputDir, projectInfo)
+        }
+
+        buildResult = next.buildResult
+        appInfo = next.appInfo
+        lastUpdateType = updateType
+        reloadPayloads.push(...createHotUpdatePayloads(event, [{
+          updateType,
+          buildResult,
+          appInfo,
+          event: typedEvent,
+        }]))
+        if (updateType === 'reload') {
+          break
+        }
+      }
+      await options.onRebuild?.({ event, buildResult, appInfo, outputDir })
+      await emitLifecycleEvent(options, 'build-success', { command, changedPath: event?.path, event, buildResult, appInfo, outputDir })
+      for (const payload of reloadPayloads) server.reload?.(payload)
+      await options.onReload?.({ event, buildResult, appInfo, outputDir })
+      await emitLifecycleEvent(options, 'reload', { command, changedPath: event?.path, event, buildResult, appInfo, updateType: lastUpdateType, outputDir })
+    }
+    catch (error) {
+      await options.onBuildError?.(error)
+      await emitLifecycleEvent(options, 'build-error', { command, changedPath: event?.path, event, error, outputDir })
+    }
+    finally {
+      rebuilding = false
+      if (pendingRebuildEvent) {
+        const nextEvent = pendingRebuildEvent
+        pendingRebuildEvent = null
+        await rebuild(nextEvent)
+      }
+    }
+  }
+
+  if (options.watch) {
+    try {
+      watcher = await createProjectWatcher({
+        project: projectInfo.projectPath,
+        debounceMs: options.debounceMs,
+        ignorePaths: [outputDir],
+        onChange: rebuild,
+      })
+    }
+    catch (error) {
+      try {
+        await new Promise((resolve, reject) => server.close(closeError => closeError ? reject(closeError) : resolve()))
+      }
+      finally {
+        await releaseWatchLock?.()
+      }
+      throw error
+    }
+  }
+
+  let closePromise
+  const session = {
+    ok: true,
+    command,
+    projectPath: projectInfo.projectPath,
+    outputDir,
+    containerDir,
+    appId: appInfo.appId,
+    entryPath: entry,
+    serverUrl,
+    url,
+    buildResult,
+    watch: !!options.watch,
+    close: async () => {
+      if (closePromise) return closePromise
+
+      closePromise = (async () => {
+        try {
+          await watcher?.close()
+          await new Promise((resolve, reject) => server.close(error => error ? reject(error) : resolve()))
+        }
+        finally {
+          await releaseWatchLock?.()
+        }
+        await emitLifecycleEvent(options, 'close', {
+          command,
+          projectPath: projectInfo.projectPath,
+          appId: appInfo.appId,
+          serverUrl,
+          url,
+        })
+      })()
+
+      return closePromise
+    },
+  }
+  await emitLifecycleEvent(options, 'ready', session)
+  return session
+}