Doesn't work with new Angular 2 attribute syntax

[chrisnicola]

Basically something like this:

div([value]="boundValue")

Throws a syntax error saying it is expecting an attribute. I'm assuming that is because SLM/SLIM expect [] to be used to surround attribute lists. I see no reason this can't be supported however.

[chrisnicola]

So I've done some more comprehensive testing and found the following do not work:

Does not work

• *ngFor="#item of list'
• [] syntax for input bindings
• () syntax for output bindings

Does work

• *ngIf='something'
• template="ngFor #item of list"
• bind-thing="otherThing" syntax for input bindings
• on-thing="doThing()" syntax for output bindings

Specifically it seems the *ngFor syntax only breaks because it is followed by a value that starts contains spaces. You will find the the following statements compile fine (although they don't do anything):

• *ngFor='#item'
• *ngFor='anything

For the time being there are reasonable workarounds for everything, (in fact I may even prefer the bind- and on- syntaxes). However I do feel it is important to be able to support Angular 2's templates.

[yury]

@chrisnicola thank you for your investigation and issue report.

Will take a look at this issue this weekend.

[chrisnicola]

@yury, no problem, let me know if I can help with any testing.

[yury]

Released v0.5.1 in which you can remove '[]' delimiters.

Do you use express?

app.engine('slm', require('slm').expressOpts({
   attrDelims: { '(': ')' }
});
app.set 'view engine', 'slm'

[Systho]

Do you have a workaround for the ngFor syntax ?

I know it's not usually a good idea to add a +1 comment, but I would like to say that I'm strongly interested in using slm with angular2.

[chrisnicola]

@yury no I just use webpack

[chrisnicola]

@Systho yes as mentioned above just write this: template="ngFor #item of list"

[westonganger]

Rather than trying to get a grip on all this messing with new javascript html syntaxes, It would be convenient to have something we can wrap around the attributes so that they are not processed at all and just kept as is.

For example it could be something like this:

.my-item#custom-item{ #selectedItem *ngFor='item in items' (click)='selectItem()' }

(Note: I did not look to see if this syntax is already used for something else but you get the idea)

[chrisnicola]

IIRC curly braces are already a supported delimiters for attributes, in fact you can use any brace style interchangibly. But yes it could make sense to have one of the brace styles allow for more flexible attribute names. I would support this approach.

[chrisnicola]

Out of curiousity what is Ruby SLM doing for this?

[westonganger]

I made the exact same suggestion on the angular issues over on the ruby slim repo. Haven't got a reply yet.

[chrisnicola]

@westonganger can you link to it?

[chrisnicola]

They may want to wait until it is no longer RC status, particularly considering the excessive level of changes going on during the RC.

[westonganger]

Here is the link to the issue on the SLIM repo: slim-template/slim#683

They could wait sure, but honestly have you seen the syntax for all these client side js frameworks? There is a lot of weird stuff out there. I just don't think its feasible to keep updating with every crazy html change any random framework decides to make.

[chrisnicola]

@yury removing [] delimiters doesn't work as angular has both [] and () in the attribute names.

It turns out that with the ruby version of slim you can do this by specifying only {} as delimiters. Another option is to make the attributes strings.

[chrisnicola]

Also @yury even using { attrDelims: '[': ']' } it still has an error with the syntax.

ERROR in ./webpack/modules/wealthbar/rewards/example/template.slim
Module build failed: Error: Expected attribute
  /Users/chrisnicola/src/wealthbar/webpack/modules/wealthbar/rewards/example/template.slim, Line 3, Column 28
  button.button.button-small([click]="addReward(false)") Add Reward
                             ^

  at Parser.p._syntaxError (/Users/chrisnicola/src/wealthbar/node_modules/slm/lib/parser.js:691:9)
  at Parser.p._parseAttributes (/Users/chrisnicola/src/wealthbar/node_modules/slm/lib/parser.js:523:12)

[sintro]

For me, *ngFor="#item of list" case works out of box (on Windows). So, only next thing do not work for me:

• ()
• []
• [()]
• #attribute

The others, even with complex values cases (like "print('Hello world');" works fine.

So, may be it is ok to do something like @westonganger suggested here #20 (comment), but there are not very many cases to implement, I think, even without any single-wrap blocks.
But how about Prs? I can see, there are unmerged PR in Rubys Slim for angular2 supporting (using exactly { ... }` wrapping block to process everything without errors): slim-template/slim#739

Also I can see, that there were problems especially with splat operator, so things like *ngIf were the most hard cases, but in this implementation of Slim this works fine already :)

[sintro]

Ok, I did this fork and made some changes, so every noted attributes are work now:
https://github.com/sintro/slm

It does not use { } blocks, just type angular2 attributes like regular ones.

I am using this git in brunch plugin: https://github.com/sintro/slm-brunch and I dont think there is any reason to publish module in NPM, but I hope that this modules maintainers will notice that and add same (or better) functionality in it.