math-tasks/bs-config.cjs

const fs = require('fs');
const path = require('path');
const { execFile } = require('child_process');

// Deduplicate rapid-fire save requests (browser-sync may relay POSTs twice)
const _lastSave = {};

module.exports = {
  server: {
    baseDir: "."
  },
  files: [
    "tasks/index.html",
    "tasks/*/index.html",
    "tasks/*/docs/*.template.html",
    "tasks/*/docs/*.output.html",
    "tasks/*/editor.html",
    "assets/themes/**/*",
    "public/**/*"
  ],
  // Component-editor snapshots are written by the editor itself; reloading
  // on them would race against the in-flight save and could overwrite tuned
  // state with whatever loaded after the reload.
  watchOptions: {
    // Component-editor: never auto-reload. The editor holds in-memory tuning
    // state and Save races; let the user reload manually when they want.
    // Snapshots: written by the editor, reloading races against in-flight save.
    ignored: [
      "**/components/**/*.editor.html",
      "**/components/**/*.editor.mjs",
      "**/*.snapshot.json",
    ],
    ignoreInitial: true,
  },
  port: 3300,
  open: false,
  notify: false,
  ui: false,
  middleware: [
    {
      route: "/",
      handle: function (req, res, next) {
        if (req.url === '/' || req.url === '') {
          res.writeHead(302, { 'Location': '/tasks/index.html' });
          res.end();
          return;
        }
        next();
      }
    },
    {
      route: "/api/save-component-snapshot",
      handle: function (req, res, next) {
        if (req.method !== 'POST') return next();
        let body = '';
        req.on('data', chunk => body += chunk);
        req.on('end', () => {
          try {
            const payload = JSON.parse(body);
            const { theme, componentName, ...data } = payload;
            if (!theme || !componentName) {
              res.writeHead(400, { 'Content-Type': 'application/json' });
              res.end(JSON.stringify({ error: 'Missing theme or componentName' }));
              return;
            }
            // Reject path traversal
            if (theme.includes('..') || theme.includes('/') ||
                componentName.includes('..') || componentName.includes('/')) {
              res.writeHead(400, { 'Content-Type': 'application/json' });
              res.end(JSON.stringify({ error: 'Invalid theme or componentName' }));
              return;
            }
            const compDir = path.join(__dirname, 'assets', 'themes', theme, 'components', componentName);
            if (!fs.existsSync(compDir)) {
              res.writeHead(404, { 'Content-Type': 'application/json' });
              res.end(JSON.stringify({ error: 'Component directory not found: ' + compDir }));
              return;
            }
            const snapshotPath = path.join(compDir, componentName + '.snapshot.json');
            fs.writeFileSync(snapshotPath, JSON.stringify(data, null, 2));
            console.log(`[snapshot] saved ${theme}/${componentName} → ${snapshotPath}`);
            res.writeHead(200, { 'Content-Type': 'application/json' });
            res.end(JSON.stringify({ ok: true, path: snapshotPath }));
          } catch (e) {
            res.writeHead(400, { 'Content-Type': 'application/json' });
            res.end(JSON.stringify({ error: e.message }));
          }
        });
      }
    },
    {
      route: "/api/save-edits",
      handle: function (req, res, next) {
        if (req.method !== 'POST') return next();
        let body = '';
        req.on('data', chunk => body += chunk);
        req.on('end', () => {
          try {
            const payload = JSON.parse(body);
            const { taskType, docId, data } = payload;

            if (!taskType || !docId || !data) {
              res.writeHead(400, { 'Content-Type': 'application/json' });
              res.end(JSON.stringify({ error: 'Missing taskType, docId, or data' }));
              return;
            }

            // Deduplicate: skip if same docId saved within 500ms
            const saveKey = `${taskType}/${docId}`;
            const now = Date.now();
            if (_lastSave[saveKey] && now - _lastSave[saveKey].time < 500) {
              console.log(`[save] dedup skip ${saveKey} (${now - _lastSave[saveKey].time}ms since last)`);
              res.writeHead(200, { 'Content-Type': 'application/json' });
              res.end(JSON.stringify({ ok: true, dedup: true }));
              return;
            }
            _lastSave[saveKey] = { time: now, body: body.length };

            const docsDir = path.join(__dirname, 'tasks', taskType, 'docs');
            const tempDir = path.join(__dirname, 'tasks', taskType, 'temp');
            fs.mkdirSync(tempDir, { recursive: true });

            const dataPath = path.join(docsDir, docId + '.data.json');
            const diffPath = path.join(tempDir, docId + '.diff.json');

            // Read old data for diff
            let oldData = null;
            try {
              oldData = JSON.parse(fs.readFileSync(dataPath, 'utf-8'));
            } catch (e) {
              // No previous data — first save
            }

            // Write new data
            fs.writeFileSync(dataPath, JSON.stringify(data, null, 2));

            // Compute and write diff
            const diff = computeDiff(oldData, data, docId);
            fs.writeFileSync(diffPath, JSON.stringify(diff, null, 2));

            // Run generate.mjs → output.html + screenshots (async, don't block response)
            const generateScript = path.join(__dirname, 'tasks', taskType, 'scripts', 'generate.mjs');
            if (fs.existsSync(generateScript)) {
              execFile('node', [generateScript, docId], { timeout: 60000 }, (err, stdout, stderr) => {
                if (err) console.error(`[generate] ${taskType}/${docId} failed:`, stderr || err.message);
                else console.log(`[generate] ${stdout.trim()}`);
              });
            }

            res.writeHead(200, { 'Content-Type': 'application/json' });
            res.end(JSON.stringify({ ok: true, path: dataPath }));
          } catch (e) {
            res.writeHead(400, { 'Content-Type': 'application/json' });
            res.end(JSON.stringify({ error: e.message }));
          }
        });
      }
    }
  ]
};

function computeDiff(oldData, newData, docId) {
  const changes = [];
  const timestamp = new Date().toISOString();

  if (!oldData) {
    return { timestamp, docId, firstSave: true, changes: [] };
  }

  const oldPages = oldData.pages || [];
  const newPages = newData.pages || [];

  for (let i = 0; i < Math.max(oldPages.length, newPages.length); i++) {
    const oldPage = oldPages[i] || {};
    const newPage = newPages[i] || {};
    const pageNum = (newPage.page || oldPage.page || i + 1);

    // Compare all element arrays in the page
    for (const key of new Set([...Object.keys(oldPage), ...Object.keys(newPage)])) {
      if (key === 'page') continue;
      const oldVal = JSON.stringify(oldPage[key]);
      const newVal = JSON.stringify(newPage[key]);
      if (oldVal !== newVal) {
        changes.push({
          page: pageNum,
          field: key,
          from: oldPage[key],
          to: newPage[key]
        });
      }
    }
  }

  return { timestamp, docId, changes };
}