Component Inclusion - js-lib-com/wood GitHub Wiki

OOP aggregation, component inclusion or simply inclusion in WOOD parlance, is the process of inserting a child component into a parent. It can be a recursive process allowing creation of trees of arbitrary complexity.

Parent defines the component path to child and optional layout parameters. Child component has references for parameters provided by parent, if any.

Generated layout has content from both parent and child components.

Parent component has an empty child reference element used to define child component path with wood:compo="component/path" operator and, optionally, to declare layout parameters - note wood:param="name:value;*" operator. See Operators for syntax details.

Child reference element from parent and child component root should have the same tag; attributes from both elements are merged. See Attributes Merging.

Child component has parameter reference matching parent parameter name. Parent parameter value is used to text replace the child parameter reference. Parameter references from child component can appear anywhere XML text is allowed.

Build tool gets the component path for parent component and loads the child; remember that parent component has a reference to its children declared with wood:compo="component/path" operator. Then build tool replace component reference element with child component and takes care to merge attributes from child component root and parent child reference elements. If an attribute is present on both, parent component takes precedence.

If parameters are provided, see wood:param="name=value;*" operator, build inject parameter value to child component - text replace @param/name variable from child with parameter value provided by parent.

Beside merging layout files build tool also copy scripts, styles and resources to site file system, for both parent and child components.

Here is the HTML code for above diagram. Parent component compo/article uses child reference element to declare child component path and to declare parameter title. Note that child reference element is empty.

• compo/article/article.htm

<!-- parent component -->
<article xmlns:wood="js-lib.com/wood">
	<h1>Article Title</h1>
	<!-- child reference element -->
	<section id="first" class="text" wood:compo="compo/section" wood:param="title:Section Title"></section>
</article>

Child component compo/section has a parameter reference with the name matching parent parameter name, title. Parameter reference is text replaced with value provided by parent.

• compo/section/section.htm

<!-- child component -->
<section class="section">
	<!-- parameter reference -->
	<h2>@param/title</h2>
	<p>Section content</p>
</section>

And here is the resulting layout. Elements from both parent and child components are included into resulting layout, and attributes from child reference element and from child component root are merged. Parameter reference from child component is replaced with value provided by parent.

<article>
	<h1>Article Title</h1>
	<section id="first" class="section text">
		<h2>Section Title</h2>
		<p>Section content</p>
	</section>
</article>

Last updated 9/7/2022.