@strav/view 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strav/view",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "type": "module",
   "description": "View layer for the Strav framework — template engine, Vue SFC islands, and SPA client router",
   "license": "MIT",

package/src/cache.ts

@@ -1,6 +1,7 @@
 export interface RenderResult {
   output: string
   blocks: Record<string, string>
+  stacks: Record<string, string[]>
 }
 
 export type RenderFunction = (

package/src/compiler.ts

@@ -7,9 +7,10 @@ export interface CompilationResult {
 }
 
 interface StackEntry {
-  type: 'if' | 'each' | 'section'
+  type: 'if' | 'each' | 'section' | 'push' | 'prepend'
   line: number
   blockName?: string
+  stackName?: string
 }
 
 function escapeJs(str: string): string {
@@ -94,6 +95,7 @@ export function compile(tokens: Token[]): CompilationResult {
 
   lines.push('let __out = "";')
   lines.push('const __blocks = {};')
+  lines.push('const __stacks = {};')
 
   for (const token of tokens) {
     switch (token.type) {
@@ -147,7 +149,7 @@ export function compile(tokens: Token[]): CompilationResult {
     throw new TemplateError(`Unclosed @${unclosed.type} block (opened at line ${unclosed.line})`)
   }
 
-  lines.push('return { output: __out, blocks: __blocks };')
+  lines.push('return { output: __out, blocks: __blocks, stacks: __stacks };')
 
   return { code: lines.join('\n'), layout }
 }
@@ -274,6 +276,40 @@ function compileDirective(
       )
       break
 
+    case 'push': {
+      if (!token.args) throw new TemplateError(`@push requires a name at line ${token.line}`)
+      const name = token.args.replace(/^['"]|['"]$/g, '').trim()
+      const nameStr = JSON.stringify(name)
+      // Initialize stack array if it doesn't exist, then capture content and push
+      lines.push(`if (!__stacks[${nameStr}]) __stacks[${nameStr}] = [];`)
+      lines.push(`__stacks[${nameStr}].push((function() { let __out = "";`)
+      stack.push({ type: 'push', line: token.line, stackName: name })
+      break
+    }
+
+    case 'prepend': {
+      if (!token.args) throw new TemplateError(`@prepend requires a name at line ${token.line}`)
+      const name = token.args.replace(/^['"]|['"]$/g, '').trim()
+      const nameStr = JSON.stringify(name)
+      // Initialize stack array if it doesn't exist, then capture content and unshift
+      lines.push(`if (!__stacks[${nameStr}]) __stacks[${nameStr}] = [];`)
+      lines.push(`__stacks[${nameStr}].unshift((function() { let __out = "";`)
+      stack.push({ type: 'prepend', line: token.line, stackName: name })
+      break
+    }
+
+    case 'stack': {
+      if (!token.args) throw new TemplateError(`@stack requires a name at line ${token.line}`)
+      const name = token.args.replace(/^['"]|['"]$/g, '').trim()
+      const nameStr = JSON.stringify(name)
+      // Output joined stack content - merge local and passed stacks
+      lines.push(`{`)
+      lines.push(`  const __mergedStack = [...((__data.__stacks && __data.__stacks[${nameStr}]) || []), ...(__stacks[${nameStr}] || [])];`)
+      lines.push(`  __out += __mergedStack.join('');`)
+      lines.push(`}`)
+      break
+    }
+
     case 'end': {
       if (!stack.length) {
         throw new TemplateError(`Unexpected @end at line ${token.line} — no open block`)
@@ -281,6 +317,8 @@ function compileDirective(
       const top = stack.pop()!
       if (top.type === 'section') {
         lines.push(`  return __out; })();`)
+      } else if (top.type === 'push' || top.type === 'prepend') {
+        lines.push(`  return __out; })());`)
       } else if (top.type === 'each') {
         lines.push(`  }`) // close for loop
         lines.push(`}`) // close block scope

package/src/engine.ts

@@ -48,7 +48,8 @@ export default class ViewEngine {
   private async renderWithDepth(
     name: string,
     data: Record<string, unknown>,
-    depth: number
+    depth: number,
+    parentStacks: Record<string, string[]> = {}
   ): Promise<string> {
     if (depth > MAX_INCLUDE_DEPTH) {
       throw new TemplateError(
@@ -58,21 +59,82 @@ export default class ViewEngine {
 
     const entry = await this.resolve(name)
 
-    const includeFn: IncludeFn = (includeName, includeData) => {
-      return this.renderWithDepth(includeName, { ...data, ...includeData }, depth + 1)
+    // Create an include function that merges stacks from includes
+    const includeFn: IncludeFn = async (includeName, includeData) => {
+      const includeResult = await this.renderWithDepthInternal(
+        includeName,
+        { ...data, ...includeData },
+        depth + 1,
+        {}
+      )
+      // Merge include's stacks into parent stacks
+      this.mergeStacks(parentStacks, includeResult.stacks)
+      return includeResult.output
     }
 
-    const result = await entry.fn(data, includeFn)
+    // Pass parent stacks to the template
+    const dataWithStacks = { ...data, __stacks: { ...parentStacks } }
+    const result = await entry.fn(dataWithStacks, includeFn)
+
+    // Merge current template's stacks with parent stacks
+    this.mergeStacks(parentStacks, result.stacks)
 
-    // Layout inheritance: render child first, then render layout with blocks merged
+    // Layout inheritance: render child first, then render layout with blocks and stacks merged
     if (entry.layout) {
-      const layoutData = { ...data, ...result.blocks }
-      return this.renderWithDepth(entry.layout, layoutData, depth + 1)
+      const layoutData = { ...data, ...result.blocks, __stacks: parentStacks }
+      return this.renderWithDepth(entry.layout, layoutData, depth + 1, parentStacks)
     }
 
     return result.output
   }
 
+  private async renderWithDepthInternal(
+    name: string,
+    data: Record<string, unknown>,
+    depth: number,
+    parentStacks: Record<string, string[]> = {}
+  ): Promise<{ output: string; stacks: Record<string, string[]> }> {
+    if (depth > MAX_INCLUDE_DEPTH) {
+      throw new TemplateError(
+        `Maximum include depth (${MAX_INCLUDE_DEPTH}) exceeded — possible circular include`
+      )
+    }
+
+    const entry = await this.resolve(name)
+
+    const includeFn: IncludeFn = async (includeName, includeData) => {
+      const includeResult = await this.renderWithDepthInternal(
+        includeName,
+        { ...data, ...includeData },
+        depth + 1,
+        {}
+      )
+      this.mergeStacks(parentStacks, includeResult.stacks)
+      return includeResult.output
+    }
+
+    const dataWithStacks = { ...data, __stacks: { ...parentStacks } }
+    const result = await entry.fn(dataWithStacks, includeFn)
+    this.mergeStacks(parentStacks, result.stacks)
+
+    if (entry.layout) {
+      const layoutData = { ...data, ...result.blocks, __stacks: parentStacks }
+      const layoutOutput = await this.renderWithDepth(entry.layout, layoutData, depth + 1, parentStacks)
+      return { output: layoutOutput, stacks: parentStacks }
+    }
+
+    return { output: result.output, stacks: parentStacks }
+  }
+
+  private mergeStacks(target: Record<string, string[]>, source: Record<string, string[]>): void {
+    for (const [key, values] of Object.entries(source)) {
+      if (!target[key]) {
+        target[key] = []
+      }
+      target[key].push(...values)
+    }
+  }
+
   private async resolve(name: string): Promise<CacheEntry> {
     const cached = this.cache.get(name)
 

package/src/tokenizer.ts

@@ -30,6 +30,9 @@ const DIRECTIVES = new Set([
   'csrf',
   'class',
   'style',
+  'push',
+  'prepend',
+  'stack',
 ])
 
 export function tokenize(source: string): Token[] {