ln.templates/ln.templates
Harald Wolff c0f39a81a8 Added ln.patterns, introduced usage of Optional<> for better exception description via http 2023-08-14 14:24:09 +02:00
..
html Alpha Commit / Move primary workspace to Notebook 2023-08-12 12:35:42 +02:00
script Refactored some class namespaces, re-implemented v-include to support <slot name=""> and <... v-slot="slotname">...</...> 2023-07-23 01:56:57 +02:00
Context.cs Alpha Commit / Move primary workspace to Notebook 2023-08-12 12:35:42 +02:00
FileSystemTemplateResolver.cs Refactored some class namespaces, re-implemented v-include to support <slot name=""> and <... v-slot="slotname">...</...> 2023-07-23 01:56:57 +02:00
ITemplateResolver.cs Refactored some class namespaces, re-implemented v-include to support <slot name=""> and <... v-slot="slotname">...</...> 2023-07-23 01:56:57 +02:00
README.md Fixed Template lookup and caching in RecursiveResolver.cs 2023-07-23 16:33:29 +02:00
RecursiveResolver.cs Fixed Template lookup and caching in RecursiveResolver.cs 2023-07-23 16:33:29 +02:00
Template.cs Alpha Commit / Move primary workspace to Notebook 2023-08-12 12:35:42 +02:00
TemplateReader.cs Refactored some class namespaces, re-implemented v-include to support <slot name=""> and <... v-slot="slotname">...</...> 2023-07-23 01:56:57 +02:00
ln.templates.csproj Added ln.patterns, introduced usage of Optional<> for better exception description via http 2023-08-14 14:24:09 +02:00

README.md

ln.templates

Templating engine primarly used for html.

Features:

Iterations

Render the children 5 times, with the variable xy set to the 5 values 0, 3, 6, 4, 1 :

<tag v-for:xy="[0,3,6,4,1]">...</tag>
Conditionals

Render tag only if attribute v-if evaluates to a non false value.

<tag v-if="true">...</tag>
Inclusions

Replace this tag with the rendered content of othertemplate.html:

<tag v-include="othertemplate.html"></tag>
Slots

Use named slots to send content to included template:

<tag v-include="othertemplate.html">
    <div v-slot="title"></slot>
    <div v-slot=""></slot>
</tag>

Define Slots to be replaced with content from "caller":

<slot name="title">
<div>Some stuff...</div>
<slot name="slotname">
    I am the default content, that will be rendered,
    if there is no slot named "slotname"
</slot>
<slot>I am the default slot</slot>
<slot name="">I am also the default slot</slot>

By not providing any v-slot elements v-include will use the element itself to be the default slot.

<tag v-include="frame.html">
    This tag will be surrounded by the frame!
    Because there is no slot defined within it.
</tag>
Javascript

Define / run JavaScript logic within the script:

<template-script>
    let v = 1 + 2;
</template-script>

Add style classes conditionally via expression:

<div :class="{ "text-center": true, "text-primary": false }">

Set attributes values from expressions:

<div :myattribute="getMyAttributeValue()">

Include content by expressions within text elements:

<div>This is my favourite color: {{ myFavouriteColor }}.

Filesystem overlay

Overlaying is possible by using RecursiveResolver class as ITemplateResolver.

Example directory layout:

/layout/frame.html
/layout/htmlhead.html
/tmpl_a.html

The files use the following references:

tmpl_a.html -> /layout/frame.html -> /layout/htmlhead.html

htmlhead.html may contain something like

<head>
    <title>...</title>
    <link rel=.... >
    ...
</head>

We can now add a file to new folder:

/layout/frame.html
/layout/htmlhead.html
/tmpl_a.html
/layouts/b/layout/htmlhead.html

By a call to RecursiveResolver.FindResolver("/layouts/b") we get a ITemplateResolver that looks up Folders and Templates in that directory first, then in the parent folders back to the root folder of this structure.

So if we call GetTemplateByPath("tmpl_a.html") we get the same Template but this instance will use the reference chain

tmpl_a.html -> /layout/frame.html -> /layouts/b/htmlhead.html

which effectivly overlays htmlhead.html with an alternative version and still uses the /layout/frame.html template.