TriFrost 0.33.0

This release brings an upgrade to TriFrost’s SSR and client-side scripting experience with a powerful new <Script> component.

Designed for security, ergonomics, and dynamic control, combined with new support for __TRIFROST_ENV__ and __TRIFROST_STATE__ interpolation, this opens the door to cleaner SSR logic, secure script injection, and fully dynamic per-request behavior.

Added

• feat: <Script> JSX component for safe and ergonomic inline or external script injection. Automatically injects a nonce for CSP compatibility, no manual handling required. Supports inline function-style scripts via () => { ... } (or {...}), external scripts via src, async, defer, and type attributes, as well as built-in minification of inline content.

import {Script} from '@trifrost/core';
...

<Script async src="https://example.com/analytics.js" />
<Script>{() => {
  console.log("Hello from TriFrost");
}}</Script>

• feat: Support for __TRIFROST_ENV__.<key> and __TRIFROST_STATE__.<key> replacements in both inline scripts and styles. These are automatically substituted server-side at render-time, allowing environment config and request-specific state to influence SSR-rendered behavior, theming, or hydration logic.

<Script>{() => {
  const settings = "__TRIFROST_STATE__.settings";
  console.log("env:", "__TRIFROST_ENV__.APP_ENV");
}}</Script>

/* Renders as */
<script>
  const settings = {locale: "en", active: true, count: 42};
  console.log("env:", "production");
</script>

Example from the TriFrost website:

/* Before */
<script nonce={nonce()} dangerouslySetInnerHTML={{__html: `(function () {
  const saved = localStorage.getItem('trifrost-theme');
  const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', saved || preferred);
})()`}} />

/* Now */
<Script>{() => {
  const saved = localStorage.getItem('trifrost-theme');
  const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', saved || preferred);
}}</Script>

Improved

• dx: css.use and css.mix now gracefully ignore null, undefined, and false values for cleaner conditional composition.

const cls = css.use('button', isActive && 'active', isDisabled ? {opacity: 0.5} : null);

• dx: Context status is now aligned around numerical codes rather than both numerical and full string codes, previously both were accepted but only the uWS runtime uses the full string code variant.

Fixed

• Fixed an issue where ctx.redirect with http:// to https:// protocol upgrade was broken, producing invalid https://http://... URLs
• Fixed an issue where ctx.json responses had a broken conditional internally

TriFrost’s new <Script> component and environment-aware replacements provide a clean, safe way to handle scripts in SSR with minimal boilerplate and maximum clarity. A small addition, but one that smooths out a very real part of building dynamic apps.

Stay frosty ❄️