resuml 1.3.1 → 1.4.2

package/scripts/dev-server.js

@@ -0,0 +1,392 @@
+/**
+ * Local dev server for the resuml builder.
+ * - Watches & rebuilds the frontend with esbuild
+ * - Serves docs/ statically
+ * - Handles /api/render, /api/themes locally (same logic as Vercel functions)
+ *
+ * Usage: node scripts/dev-server.js [--port 3000]
+ */
+import http from 'node:http';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+import { execFileSync } from 'node:child_process';
+import { context } from 'esbuild';
+
+const require = createRequire(import.meta.url);
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, '..');
+const DOCS_DIR = path.resolve(ROOT, 'docs');
+const PORT = parseInt(process.argv.includes('--port') ? process.argv[process.argv.indexOf('--port') + 1] : '3000', 10);
+
+// ── MIME types ──────────────────────────────────────────────────────
+const MIME = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.mjs': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.map': 'application/json',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+};
+
+// ── Theme helpers (CDN-based: fetch tarball + extract + install deps) ──
+const SAFE_NAME = /^[a-zA-Z0-9._-]+$/;
+const THEME_CACHE_DIR = path.join(os.tmpdir(), 'resuml-themes');
+
+function toPackageName(theme) {
+  if (!SAFE_NAME.test(theme)) throw new Error('Invalid theme name');
+  return theme.startsWith('jsonresume-theme-') ? theme : `jsonresume-theme-${theme}`;
+}
+
+async function ensureThemeInstalled(theme) {
+  const pkg = toPackageName(theme);
+  const pkgDir = path.join(THEME_CACHE_DIR, pkg);
+
+  if (fs.existsSync(path.join(pkgDir, 'package.json'))) {
+    return pkgDir;
+  }
+
+  console.log(`📦 Downloading ${pkg} from npm registry...`);
+
+  // Fetch tarball URL
+  const metaRes = await fetch(`https://registry.npmjs.org/${pkg}/latest`);
+  if (!metaRes.ok) throw new Error(`Theme "${pkg}" not found on npm (${metaRes.status})`);
+  const meta = await metaRes.json();
+  const tarballUrl = meta.dist.tarball;
+
+  // Download and extract
+  const tarRes = await fetch(tarballUrl);
+  const buf = Buffer.from(await tarRes.arrayBuffer());
+  fs.mkdirSync(pkgDir, { recursive: true });
+  const tarPath = path.join(THEME_CACHE_DIR, `${pkg}.tgz`);
+  fs.writeFileSync(tarPath, buf);
+  execFileSync('tar', ['xzf', tarPath, '-C', pkgDir, '--strip-components=1'], { timeout: 10_000 });
+  fs.unlinkSync(tarPath);
+
+  // Install prod deps (ignore lifecycle scripts for security)
+  const pkgJson = JSON.parse(fs.readFileSync(path.join(pkgDir, 'package.json'), 'utf8'));
+  if (pkgJson.dependencies && Object.keys(pkgJson.dependencies).length > 0) {
+    console.log(`   Installing dependencies for ${pkg}...`);
+    execFileSync('npm', ['install', '--omit=dev', '--ignore-scripts', '--legacy-peer-deps'], {
+      timeout: 30_000,
+      stdio: 'pipe',
+      cwd: pkgDir,
+    });
+  }
+
+  // Check if the main entry point exists; if not, the theme needs building
+  const mainEntry = pkgJson.main || 'index.js';
+  const mainPath = path.join(pkgDir, mainEntry);
+  if (!fs.existsSync(mainPath)) {
+    const buildScript = pkgJson.scripts?.build || pkgJson.scripts?.prepare;
+    if (buildScript) {
+      console.log(`   🔨 Theme needs building, installing all deps + running build...`);
+      // Install all deps (including devDependencies needed for the build)
+      execFileSync('npm', ['install', '--ignore-scripts'], {
+        timeout: 60_000,
+        stdio: 'pipe',
+        cwd: pkgDir,
+      });
+      execFileSync('npm', ['run', 'build'], {
+        timeout: 60_000,
+        stdio: 'pipe',
+        cwd: pkgDir,
+        env: { ...process.env, NODE_ENV: 'production' },
+      });
+    }
+  }
+
+  console.log(`   ✅ ${pkg} ready`);
+  return pkgDir;
+}
+
+/**
+ * Returns a Proxy-wrapped array that:
+ * - Supports .map/.forEach/.filter on empty arrays (no crash)
+ * - Returns a safe empty-string object for out-of-bounds index access (prevents arr[0].prop crash)
+ */
+function createSafeArray(arr) {
+  return new Proxy(arr, {
+    get(target, prop, receiver) {
+      const val = Reflect.get(target, prop, receiver);
+      if (val !== undefined) return val;
+      if (typeof prop === 'string' && /^\d+$/.test(prop)) {
+        return new Proxy({}, { get: (_, p) => typeof p === 'symbol' ? undefined : '' });
+      }
+      return val;
+    },
+  });
+}
+
+/**
+ * Pad resume with safe defaults so themes don't crash on missing fields.
+ * All array sections are wrapped in createSafeArray so that:
+ * - theme.work.map(fn) works on empty data
+ * - theme.work[0].position returns '' instead of crashing
+ */
+function padResume(r) {
+  const basics = r.basics || {};
+  const location = basics.location || {};
+  const safe = { ...r };
+  safe.basics = {
+    name: '', label: '', image: '', email: '', phone: '', url: '', summary: '',
+    ...basics,
+    location: { address: '', postalCode: '', city: '', countryCode: '', region: '', ...location },
+  };
+  const arraySections = ['work','volunteer','education','awards','certificates','publications','skills','languages','interests','references','projects'];
+  for (const key of arraySections) {
+    safe[key] = createSafeArray(Array.isArray(safe[key]) ? safe[key] : []);
+  }
+  safe.basics.profiles = createSafeArray(Array.isArray(safe.basics.profiles) ? safe.basics.profiles : []);
+  return safe;
+}
+
+async function renderWithTheme(themeName, resume) {
+  const paddedResume = padResume(resume);
+  const pkgDir = await ensureThemeInstalled(themeName);
+
+  // Clear require cache for this dir so hot-reload works
+  for (const key of Object.keys(require.cache)) {
+    if (key.startsWith(pkgDir)) delete require.cache[key];
+  }
+
+  let mod;
+  try {
+    mod = require(pkgDir);
+  } catch (err) {
+    const pkg = toPackageName(themeName);
+    const hint = err.code === 'MODULE_NOT_FOUND'
+      ? `. This theme may require a build step that isn't included in the published package.`
+      : '';
+    throw new Error(`Could not load theme "${pkg}"${hint}`);
+  }
+  if (typeof mod.render !== 'function') {
+    throw new Error(`Theme "${toPackageName(themeName)}" does not export a render function`);
+  }
+  try {
+    // Temporarily change cwd to theme dir so themes that read files
+    // with relative paths (e.g. fs.readFileSync('./index.css')) work
+    const originalCwd = process.cwd();
+    process.chdir(pkgDir);
+    try {
+      const result = mod.render(paddedResume);
+      return result instanceof Promise ? await result : result;
+    } finally {
+      process.chdir(originalCwd);
+    }
+  } catch (err) {
+    throw new Error(
+      `Theme "${toPackageName(themeName)}" crashed while rendering: ${err.message}. ` +
+      `This usually means the theme expects resume fields that are missing (e.g. work, education).`
+    );
+  }
+}
+
+// ── Theme registry (mirrors api/_lib/themeRegistry.ts) ──────────────
+let cachedThemes = null;
+let cacheExpires = 0;
+
+async function fetchThemeList() {
+  const now = Date.now();
+  if (cachedThemes && cacheExpires > now) return cachedThemes;
+
+  const res = await fetch('https://registry.npmjs.org/-/v1/search?text=jsonresume-theme-&size=250');
+  if (!res.ok) throw new Error(`npm registry returned ${res.status}`);
+
+  const data = await res.json();
+  const themes = [];
+  for (const result of data.objects || []) {
+    const pkg = result.package;
+    const name = pkg.name;
+    if (!name.startsWith('jsonresume-theme-')) continue;
+    const shortName = name.replace('jsonresume-theme-', '');
+    themes.push({
+      name: shortName,
+      displayName: shortName.charAt(0).toUpperCase() + shortName.slice(1).replace(/-/g, ' '),
+      description: pkg.description || '',
+      version: pkg.version || '0.0.0',
+      weeklyDownloads: result.score?.detail?.popularity
+        ? Math.round(result.score.detail.popularity * 10000)
+        : 0,
+    });
+  }
+  themes.sort((a, b) => b.weeklyDownloads - a.weeklyDownloads);
+  cachedThemes = themes;
+  cacheExpires = now + 3600_000;
+  return themes;
+}
+
+// ── Parse JSON body ─────────────────────────────────────────────────
+function readBody(req, maxBytes = 512 * 1024) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    let size = 0;
+    req.on('data', (chunk) => {
+      size += chunk.length;
+      if (size > maxBytes) { req.destroy(); reject(new Error('Body too large')); return; }
+      chunks.push(chunk);
+    });
+    req.on('end', () => {
+      try { resolve(JSON.parse(Buffer.concat(chunks).toString())); }
+      catch { reject(new Error('Invalid JSON')); }
+    });
+    req.on('error', reject);
+  });
+}
+
+// ── API route handlers ──────────────────────────────────────────────
+async function handleApiRender(req, res) {
+  if (req.method === 'OPTIONS') { res.writeHead(200); res.end(); return; }
+  if (req.method !== 'POST') { jsonError(res, 405, 'Method not allowed'); return; }
+
+  let body;
+  try { body = await readBody(req); } catch (e) { jsonError(res, 400, e.message); return; }
+
+  const { resume, theme } = body;
+  if (!resume || typeof resume !== 'object') { jsonError(res, 400, 'resume is required'); return; }
+  if (!theme || typeof theme !== 'string' || !SAFE_NAME.test(theme)) { jsonError(res, 400, 'Invalid theme name'); return; }
+
+  try {
+    console.log(`🎨 Rendering with theme: ${theme}`);
+    const html = await renderWithTheme(theme, resume);
+    res.writeHead(200, {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Access-Control-Allow-Origin': '*',
+    });
+    res.end(html);
+  } catch (e) {
+    console.error('Render error:', e.message);
+    jsonError(res, 500, e.message);
+  }
+}
+
+async function handleApiThemes(_req, res) {
+  try {
+    const themes = await fetchThemeList();
+    res.writeHead(200, {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+      'Cache-Control': 'public, max-age=3600',
+    });
+    res.end(JSON.stringify(themes));
+  } catch (e) {
+    jsonError(res, 500, e.message);
+  }
+}
+
+function jsonError(res, status, message) {
+  res.writeHead(status, {
+    'Content-Type': 'application/json',
+    'Access-Control-Allow-Origin': '*',
+  });
+  res.end(JSON.stringify({ error: message }));
+}
+
+// ── Static file serving ─────────────────────────────────────────────
+function serveStatic(req, res) {
+  let filePath = path.join(DOCS_DIR, req.url === '/' ? 'index.html' : req.url);
+
+  // SPA fallback: if file doesn't exist and no extension, serve index.html
+  if (!fs.existsSync(filePath) && !path.extname(filePath)) {
+    filePath = path.join(DOCS_DIR, 'index.html');
+  }
+
+  if (!fs.existsSync(filePath)) {
+    res.writeHead(404);
+    res.end('Not found');
+    return;
+  }
+
+  const ext = path.extname(filePath);
+  const mime = MIME[ext] || 'application/octet-stream';
+  const content = fs.readFileSync(filePath);
+
+  res.writeHead(200, { 'Content-Type': mime });
+  res.end(content);
+}
+
+// ── esbuild watch ───────────────────────────────────────────────────
+async function startBuildWatch() {
+  const ctx = await context({
+    entryPoints: [path.resolve(ROOT, 'src/builder/index.tsx')],
+    bundle: true,
+    sourcemap: true,
+    format: 'esm',
+    target: 'es2022',
+    outfile: path.resolve(DOCS_DIR, 'app/main.js'),
+    jsx: 'automatic',
+    define: { 'process.env.NODE_ENV': '"development"' },
+    loader: { '.ts': 'ts', '.tsx': 'tsx' },
+    logLevel: 'info',
+    // Don't minify in dev for better debugging
+  });
+
+  await ctx.watch();
+  console.log('👀 Watching for frontend changes...');
+}
+
+// ── HTTP server ─────────────────────────────────────────────────────
+async function main() {
+  // Build frontend first
+  await startBuildWatch();
+
+  const server = http.createServer(async (req, res) => {
+    // CORS preflight
+    if (req.method === 'OPTIONS') {
+      res.writeHead(200, {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type',
+      });
+      res.end();
+      return;
+    }
+
+    const url = new URL(req.url, `http://localhost:${PORT}`);
+
+    try {
+      if (url.pathname === '/api/render') {
+        await handleApiRender(req, res);
+      } else if (url.pathname === '/api/themes') {
+        await handleApiThemes(req, res);
+      } else {
+        serveStatic(req, res);
+      }
+    } catch (e) {
+      console.error('Server error:', e);
+      if (!res.headersSent) {
+        jsonError(res, 500, 'Internal server error');
+      }
+    }
+  });
+
+  server.listen(PORT, () => {
+    console.log('');
+    console.log(`  🚀 resuml builder running at:`);
+    console.log(`     http://localhost:${PORT}`);
+    console.log('');
+    console.log('  API endpoints:');
+    console.log(`     POST http://localhost:${PORT}/api/render`);
+    console.log(`     GET  http://localhost:${PORT}/api/themes`);
+    console.log('');
+  });
+}
+
+main().catch((err) => {
+  console.error('Failed to start dev server:', err);
+  process.exit(1);
+});
+
+// Prevent theme crashes from killing the server
+process.on('uncaughtException', (err) => {
+  console.error('⚠️  Uncaught exception (server still running):', err.message);
+});

package/scripts/quick-bundle.cjs

@@ -0,0 +1,129 @@
+/**
+ * Quick bundler: takes a theme already in node_modules and bundles it
+ * for the browser as an ESM module.
+ *
+ * Shims Node.js builtins (fs, path, url, crypto) so themes that
+ * reference them at import time still bundle — the shims are no-ops
+ * or minimal polyfills that cover what Handlebars-based themes need.
+ */
+const esbuild = require('esbuild');
+const fs = require('fs');
+const path = require('path');
+
+const THEMES_DIR = path.resolve(__dirname, '../docs/themes');
+const SHIMS_DIR = path.resolve(__dirname, '_shims');
+fs.mkdirSync(THEMES_DIR, { recursive: true });
+fs.mkdirSync(SHIMS_DIR, { recursive: true });
+
+// Write browser shims for Node built-ins
+fs.writeFileSync(path.join(SHIMS_DIR, 'fs.js'), `
+  export function readFileSync() { return ''; }
+  export function writeFileSync() {}
+  export function existsSync() { return false; }
+  export function mkdirSync() {}
+  export default { readFileSync, writeFileSync, existsSync, mkdirSync };
+`);
+fs.writeFileSync(path.join(SHIMS_DIR, 'path.js'), `
+  export function join(...p) { return p.join('/'); }
+  export function resolve(...p) { return p.join('/'); }
+  export function dirname(p) { return p.replace(/\\/[^/]*$/, ''); }
+  export function basename(p) { return p.replace(/.*\\//, ''); }
+  export function extname(p) { const m = p.match(/\\.[^.]+$/); return m ? m[0] : ''; }
+  export const sep = '/';
+  export default { join, resolve, dirname, basename, extname, sep };
+`);
+fs.writeFileSync(path.join(SHIMS_DIR, 'url.js'), `
+  export function fileURLToPath(u) { return u.replace('file://', ''); }
+  export function pathToFileURL(p) { return 'file://' + p; }
+  export class URL { constructor(u) { this.href = u; } }
+  export default { fileURLToPath, pathToFileURL, URL };
+`);
+fs.writeFileSync(path.join(SHIMS_DIR, 'crypto.js'), `
+  export function randomUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = Math.random() * 16 | 0;
+      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+    });
+  }
+  export function createHash() {
+    return { update() { return this; }, digest() { return 'stub'; } };
+  }
+  export default { randomUUID, createHash };
+`);
+
+// Themes to bundle (must already be in node_modules)
+const themes = [
+  'stackoverflow',
+];
+
+async function bundleTheme(name) {
+  const pkg = `jsonresume-theme-${name}`;
+  const entryCode = `
+    var theme = require("${pkg}");
+    export var render = theme.render;
+    export var pdfRenderOptions = theme.pdfRenderOptions;
+  `;
+  
+  const entryFile = path.join(THEMES_DIR, `_entry_${name}.js`);
+  fs.writeFileSync(entryFile, entryCode);
+
+  try {
+    await esbuild.build({
+      entryPoints: [entryFile],
+      bundle: true,
+      minify: true,
+      format: 'esm',
+      target: 'es2022',
+      platform: 'browser',
+      outfile: path.join(THEMES_DIR, `${name}.js`),
+      define: {
+        'process.env.NODE_ENV': '"production"',
+        'global': 'globalThis',
+      },
+      alias: {
+        'fs': path.join(SHIMS_DIR, 'fs.js'),
+        'path': path.join(SHIMS_DIR, 'path.js'),
+        'url': path.join(SHIMS_DIR, 'url.js'),
+        'node:crypto': path.join(SHIMS_DIR, 'crypto.js'),
+        'crypto': path.join(SHIMS_DIR, 'crypto.js'),
+        'node:fs': path.join(SHIMS_DIR, 'fs.js'),
+        'node:path': path.join(SHIMS_DIR, 'path.js'),
+        'node:url': path.join(SHIMS_DIR, 'url.js'),
+      },
+      logLevel: 'warning',
+    });
+    
+    fs.unlinkSync(entryFile);
+    const size = fs.statSync(path.join(THEMES_DIR, `${name}.js`)).size;
+    console.log(`OK ${name}: ${(size / 1024).toFixed(0)}KB`);
+    return { name, ok: true, size };
+  } catch (err) {
+    fs.unlinkSync(entryFile);
+    console.error(`FAIL ${name}: ${err.message}`);
+    return { name, ok: false };
+  }
+}
+
+async function main() {
+  const results = [];
+  for (const t of themes) {
+    results.push(await bundleTheme(t));
+  }
+
+  // Write manifest
+  const manifest = results.map(r => ({
+    name: r.name,
+    displayName: r.name.charAt(0).toUpperCase() + r.name.slice(1).replace(/-/g, ' '),
+    description: '',
+    browserCompatible: r.ok,
+    fileSize: r.size || 0,
+  }));
+  fs.writeFileSync(path.join(THEMES_DIR, 'manifest.json'), JSON.stringify(manifest, null, 2));
+
+  // Cleanup shims
+  fs.rmSync(SHIMS_DIR, { recursive: true, force: true });
+
+  console.log(`\nManifest written with ${results.filter(r => r.ok).length}/${results.length} themes`);
+}
+
+main();

package/dist/api.d.ts

@@ -1,8 +0,0 @@
-export { R as Resume, l as loadResumeFiles, p as processResumeData } from './loadResume-BFCirLAW.js';
-
-/**
- * Node.js API: Only load theme from node_modules, do not auto-install
- */
-declare function loadTheme(themeName: string): Promise<any>;
-
-export { loadTheme };