4.4 Advanced Patterns

Standard leverages high-level Astro and Vite compilation techniques to provide a zero-config, highly extensible module environment.

1. Virtual Configuration Modules (virtual:stnd/config)

To avoid spaghetti imports of relative paths and compile-time file-system lookups, Standard maps all configuration states into Vite Virtual Modules.

• The Problem: How to merge configurations, navigation links, and settings from 20+ isolated packages and vertical-slice application modules into a single importable settings object?
• The Solution: The orchestrator package @stnd/core hooks into the Vite configuration compiler. It scans the workspaces, loads every index.module.js manifest, deep-merges the declarations, and injects the output as a read-only module resolved at compile time.

// Import unified configuration instantly from any module
import config from "virtual:stnd/config";

console.log("Unified Header Nav:", config.nav.header);
console.log("Active Modules List:", config.modules.keys());

2. Dynamic Theme Token Parity

The design system requires theme configurations to be unified across server-side SCSS compilation and browser runtime.

• Parity Engine: The CSS token map is written once in JSON. During build-time, @stnd/styles parses the schema and generates:
  1. Sass token mappings (_standard-01-token.scss) for CSS pre-compilation.
  2. JavaScript mappings (theme-tokens.js) for the browser runtime (used for dynamic inline styling and the AI design generators).
• Parity Benefit: This prevents token drift and ensures that custom color spaces (derived using OKLCH equations) render identically on server-side prerendered pages and client-side reactive components.

3. Layout Hook Portals (Extensibility Zones)

Standard features a decoupled portal-rendering system. Modules can inject custom UI components into predefined layout areas without modifying the layouts themselves.

Step 1: Layout Portal Declaration

A base layout designates a portal zone by loading and placing the Hook portal component:

---
// apps/stnd.gd/modules/core/layouts/Base.astro
import Hook from "@stnd/modules/Hook.astro";
---
<header class="site-header">
  <div class="logo">Standard Garden</div>
  
  <!-- Hook Portal Zone -->
  <Hook id="header:right" props={{ user: Astro.locals.user }} />
</header>

Step 2: Hook Registration in Module Manifest

Any separate module can register its component to target that specific portal ID inside its index.module.js manifest:

// apps/stnd.gd/modules/profile-badge/index.module.js
export default {
  id: "profile-badge",
  name: "Profile Badge",
  
  hooks: {
    // Inject custom Svelte/Astro badge component into header portal
    "header:right": "./components/ProfileBadge.astro"
  }
};

During Astro bootstrapping, the portal loader resolves the hook mapping dynamically and injects ProfileBadge.astro directly inside the header.

4. Edge-First Request Lifecycle

The Standard framework is built specifically to deploy to edge compute runtimes (such as Cloudflare Pages with Workers).

1. Request Entry: The edge routing server intercepts the request.
2. Context Bootstrap (StandardRoot.enter): Astro middleware intercepts the request and runs Root.enter(context). This instantiates a root service loader, attaching edge variables (D1 SQLite database bindings, KV cache, and R2 bucket managers) to the context before any route logic is reached.
3. Topological Initialisation: To prevent race conditions, the core integration executes a topological dependency sort using Kahn’s algorithm, ensuring database-dependent services are configured before routing entrypoints compile.
4. Isomorphic Execution: All SHARED level utilities have zero Node.js binary dependencies, guaranteeing safe compilation on browser, worker, or local environments.
5. Page Compilation: Prerendered static pages are served directly from the CDN edge cache. Dynamic routes fetch data via root models and compile HTML on the fly.