Config

Sercrod has a small set of runtime options that you can override through window.__Sercrod.config before loading sercrod.js. This page lists those options and their defaults.

Global override hook

To change settings, define window.__Sercrod.config before the script tag that loads sercrod.js. Only the fields you specify are overridden. Others keep their defaults.

<script>
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: "@"
	}
};
</script>
<script src="/sercrod.js"></script>

You can set only the parts you need. For example, to change the event prefix but nothing else, you can provide just events.prefix.

Delimiters

Interpolation uses delimiters around a key, such as %name%.

• delimiters.start - opening marker, default "%"
• delimiters.end - closing marker, default "%"

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

This would treat {{name}} as an interpolation instead of %name%.

Include options

These options control the behavior of the *include family of directives when they pull in external fragments.

• include.warn_on_element If true (default), Sercrod emits a warning when you attach *include directly to certain elements that can cause confusing layouts.
• include.remove_element_if_empty If true, the host element is removed when the include result is empty. The default is false.
• include.max_depth Maximum nesting depth for recursive include chains. The default is 16.

<script>
window.__Sercrod = window.__Sercrod || {};
window.__Sercrod.config = {
	include: {
		warn_on_element: false,
		remove_element_if_empty: true,
		max_depth: 8
	}
};
</script>

Cleanup options

After Sercrod has expanded directives and bound events, you may want to remove directive attributes and event attributes from the DOM. This is common in SSG or SSR builds.

• cleanup.directives Controls whether directive attributes (for example, *if, *for, *print) are removed after use. Default is null, which means no automatic cleanup. Set to true to enable cleanup.
• cleanup.handlers Controls whether event attributes (for example, @click) are removed after binding. Default is null. Set to true to enable cleanup.

<script>
window.__Sercrod = window.__Sercrod || {};
window.__Sercrod.config = {
	cleanup: {
		directives: true,
		handlers: true
	}
};
</script>

The official Playwright based renderer uses these options during the build step so that the final static HTML no longer contains Sercrod specific attributes.

Event options

These options control how Sercrod interprets event attributes and which events are treated as non mutating.

• events.prefix String prefix used for event attributes. The default is "@", which means Sercrod looks for attributes such as @click. You can change it if you need to avoid conflicts.
• events.non_mutating List of event names that do not change data and therefore do not trigger full updates. By default this includes many pointer and mouse move events, scroll, and similar high frequency events.

<script>
window.__Sercrod = window.__Sercrod || {};
window.__Sercrod.config = {
	events: {
		prefix: "ne-",
		non_mutating: ["mouseover","mousemove","scroll"]
	}
};
</script>

In most cases you do not need to override non_mutating. It is exposed so that you can tune performance for special cases.

Defaults at a glance

For reference, the built in defaults are equivalent to this structure inside the runtime:

delimiters: {
	start: "%",
	end: "%"
},
include: {
	warn_on_element: true,
	remove_element_if_empty: false,
	max_depth: 16,
	terminator: null
},
cleanup: {
	directives: null,
	handlers: null,
	terminator: 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"
	],
	terminator: null
}

Internal terminator fields are reserved for future use and should be left as null.