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: a layout places a
<Hook zone="..."> component, and any module can register a component
against that same zone name in its index.module.js manifest — neither
side imports the other. Now its own chapter, with the real UI-zone and
logic-hook mechanics, the native hooks the framework ships with, and a
recipe for adding a launcher view: see
Hooks & Extension Points.

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.