odac 1.4.4 → 1.4.6

package/src/View.js

@@ -103,6 +103,7 @@ class View {
     }
   }
   #part = {}
+  #refresh = new Set()
   #odac = null
 
   constructor(odac) {
@@ -148,10 +149,25 @@ class View {
         }
       }
 
-      // Render requested elements
+      // Build current parts manifest (part name → view path)
+      const currentParts = {}
+      for (let key in this.#part) {
+        if (['all', 'skeleton'].includes(key)) continue
+        if (this.#part[key]) currentParts[key] = this.#part[key]
+      }
+
+      // Parse client's previous parts to detect unchanged regions
+      const clientParts = this.#odac.Request.clientParts || {}
+
+      // Render requested elements (skip unchanged parts)
       let title = null
       for (let element of this.#odac.Request.ajaxLoad) {
         if (this.#part[element]) {
+          // Skip rendering if the part view path has not changed and refresh is not forced
+          // Content is always re-rendered since its output depends on the current URL
+          if (element !== 'content' && !this.#refresh.has(element) && clientParts[element] && clientParts[element] === this.#part[element])
+            continue
+
           let viewPath = this.#part[element]
           if (viewPath.includes('.')) viewPath = viewPath.replace(/\./g, '/')
           if (await this.#exists(`./view/${element}/${viewPath}.html`)) {
@@ -202,6 +218,7 @@ class View {
 
       this.#odac.Request.end({
         output: output,
+        parts: currentParts,
         variables: variables,
         data: this.#odac.Request.sharedData,
         title: title,
@@ -239,6 +256,9 @@ class View {
             }
           }
       }
+
+      // Clean up unresolved skeleton placeholders
+      result = result.replace(/\{\{\s*[A-Z_]+\s*\}\}/g, '')
     }
 
     if (result) {
@@ -294,7 +314,7 @@ class View {
       }
 
       if (attrs.get) {
-        return `{{ get('${attrs.get}') || '' }}`
+        return `{{ get('${attrs.get.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}') || '' }}`
       } else if (attrs.var) {
         if (attrs.raw) {
           return `{!! ${attrs.var} !!}`
@@ -323,7 +343,7 @@ class View {
         }
 
         if (attrs.get) {
-          return `{{ get('${attrs.get}') || '' }}`
+          return `{{ get('${attrs.get.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}') || '' }}`
         } else if (attrs.var) {
           if (attrs.raw) {
             return `{!! ${attrs.var} !!}`
@@ -350,8 +370,9 @@ class View {
             return `%s${placeholderIndex++}`
           })
 
+          const escapedContent = processedContent.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
           const translationCall =
-            placeholders.length > 0 ? `__('${processedContent}', ${placeholders.join(', ')})` : `__('${processedContent}')`
+            placeholders.length > 0 ? `__('${escapedContent}', ${placeholders.join(', ')})` : `__('${escapedContent}')`
 
           if (attrs.raw) {
             return `{!! ${translationCall} !!}`
@@ -359,7 +380,7 @@ class View {
             return `{{ ${translationCall} }}`
           }
         } else {
-          return `{{ '${innerContent}' }}`
+          return `{{ '${innerContent.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}' }}`
         }
       })
       if (before === content) break
@@ -523,8 +544,12 @@ class View {
 
   // - SET PARTS
   set(...args) {
-    if (args.length === 1 && typeof args[0] === 'object') for (let key in args[0]) this.#part[key] = args[0][key]
-    else if (args.length === 2) this.#part[args[0]] = args[1]
+    if (args.length === 1 && typeof args[0] === 'object') {
+      for (let key in args[0]) this.#part[key] = args[0][key]
+    } else if (args.length >= 2) {
+      this.#part[args[0]] = args[1]
+      if (args[2]?.refresh) this.#refresh.add(args[0])
+    }
 
     if (!this.#odac.Request.page) {
       this.#odac.Request.page = this.#part.content || this.#part.all || ''
@@ -541,12 +566,21 @@ class View {
   }
 
   #addNavigateAttribute(skeleton) {
-    skeleton = skeleton.replace(/(<[^>]+>)(\s*\{\{\s*CONTENT\s*\}\})/, (match, openTag, content) => {
+    // Inject data-odac-navigate for placeholders already wrapped in an HTML tag
+    skeleton = skeleton.replace(/(<[^>]+>)(\s*\{\{\s*([A-Z_]+)\s*\}\})/g, (match, openTag, content, partName) => {
+      const attrName = partName.toLowerCase()
       if (openTag.includes('data-odac-navigate')) return match
-      const tagWithAttr = openTag.slice(0, -1) + ' data-odac-navigate="content">'
+      const tagWithAttr = openTag.slice(0, -1) + ` data-odac-navigate="${attrName}">`
       return tagWithAttr + content
     })
 
+    // Auto-wrap unwrapped placeholders so AJAX navigation can target them
+    // Uses display:contents to avoid breaking flex/grid layouts
+    skeleton = skeleton.replace(/(?<!>)\s*(\{\{\s*([A-Z_]+)\s*\}\})/g, (match, placeholder, partName) => {
+      const attrName = partName.toLowerCase()
+      return `<div style="display:contents" data-odac-navigate="${attrName}">${placeholder}</div>`
+    })
+
     const skeletonName = this.#part.skeleton || 'main'
     const pageName = this.#odac.Request.page || ''
 
@@ -558,6 +592,17 @@ class View {
       if (!attrs.includes('data-odac-page')) {
         updates.push(`data-odac-page="${pageName}"`)
       }
+
+      // Embed current parts manifest for client-side diffing on first load
+      const partsMap = {}
+      for (let key in this.#part) {
+        if (['all', 'skeleton'].includes(key)) continue
+        if (this.#part[key]) partsMap[key] = this.#part[key]
+      }
+      if (!attrs.includes('data-odac-parts') && Object.keys(partsMap).length > 0) {
+        updates.push(`data-odac-parts='${JSON.stringify(partsMap)}'`)
+      }
+
       if (updates.length === 0) return match
       return `<html${attrs} ${updates.join(' ')}>`
     })

package/template/controller/page/about.js

@@ -1,8 +1,8 @@
 /**
  * About Page Controller
  *
- * This controller renders the about page using Odac's skeleton-based view system.
- * Provides information about Odac and its key components.
+ * This controller renders the about page using ODAC's skeleton-based view system.
+ * Provides information about ODAC and its key components.
  *
  * For AJAX requests, only content is returned. For full page loads, skeleton + content.
  */
@@ -11,7 +11,7 @@ module.exports = function (Odac) {
   // Set variables for AJAX responses
   Odac.set(
     {
-      pageTitle: 'About Odac',
+      pageTitle: 'About ODAC',
       version: '1.0.0'
     },
     true

package/template/controller/page/index.js

@@ -1,7 +1,7 @@
 /**
  * Home Page Controller
  *
- * This controller renders the home page using Odac's skeleton-based view system.
+ * This controller renders the home page using ODAC's skeleton-based view system.
  * The skeleton provides the layout (header, nav, footer) and the view provides the content.
  *
  * For AJAX requests (odac-link navigation), only the content is returned.
@@ -18,7 +18,7 @@ module.exports = function (Odac) {
   // Set variables that will be available in AJAX responses
   Odac.set(
     {
-      welcomeMessage: 'Welcome to Odac!',
+      welcomeMessage: 'Welcome to ODAC!',
       timestamp: Date.now()
     },
     true

package/template/public/assets/js/app.js

@@ -1,62 +1,21 @@
+/* global Odac */
 /**
- * Odac Template - Client-Side Application
+ * ODAC Template - Client-Side Application
  *
  * This file demonstrates odac.js features including:
- * - AJAX page loading with odac.loader() for smooth navigation
+ * - AJAX page loading with Odac.loader() for smooth navigation
  * - History API integration
  * - Event delegation
  */
 
-odac.action({
-  /**
-   * AJAX Navigation
-   * Enables smooth page transitions without full page reloads
-   *
-   * Minimal usage: navigate: 'main'
-   * Medium usage: navigate: {update: 'main', on: callback}
-   * Full usage: navigate: {links: 'a[href^="/"]', update: {...}, on: callback}
-   */
-  navigate: {
-    update: 'main' // Update <main> element
-  },
-
-  /**
-   * Custom functions
-   * These become available as odac.fn.functionName()
-   */
-  function: {
-    /**
-     * Update active navigation state
-     * Highlights the current page in the navigation menu
-     */
-    updateActiveNav: function (url) {
-      // Remove active class from all navigation links
-      const navLinks = document.querySelectorAll('nav a')
-      navLinks.forEach(function (link) {
-        link.classList.remove('active')
-      })
-
-      // Add active class to current page link
-      const currentLink = document.querySelector(`nav a[href="${url}"]`)
-      if (currentLink) {
-        currentLink.classList.add('active')
-      } else if (url === '/' || url === '') {
-        // Handle home page
-        const homeLink = document.querySelector('nav a[href="/"]')
-        if (homeLink) {
-          homeLink.classList.add('active')
-        }
-      }
-    }
-  },
-
+Odac.action({
   /**
    * Initialize application on page load
    * This runs once when the page first loads
    */
   load: function () {
     // Set initial active navigation state
-    odac.fn.updateActiveNav(window.location.pathname)
+    Odac.fn.updateActiveNav(window.location.pathname)
   },
 
   /**
@@ -76,15 +35,8 @@ odac.action({
      */
     about: function () {
       console.log('About page loaded')
-    },
-
-    /**
-     * Docs page initialization
-     */
-    docs: function () {
-      console.log('Docs page loaded')
     }
-  }
+  },
 
   // Add your custom event handlers here
   // Example:
@@ -93,4 +45,36 @@ odac.action({
   //     console.log('Button clicked')
   //   }
   // }
+
+  /**
+   * Custom functions
+   * These become available as Odac.fn.functionName()
+   */
+  function: {
+    /**
+     * Update active navigation state
+     * Highlights the current page in the navigation menu
+     */
+    updateActiveNav: function (url) {
+      // Remove active class from all navigation links
+      const navLinks = document.querySelectorAll('nav a')
+      navLinks.forEach(function (link) {
+        link.classList.remove('active')
+      })
+
+      // Add active class to current page link
+      const currentLinks = document.querySelectorAll(`nav a[href="${url}"]`)
+      if (currentLinks.length > 0) {
+        currentLinks.forEach(function (link) {
+          link.classList.add('active')
+        })
+      } else if (url === '/' || url === '') {
+        // Handle home page
+        const homeLinks = document.querySelectorAll('nav a[href="/"]')
+        homeLinks.forEach(function (link) {
+          link.classList.add('active')
+        })
+      }
+    }
+  }
 })

package/template/skeleton/main.html

@@ -3,16 +3,16 @@
 <head>
     {{ HEAD }}
 </head>
-<body>
-    <header>
+<body class="min-h-screen flex flex-col items-center">
+    <header class="sticky top-0 w-full z-50 glass h-16 flex items-center">
         {{ HEADER }}
     </header>
 
-    <main>
+    <main class="flex-grow w-full max-w-5xl mx-auto px-6 py-12">
         {{ CONTENT }}
     </main>
 
-    <footer>
+    <footer class="w-full border-t border-brand-200 py-12 mt-auto">
         {{ FOOTER }}
     </footer>
 

package/template/view/content/about.html

@@ -1,65 +1,69 @@
-<div class="container">
-  <section class="page-hero">
-    <h1>🍭 About This Template</h1>
-    <p class="lead">This is a starter template for your Odac website. Customize it to build your own application.</p>
-  </section>
+<div class="space-y-24">
+    <!-- About Hero -->
+    <section class="text-center space-y-6">
+        <h1 class="text-4xl md:text-6xl font-bold tracking-tight text-brand-900 leading-tight">
+            About This <br/><span class="text-brand-900/40">Template</span>
+        </h1>
+        <p class="text-xl text-brand-900/50 max-w-2xl mx-auto font-medium leading-relaxed">
+            This is your starting point for building something incredible with ODAC. A modern, high-performance foundation.
+        </p>
+    </section>
 
-  <section class="content-section">
-    <h2>What You Can Build</h2>
-    <p>
-      With Odac, you can build any type of web application - from simple websites to complex web apps. 
-      This template provides a solid foundation with modern features and best practices already configured.
-    </p>
-  </section>
+    <!-- Template Features -->
+    <section class="space-y-12">
+        <div class="text-center space-y-2">
+            <h2 class="text-3xl font-bold tracking-tight text-brand-900">Template Features</h2>
+            <p class="text-brand-900/40">Everything you need, already configured.</p>
+        </div>
 
-  <section class="content-section">
-    <h2>Template Features</h2>
-    <div class="component-grid">
-      <div class="component-card">
-        <h3>🎨 Modern UI</h3>
-        <p>Dark theme with indigo colors, responsive design, and smooth animations.</p>
-      </div>
-      
-      <div class="component-card">
-        <h3>⚡ AJAX Navigation</h3>
-        <p>Smooth page transitions without full reloads, already configured and working.</p>
-      </div>
-      
-      <div class="component-card">
-        <h3>🔒 Security</h3>
-        <p>CSRF protection, secure sessions, and authentication ready to use.</p>
-      </div>
-      
-      <div class="component-card">
-        <h3>📱 Responsive</h3>
-        <p>Mobile-first design that works perfectly on all devices.</p>
-      </div>
-    </div>
-  </section>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
+                <h3 class="text-xl font-bold text-brand-900">Modern UI</h3>
+                <p class="text-brand-900/60 leading-relaxed">Design with Apple-style aesthetics using Tailwind CSS. Responsive, minimal, and premium.</p>
+            </div>
+            
+            <div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
+                <h3 class="text-xl font-bold text-brand-900">AJAX Navigation</h3>
+                <p class="text-brand-900/60 leading-relaxed">Smooth page transitions without full reloads, already configured and working out of the box.</p>
+            </div>
+            
+            <div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
+                <h3 class="text-xl font-bold text-brand-900">Security</h3>
+                <p class="text-brand-900/60 leading-relaxed">CSRF protection, secure sessions, and authentication ready to use for your application.</p>
+            </div>
+            
+            <div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
+                <h3 class="text-xl font-bold text-brand-900">Responsive</h3>
+                <p class="text-brand-900/60 leading-relaxed">Mobile-first design that works perfectly on all devices, from small phones to large desktop displays.</p>
+            </div>
+        </div>
+    </section>
 
-  <section class="content-section">
-    <h2>Next Steps</h2>
-    <ul class="philosophy-list">
-      <li><strong>Routes:</strong> Define URL patterns in <code>route/www.js</code> to map URLs to controllers</li>
-      <li><strong>Controllers:</strong> Create page logic in <code>controller/</code> to handle requests and set data</li>
-      <li><strong>Skeleton:</strong> Design your layout structure in <code>skeleton/</code> with placeholders</li>
-      <li><strong>Views:</strong> Build page content in <code>view/</code> directory to fill skeleton sections</li>
-      <li><strong>Assets:</strong> Customize styles and scripts in <code>public/</code> for your brand</li>
-    </ul>
-  </section>
+    <!-- Next Steps -->
+    <section class="bg-brand-900 rounded-[3rem] p-12 md:p-20 text-white space-y-12">
+        <h2 class="text-3xl font-bold tracking-tight text-center">Next Steps</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div class="space-y-2 border-l-2 border-white/10 pl-6">
+                <h4 class="font-bold">Routes</h4>
+                <p class="text-white/40 text-sm">Define URL patterns in <code>route/www.js</code></p>
+            </div>
+            <div class="space-y-2 border-l-2 border-white/10 pl-6">
+                <h4 class="font-bold">Controllers</h4>
+                <p class="text-white/40 text-sm">Create page logic in <code>controller/</code></p>
+            </div>
+            <div class="space-y-2 border-l-2 border-white/10 pl-6">
+                <h4 class="font-bold">Skeleton</h4>
+                <p class="text-white/40 text-sm">Design your layout structure in <code>skeleton/</code></p>
+            </div>
+        </div>
+    </section>
 
-  <section class="content-section">
-    <h2>Learn More</h2>
-    <div class="links-grid">
-      <a href="https://docs.odac.run" class="link-card" target="_blank" data-navigate="false">
-        <h3>📚 Documentation</h3>
-        <p>Complete guides, API reference, and tutorials</p>
-      </a>
-      
-      <a href="https://odac.run" class="link-card" target="_blank" data-navigate="false">
-        <h3>🌐 odac.run</h3>
-        <p>Official website with examples and community</p>
-      </a>
-    </div>
-  </section>
+    <!-- Learn More -->
+    <section class="text-center pb-24 space-y-8">
+        <h2 class="text-3xl font-bold text-brand-900 tracking-tight">Need help?</h2>
+        <div class="flex justify-center gap-4">
+            <a href="https://docs.odac.run" target="_blank" rel="noopener" class="px-8 py-3 bg-white border border-brand-100 rounded-full font-bold hover:bg-brand-50 transition-colors" data-navigate="false">Documentation</a>
+            <a href="https://odac.run" target="_blank" rel="noopener" class="px-8 py-3 bg-brand-900 text-white rounded-full font-bold hover:opacity-90 transition-opacity" data-navigate="false">Official Site</a>
+        </div>
+    </section>
 </div>