htmlhost-cli 1.4.1 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlhost-cli",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "Deploy HTML files from the terminal — htmlhost.co CLI",
   "type": "module",
   "bin": {

package/src/assets.mjs

@@ -1,6 +1,14 @@
 /**
- * Asset inlining — scan HTML for local asset references, upload them,
- * and rewrite the HTML to point at the hosted URLs.
+ * Asset processing — scan HTML for local asset references, inline CSS/JS,
+ * upload binary assets (images, fonts, PDFs, SVGs), and rewrite the HTML.
+ *
+ * Strategy:
+ *   CSS/JS files (< 512 KB) → inlined directly into the HTML
+ *   CSS/JS files (≥ 512 KB) → uploaded to media library, URL rewritten
+ *   Binary assets            → uploaded to media library, URL rewritten
+ *
+ * Before inlining CSS, all url() references inside the CSS are resolved,
+ * uploaded, and rewritten so the inlined stylesheet is fully self-contained.
  *
  * Handles:  <script src>, <link href>, <img src>, <img srcset>,
  *           <source src/srcset>, <video src/poster>, <audio src>,
@@ -10,15 +18,19 @@
  *           anchors (#), and files > 10 MB.
  */
 import { readFileSync, statSync, existsSync } from "node:fs";
-import { resolve, dirname, basename } from "node:path";
+import { resolve, dirname, basename, extname } from "node:path";
 import { uploadFile } from "./api.mjs";
 import { getApi } from "./config.mjs";
 import { ok, warn, dim, cyan, formatBytes, mimeFromExt } from "./ui.mjs";
 
 const MAX_ASSET_BYTES = 10 * 1024 * 1024; // 10 MB
+const INLINE_THRESHOLD = 512 * 1024;       // 512 KB — inline CSS/JS below this
+
+/** File extensions that should be inlined into the HTML instead of uploaded. */
+const INLINE_EXTENSIONS = new Set([".css", ".js", ".mjs"]);
 
 /**
- * Returns true for references we should NOT try to upload.
+ * Returns true for references we should NOT try to process.
  */
 function isExternal(ref) {
   if (!ref || !ref.trim()) return true;
@@ -37,8 +49,6 @@ function isExternal(ref) {
 /**
  * Given a base directory and a relative path, resolve it and check
  * it exists, is a file, and is under the size limit.
- *
- * Returns { filePath, skip, reason } — if skip is true, reason explains why.
  */
 function resolveAsset(baseDir, ref) {
   const cleaned = ref.split("?")[0].split("#")[0]; // strip query/hash
@@ -68,35 +78,121 @@ function resolveAsset(baseDir, ref) {
   return { filePath, size: stat.size, skip: false };
 }
 
+/**
+ * Check if a file should be inlined based on extension and size.
+ */
+function shouldInline(filePath, fileSize) {
+  const ext = extname(filePath).toLowerCase();
+  return INLINE_EXTENSIONS.has(ext) && fileSize < INLINE_THRESHOLD;
+}
+
+/**
+ * Extract url(…) references from a CSS string.
+ */
+function extractCssUrls(css) {
+  const urlRe = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)]*?))\s*\)/gi;
+  const refs = [];
+  let m;
+  while ((m = urlRe.exec(css)) !== null) {
+    const val = (m[1] ?? m[2] ?? m[3] ?? "").trim();
+    if (val && !isExternal(val)) {
+      refs.push(val);
+    }
+  }
+  return refs;
+}
+
+/**
+ * Process a CSS file's url() references — upload assets and rewrite URLs.
+ * Returns the rewritten CSS content.
+ */
+async function processCssContent(css, cssDir, sharedCache, urlMap) {
+  const refs = extractCssUrls(css);
+  if (refs.length === 0) return css;
+
+  const api = getApi();
+
+  for (const ref of refs) {
+    if (urlMap.has(ref)) continue;
+
+    const asset = resolveAsset(cssDir, ref);
+    if (asset.skip) {
+      warn(`  CSS url() ${cyan(ref)} — ${asset.reason}`);
+      continue;
+    }
+
+    // Check shared cache
+    if (sharedCache && sharedCache.has(asset.filePath)) {
+      urlMap.set(ref, sharedCache.get(asset.filePath));
+      continue;
+    }
+
+    const fileName = basename(asset.filePath);
+    const mime = mimeFromExt(fileName);
+
+    try {
+      const data = await uploadFile("/api/media", asset.filePath, fileName, mime);
+      const hostedUrl = `${api}${data.url}`;
+      urlMap.set(ref, hostedUrl);
+      if (sharedCache) sharedCache.set(asset.filePath, hostedUrl);
+      ok(`  ${cyan(ref)} ${dim(`(${formatBytes(asset.size)})`)} → ${hostedUrl}`);
+    } catch (e) {
+      warn(`  Failed to upload ${cyan(ref)}: ${e.message}`);
+    }
+  }
+
+  // Rewrite all url() references in the CSS
+  let result = css;
+  for (const [ref, hostedUrl] of urlMap) {
+    result = replaceAll(result, `"${ref}"`, `"${hostedUrl}"`);
+    result = replaceAll(result, `'${ref}'`, `'${hostedUrl}'`);
+    result = replaceAll(result, `url(${ref})`, `url(${hostedUrl})`);
+  }
+
+  return result;
+}
+
 /**
  * Scan HTML string for local asset references.
- * Returns an array of { original, ref } entries where `original` is the
- * exact attribute value substring and `ref` is the cleaned path.
+ * Returns an array of { original, ref, tagType } entries.
  */
 function findAssetRefs(html) {
   const refs = new Set();
   const entries = [];
 
-  function add(original) {
+  function add(original, tagType = "attr") {
     const ref = original.trim();
     if (isExternal(ref)) return;
     if (refs.has(ref)) return; // dedupe
     refs.add(ref);
-    entries.push({ original, ref });
+    entries.push({ original, ref, tagType });
   }
 
-  // Match src="…" and href="…" on relevant tags.
-  // Capture: <script src="x">, <img src="x">, <source src="x">,
-  //          <video src="x" poster="x">, <audio src="x">,
-  //          <link href="x"> (only stylesheets/icons/preloads)
-  // We intentionally use a broad regex and then filter.
-
-  // --- Tag attributes: src, href, poster ---
-  const attrRe = /<(?:script|img|source|video|audio|link|embed|track)\b[^>]*?\b(?:src|href|poster)\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
+  // --- <script src="..."> ---
+  const scriptRe = /<script\b[^>]*?\bsrc\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
   let m;
+  while ((m = scriptRe.exec(html)) !== null) {
+    const val = m[1] ?? m[2];
+    if (val) add(val, "script");
+  }
+
+  // --- <link href="..." rel="stylesheet"> ---
+  const linkRe = /<link\b[^>]*?\bhref\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
+  while ((m = linkRe.exec(html)) !== null) {
+    const val = m[1] ?? m[2];
+    const fullTag = m[0];
+    if (val) {
+      // Only treat as CSS if it's a stylesheet link
+      const isStylesheet = /rel\s*=\s*["']stylesheet["']/i.test(fullTag);
+      add(val, isStylesheet ? "css" : "attr");
+    }
+  }
+
+  // --- Other tag attributes: src, href, poster (non-script, non-link) ---
+  const attrRe = /<(?:img|source|video|audio|embed|track)\b[^>]*?\b(?:src|href|poster)\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
   while ((m = attrRe.exec(html)) !== null) {
     const val = m[1] ?? m[2];
-    if (val) add(val);
+    if (val) add(val, "attr");
   }
 
   // --- srcset attributes (img, source) ---
@@ -104,48 +200,39 @@ function findAssetRefs(html) {
   while ((m = srcsetRe.exec(html)) !== null) {
     const srcset = m[1] ?? m[2];
     if (!srcset) continue;
-    // srcset is comma-separated: "path 2x, path2 300w"
     for (const part of srcset.split(",")) {
       const src = part.trim().split(/\s+/)[0];
-      if (src) add(src);
+      if (src) add(src, "attr");
     }
   }
 
   // --- CSS url() in <style> blocks ---
   const styleBlockRe = /<style[^>]*>([\s\S]*?)<\/style>/gi;
   while ((m = styleBlockRe.exec(html)) !== null) {
-    extractCssUrls(m[1], add);
+    const urls = extractCssUrls(m[1]);
+    for (const u of urls) add(u, "css-url");
   }
 
   // --- CSS url() in inline style="…" attributes ---
   const inlineStyleRe = /\bstyle\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
   while ((m = inlineStyleRe.exec(html)) !== null) {
     const css = m[1] ?? m[2];
-    if (css) extractCssUrls(css, add);
+    if (css) {
+      const urls = extractCssUrls(css);
+      for (const u of urls) add(u, "css-url");
+    }
   }
 
   return entries;
 }
 
 /**
- * Extract url(…) references from a CSS string.
- */
-function extractCssUrls(css, add) {
-  const urlRe = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)]*?))\s*\)/gi;
-  let m;
-  while ((m = urlRe.exec(css)) !== null) {
-    const val = (m[1] ?? m[2] ?? m[3] ?? "").trim();
-    if (val) add(val);
-  }
-}
-
-/**
- * Main entry: process HTML, upload local assets, return rewritten HTML.
+ * Main entry: process HTML, inline CSS/JS, upload binary assets, return rewritten HTML.
  *
  * @param {string} html         The original HTML content
- * @param {string} baseDir      Directory the HTML file lives in (for resolving relative paths)
- * @param {Map<string, string>} [sharedCache]  Optional cache of filePath → hostedUrl for batch deploys
- * @returns {Promise<string>}   Rewritten HTML with hosted asset URLs
+ * @param {string} baseDir      Directory the HTML file lives in
+ * @param {Map<string, string>} [sharedCache]  Optional filePath → hostedUrl cache for batch deploys
+ * @returns {Promise<string>}   Rewritten HTML with inlined/hosted assets
  */
 export async function processAssets(html, baseDir, sharedCache) {
   const entries = findAssetRefs(html);
@@ -154,48 +241,82 @@ export async function processAssets(html, baseDir, sharedCache) {
 
   const api = getApi();
 
-  // Collect unique refs → upload once, build a replacement map
-  /** @type {Map<string, string>} ref → hosted URL */
+  /** @type {Map<string, string>} ref → hosted URL (for binary uploads) */
   const urlMap = new Map();
 
-  // Count how many actually need uploading (not already cached)
-  let needsUpload = 0;
+  /** @type {Map<string, {content: string, size: number}>} ref → inline content (for CSS/JS) */
+  const inlineMap = new Map();
+
+  // --- Phase 1: Categorize and process each reference ---
+
+  let uploadCount = 0;
+  let inlineCount = 0;
+  let cachedCount = 0;
+
+  // Pre-scan to count
   for (const { ref } of entries) {
-    if (urlMap.has(ref)) continue;
+    if (urlMap.has(ref) || inlineMap.has(ref)) continue;
     const asset = resolveAsset(baseDir, ref);
     if (asset.skip) continue;
     if (sharedCache && sharedCache.has(asset.filePath)) {
-      urlMap.set(ref, sharedCache.get(asset.filePath));
-    } else {
-      needsUpload++;
+      cachedCount++;
     }
   }
 
-  const cachedCount = urlMap.size;
-  const totalLocal = cachedCount + needsUpload;
+  const totalRefs = entries.filter((e) => {
+    const asset = resolveAsset(baseDir, e.ref);
+    return !asset.skip;
+  }).length;
 
-  if (totalLocal > 0) {
+  if (totalRefs > 0) {
     console.log("");
-    const label = totalLocal === 1 ? "local asset" : "local assets";
-    if (cachedCount > 0 && needsUpload > 0) {
-      ok(`Found ${cyan(String(totalLocal))} ${label} (${cachedCount} cached, ${needsUpload} to upload)`);
-    } else if (cachedCount > 0) {
-      ok(`Found ${cyan(String(totalLocal))} ${label} (all cached)`);
-    } else {
-      ok(`Found ${cyan(String(totalLocal))} ${label} to upload`);
-    }
+    ok(`Found ${cyan(String(totalRefs))} local asset${totalRefs === 1 ? "" : "s"} to process`);
     console.log("");
   }
 
-  for (const { ref } of entries) {
-    if (urlMap.has(ref)) continue; // already resolved (from cache or previous ref)
+  for (const { ref, tagType } of entries) {
+    if (urlMap.has(ref) || inlineMap.has(ref)) continue;
 
     const asset = resolveAsset(baseDir, ref);
     if (asset.skip) {
-      warn(`Skipping ${cyan(ref)} — ${asset.reason}`);
+      if (asset.reason !== "empty") warn(`Skipping ${cyan(ref)} — ${asset.reason}`);
       continue;
     }
 
+    // Check shared cache first
+    if (sharedCache && sharedCache.has(asset.filePath)) {
+      urlMap.set(ref, sharedCache.get(asset.filePath));
+      ok(`${cyan(ref)} ${dim("(cached)")}`);
+      continue;
+    }
+
+    const ext = extname(asset.filePath).toLowerCase();
+
+    // --- CSS file: inline (with nested url() processing) ---
+    if (tagType === "css" && shouldInline(asset.filePath, asset.size)) {
+      let cssContent = readFileSync(asset.filePath, "utf8");
+      const cssDir = dirname(asset.filePath);
+
+      // Process url() references inside the CSS file
+      const cssUrlMap = new Map();
+      cssContent = await processCssContent(cssContent, cssDir, sharedCache, cssUrlMap);
+
+      inlineMap.set(ref, { content: cssContent, size: asset.size });
+      inlineCount++;
+      ok(`${cyan(ref)} ${dim(`(${formatBytes(asset.size)})`)} → ${dim("inlined as <style>")}`);
+      continue;
+    }
+
+    // --- JS file: inline ---
+    if (tagType === "script" && shouldInline(asset.filePath, asset.size)) {
+      const jsContent = readFileSync(asset.filePath, "utf8");
+      inlineMap.set(ref, { content: jsContent, size: asset.size });
+      inlineCount++;
+      ok(`${cyan(ref)} ${dim(`(${formatBytes(asset.size)})`)} → ${dim("inlined as <script>")}`);
+      continue;
+    }
+
+    // --- Binary asset or large CSS/JS: upload to media library ---
     const fileName = basename(asset.filePath);
     const mime = mimeFromExt(fileName);
 
@@ -203,35 +324,66 @@ export async function processAssets(html, baseDir, sharedCache) {
       const data = await uploadFile("/api/media", asset.filePath, fileName, mime);
       const hostedUrl = `${api}${data.url}`;
       urlMap.set(ref, hostedUrl);
-      // Store in shared cache by absolute path for cross-file dedup
-      if (sharedCache) {
-        sharedCache.set(asset.filePath, hostedUrl);
-      }
+      if (sharedCache) sharedCache.set(asset.filePath, hostedUrl);
+      uploadCount++;
       ok(`${cyan(ref)} ${dim(`(${formatBytes(asset.size)})`)} → ${hostedUrl}`);
     } catch (e) {
       warn(`Failed to upload ${cyan(ref)}: ${e.message}`);
     }
   }
 
-  if (urlMap.size === 0) return html;
+  if (urlMap.size === 0 && inlineMap.size === 0) return html;
+
+  // --- Phase 2: Rewrite the HTML ---
 
-  // Replace all occurrences.
-  // We do a simple, safe string replacement — find all attribute values matching
-  // our refs and swap them with the hosted URL.
   let result = html;
 
+  // 2a. Inline CSS: replace <link rel="stylesheet" href="ref"> with <style>content</style>
+  for (const [ref, { content }] of inlineMap) {
+    const ext = extname(ref).toLowerCase();
+
+    if (ext === ".css") {
+      // Match <link ... href="ref" ...> (handles both quote styles, any attribute order)
+      const linkPattern = new RegExp(
+        `<link\\b[^>]*?\\bhref\\s*=\\s*(?:"${escapeRegex(ref)}"|'${escapeRegex(ref)}')[^>]*/?>`,
+        "gi"
+      );
+      result = result.replace(linkPattern, `<style>\n${content}\n</style>`);
+    }
+
+    if (ext === ".js" || ext === ".mjs") {
+      // Match <script src="ref" ...></script> (handles attributes before/after src)
+      const scriptPattern = new RegExp(
+        `<script\\b([^>]*?)\\bsrc\\s*=\\s*(?:"${escapeRegex(ref)}"|'${escapeRegex(ref)}')([^>]*)>\\s*</script>`,
+        "gi"
+      );
+      result = result.replace(scriptPattern, (_, before, after) => {
+        // Remove type="module" if present since inlined scripts don't need it for basic cases
+        // But keep it if the user explicitly set it — they might need ES module behavior
+        const attrs = (before + after).trim();
+        const cleanedAttrs = attrs
+          .replace(/\bsrc\s*=\s*(?:"[^"]*"|'[^']*')/gi, "")
+          .trim();
+        return `<script${cleanedAttrs ? " " + cleanedAttrs : ""}>\n${content}\n</script>`;
+      });
+    }
+  }
+
+  // 2b. Rewrite URL references for uploaded assets
   for (const [ref, hostedUrl] of urlMap) {
-    // Replace in attribute values: ="ref" and ='ref'
-    // Use a function replacer so we handle all occurrences correctly.
     result = replaceAll(result, `"${ref}"`, `"${hostedUrl}"`);
     result = replaceAll(result, `'${ref}'`, `'${hostedUrl}'`);
-
-    // Replace in CSS url(): url(ref), url("ref"), url('ref')
-    // The quoted forms are handled above. Handle the unquoted form too.
     result = replaceAll(result, `url(${ref})`, `url(${hostedUrl})`);
   }
 
+  // Summary
   console.log("");
+  if (inlineCount > 0) {
+    ok(`Inlined ${cyan(String(inlineCount))} file${inlineCount === 1 ? "" : "s"} into HTML`);
+  }
+  if (uploadCount > 0) {
+    ok(`Uploaded ${cyan(String(uploadCount))} asset${uploadCount === 1 ? "" : "s"} to media library`);
+  }
 
   return result;
 }
@@ -240,6 +392,12 @@ export async function processAssets(html, baseDir, sharedCache) {
  * Replace all occurrences of `search` in `str` with `replacement`.
  */
 function replaceAll(str, search, replacement) {
-  // Use split/join for safe literal replacement (no regex escaping needed)
   return str.split(search).join(replacement);
 }
+
+/**
+ * Escape a string for use in a RegExp.
+ */
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}

package/src/cli.mjs

@@ -4,7 +4,7 @@
 import { bold, dim, cyan, err } from "./ui.mjs";
 import { ApiError } from "./api.mjs";
 
-const VERSION = "1.4.1";
+const VERSION = "1.5.0";
 
 const HELP = `
   ${bold("htmlhost")} ${dim(`v${VERSION}`)} — deploy HTML from the terminal

package/src/commands/deploy.mjs

@@ -101,13 +101,31 @@ export async function deploy(args) {
 async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }) {
   const filePath = resolve(file);
   const projectDir = dirname(filePath);
+  const fileName = basename(filePath);
 
   let isLinked = false;
 
   if (!slug && !forceNew) {
     const link = readLink(projectDir);
-    // Only use single-file link format (has slug at top level, not sites map)
-    if (link?.slug && !link.sites) {
+
+    if (link?.sites) {
+      // Multi-file format — warn that only one file is being deployed
+      const siteCount = Object.keys(link.sites).length;
+      if (siteCount > 1) {
+        console.log("");
+        console.log(`  ${yellow("⚠")}  This project has ${bold(String(siteCount))} linked sites but you're deploying only ${cyan(fileName)}.`);
+        console.log(`     ${dim(`To deploy all files, run: ${bold("htmlhost deploy .")}`)}`);
+        console.log("");
+      }
+      // Look up this file's entry in the sites map
+      const entry = link.sites[fileName];
+      if (entry?.slug) {
+        slug = entry.slug;
+        isLinked = true;
+        info(`Linked to ${cyan(slug)} ${dim(`(via .htmlhost sites map)`)}`);
+      }
+    } else if (link?.slug) {
+      // Single-file format (has slug at top level, no sites map)
       if (link.onRedeploy === "overwrite") {
         slug = link.slug;
         isLinked = true;
@@ -186,13 +204,21 @@ async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }
 
   const data = await post("/api/sites", body);
 
-  // Save/update the link (preserve onRedeploy preference)
+  // Save/update the link — merge into existing .htmlhost instead of clobbering
   const existingLink = readLink(projectDir);
-  writeLink(projectDir, {
-    slug: data.slug,
-    url: data.url,
-    ...(existingLink?.onRedeploy ? { onRedeploy: existingLink.onRedeploy } : {}),
-  });
+
+  if (existingLink?.sites) {
+    // Multi-file format: merge this file's entry into the existing sites map
+    existingLink.sites[fileName] = { slug: data.slug, url: data.url };
+    writeLink(projectDir, existingLink);
+  } else {
+    // Single-file format: write the flat slug/url (preserve onRedeploy preference)
+    writeLink(projectDir, {
+      slug: data.slug,
+      url: data.url,
+      ...(existingLink?.onRedeploy ? { onRedeploy: existingLink.onRedeploy } : {}),
+    });
+  }
 
   console.log("");
   ok(`${bold("Live")} at ${cyan(`https://${data.url}`)}`);

package/src/ui.mjs

@@ -99,6 +99,7 @@ export function mimeFromExt(filename) {
     gif: "image/gif",
     svg: "image/svg+xml",
     webp: "image/webp",
+    avif: "image/avif",
     ico: "image/x-icon",
     woff: "font/woff",
     woff2: "font/woff2",
@@ -106,10 +107,12 @@ export function mimeFromExt(filename) {
     otf: "font/otf",
     css: "text/css",
     js: "text/javascript",
+    mjs: "text/javascript",
     json: "application/json",
     mp4: "video/mp4",
     webm: "video/webm",
     mp3: "audio/mpeg",
+    ogg: "audio/ogg",
     wav: "audio/wav",
     pdf: "application/pdf",
   };