Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andreytkachenko/activejade
ActiveJade is a variant of original Jade(http://jade-lang.com) project aimed to work properly with MVVM frameworks
https://github.com/andreytkachenko/activejade
Last synced: about 1 month ago
JSON representation
ActiveJade is a variant of original Jade(http://jade-lang.com) project aimed to work properly with MVVM frameworks
- Host: GitHub
- URL: https://github.com/andreytkachenko/activejade
- Owner: andreytkachenko
- License: mit
- Created: 2015-11-14T16:37:49.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-02-09T18:22:50.000Z (almost 9 years ago)
- Last Synced: 2024-08-09T13:13:56.961Z (5 months ago)
- Language: JavaScript
- Homepage: http://activejade.org/
- Size: 203 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ActiveJade
[activejade.org](http://www.activejade.org)
The main difference with original Jade is that this version is targeted to work in tandem with MVVM framework like AngularJs.
The compiler compiles jade template into JS file instead HTML, and you can link this template on your page and use it as a regular AngularJs's template.
## What Have Done and What Is In Progress
### Done
1. Tags, Attributes, Text, Expressions
2. Mixin Declare, Mixin Call
3. Decorators
4. Include
5. IfElse, While, ForIn, CaseWhen
6. References and promises
7. Except Statement
### In Progress
1. Extends, Blocks
2. Filters, IncludeFilters
3. AngularJs ecosystem integration
4. Tests: port from original Jade and tests to check proper DOM manipulations
### Plans on Future
1. `break` and `continue` statements
## Differences Between Original Jade
1. It's parser and lexer completely rewritten based on `Jison`
2. It has extended JavaScript expression syntax (since in is parsing JavaScript as well):
* array range generator operator `..` (i.e. `7..9` => `[ 7, 8, 9 ]`)
* euclid operator `?.` (i.e. `a.b?.c` => `(a.b||{}).c` )
* slicing operator `[:]` (i.e. `[ 1, 2, 3, 4 ][1:2]` => `[ 2, 3 ]`)
* different behavior of `var` operator
* may have `#element-id` to access to element by id:
```
div#test-1
... some code
- #test-1.innerHTML = #test-n.innerHTML
... some code
div#test-n
```
3. It has decorators(can be applied to tags or mixin calls):
```
div
@On('click', a += 1)
div
span Test
```
Or
```
div
@On('click', a += 1)
+awesome-button("green") Press Me
```
4. `for` loop:
* may have `if` clause:
```
div
for k, chbx in checkboxes if chbx.checked
span #{k} is checked
```
* may have `else` clause:
```
div
for v in test
a= v
else
div No Items
```
5. Statement operator allowing only `var` and `delete` operations (originally was allowed plain JavaScript)
6. `include` changes:
* optional `with` statement (for isolating scope)
* source parameter may be an expression (`extend` will have it too)
7. `for`, `if`, `while`, `case` and `include` statements may have optional `except` statement:
```
if test
div OK
except
wait
div The promise is still not resolved!
error msg
div Oh! Promise was rejected with message: #{msg}
```
For `include` the `except` statement has different syntax:
```
include promise
wait
div Please wait...
```
## Standard Decorators
1. `@on` - to attach event listener to tag element