Is it possible to have hyphen in classname?

[hth2]

I would like to be able to write eg: hiccup [div.abc-def "xyz"], however it seems the classname must be an id. A workaround is to write hiccup [div {className="abc-def"} "xyz"], but it's not so convenient and readable as the css selector version.

[lantiga]

I think it's a good idea, I'll implement it asap.

[lantiga]

Done

[hth2]

wow, that was FAST! many thanks.

[hth2]

sorry I got a hiccup to get this working. I did the following steps:

(1) update: sudo npm update -g react.hiccup

(2) verify: that it's the same version as on github: 0.1.3

(3) create a minimal test file test.hiccup.js: rclass Test = { render: function() { return hiccup [div.a-b "123"] } }

(4) compile: sjs -m react.hiccup/macros -o test.js test.hiccup.js

and got the following error:

/usr/lib/node_modules/sweet.js/lib/parser.js:4982 throw e$1654; ^ Error: Line 1: Unexpected token , [... , - , b , 123 ...] at throwError$929 (/usr/lib/node_modules/sweet.js/lib/parser.js:1887:26) at throwUnexpected$931 (/usr/lib/node_modules/sweet.js/lib/parser.js:1939:9) at parsePrimaryExpression$950 (/usr/lib/node_modules/sweet.js/lib/parser.js:2295:16) at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48 at trackLeftHandSideExpressionAllowCall$1032 (/usr/lib/node_modules/sweet.js/lib/parser.js:4227:74) at parsePostfixExpression$959 (/usr/lib/node_modules/sweet.js/lib/parser.js:2381:25) at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48 at parseUnaryExpression$960 (/usr/lib/node_modules/sweet.js/lib/parser.js:2430:16) at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48 at parseUnaryExpression$960 (/usr/lib/node_modules/sweet.js/lib/parser.js:2418:25)

shell returned 8

Could you please give a hint what I am doing wrong?

thank you

[lantiga]

Argh, I forgot to copy the file under src/ to macro/index.js upon release. My bad. For now just do sjs -m react.hiccup/src/react_hiccup.sjs -o test.js test.hiccup.js Later I'll fix the release.

On Feb 10, 2014 5:48 PM, "hanthethanh" notifications@github.com wrote:

sorry I got a hiccup to get this working. I did the following steps:

(1) update: sudo npm update -g react.hiccup

(2) verify: that it's the same version as on github: 0.1.3

(3) create a minimal test file test.hiccup.js: rclass Test = { render: function() { return hiccup [div.a-b "123"] } }

(4) compile: sjs -m react.hiccup/macros -o test.js test.hiccup.js

and got the following error:

/usr/lib/node_modules/sweet.js/lib/parser.js:4982 throw e$1654; ^ Error: Line 1: Unexpected token , [... , - , b , 123 ...] at throwError$929 (/usr/lib/node_modules/sweet.js/lib/parser.js:1887:26) at throwUnexpected$931 (/usr/lib/node_modules/sweet.js/lib/parser.js:1939:9) at parsePrimaryExpression$950 (/usr/lib/node_modules/sweet.js/lib/parser.js:2295:16) at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48 at trackLeftHandSideExpressionAllowCall$1032 (/usr/lib/node_modules/sweet.js/lib/parser.js:4227:74) at parsePostfixExpression$959 (/usr/lib/node_modules/sweet.js/lib/parser.js:2381:25) at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48 at parseUnaryExpression$960 (/usr/lib/node_modules/sweet.js/lib/parser.js:2430:16) at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48 at parseUnaryExpression$960 (/usr/lib/node_modules/sweet.js/lib/parser.js:2418:25)

shell returned 8

Could you please give a hint what I am doing wrong?

thank you

Reply to this email directly or view it on GitHub.

[hth2]

sorry, my fault. New to npm, didn't know about its cache.

[hth2]

cleaning cache didn't help, but your hint came to the rescue. thanks again.

[lantiga]

ok, deployed new version on npm, it should work as expected. Thanks

[hth2]

sorry to bring up another issue:

this works: hiccup[div.abc-def "123"] this doesn't work: hiccup[div.abc--def "123"]

why two dashes? Since it's the convention used by BEM

[lantiga]

Uh ok... I didn't know about BEM. I'll reopen the issue.

[hth2]

can you please also support this: hiccup [div.calendar-view-4weeks "abc"] ? thanks.

[lantiga]

Will do asap.

[lantiga]

So, I just released a new version with better parsing of selectors, e.g. -- and numbers are allowed.

Turns out though that sweet.js refuses to parse things like "somestring", like "-4weeks". For some reason "-a4weeks", "-a4" "-4" work fine.

Anway, I'll investigate the issue in sweet.js, if that gets fixed react.hiccup will start working with any combination.

[hth2]

I have updated and now even this doesn't work: hiccup [ div.abc-def "123"]. I tried with sjs -m react.hiccup/src/react_hiccup.sjs as well, same error. Any hint please?

[lantiga]

This is odd: react.hiccup version 0.1.6.

sjs -m react.hiccup/macros foo.js

with foo.js containing

hiccup [div.abc-def 123] => React.DOM.div({ className: ' abc-def' }, 123);

hiccup [div.abc-def "123"] => React.DOM.div({ className: ' abc-def' }, '123');

[hth2]

I think I might miss something obvious, however could not figure it out. Here is what I get on my machine:

` $ cat js/test.hiccup.js rclass Test = { render: function() { return hiccup [div.abc-def 123] } }

$ sjs -m react.hiccup/macros -o js/test.js js/test.hiccup.js

/usr/lib/node_modules/sweet.js/lib/parser.js:4982 throw e$1654; ^ Error: Line 1: Unexpected token , [... , - , def , 123 ...] at throwError$929 (/usr/lib/node_modules/sweet.js/lib/parser.js:1887:26) at throwUnexpected$931 (/usr/lib/node_modules/sweet.js/lib/parser.js:1939:9) at parsePrimaryExpression$950 (/usr/lib/node_modules/sweet.js/lib/parser.js:2295:16) at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48 at trackLeftHandSideExpressionAllowCall$1032 (/usr/lib/node_modules/sweet.js/lib/parser.js:4227:74) at parsePostfixExpression$959 (/usr/lib/node_modules/sweet.js/lib/parser.js:2381:25) at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48 at parseUnaryExpression$960 (/usr/lib/node_modules/sweet.js/lib/parser.js:2430:16) at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48 at parseUnaryExpression$960 (/usr/lib/node_modules/sweet.js/lib/parser.js:2418:25)

$ head /usr/lib/node_modules/react.hiccup/package.json { "name": "react.hiccup", "version": "0.1.6", "description": "Hiccup notation for React.js", "repository": { "type": "git", "url": "https://github.com/lantiga/react.hiccup.git" }, "keywords": [ "notation", `

Do you have a suggestion what I should try? Thanks.

[hth2]

update: I tried different versions to see the difference:

0.1.3: error 0.1.4: OK 0.1.5: OK 0.1.6: error

but 0.1.5 doesn't support -- yet

[lantiga]

Thank you for checking. I think I nailed the issue: it was due to pattern matching for the rclass macro not working correctly with the new hiccup macro version. I just released 0.1.7, it's working for me. Can you try and see what happens? Thanks

[hth2]

ah, another useful hint, thanks. I have updated to 0.1.7, same error as 0.1.6, but now I leave out the rclass macro and use React.createClass instead. -- works fine now. I figured out the convenience brought by rclass is not worthwhile the trouble it causes.

[lantiga]

Can you try out updating the package now?

[hth2]

the rclass macro works now, however these selectors don't:

        [div.a__b--c 123]      // ERROR
        [div.a_b-c 123]         // ERROR
        [div.a_b-c 123]         // ERROR
        [div.a-b-c 123]         // ERROR

[lantiga]

The following works for me, can you provide a sample that demonstrates the error you are getting?

rclass Test = { render: function() { return hiccup [div.a-b-c 123] } }

rclass Test = { render: function() { return hiccup [div.a__b--c 123] } }

[hth2]

head /usr/lib/node_modules/react.hiccup/package.json
{
  "name": "react.hiccup",
  "version": "0.1.8",
  "description": "Hiccup notation for React.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/lantiga/react.hiccup.git"
  },
  "keywords": [
    "notation",
cat js/test.hiccup.js
var Test = React.createClass({
    render: function() {
    return hiccup 
        [div
            [div.a__b--c 123]    // ERROR
        ]
    }
});
sjs  -m react.hiccup/macros -o js/test.js js/test.hiccup.js

/usr/lib/node_modules/sweet.js/lib/parser.js:4982
            throw e$1654;
                  ^
Error: Line 3: Unexpected token ,
[... , -- , c , 123 ...]
    at throwError$929 (/usr/lib/node_modules/sweet.js/lib/parser.js:1887:26)
    at throwUnexpected$931 (/usr/lib/node_modules/sweet.js/lib/parser.js:1939:9)
    at parsePrimaryExpression$950 (/usr/lib/node_modules/sweet.js/lib/parser.js:2295:16)
    at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48
    at trackLeftHandSideExpressionAllowCall$1032 (/usr/lib/node_modules/sweet.js/lib/parser.js:4227:74)
    at parsePostfixExpression$959 (/usr/lib/node_modules/sweet.js/lib/parser.js:2381:25)
    at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48
    at parseUnaryExpression$960 (/usr/lib/node_modules/sweet.js/lib/parser.js:2430:16)
    at /usr/lib/node_modules/sweet.js/lib/parser.js:4316:48
    at parseUnaryExpression$960 (/usr/lib/node_modules/sweet.js/lib/parser.js:2406:25)

[lantiga]

Ok thanks a lot

[hth2]

for now I stick with the following:

• use React.createClass instead of rclass
• don't use --
• use version 0.1.5

since this combination seems to work.

[lantiga]

Ok, I think I got it working, the errors you were getting were due to the nesting, which I wasn't testing correctly for. Do you have time for another test?

[hth2]

sure. It seems to work now with -- and __ combined; I haven't tested the rclass macro since I have decided to go without it. thanks for your prompt support.

[lantiga]

Good. Thanks for the interaction!