@strav/http 0.1.0

package/src/view/client/islands.ts

@@ -0,0 +1,84 @@
+// @ts-nocheck — Client-side script; requires DOM types provided by the app's bundler config.
+/**
+ * Vue Islands Bootstrap
+ *
+ * Auto-discovers elements with [data-vue] attributes and mounts
+ * Vue components on them via a single shared Vue app instance.
+ * All islands share the same app context (plugins, provide/inject,
+ * global components), connected to their marker elements via Teleport.
+ *
+ * Register your components on the window before this script runs:
+ *
+ *   import Counter from './components/Counter.vue'
+ *   window.__vue_components = { counter: Counter }
+ *
+ * Optionally provide a setup function to install plugins:
+ *
+ *   window.__vue_setup = (app) => {
+ *     app.use(somePlugin)
+ *     app.provide('key', value)
+ *   }
+ *
+ * Then in your .strav templates:
+ *   <vue:counter :initial="{{ count }}" label="Click me" />
+ */
+
+import { createApp, defineComponent, h, Teleport } from 'vue'
+
+declare global {
+  interface Window {
+    __vue_components?: Record<string, any>
+    __vue_setup?: (app: any) => void
+  }
+}
+
+function toPascalCase(str: string): string {
+  return str.replace(/(^|-)(\w)/g, (_match, _sep, char) => char.toUpperCase())
+}
+
+function mountIslands(): void {
+  const components = window.__vue_components ?? {}
+
+  const islands: { Component: any; props: Record<string, any>; el: HTMLElement }[] = []
+
+  document.querySelectorAll<HTMLElement>('[data-vue]').forEach(el => {
+    const name = el.dataset.vue
+    if (!name) return
+
+    const Component = components[name] ?? components[toPascalCase(name)]
+    if (!Component) {
+      console.warn(`[islands] Unknown component: ${name}`)
+      return
+    }
+
+    const props = JSON.parse(el.dataset.props ?? '{}')
+    islands.push({ Component, props, el })
+  })
+
+  if (islands.length === 0) return
+
+  const Root = defineComponent({
+    render() {
+      return islands.map(island =>
+        h(Teleport, { to: island.el }, [h(island.Component, island.props)])
+      )
+    },
+  })
+
+  const app = createApp(Root)
+
+  if (typeof window.__vue_setup === 'function') {
+    window.__vue_setup(app)
+  }
+
+  const root = document.createElement('div')
+  root.style.display = 'contents'
+  document.body.appendChild(root)
+  app.mount(root)
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', mountIslands)
+} else {
+  mountIslands()
+}

package/src/view/compiler.ts

@@ -0,0 +1,199 @@
+import { TemplateError } from '@stravigor/kernel/exceptions/errors'
+import type { Token } from './tokenizer.ts'
+
+export interface CompilationResult {
+  code: string
+  layout?: string
+}
+
+interface StackEntry {
+  type: 'if' | 'each' | 'block'
+  line: number
+  blockName?: string
+}
+
+function escapeJs(str: string): string {
+  return str
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+    .replace(/\n/g, '\\n')
+    .replace(/\r/g, '\\r')
+    .replace(/\t/g, '\\t')
+}
+
+export function compile(tokens: Token[]): CompilationResult {
+  const lines: string[] = []
+  const stack: StackEntry[] = []
+  let layout: string | undefined
+
+  lines.push('let __out = "";')
+  lines.push('const __blocks = {};')
+
+  for (const token of tokens) {
+    switch (token.type) {
+      case 'text':
+        lines.push(`__out += "${escapeJs(token.value)}";`)
+        break
+
+      case 'escaped':
+        lines.push(`__out += __escape(${token.value});`)
+        break
+
+      case 'raw':
+        lines.push(`__out += (${token.value});`)
+        break
+
+      case 'comment':
+        // Stripped from output
+        break
+
+      case 'vue_island': {
+        const attrs = token.attrs ?? {}
+        const propParts: string[] = []
+        for (const [name, attr] of Object.entries(attrs)) {
+          if (attr.bound) {
+            propParts.push(`${JSON.stringify(name)}: (${attr.value})`)
+          } else {
+            propParts.push(`${JSON.stringify(name)}: ${JSON.stringify(attr.value)}`)
+          }
+        }
+        const propsExpr = `{${propParts.join(', ')}}`
+        const tag = escapeJs(token.tag!)
+        lines.push('__out += \'<div data-vue="' + tag + '"\'')
+        lines.push(
+          '  + " data-props=\'" + JSON.stringify(' + propsExpr + ").replace(/'/g, '&#39;') + \"'\""
+        )
+        lines.push("  + '></div>';")
+
+        break
+      }
+
+      case 'directive':
+        compileDirective(token, lines, stack, l => {
+          layout = l
+        })
+        break
+    }
+  }
+
+  if (stack.length > 0) {
+    const unclosed = stack[stack.length - 1]!
+    throw new TemplateError(`Unclosed @${unclosed.type} block (opened at line ${unclosed.line})`)
+  }
+
+  lines.push('return { output: __out, blocks: __blocks };')
+
+  return { code: lines.join('\n'), layout }
+}
+
+function compileDirective(
+  token: Token,
+  lines: string[],
+  stack: StackEntry[],
+  setLayout: (name: string) => void
+): void {
+  switch (token.directive) {
+    case 'if':
+      if (!token.args) throw new TemplateError(`@if requires a condition at line ${token.line}`)
+      lines.push(`if (${token.args}) {`)
+      stack.push({ type: 'if', line: token.line })
+      break
+
+    case 'elseif':
+      if (!token.args) throw new TemplateError(`@elseif requires a condition at line ${token.line}`)
+      if (!stack.length || stack[stack.length - 1]!.type !== 'if') {
+        throw new TemplateError(`@elseif without matching @if at line ${token.line}`)
+      }
+      lines.push(`} else if (${token.args}) {`)
+      break
+
+    case 'else':
+      if (!stack.length || stack[stack.length - 1]!.type !== 'if') {
+        throw new TemplateError(`@else without matching @if at line ${token.line}`)
+      }
+      lines.push(`} else {`)
+      break
+
+    case 'each': {
+      if (!token.args) throw new TemplateError(`@each requires arguments at line ${token.line}`)
+      const match = token.args.match(/^\s*(\w+)\s+in\s+(.+)$/)
+      if (!match) {
+        throw new TemplateError(`@each syntax error at line ${token.line}: expected "item in list"`)
+      }
+      const itemName = match[1]!
+      const listExpr = match[2]!.trim()
+      lines.push(`{`)
+      lines.push(`  const __list = (${listExpr});`)
+      lines.push(`  for (let $index = 0; $index < __list.length; $index++) {`)
+      lines.push(`    const ${itemName} = __list[$index];`)
+      lines.push(`    const $first = $index === 0;`)
+      lines.push(`    const $last = $index === __list.length - 1;`)
+      stack.push({ type: 'each', line: token.line })
+      break
+    }
+
+    case 'layout': {
+      if (!token.args) throw new TemplateError(`@layout requires a name at line ${token.line}`)
+      const name = token.args.replace(/^['"]|['"]$/g, '').trim()
+      setLayout(name)
+      break
+    }
+
+    case 'block': {
+      if (!token.args) throw new TemplateError(`@block requires a name at line ${token.line}`)
+      const name = token.args.replace(/^['"]|['"]$/g, '').trim()
+      const nameStr = JSON.stringify(name)
+      // If a child template already provided this block as data, yield it.
+      // Otherwise, render the default content between @block and @end.
+      lines.push(`if (typeof ${name} !== 'undefined' && ${name} !== null) {`)
+      lines.push(`  __out += ${name};`)
+      lines.push(`  __blocks[${nameStr}] = ${name};`)
+      lines.push(`} else {`)
+      lines.push(`  __blocks[${nameStr}] = (function() { let __out = "";`)
+      stack.push({ type: 'block', line: token.line, blockName: name })
+      break
+    }
+
+    case 'include': {
+      if (!token.args) throw new TemplateError(`@include requires arguments at line ${token.line}`)
+      const match = token.args.match(/^\s*['"]([^'"]+)['"]\s*(?:,\s*(.+))?\s*$/)
+      if (!match) {
+        throw new TemplateError(
+          `@include syntax error at line ${token.line}: expected "'name'" or "'name', data"`
+        )
+      }
+      const name = match[1]!
+      const dataExpr = match[2] ? match[2].trim() : '{}'
+      lines.push(`__out += await __include(${JSON.stringify(name)}, ${dataExpr});`)
+      break
+    }
+
+    case 'islands': {
+      const src = token.args ? token.args.replace(/^['"]|['"]$/g, '').trim() : '/islands.js'
+      // Use __islandsSrc (set by IslandBuilder via ViewEngine.setGlobal) for versioned URL, fallback to static src
+      lines.push(
+        `__out += '<script src="' + (typeof __islandsSrc !== 'undefined' ? __islandsSrc : '${escapeJs(src)}') + '"><\\/script>';`
+      )
+      break
+    }
+
+    case 'end': {
+      if (!stack.length) {
+        throw new TemplateError(`Unexpected @end at line ${token.line} — no open block`)
+      }
+      const top = stack.pop()!
+      if (top.type === 'block') {
+        const nameStr = JSON.stringify(top.blockName!)
+        lines.push(`  return __out; })();`)
+        lines.push(`  __out += __blocks[${nameStr}];`)
+        lines.push(`}`)
+      } else if (top.type === 'each') {
+        lines.push(`  }`) // close for loop
+        lines.push(`}`) // close block scope
+      } else {
+        lines.push(`}`)
+      }
+      break
+    }
+  }
+}

package/src/view/engine.ts

@@ -0,0 +1,139 @@
+import { resolve, join } from 'node:path'
+import { inject } from '@stravigor/kernel/core/inject'
+import Configuration from '@stravigor/kernel/config/configuration'
+import { escapeHtml } from './escape.ts'
+import { tokenize } from './tokenizer.ts'
+import { compile } from './compiler.ts'
+import TemplateCache from './cache.ts'
+import type { CacheEntry, RenderFunction, IncludeFn } from './cache.ts'
+import { ConfigurationError, TemplateError } from '@stravigor/kernel/exceptions/errors'
+
+const MAX_INCLUDE_DEPTH = 50
+
+@inject
+export default class ViewEngine {
+  private static _instance: ViewEngine | null = null
+  private static _globals: Record<string, unknown> = {}
+
+  private directory: string
+  private cacheEnabled: boolean
+  private cache: TemplateCache
+
+  constructor(config: Configuration) {
+    this.directory = resolve(config.get('view.directory', 'resources/views') as string)
+    this.cacheEnabled = config.get('view.cache', true) as boolean
+    this.cache = new TemplateCache()
+    ViewEngine._instance = this
+  }
+
+  static get instance(): ViewEngine {
+    if (!ViewEngine._instance) {
+      throw new ConfigurationError('ViewEngine not configured. Register it in the container.')
+    }
+    return ViewEngine._instance
+  }
+
+  /** Register a global variable available in all templates. */
+  static setGlobal(key: string, value: unknown): void {
+    ViewEngine._globals[key] = value
+  }
+
+  async render(name: string, data: Record<string, unknown> = {}): Promise<string> {
+    const merged = { ...ViewEngine._globals, ...data }
+    return this.renderWithDepth(name, merged, 0)
+  }
+
+  private async renderWithDepth(
+    name: string,
+    data: Record<string, unknown>,
+    depth: number
+  ): Promise<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 = (includeName, includeData) => {
+      return this.renderWithDepth(includeName, { ...data, ...includeData }, depth + 1)
+    }
+
+    const result = await entry.fn(data, includeFn)
+
+    // Layout inheritance: render child first, then render layout with blocks merged
+    if (entry.layout) {
+      const layoutData = { ...data, ...result.blocks }
+      return this.renderWithDepth(entry.layout, layoutData, depth + 1)
+    }
+
+    return result.output
+  }
+
+  private async resolve(name: string): Promise<CacheEntry> {
+    const cached = this.cache.get(name)
+
+    if (cached) {
+      if (this.cacheEnabled) return cached
+      const stale = await this.cache.isStale(name)
+      if (!stale) return cached
+    }
+
+    return this.compileTemplate(name)
+  }
+
+  private async compileTemplate(name: string): Promise<CacheEntry> {
+    const filePath = this.resolvePath(name)
+    const file = Bun.file(filePath)
+
+    const exists = await file.exists()
+    if (!exists) {
+      throw new TemplateError(`Template not found: ${name} (looked at ${filePath})`)
+    }
+
+    const source = await file.text()
+    const tokens = tokenize(source)
+    const result = compile(tokens)
+    const fn = this.createRenderFunction(result.code)
+
+    const entry: CacheEntry = {
+      fn,
+      layout: result.layout,
+      mtime: file.lastModified,
+      filePath,
+    }
+
+    this.cache.set(name, entry)
+    return entry
+  }
+
+  private resolvePath(name: string): string {
+    const relativePath = name.replace(/\./g, '/') + '.strav'
+    return join(this.directory, relativePath)
+  }
+
+  private createRenderFunction(code: string): RenderFunction {
+    // Use async Function with `with` statement for scope injection.
+    // `new Function()` does not inherit strict mode, so `with` is available.
+    const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
+
+    const fn = new AsyncFunction('__data', '__escape', '__include', `with (__data) {\n${code}\n}`)
+
+    return (data: Record<string, unknown>, includeFn: IncludeFn) => {
+      return fn(data, escapeHtml, includeFn)
+    }
+  }
+}
+
+export async function view(
+  name: string,
+  data: Record<string, unknown> = {},
+  status = 200
+): Promise<Response> {
+  const html = await ViewEngine.instance.render(name, data)
+  return new Response(html, {
+    status,
+    headers: { 'Content-Type': 'text/html' },
+  })
+}

package/src/view/escape.ts

@@ -0,0 +1,14 @@
+const replacements: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+}
+
+const pattern = /[&<>"']/g
+
+export function escapeHtml(value: unknown): string {
+  const str = String(value ?? '')
+  return str.replace(pattern, ch => replacements[ch]!)
+}

package/src/view/index.ts

@@ -0,0 +1,13 @@
+export { default as ViewEngine, view } from './engine.ts'
+export { tokenize } from './tokenizer.ts'
+export { compile } from './compiler.ts'
+export { default as TemplateCache } from './cache.ts'
+export { escapeHtml } from './escape.ts'
+export { staticFiles } from './middleware/static.ts'
+export { IslandBuilder } from './islands/island_builder.ts'
+export { vueSfcPlugin } from './islands/vue_plugin.ts'
+
+export type { Token, TokenType, VueAttr } from './tokenizer.ts'
+export type { CompilationResult } from './compiler.ts'
+export type { CacheEntry, RenderFunction, IncludeFn, RenderResult } from './cache.ts'
+export type { IslandBuilderOptions, IslandManifest } from './islands/island_builder.ts'