This release continues on the <Script>
foundation introduced in TriFrost 0.33.0
and brings a powerful under-the-hood upgrade. A Script Engine, focused on ergonomic interactivity, seamless deduplication, and zero-config data inlining as well as some new utils for easier dx.
Added
- feat:
<Script>
now supports adata
prop to pass structured data alongside code. The function receives(el, data)
making dynamic behavior cleaner and more declarative.
<button type="button">
Toggle
<Script data={{toggleClass: 'active'}}>{(el, data) => {
el.addEventListener('click', () => el.classList.toggle(data.toggleClass));
}}</Script>
</button>
- feat: New
env()
andstate()
utils are now available within JSX, enabling per request logic without having to pass ctx around.
Example:
import {env, state} from '@trifrost/core/modules/JSX';
export function DebugBar () {
if (env('TRIFROST_DEBUG') !== 'true') return null;
return (
<div className="debug">
Request ID: {state('request_id')}
</div>
);
}
Example combining data/env()/state()
:
import {env, state} from '@trifrost/core/modules/JSX';
export function AnalyticsBeacon () {
const beaconUrl = env('ANALYTICS_URL');
const userId = state('user_id');
const pageId = state('page_id');
return (
<Script data={{beaconUrl, userId, pageId}}>{(el, data) => {
navigator.sendBeacon(data.beaconUrl, JSON.stringify({
user: data.userId,
page: data.pageId,
ts: Date.now(),
}));
}}</Script>
);
}
Improved
- feat: Introduced an internal Script Engine that deduplicates repeated scripts and shared data nodes across the tree. This engine hooks directly into the TriFrost JSX renderer, ensuring only unique scripts are emitted regardless of how many times a component renders.
Removed
- Removed usage of
__TRIFROST_ENV__
and__TRIFROST_STATE__
markers (introduced in0.33.0
). These have been fully replaced with runtime-bound utilities (env()
andstate()
), honoring the zero-cost abstraction principle of TriFrost.
TriFrost's scripting system now achieves a rare balance: expressive, secure, and zero-maintenance.
It's important to remember that <Script>
is client-side logic, not server-side, as such these utils as well as the new Scripting engine are there to make it more seamless and fun.
As always, stay frosty ❄️