chore: wip

Author: chrisbbreuer

packages/stx/src/config.ts

@@ -8,6 +8,7 @@ import { stxRouterDirective } from './client/directive'
 // by the built-in processComponentDirectives function in process.ts
 import { heatmapDirective } from './heatmap'
 import { markdownDirectiveHandler } from './markdown'
+import { imgDirective } from './media/image/directive'
 import { pwaDirectives } from './pwa/directives'
 import { metaDirective, structuredDataDirective } from './seo'
 import { webComponentDirectiveHandler } from './web-components'
@@ -62,6 +63,7 @@ export const defaultConfig: StxConfig = {
     scrollAnimateDirective,
     stxRouterDirective,
     heatmapDirective,
+    imgDirective,
     ...pwaDirectives,
   ],
   middleware: [],
@@ -254,6 +256,45 @@ export const defaultConfig: StxConfig = {
       maxFileSizeKB: 500,
     },
   },
+
+  // ==========================================================================
+  // Media Configuration
+  // ==========================================================================
+  media: {
+    enabled: true,
+    image: {
+      enabled: true,
+      defaultWidths: [320, 480, 640, 768, 1024, 1280, 1536, 1920],
+      defaultFormats: ['avif', 'webp', 'jpeg'],
+      defaultQuality: 80,
+      placeholderStrategy: 'thumbhash',
+      lazyByDefault: true,
+      enableDpr: true,
+      defaultDpr: [1, 2, 3],
+    },
+    video: {
+      enabled: true,
+      lazyByDefault: true,
+      defaultControls: true,
+    },
+    upload: {
+      enabled: true,
+      maxSize: 10 * 1024 * 1024, // 10MB
+      allowedTypes: ['image/*', 'video/*', 'audio/*', 'application/pdf'],
+      maxConcurrent: 3,
+    },
+    protected: {
+      enabled: true,
+      expirationSeconds: 3600,
+      batchSize: 10,
+    },
+    cache: {
+      enabled: true,
+      directory: '.stx/media-cache',
+      maxAge: 30,
+      maxSize: 500,
+    },
+  },
 }
 // Lazy-load config to avoid blocking module initialization
 // This makes imports near-instant instead of taking 2-3 seconds

packages/stx/src/expressions.ts

@@ -437,16 +437,45 @@ export function processExpressions(template: string, context: Record<string, any
 
   // Replace {{ expr }} with escaped expressions
   output = output.replace(/\{\{([\s\S]*?)\}\}/g, (match, expr, offset) => {
+    const trimmedExpr = expr.trim()
+
+    // Skip common JS built-ins that should be evaluated server-side
+    const jsBuiltins = ['parseInt', 'parseFloat', 'String', 'Number', 'Boolean', 'Array', 'Object', 'JSON', 'Math', 'Date', 'encodeURIComponent', 'decodeURIComponent', 'encodeURI', 'decodeURI', 'true', 'false', 'null', 'undefined']
+
+    // First, check if the expression starts with a known variable in context
+    // This handles cases like `items.filter(...)` where `items` is in context
+    const identifierPattern = /^([a-zA-Z_$][a-zA-Z0-9_$]*)/
+    const identifierMatch = trimmedExpr.match(identifierPattern)
+    const firstVarName = identifierMatch?.[1]
+    const firstVarInContext = firstVarName && (firstVarName in context || jsBuiltins.includes(firstVarName))
+
+    // Detect if this looks like a client-side signal expression
+    // Signals are typically function calls like loading(), sessions().length, etc.
+    // Only preserve for client-side if it's a direct function call that's not in context
+    const directFunctionCall = /^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/
+    const directFuncMatch = trimmedExpr.match(directFunctionCall)
+    const isLikelySignal = directFuncMatch && !jsBuiltins.includes(directFuncMatch[1]) && !(directFuncMatch[1] in context)
+
+    // Preserve signal-like expressions for client-side processing
+    if (isLikelySignal) {
+      return match
+    }
+
     try {
       const value = evaluateExpression(expr, context)
       // Escape HTML for security
       return value !== undefined && value !== null ? escapeHtml(String(value)) : ''
     }
     catch (error: unknown) {
+      // If evaluation fails and it looks like a client-side signal,
+      // preserve the expression for client-side processing
+      if (isLikelySignal) {
+        return match
+      }
       const msg = error instanceof Error ? error.message : String(error)
       return createDetailedErrorMessage(
         'Expression',
-        `Error evaluating: {{ ${expr.trim()} }}: ${msg}`,
+        `Error evaluating: {{ ${trimmedExpr} }}: ${msg}`,
         filePath,
         template,
         offset,

packages/stx/src/index.ts

@@ -76,6 +76,7 @@ export * from './ssg'
 export * from './ssr'
 export * from './visual-testing'
 export * from './image-optimization'
+export * from './media'
 export * from './bundle-analyzer'
 export * from './build-views'
 export * from './signals'