Z Template Tests

element if any 98 | let test2 = test1.nextElementSibling?.localName === 'article' ? test1.nextElementSibling : null; 99 | 100 | if (!test2) { // Result not created yet, use old Z Template 1.0 to generate it 101 | test2 = test1.parentNode.appendChild(test1.cloneNode(true)); 102 | $(test2).template(data); 103 | } 104 | 105 | for (let i = 0; i < 2; i++) { // try twice 106 | console.log('Test round %s for %o with data %o', i + 1, test1.parentNode, data); 107 | zTemplate(test1, data, callbacks); 108 | 109 | // the z-content-rev attribute is added after the template is rendered to trigger CSS anim restart. 110 | // so we wait with the result evaluation until the attribute is added. 111 | setTimeout(() => { 112 | const html1 = serialize(test1); 113 | const html2 = serialize(test2); 114 | test1.setAttribute('data-source', html1); 115 | test2.setAttribute('data-source', html2); 116 | 117 | 118 | if (html1 !== html2) { 119 | headerVars.pass = false; 120 | test1.parentNode.classList.add('fail'); 121 | test1.parentNode.classList.remove('pass'); 122 | console.warn('Fail:', test1.parentNode, data); 123 | console.warn('Produced:', html1); 124 | console.warn('Expected:', html2); 125 | } else { 126 | test1.parentNode.classList.add('pass'); 127 | } 128 | }, 10); 129 | } 130 | 131 | function serialize(el) { 132 | const div = document.createElement('div'); 133 | const clone = el.cloneNode(true); 134 | clone.removeAttribute('data-source'); 135 | div.appendChild(clone); 136 | 137 | const attrs = div.ownerDocument.evaluate('//@*[starts-with(name(), "z-var-content")]', div, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 138 | for (let i = 0; i < attrs.snapshotLength; i++) { 139 | const attr = attrs.snapshotItem(i); 140 | attr.ownerElement.removeAttribute(attr.nodeName); 141 | } 142 | return div.innerHTML.replace(/^\s*\n/gm, "").replace(/^\s+/gm, ""); 143 | }; 144 | 145 | }); 146 | 147 | 148 | zTemplate(document.querySelector('#header'), headerVars); 149 | -------------------------------------------------------------------------------- /javascript/prepare.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * 4 | * @module ZTemplate 5 | * @author Daniel Sevcik 6 | * @copyright 2023 Daniel Sevcik 7 | * @since 2023-01-23 22:02:02 UTC 8 | * @access public 9 | */ 10 | class Preparator { 11 | #vars; 12 | #tokens; 13 | #paramShortcuts = { 14 | "@*": "attr", 15 | ":*": "event", 16 | "**": "call", 17 | ".*": "class", 18 | "+": "html", 19 | ".": "text", 20 | "=": "value", 21 | "?": "toggle", 22 | "!": "remove", 23 | "`": "debugger" 24 | }; 25 | 26 | #operatorsCompare = [ 27 | '==', 28 | '!=', 29 | '>', 30 | '>=', 31 | '<', 32 | '<=', 33 | ]; 34 | 35 | #operatorsBoolean = [ 36 | '!', 37 | '&&', 38 | '||' 39 | ]; 40 | 41 | #data = { 42 | "negateValue": 0, // int how many '!' operators are in front of the expression 43 | "variable": null, // variable name 44 | "value": null, // evaluated value 45 | "valueBool": null, // evaluated value 46 | "action": "", // string 47 | "param": null, // string 48 | "arguments": [], // array of optional arguments 49 | "condition": null, // evaluated {} condition 50 | } 51 | 52 | constructor(tokens, vars) { 53 | if (typeof vars !== 'object') { 54 | throw new Error(`The variables must be an object. Current argument: ${typeof vars}.`); 55 | } 56 | this.#vars = vars; 57 | this.#tokens = tokens; 58 | this.#normalize(); 59 | } 60 | 61 | /** 62 | * Normalize this.#tokens so it has fixed elements that reflect the syntax like this: 63 | * 64 | * The syntax is: 65 | * 66 | * VALUE ACTION CONDITION 67 | * 68 | * VALUE = [![!]] ( VARIABLE_NAME | { EXPRESSION } ) 69 | * ACTION = ACTION_NAME [ ? PARAM [ ? (...ARGUMENTS) ] ] 70 | * CONDITION = { EXPRESSION } 71 | * 72 | * @access private 73 | * @return void 74 | */ 75 | #normalize() { 76 | const tokens = Array.from(this.#tokens); 77 | let token = this.#nextToken(tokens, ["operator", "generic", "block", "text"]); 78 | 79 | // negate 80 | if (token.type === 'operator' && ["!", "!!"].includes(token.value)) { 81 | this.#data.negateValue = token.value.length; 82 | token = this.#nextToken(tokens, ["generic", "block", "text"]); 83 | } 84 | 85 | // value 86 | if (token.type === 'generic') { 87 | this.#data.variable = token.value; 88 | this.#data.value = this.#getVariableValue(token.value); 89 | } else if (token.type === 'block') { 90 | this.#data.value = this.#prepareBlock(token.value); 91 | } else { 92 | this.#data.value = token.value; 93 | } 94 | token = this.#nextToken(tokens, ["generic", "operator"]); 95 | 96 | // action shortcut 97 | const shortcutType = token.value.substr(0, 1) + (token.value.length > 1 ? '*' : ''); 98 | if (typeof this.#paramShortcuts[shortcutType] != 'undefined') { // shortcut 99 | this.#data.action = this.#paramShortcuts[shortcutType]; 100 | tokens.unshift({"type": "text", "value": token.value.substr(1), "info": "Extracted from shortcut"}); 101 | } else if (Object.values(this.#paramShortcuts).includes(token.value)) { 102 | this.#data.action = token.value; 103 | } else { 104 | throw new Error(`Invalid action: ${token.value} . Supported actions: ${Object.keys(this.#paramShortcuts).join(', ')}`); 105 | } 106 | token = this.#nextToken(tokens, ["text", "generic", null], ["block", "operator"]); // param is optional, we may encounter next "block" or "operator" instead. 107 | 108 | // param 109 | this.#data.param = token?.value; 110 | token = this.#nextToken(tokens, ["block", "operator", null]); 111 | 112 | // arguments 113 | if (token?.type === 'block' && token.start == '(') { // Enclosed in '(' and ')' => arguments 114 | this.#data.arguments = this.#prepareArguments(token.value); 115 | token = this.#nextToken(tokens, ["block", "operator", null]); 116 | } 117 | 118 | // negate 119 | let negateCondition = 0; 120 | if (token?.type === 'operator' && ["!", "!!"].includes(token.value)) { 121 | negateCondition = token.value.length; 122 | token = this.#nextToken(tokens, ["block", null]); 123 | } 124 | 125 | // condition 126 | if (token?.type === 'block' && token.start == '{') { 127 | this.#data.condition = this.#prepareBlock(token.value); 128 | token = this.#nextToken(tokens, ["block", null]); 129 | } else { 130 | this.#data.condition = true; 131 | } 132 | this.#data.condition = this.#negate(this.#data.condition, negateCondition); 133 | 134 | if (this.#data.action === 'debugger' && this.#data.valueBool) { 135 | debugger; 136 | } 137 | } 138 | 139 | #getTokenValue(token) { 140 | if (token.type === 'generic') { 141 | return this.#getVariableValue(token.value); 142 | } else if (token.type === 'block') { 143 | return this.#prepareBlock(token.value); 144 | } else { 145 | return token.value; 146 | } 147 | } 148 | 149 | #getVariableValue(variable) { 150 | const parts = variable.split('.'); 151 | 152 | // reserved keywords 153 | switch(parts[0]) { 154 | case 'true': 155 | case 'always': 156 | return true; 157 | case 'false': 158 | case 'never': 159 | return false; 160 | case 'null': 161 | case 'none': 162 | return null; 163 | case 'undefined': 164 | case 'z': 165 | return undefined; 166 | } 167 | 168 | // Split the variable into parts separated by dot and get the corresponding value from this.#vars object. 169 | // Example: "user.name" => this.#vars.user.name 170 | let value = this.#vars; 171 | for (let i = 0; i < parts.length; i++) { 172 | if (typeof value[parts[i]] === 'undefined') { 173 | console.warn("Can't find variable " + variable + " in data source %o", this.#vars); 174 | return null; 175 | } 176 | value = value[parts[i]]; 177 | } 178 | return value; 179 | } 180 | 181 | prepare() { 182 | const result = {...this.#data}; 183 | 184 | // Before resolving conditions 185 | if (result.condition.type === 'special') { 186 | result.action = result.condition.value; 187 | result.condition = true; 188 | return result; 189 | } else if (result.value === null && result.condition.type == "generic") { 190 | result.value = this.#toValue(result.condition, result.negateValue); 191 | } else if (result.value !== null && typeof result.value == 'object') { 192 | result.value = this.#toValue(result.value, result.negateValue); 193 | } else { 194 | result.value = this.#negate(result.value, result.negateValue); 195 | } 196 | result.valueBool = this.#toBool(result.value); 197 | 198 | // Resolve conditions 199 | switch(result.condition.type) { 200 | case "block": 201 | result.condition = !!this.#prepareBlock(result.condition.value); 202 | break; 203 | case "generic": 204 | result.condition = !!this.#prepareVariable(result.condition.value); 205 | break; 206 | } 207 | 208 | return result; 209 | } 210 | 211 | #prepareArguments(tokens) { 212 | let args = []; 213 | let expr = []; 214 | 215 | for (let i = 0; i < tokens.length; i++) { 216 | const token = tokens[i]; 217 | if (token.type === 'separator') { 218 | args.push(expr); 219 | expr = []; 220 | } else { 221 | expr.push(token); 222 | } 223 | } 224 | args.push(expr); 225 | 226 | args = args.map(arg => arg.length == 1 ? this.#getTokenValue(arg[0]) : this.#getTokenValue({"type": "block", "value": arg})); 227 | return args; 228 | } 229 | 230 | #prepareVariable(varName) { 231 | const val = this.#getVariableValue(varName); 232 | if (val === null) { 233 | return null; 234 | } 235 | return this.#toBool(val); 236 | } 237 | 238 | #toBool(val) { 239 | switch (typeof val) { 240 | case "string": 241 | return val.length !== 0; 242 | case "object": 243 | return val === null ? false : Object.keys(val).length !== 0; 244 | case "number": 245 | return val !== 0; 246 | case "boolean": 247 | return val; 248 | default: 249 | return false; 250 | } 251 | } 252 | 253 | #prepareBlock(tokens) { 254 | const expression = this.#mkExpression(tokens); 255 | // console.log("expression", expression); 256 | return eval(expression); 257 | } 258 | 259 | #mkExpression(tokens) { 260 | // We could do eval of the whole expression with vars but it's not 261 | // safe and it's not needed and we want it to be portable to other langs. 262 | let result = ''; 263 | while (true) { 264 | const token = this.#nextToken(tokens, ["generic", "block", "text", "operator", null]); 265 | if (!token) { 266 | break; 267 | } 268 | 269 | // Arithmetic operators look ahead 270 | if (tokens.length > 1 && tokens[0].type === 'operator' && this.#operatorsCompare.includes(tokens[0].value)) { 271 | const operator = this.#nextToken(tokens, ["operator"]); 272 | const token2 = this.#nextToken(tokens, ["generic", "text"]); 273 | result += this.#compare(token, operator, token2) ? 1 : 0; 274 | continue; 275 | } 276 | 277 | switch (token.type) { 278 | case "operator": 279 | if (this.#operatorsBoolean.includes(token.value)) { 280 | result += token.value; 281 | } else { 282 | throw new Error(`Invalid operator: ${token.value}. Supported operators: ${this.#operatorsBoolean.join(', ')}`); 283 | } 284 | break; 285 | case "block": 286 | result += this.#mkExpression(token.value); 287 | break; 288 | case "generic": 289 | result += this.#prepareVariable(token.value) ? 1 : 0; 290 | break; 291 | case "text": 292 | result += this.#toBool(token.value) ? 1 : 0; 293 | break; 294 | } 295 | } 296 | return "(" + (result || '0') + ")"; 297 | } 298 | 299 | #toValue(token, negate = 0) { 300 | let value = token; 301 | 302 | if (typeof token?.type !== 'undefined' && typeof token?.value !== 'undefined') { // @todo we should use Token class instead of Object 303 | switch (token.type) { 304 | case "generic": 305 | value = this.#getVariableValue(token.value); 306 | break; 307 | case "text": 308 | value = token.value; 309 | break; 310 | case "block": 311 | value = this.#prepareBlock(token.value); 312 | break; 313 | default: 314 | throw new Error(`Invalid token type: ${token.type} (value: ${JSON.stringify(token)}).`); 315 | } 316 | } 317 | 318 | if (value === null) { 319 | return value; // Number(null) === 0 320 | } else if (value instanceof Array) { 321 | value = value.length; 322 | } else if (value instanceof Number) { 323 | value = value.valueOf(); 324 | } else if (typeof value === 'object') { 325 | value = Object.keys(value).length; 326 | } 327 | 328 | const num = Number(value); 329 | let ret = isNaN(num) ? value : num.valueOf(); 330 | 331 | ret = this.#negate(ret, negate); 332 | return ret; 333 | } 334 | 335 | #compare(token1, operator, token2) { 336 | const val1 = this.#toValue(token1); 337 | const val2 = this.#toValue(token2); 338 | 339 | switch (operator.value) { 340 | case '==': 341 | return val1 === val2 ? 1 : 0; 342 | case '!=': 343 | return val1 !== val2 ? 1 : 0; 344 | case '<': 345 | return val1 < val2 ? 1 : 0; 346 | case '<=': 347 | return val1 <= val2 ? 1 : 0; 348 | case '>': 349 | return val1 > val2 ? 1 : 0; 350 | case '>=': 351 | return val1 >= val2 ? 1 : 0; 352 | default: 353 | throw new Error(`Invalid operator: ${operator.value} . Supported operators: ${this.#operatorsCompare.join(', ')}`); 354 | } 355 | } 356 | 357 | #nextToken(tokens, expectType = [], skipType = []) { 358 | const token = tokens.shift(); 359 | if (skipType.includes(token?.type)) { 360 | tokens.unshift(token); 361 | return null; 362 | } 363 | if (!expectType.includes(token ? token.type : null)) { 364 | throw new Error(`Invalid z-var value: (${token && token.type}) ${JSON.stringify(token)}. Expected: ${JSON.stringify(expectType)}`); 365 | } 366 | return token; 367 | } 368 | 369 | #negate(value, negate = 0) { 370 | for (let c = negate; c; c--) { 371 | value = !value; 372 | } 373 | return value; 374 | } 375 | } 376 | 377 | function prepare(tokens, vars) { 378 | return (new Preparator(tokens, vars)).prepare(); 379 | } 380 | 381 | 382 | // exports.prepare = prepare; 383 | export { prepare }; 384 | 385 | -------------------------------------------------------------------------------- /tests/testcases/jquery.template.js: -------------------------------------------------------------------------------- 1 | /** 2 | * JQUERY DNA TEMPLATE 3 | * https://github.com/webdevelopers-eu/jquery-template 4 | * 5 | * author Daniel Sevcik 6 | * copyright 2016 Daniel Sevcik 7 | * since 2016-07-11 08:57:48 UTC 8 | * 9 | * Replace variables according to rules specified in @z-var 10 | * attribute. Optionaly clone the element before replacing variables. 11 | * Removes attribute 'template'. 12 | * 13 | * $(templ).template(VARS); 14 | * 15 | * VARS - object or array of objects or multidimensional object 16 | * 17 | * Syntax: 18 | * ...... 20 | * ... 21 | * ... 22 | * ... 23 | * 24 | * The HTML

…

A

Z

Some Name Comes Here

Name

From Something to Nothing1 18 |

0.000

0.000