{"action":"created","issue":{"url":"https://api.github.com/repos/muut/riotjs/issues/245","labels_url":"https://api.github.com/repos/muut/riotjs/issues/245/labels{/name}","comments_url":"https://api.github.com/repos/muut/riotjs/issues/245/comments","events_url":"https://api.github.com/repos/muut/riotjs/issues/245/events","html_url":"https://github.com/muut/riotjs/issues/245","id":55783785,"number":245,"title":"Using literal in conditional class objects breaks undefined var wrapping","user":{"login":"Mikechaos","id":274813,"avatar_url":"https://avatars.githubusercontent.com/u/274813?v=3","gravatar_id":"","url":"https://api.github.com/users/Mikechaos","html_url":"https://github.com/Mikechaos","followers_url":"https://api.github.com/users/Mikechaos/followers","following_url":"https://api.github.com/users/Mikechaos/following{/other_user}","gists_url":"https://api.github.com/users/Mikechaos/gists{/gist_id}","starred_url":"https://api.github.com/users/Mikechaos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Mikechaos/subscriptions","organizations_url":"https://api.github.com/users/Mikechaos/orgs","repos_url":"https://api.github.com/users/Mikechaos/repos","events_url":"https://api.github.com/users/Mikechaos/events{/privacy}","received_events_url":"https://api.github.com/users/Mikechaos/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":{"login":"aurri","id":80772,"avatar_url":"https://avatars.githubusercontent.com/u/80772?v=3","gravatar_id":"","url":"https://api.github.com/users/aurri","html_url":"https://github.com/aurri","followers_url":"https://api.github.com/users/aurri/followers","following_url":"https://api.github.com/users/aurri/following{/other_user}","gists_url":"https://api.github.com/users/aurri/gists{/gist_id}","starred_url":"https://api.github.com/users/aurri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aurri/subscriptions","organizations_url":"https://api.github.com/users/aurri/orgs","repos_url":"https://api.github.com/users/aurri/repos","events_url":"https://api.github.com/users/aurri/events{/privacy}","received_events_url":"https://api.github.com/users/aurri/received_events","type":"User","site_admin":false},"milestone":null,"comments":3,"created_at":"2015-01-28T17:00:36Z","updated_at":"2015-03-12T15:13:27Z","closed_at":"2015-03-12T10:22:12Z","body":"If you try use conditional class as so :\r\n`<hr class=\"{ hidden: opts.type === 'asset' }\" />`\r\n\r\nYou get a syntax error when Riot evaluates it.\r\nExpanding the expression results into \r\n`[ (function(v){try{v=d.opts.type}finally{return v}}).call(d) === '(function(v){try{v=d.asset'}finally{return v}}).call(d)?\"hidden\":\"\",].join(\" \")`\r\n\r\nThis part `=== '(function(v){try{v=d.asset'}` is in fault, the quotations aren't handled properly.\r\n\r\nTo be valid, it should expand into something like so :\r\n`[ (function(v){try{v=d.opts.type}finally{return v}}).call(d) === (function(v){try{v='asset'}finally{return v}}).call(d)?\"hidden\":\"\",].join(\" \")`\r\n\r\nI started fiddling with the wrap function so it would always return bracketed arguments (always `d[var]` instead of `d.var`), but it causes other problems (namely, using reserved keyword like `continue` in a tag, `this.continue = function () { ... }`, expands as `d[continue]` and provokes an `Unexpected token continue` exception.\r\n\r\nThen I took a few step back and tried changing this [regex](https://github.com/muut/riotjs/blob/master/riot.js#L233) :\r\n\r\n`\"opts.type === 'asset'\".match(/\\w[^,|& ]*/g)` => `[\"opts.type\", \"asset'\"]`\r\n\r\n`\"opts.type === 'asset'\".match(/'?\\w[^,|& ]*/g)` => `[\"opts.type\", \"'asset'\"]`\r\n\r\nIt now gets properly wrap as => `(function(v){try{v='asset'}finally{return v}}).call(d)`\r\n\r\nI'll be trying the fix for some time, as I most likely expect to run into some other issues as this bit touches so much code.\r\nThere is probably a better fix that I can figure out right now as I don't grasp the full extent of the expr function yet.\r\n\r\nIn the mean time, I'm simply wrapping it in a function call : \r\n```\r\n  <my-tag>\r\n    <hr class={ hidden: isAsset() } />\r\n  \r\n    this.isAsset = function () {return opts.type === 'asset'; }\r\n  <my-tag>\r\n```"},"comment":{"url":"https://api.github.com/repos/muut/riotjs/issues/comments/78499708","html_url":"https://github.com/muut/riotjs/issues/245#issuecomment-78499708","issue_url":"https://api.github.com/repos/muut/riotjs/issues/245","id":78499708,"user":{"login":"Mikechaos","id":274813,"avatar_url":"https://avatars.githubusercontent.com/u/274813?v=3","gravatar_id":"","url":"https://api.github.com/users/Mikechaos","html_url":"https://github.com/Mikechaos","followers_url":"https://api.github.com/users/Mikechaos/followers","following_url":"https://api.github.com/users/Mikechaos/following{/other_user}","gists_url":"https://api.github.com/users/Mikechaos/gists{/gist_id}","starred_url":"https://api.github.com/users/Mikechaos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Mikechaos/subscriptions","organizations_url":"https://api.github.com/users/Mikechaos/orgs","repos_url":"https://api.github.com/users/Mikechaos/repos","events_url":"https://api.github.com/users/Mikechaos/events{/privacy}","received_events_url":"https://api.github.com/users/Mikechaos/received_events","type":"User","site_admin":false},"created_at":"2015-03-12T15:13:27Z","updated_at":"2015-03-12T15:13:27Z","body":"Hey, thanks for the late reply! Hasn't been a pain but I still get the problem : \r\n\r\nThis : \r\n`<div class=\"container publisher-step {'hidden': opts.type === 'asset'}\">`\r\n\r\nExpands into : \r\n`(function(v){try{v=d.opts.asset}finally{return !v&&v!==0?\"\":v}}).call(d) !== '(function(v){try{v=asset'}finally{return !v&&v!==0?\"\":v}}).call(d)?\"hidden\":\"\"`\r\n\r\nWe can see the second part still messes up the quotes : ***'***(function(v){try{v=asset***'***}\r\nMaybe it's only in classes? I can't test extensively but I was able to reproduce it right away.\r\n\r\n@aurri Thanks!"}}