Skip to content

Commit

Permalink
Merge pull request #4 from Abstractn/dev
Browse files Browse the repository at this point in the history
Merge of pull request "rework/1.2" from dev
  • Loading branch information
Abstractn authored May 26, 2024
2 parents fb7fca3 + d5a07fa commit 6a1e8ca
Show file tree
Hide file tree
Showing 4 changed files with 305 additions and 119 deletions.
20 changes: 20 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
Changelog
=========

### 1.2.0

* [NEW] Created changelog file
* [FIX] Fixed parsing core logic management (actually did not work at all as intended before)
* Fixed simple parameter parsing when value path uses dot notation
* Fixed condition statement's operator evaluation results
* Fixed cycle statement parsing and printing
* Resolved "nested statement parsing" bug comments
* [FIX] Updated README.md with clearer code examples and notes about module limitations

### 1.0.0

* Forwarded version for stable codebase milestone

### 0.1.0

* Initial port from non-module files
52 changes: 44 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ AbsTemplate.build({
},

// the output node to where the compiled template needs to be printed
printTargetNode: appNode,
printTargetNode: document.querySelector('.dynamic-template-container'),

// the position relative to `printTargetNode`
printMethod: AbsTemplatePrintMethod.BEFORE_END,
Expand All @@ -66,29 +66,36 @@ Starting with an object defined from our code:

```typescript
const myData = {
value: 'hello world'
greeting: 'Hello',
user: {
firstName: 'John',
lastName: 'Doe'
}
};
```

use it in HTML with

```html
<template id="my-data-template">
<span>{{value}}</span>
<span>{{greeting}} {{user.firstName}} {{user.lastName}}</span>
</template>
```

and after compilation it will turn into

```html
<span>hello world</span>
<span>Hello John Doe</span>
```


### 2) Conditions

`{{if condition}}...{{/if}}` is the syntax that can decide wether the content of the condition will be printed or not.
This is the list of all available operators:
`{{if condition}}...{{/if}}` and `{{if condition}}...{{else}}...{{/if}}` are the syntaxes that can decide wether the content of the condition will be printed or not for the first case and print either one content block or the other depending on the condition.

The accepted format for conditions are both a single variable that will be implicitly interpreted as a boolean check (much like a common `if()` from JS/TS code) or a set of two variables to evaluate with an operator in between them.

The list of all available operators is the following:
- `==`
- `==`
- `===`
Expand Down Expand Up @@ -133,7 +140,9 @@ status:
<span>true</span>
```

A single variable passed as condition to the IF statement will be interpreted as implicit boolean much like a common IF from code.
> NOTE: full condition syntax strictly accepts only the following format: `<parameter_1> <operator> <parameter_2>`.
> Using parenthesis for grouping and/or multiple operators will not work.


### 3) Loops
Expand Down Expand Up @@ -196,7 +205,34 @@ And this is how the list turned out after parsing:
</ol>
```

An important note to point out is that if you use an identifier for the list iterable that is already present inside the first level of the data object, the object outside of the list will not be accessible since the identifiers overlap and `forEach`'s scope takes priority.

```typescript
const myData = {
item: 'OUTSIDE LIST',
list: [ 'INSIDE LIST' ]
}
```

```html
1. {{item}}

{{forEach item in list}}
2. {{item}}
{{/forEach}}

3. {{item}}
```

The output will be:
```html
1. OUTSIDE LIST
2. INSIDE LIST
3. OUTSIDE LIST
```



## KNOWN BUGS

- Same statements consecutively inside each other are probably not parsed correctly
- ~~Same statements consecutively inside each other are probably not parsed correctly~~ Fixed in 1.2
20 changes: 12 additions & 8 deletions src/abs-template.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,21 @@ export interface AbsTemplateBuildConfig {
}
export declare class AbsTemplate {
private static readonly CONSOLE_PREFIX;
private static readonly PARAMETER_PATTERN;
private static readonly CONDITION_STATEMENT_PATTERN;
private static readonly CONDITION_PATTERN;
private static readonly CYCLE_STATEMENT_PATTERN;
private static readonly VALUE_STATEMENT_OPEN;
private static readonly VALUE_PATTERN_STRING;
private static readonly CONDITION_STATEMENT_OPEN;
private static readonly CONDITION_STATEMENT_PATTERN_STRING;
private static readonly CONDITION_PATTERN_STRING;
private static readonly CONDITION_STATEMENT_CLOSE;
private static readonly CYCLE_STATEMENT_OPEN;
private static readonly CYCLE_STATEMENT_PATTERN_STRING;
private static readonly CYCLE_STATEMENT_CLOSE;
static build(config: AbsTemplateBuildConfig): void;
private static getContentFromTemplateNode;
private static print;
private static getParseMatches;
private static parseParameters;
private static parseConditions;
private static parseCycles;
private static parseValue;
private static parseCondition;
private static parseCycle;
private static parse;
static compile(template: string, data: AbsTemplateData): string;
private static _utils;
Expand Down
Loading

0 comments on commit 6a1e8ca

Please sign in to comment.