sercrod

Config

Sercrod configuration is a small startup-time surface for adjusting how attribute processing connects to the browser, rendered DOM, SSG output, localized manuals, and external hooks.

This page reflects the configuration surface visible in dist/sercrod.js as published through the official site as Sercrod v0.1.12.

What configuration controls

Sercrod configuration is not a general runtime control panel. It is read when sercrod.js is loaded and should be treated as startup contract.

Load order

Define window.__Sercrod.config before the runtime script. 

<script>
window.__Sercrod = window.__Sercrod || {};
window.__Sercrod.config = {
	delimiters: { start: "%", end: "%" },
	events: {
		prefix: "@",
		non_mutating: ["mousemove", "scroll"]
	},
	include: {
		warn_on_element: true,
		remove_element_if_empty: false,
		max_depth: 16
	},
	cleanup: {
		directives: null,
		handlers: null
	},
	websocket: {
		internal_update: false
	},
	i18n: {
		enabled: true,
		language: null
	}
};
</script>
<script src="/sercrod.js"></script>

Only fields read by the runtime have effect. Changing this object after the runtime has loaded is not the public configuration contract.

Delimiters

Interpolation uses configured delimiters around an expression. With the default settings, %name% evaluates name. 

delimiters: {
	start: "%",
	end: "%"
}

If you override delimiters, provide both start and end. 

<script>
window.__Sercrod = window.__Sercrod || {};
window.__Sercrod.config = {
	delimiters: { start: "{{", end: "}}" }
};
</script>

Event configuration

Event configuration controls how event attributes are detected and whether an event automatically triggers the normal update flow after its handler runs. 

events: {
	prefix: "@",
	non_mutating: [
		"mouseover", "mouseenter", "mousemove", "mouseout", "mouseleave", "mousedown",
		"pointerover", "pointerenter", "pointermove", "pointerout", "pointerleave",
		"pointerrawupdate", "pointerdown",
		"wheel", "scroll", "touchmove", "touchstart",
		"dragstart", "drag", "dragenter", "dragover", "dragleave", "dragend",
		"resize", "timeupdate", "selectionchange"
	]
}

events.prefix

Default is "@". The prefix determines which attributes are treated as event attributes. Sercrod uses it both when collecting Sercrod flags and when binding event handlers. 

<script>
window.__Sercrod = window.__Sercrod || {};
window.__Sercrod.config = {
	events: { prefix: "on-" }
};
</script>

With this setting, event attributes use forms such as on-click instead of @click.

events.non_mutating

events.non_mutating is the set of DOM events that do not automatically trigger the normal host update flow after the handler runs.

This does not mean the handler cannot change data. It means Sercrod does not treat the event as a normal automatic update trigger by default. The event handler still runs.

Use this for high-frequency events such as pointer movement, mouse movement, scroll, wheel, touch movement, drag-over behavior, resize, timeupdate, and selection changes. 

<serc-rod data='{"x":0}'>
	<div @mousemove.noupdate="x = $event.clientX"></div>
	<button @click.update="x++">Update</button>
</serc-rod>

If events.non_mutating is provided, it replaces the built-in list. Include all events that should keep the non-mutating behavior.

Include and import configuration

include: {
	warn_on_element: true,
	remove_element_if_empty: false,
	max_depth: 16
}

include.max_depth

Default is 16. This is the maximum depth for nested include/import expansion. When the limit is exceeded, Sercrod stops expanding that branch.

include.warn_on_element

Default is true. When enabled, Sercrod writes diagnostic marker attributes to the rendered element for situations such as include depth overflow, import depth overflow, template not found, invalid import URL, or import request error.

These markers are useful for browser inspection, SSG output inspection, and AI debugging.

include.remove_element_if_empty

Default is false. When an include/import cannot produce content, this option controls whether the placeholder element remains in the rendered output.

Cleanup configuration

Cleanup options control whether Sercrod-specific attributes remain in rendered DOM. They are useful for SSG and SSR output. 

cleanup: {
	directives: null,
	handlers: null
}

cleanup.directives

When true, Sercrod removes directive attributes such as *if, *for, *print, *include, or n-* equivalents from rendered output after use.

cleanup.handlers

When true, Sercrod removes event attributes and dynamic binding attributes after binding or applying them.

This includes event attributes using the configured event prefix and binding attributes such as :class, :style, :href, or related : attributes.

WebSocket configuration

websocket: {
	internal_update: false
}

websocket.internal_update affects whether WebSocket behavior may reconnect or perform internal update behavior during host updates. Most pages should keep this false.

i18n and manual loading

i18n: {
	enabled: true,
	language: null
}

Set enabled: false to disable i18n lookup. When language is null, the runtime uses navigator.languages[0] or navigator.language. Language tags such as ja-JP are normalized to the base language, such as ja.

When i18n is enabled, runtime messages can be loaded from i18n/{lang}/messages.json, *man can try i18n/{lang}/man.json, and the default man.json remains the fallback manual.

Ambient preload hooks

The following globals are not stored under window.__Sercrod.config, but they are read during runtime class initialization and are part of the startup configuration surface.

Global Purpose
window.__Sercrod_filter Pre-register filter overrides such as html, url, attr, input_out, input_in, style, text, and placeholder.
window.__Sercrod_methods Pre-register functions or function containers available to Sercrod expressions.
window.__Sercrod_ast_hooks Pre-register AST hooks that receive (ast, host).
window.__Sercrod_pre_hooks Pre-register pre-hooks that can mutate parsed DOM or return a replacement template string before AST extraction.

These globals must be defined before loading sercrod.js if they should affect initialization.

Defaults at a glance

window.__Sercrod = window.__Sercrod || {};
window.__Sercrod.config = {
	delimiters: {
		start: "%",
		end: "%"
	},
	include: {
		warn_on_element: true,
		remove_element_if_empty: false,
		max_depth: 16
	},
	cleanup: {
		directives: null,
		handlers: null
	},
	events: {
		prefix: "@",
		non_mutating: [
			"mouseover", "mouseenter", "mousemove", "mouseout", "mouseleave", "mousedown",
			"pointerover", "pointerenter", "pointermove", "pointerout", "pointerleave",
			"pointerrawupdate", "pointerdown",
			"wheel", "scroll", "touchmove", "touchstart",
			"dragstart", "drag", "dragenter", "dragover", "dragleave", "dragend",
			"resize", "timeupdate", "selectionchange"
		]
	},
	websocket: {
		internal_update: false
	},
	i18n: {
		enabled: true,
		language: null
	}
};

Configuration contract and cautions