@kenjura/ursa 0.75.0 → 0.77.0

package/src/dev.js

@@ -20,7 +20,7 @@ const { readFile, readdir, stat, mkdir } = promises;
 // Import helper modules
 import { renderFileAsync } from "./helper/fileRenderer.js";
 import { findStyleCss } from "./helper/findStyleCss.js";
-import { findScriptJs } from "./helper/findScriptJs.js";
+import { findAllScriptJs } from "./helper/findScriptJs.js";
 import { extractMetadata, getAutoIndexConfig, isMetadataOnly } from "./helper/metadataExtractor.js";
 import { injectFrontmatterTable } from "./helper/frontmatterTable.js";
 import { buildValidPaths, markInactiveLinks, resolveRelativeUrls } from "./helper/linkValidator.js";
@@ -33,9 +33,12 @@ import { extractImageReferences } from "./helper/imageExtractor.js";
 import { recurse } from "./helper/recursive-readdir.js";
 import { isFolderHidden, clearConfigCache } from "./helper/folderConfig.js";
 import { extractSections } from "./helper/sectionExtractor.js";
-import { getTemplates, getMenu, findAllCustomMenus, getCustomMenuForFile, getTransformedMetadata, getFooter, toTitleCase, addTrailingSlash, generateAutoIndexHtmlFromSource } from "./helper/build/index.js";
+import { getTemplates, getMenu, findAllCustomMenus, getCustomMenuForFile, getTransformedMetadata, getFooter, toTitleCase, addTrailingSlash, generateAutoIndexHtmlFromSource, copyMetaAssets } from "./helper/build/index.js";
 import { findCustomMenu, extractMenuFrontmatter, parseCustomMenu, combineAutoAndManualMenu } from "./helper/customMenu.js";
 import { getAndIncrementBuildId } from "./helper/ursaConfig.js";
+import { resolvePort } from "./helper/portUtils.js";
+import { findAllStyleCss } from "./helper/findStyleCss.js";
+import { bundleMetaTemplateAssets, generateSeparateCssTags, generateSeparateJsTags, clearMetaBundleCache } from "./helper/assetBundler.js";
 
 // Dev mode state
 const devState = {
@@ -58,6 +61,7 @@ const devState = {
   footer: null,
   fullTextIndex: null,
   searchIndex: null,
+  recentActivity: null,
   
   // Path → nearest menu.md mapping
   menuPathMap: new Map(),
@@ -265,6 +269,23 @@ function findNearestMenu(dirPath) {
   return null;
 }
 
+/**
+ * Find all style.css files from docroot to dirPath (all levels)
+ */
+async function findAllStyles(dirPath) {
+  const { stylePathMap, source } = devState;
+  
+  // Use a separate cache key to avoid collision with findNearestStyle
+  const cacheKey = `all:${dirPath}`;
+  if (stylePathMap.has(cacheKey)) {
+    return stylePathMap.get(cacheKey);
+  }
+  
+  const stylePaths = await findAllStyleCss(dirPath, source);
+  stylePathMap.set(cacheKey, stylePaths);
+  return stylePaths;
+}
+
 /**
  * Find the nearest style.css
  */
@@ -282,19 +303,19 @@ async function findNearestStyle(dirPath) {
 }
 
 /**
- * Find the nearest script.js
+ * Find all script.js files from docroot to dirPath
  */
-async function findNearestScript(dirPath) {
-  const { scriptPathMap } = devState;
+async function findAllScripts(dirPath) {
+  const { scriptPathMap, source } = devState;
   
   // Check cache first
   if (scriptPathMap.has(dirPath)) {
     return scriptPathMap.get(dirPath);
   }
   
-  const scriptPath = await findScriptJs(dirPath);
-  scriptPathMap.set(dirPath, scriptPath);
-  return scriptPath;
+  const scriptPaths = await findAllScriptJs(dirPath, source);
+  scriptPathMap.set(dirPath, scriptPaths);
+  return scriptPaths;
 }
 
 /**
@@ -439,32 +460,39 @@ async function wrapInTemplate(body, title, fileMeta, urlPath, sourcePath) {
     throw new Error(`Template not found: ${requestedTemplateName || 'default-template'}`);
   }
   
-  // Find nearest style.css
+  // Find all style.css files from docroot to current dir and serve as separate tags
+  // (Serve/dev mode: separate tags per level for individual invalidation)
   let styleLink = "";
   try {
     const styleDir = sourcePath ? dirname(sourcePath) : source;
-    const cssPath = await findNearestStyle(styleDir);
-    if (cssPath) {
-      const cssUrlPath = '/' + cssPath.replace(source, '');
-      styleLink = `<link rel="stylesheet" href="${cssUrlPath}" />`;
-      
-      // Copy CSS file to output
-      const cssOutputPath = cssPath.replace(source, output);
-      const cssContent = await readFile(cssPath, 'utf8');
-      await outputFile(cssOutputPath, cssContent);
+    const cssPaths = await findAllStyles(styleDir);
+    if (cssPaths.length > 0) {
+      // Copy all CSS files to output
+      for (const cssPath of cssPaths) {
+        const cssOutputPath = cssPath.replace(source, output);
+        const cssContent = await readFile(cssPath, 'utf8');
+        await outputFile(cssOutputPath, cssContent);
+      }
+      styleLink = generateSeparateCssTags(cssPaths, source);
     }
   } catch (e) {
     // Ignore CSS errors
   }
   
-  // Find nearest script.js and inline its contents
+  // Find all script.js files from docroot to current dir and serve as separate external tags
+  // (Serve/dev mode: separate tags per level for individual invalidation)
   let customScript = "";
   try {
     const scriptDir = sourcePath ? dirname(sourcePath) : source;
-    const scriptPath = await findNearestScript(scriptDir);
-    if (scriptPath) {
-      const scriptContent = await readFile(scriptPath, 'utf8');
-      customScript = `<script>\n${scriptContent}\n</script>`;
+    const scriptPaths = await findAllScripts(scriptDir);
+    if (scriptPaths.length > 0) {
+      // Copy all script files to output so they can be served
+      for (const scriptPath of scriptPaths) {
+        const scriptOutputPath = scriptPath.replace(source, output);
+        const scriptContent = await readFile(scriptPath, 'utf8');
+        await outputFile(scriptOutputPath, scriptContent);
+      }
+      customScript = generateSeparateJsTags(scriptPaths, source);
     }
   } catch (e) {
     // Ignore script errors
@@ -614,9 +642,10 @@ async function buildBackgroundCaches() {
       await findNearestStyle(dir);
     }
     
-    // 7. Pre-load templates
+    // 7. Pre-load templates and re-bundle meta assets
     console.log('   📄 Pre-loading templates...');
-    devState.templates = await getTemplates(meta);
+    const rawTemplatesBg = await getTemplates(meta);
+    devState.templates = await bundleMetaTemplateAssets(rawTemplatesBg, meta, resolve(output, 'public'), { minify: true, sourcemap: false });
     
     // 8. Build footer
     console.log('   📝 Building footer...');
@@ -635,6 +664,7 @@ async function buildBackgroundCaches() {
     
     const searchIndex = [];
     const fullTextDocs = [];
+    const recentActivity = [];
     
     for (const article of allArticles) {
       try {
@@ -657,6 +687,16 @@ async function buildBackgroundCaches() {
           title,
           content
         });
+
+        // Collect mtime for recent activity
+        try {
+          const articleStat = await stat(article);
+          recentActivity.push({
+            title,
+            url: relativePath.startsWith('/') ? relativePath : '/' + relativePath,
+            mtime: articleStat.mtimeMs
+          });
+        } catch (e) {}
       } catch (e) {}
     }
     
@@ -664,6 +704,10 @@ async function buildBackgroundCaches() {
     devState.fullTextIndex = buildFullTextIndex(fullTextDocs);
     devState.searchIndex = searchIndex;
     
+    // Build recent activity (top 10 by mtime)
+    recentActivity.sort((a, b) => b.mtime - a.mtime);
+    devState.recentActivity = recentActivity.slice(0, 10);
+    
     // Write search index files
     const publicDir = join(output, 'public');
     await mkdir(publicDir, { recursive: true });
@@ -671,6 +715,7 @@ async function buildBackgroundCaches() {
     await outputFile(join(publicDir, 'search-index.json'), JSON.stringify(searchIndex));
     await outputFile(join(publicDir, 'fulltext-index.json'), JSON.stringify(devState.fullTextIndex));
     await outputFile(join(publicDir, 'menu-data.json'), JSON.stringify(devState.menuData));
+    await outputFile(join(publicDir, 'recent-activity.json'), JSON.stringify(devState.recentActivity));
     
     devState.searchReady = true;
     console.log('✅ Search index ready');
@@ -705,15 +750,20 @@ export async function dev({
   console.log(`🎨 Meta: ${metaDir}`);
   console.log(`📤 Output: ${outputDir}`);
   console.log('━'.repeat(50));
-  
+
+  // Resolve port (prompt user if occupied)
+  port = await resolvePort(port);
+
   // Create output directory and copy meta files
   await mkdir(outputDir, { recursive: true });
   const publicDir = join(outputDir, 'public');
   await mkdir(publicDir, { recursive: true });
-  await copyDir(metaDir, publicDir);
+  await copyMetaAssets(metaDir, publicDir);
   
-  // Pre-load templates for immediate use
-  devState.templates = await getTemplates(metaDir);
+  // Pre-load templates and bundle meta assets (minify without obfuscation for debuggability)
+  let rawTemplates = await getTemplates(metaDir);
+  devState.templates = await bundleMetaTemplateAssets(rawTemplates, metaDir, publicDir, { minify: true, sourcemap: false });
+  console.log('📦 Meta template assets bundled');
   
   // Start server immediately
   const app = express();
@@ -931,20 +981,29 @@ export async function dev({
       devState.menuReady = false;
       await buildBackgroundCaches();
     } else if (isCssChange) {
-      // Copy CSS to output
+      // Copy CSS to output and clear style cache so next render picks up changes
+      devState.stylePathMap.clear();
       try {
         const relativePath = name.replace(sourceDir, '');
         const outputPath = join(outputDir, relativePath);
         const content = await readFile(name, 'utf8');
         await outputFile(outputPath, content);
-        console.log(`✅ Copied ${relativePath}`);
+        console.log(`✅ Copied ${relativePath} (style cache cleared)`);
       } catch (e) {
         console.error(`Error copying CSS: ${e.message}`);
       }
     } else if (isScriptChange) {
-      // Clear script cache so next render picks up changes
+      // Copy script to output and clear script cache so next render picks up changes
       devState.scriptPathMap.clear();
-      console.log(`✅ Script cache cleared for ${name}`);
+      try {
+        const relativePath = name.replace(sourceDir, '');
+        const outputPath = join(outputDir, relativePath);
+        const content = await readFile(name, 'utf8');
+        await outputFile(outputPath, content);
+        console.log(`✅ Copied ${relativePath} (script cache cleared)`);
+      } catch (e) {
+        console.error(`Error copying script: ${e.message}`);
+      }
     } else if (isComponentChange) {
       // Component files (.tsx, .jsx, .ts) may be imported by MDX files
       // Clear all MDX document caches so they re-compile with the updated component
@@ -956,6 +1015,33 @@ export async function dev({
       console.log(`✅ MDX caches cleared for component change: ${name}`);
     }
     
+    // Update recent activity for article changes
+    const isArticleChange = name && /\.(md|mdx|txt|yml)$/.test(name);
+    if (isArticleChange && devState.recentActivity) {
+      try {
+        const articleStat = await stat(name);
+        const ext = extname(name);
+        const base = basename(name, ext);
+        const relativePath = name.replace(sourceDir + '/', '').replace(/\.(md|mdx|txt|yml)$/, '.html');
+        const titleBase = (base === 'index' || base === 'home') ? basename(dirname(name)) : base;
+        const title = toTitleCase(titleBase || base);
+        const url = relativePath.startsWith('/') ? relativePath : '/' + relativePath;
+        
+        // Remove old entry for this URL, add updated one
+        let activity = devState.recentActivity.filter(r => r.url !== url);
+        activity.push({ title, url, mtime: articleStat.mtimeMs });
+        activity.sort((a, b) => b.mtime - a.mtime);
+        devState.recentActivity = activity.slice(0, 10);
+        
+        // Write updated file
+        const publicDir = join(devState.output, 'public');
+        await outputFile(join(publicDir, 'recent-activity.json'), JSON.stringify(devState.recentActivity));
+        console.log(`✅ Recent activity updated for ${name}`);
+      } catch (e) {
+        // ignore
+      }
+    }
+    
     // Broadcast reload
     broadcast('reload', { file: name });
   });
@@ -963,7 +1049,12 @@ export async function dev({
   // Watch meta directory for template changes
   watch(metaDir, { recursive: true }, async (evt, name) => {
     console.log(`🎨 Meta changed: ${name}`);
-    devState.templates = await getTemplates(metaDir);
+    clearMetaBundleCache();
+    const rawMetaTemplates = await getTemplates(metaDir);
+    // Re-copy meta files and re-bundle
+    const pubDir = join(outputDir, 'public');
+    await copyMetaAssets(metaDir, pubDir);
+    devState.templates = await bundleMetaTemplateAssets(rawMetaTemplates, metaDir, pubDir, { minify: true, sourcemap: false });
     broadcast('reload', { file: name });
   });