{"action":"created","issue":{"url":"https://api.github.com/repos/marko-js/marko/issues/90","labels_url":"https://api.github.com/repos/marko-js/marko/issues/90/labels{/name}","comments_url":"https://api.github.com/repos/marko-js/marko/issues/90/comments","events_url":"https://api.github.com/repos/marko-js/marko/issues/90/events","html_url":"https://github.com/marko-js/marko/issues/90","id":89054375,"number":90,"title":"Proposal: Replace HTML parser with a new parser that recognizes attribute types","user":{"login":"patrick-steele-idem","id":978214,"avatar_url":"https://avatars.githubusercontent.com/u/978214?v=3","gravatar_id":"","url":"https://api.github.com/users/patrick-steele-idem","html_url":"https://github.com/patrick-steele-idem","followers_url":"https://api.github.com/users/patrick-steele-idem/followers","following_url":"https://api.github.com/users/patrick-steele-idem/following{/other_user}","gists_url":"https://api.github.com/users/patrick-steele-idem/gists{/gist_id}","starred_url":"https://api.github.com/users/patrick-steele-idem/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/patrick-steele-idem/subscriptions","organizations_url":"https://api.github.com/users/patrick-steele-idem/orgs","repos_url":"https://api.github.com/users/patrick-steele-idem/repos","events_url":"https://api.github.com/users/patrick-steele-idem/events{/privacy}","received_events_url":"https://api.github.com/users/patrick-steele-idem/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":34,"created_at":"2015-06-17T15:46:12Z","updated_at":"2015-07-30T06:27:01Z","closed_at":null,"body":"Currently, Marko is using an HTML parser. An HTML parser treats every attribute value as a `String` type regardless of how it is written.\r\n\r\nFor example, with an HTML parser the following lines are all equivalent:\r\n\r\n```xml\r\n<my-component foo=123/>\r\n<my-component foo=\"123\"/>\r\n<my-component foo='123'/>\r\n```\r\n\r\nAs a result of this limitation, Marko relies on custom tag schemas to associate a type with an attribute value or the developer must use the `${<javascript-expression}` syntax. Tag schemas are great for documentation but they are a pain to maintain and they make usage of a custom tag ambiguous. Not to mention, the `${<javascript-expression}` syntax can only be used with attributes that have a `string` type (not `expression`, `boolean`, etc.).\r\n\r\nThe author of the `<my-component>` tag can separately declare the type for an attribute and developer viewing a template wouldn't know the attribute type unless you consulted the tag schema:\r\nIt would be great if the parser used by Marko treated _all_ attribute values as _JavaScript expressions_. Spaces will end an attribute value unless the space is in a quoted string or within a parenthesis/square brackets/curly braces block. Finally, we would support `${<javascript-expression>}` usage within [ES6 Template strings](http://tc39wiki.calculist.org/es6/template-strings/) (i.e. strings \"quoted\" using backticks). The following illustrates what is being proposed.\r\n\r\n```xml\r\n<my-component number=1/>\r\n<my-component variable=name/>\r\n<my-component complex-expression=1+2/>\r\n<my-component complex-expression-with-spaces=(a + b)/>\r\n<my-component simple-string=\"hello\"/>\r\n<my-component simple-string='hello'/>\r\n<my-component dynamic-string=`hello ${name}`/>\r\n<my-component string-concatenated=(\"hello \"+name)/>\r\n<my-component boolean=true/>\r\n<my-component array=[1, 2, 3]/>\r\n<my-component object={hello: 'world'}/>\r\n<my-component function-call=data.foo()/>\r\n<my-component complex-function-call=(data.foo() + data.bar())/>\r\n```\r\n\r\nThoughts? Concerns?"},"comment":{"url":"https://api.github.com/repos/marko-js/marko/issues/comments/126200767","html_url":"https://github.com/marko-js/marko/issues/90#issuecomment-126200767","issue_url":"https://api.github.com/repos/marko-js/marko/issues/90","id":126200767,"user":{"login":"onemrkarthik","id":7464488,"avatar_url":"https://avatars.githubusercontent.com/u/7464488?v=3","gravatar_id":"","url":"https://api.github.com/users/onemrkarthik","html_url":"https://github.com/onemrkarthik","followers_url":"https://api.github.com/users/onemrkarthik/followers","following_url":"https://api.github.com/users/onemrkarthik/following{/other_user}","gists_url":"https://api.github.com/users/onemrkarthik/gists{/gist_id}","starred_url":"https://api.github.com/users/onemrkarthik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/onemrkarthik/subscriptions","organizations_url":"https://api.github.com/users/onemrkarthik/orgs","repos_url":"https://api.github.com/users/onemrkarthik/repos","events_url":"https://api.github.com/users/onemrkarthik/events{/privacy}","received_events_url":"https://api.github.com/users/onemrkarthik/received_events","type":"User","site_admin":false},"created_at":"2015-07-30T06:27:01Z","updated_at":"2015-07-30T06:27:01Z","body":"For conditional operators, how about something like this: \r\n`<div if(x > 5)></div>` instead of `<div if=(x > 5)></div>`\r\n\r\nFor iterators, \r\n`<ul><li for(color in colors)></li></ul>` instead of `<ul><li for=\"color in colors\"></ul>`\r\n\r\n"}}