{"action":"created","issue":{"url":"https://api.github.com/repos/riot/riot/issues/1889","repository_url":"https://api.github.com/repos/riot/riot","labels_url":"https://api.github.com/repos/riot/riot/issues/1889/labels{/name}","comments_url":"https://api.github.com/repos/riot/riot/issues/1889/comments","events_url":"https://api.github.com/repos/riot/riot/issues/1889/events","html_url":"https://github.com/riot/riot/issues/1889","id":165903066,"number":1889,"title":"Detect yield content (conditional transclusion) and transform yield data","user":{"login":"babakness","id":2024235,"avatar_url":"https://avatars.githubusercontent.com/u/2024235?v=3","gravatar_id":"","url":"https://api.github.com/users/babakness","html_url":"https://github.com/babakness","followers_url":"https://api.github.com/users/babakness/followers","following_url":"https://api.github.com/users/babakness/following{/other_user}","gists_url":"https://api.github.com/users/babakness/gists{/gist_id}","starred_url":"https://api.github.com/users/babakness/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/babakness/subscriptions","organizations_url":"https://api.github.com/users/babakness/orgs","repos_url":"https://api.github.com/users/babakness/repos","events_url":"https://api.github.com/users/babakness/events{/privacy}","received_events_url":"https://api.github.com/users/babakness/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-07-16T01:54:20Z","updated_at":"2016-07-16T20:27:18Z","closed_at":null,"body":"Hey guys,\r\n\r\nHow can I detect if content is passed to a component using transclusion?\r\n\r\nFor example we have\r\n\r\n```html\r\n\r\n<foo>\r\n<div if={opts.bar}>Do something</div>\r\n<h1><yield/> is awesome<h1>\r\n</foo>\r\n\r\n<!-- first example -->\r\n<foo bar=\"{false}\">This</foo>\r\n\r\n<!-- second example, how do I do this -->\r\n<foo>{content}</foo>\r\n```\r\n\r\nExample:\r\n\r\nhttp://plnkr.co/edit/qozlEC?p=preview\r\n\r\nI'd like `This is awesome` to render in the first example but not `is awesome` in the second example.\r\n\r\nFurthermore, I'd like to be able to analyze the content of \"yield\" before mount, perhaps parse it or transform it, before mount or update.\r\n\r\nFor example, suppose we have\r\n\r\n```html\r\n<convert-to-markdown>\r\n# This is Markdown!\r\nLorem ipsum dolor:\r\n* bananas\r\n* avocados\r\n* cherries\r\n</convert-to-markdown>\r\n```\r\n\r\nThe component can received the  included content, transform it into HTML, and render it out. That would be super cool? Already possible?\r\n\r\n#discussion \r\n#question \r\n#feature "},"comment":{"url":"https://api.github.com/repos/riot/riot/issues/comments/233149413","html_url":"https://github.com/riot/riot/issues/1889#issuecomment-233149413","issue_url":"https://api.github.com/repos/riot/riot/issues/1889","id":233149413,"user":{"login":"babakness","id":2024235,"avatar_url":"https://avatars.githubusercontent.com/u/2024235?v=3","gravatar_id":"","url":"https://api.github.com/users/babakness","html_url":"https://github.com/babakness","followers_url":"https://api.github.com/users/babakness/followers","following_url":"https://api.github.com/users/babakness/following{/other_user}","gists_url":"https://api.github.com/users/babakness/gists{/gist_id}","starred_url":"https://api.github.com/users/babakness/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/babakness/subscriptions","organizations_url":"https://api.github.com/users/babakness/orgs","repos_url":"https://api.github.com/users/babakness/repos","events_url":"https://api.github.com/users/babakness/events{/privacy}","received_events_url":"https://api.github.com/users/babakness/received_events","type":"User","site_admin":false},"created_at":"2016-07-16T20:27:18Z","updated_at":"2016-07-16T20:27:18Z","body":"@GianlucaGuarini Feel free to ask me to clarify. I am describing two considerations:\r\n\r\n1. Detect if content is included by transclusion, ie `<div if={yield}... >`\r\n2. The ability to process content passed by transclusion before it is rendered. i.e., convert to markdown, syntax highlighting, etc.\r\n\r\n```html\r\n<markdown>\r\n# header\r\nList:\r\n* A\r\n* B\r\n* C\r\n</markdown>\r\n```\r\nOr\r\n```c\r\n<webgl>\r\n#ifdef GL_ES\r\nprecision mediump float;\r\n#endif\r\n\r\nuniform float time;\r\nuniform vec2 mouse;\r\nuniform vec2 resolution;\r\n\r\nvoid main( void ) {\r\n    vec2 position = ( gl_FragCoord.xy / resolution.xy ) - vec2(.5);\r\n    float angle = atan(position.y / position.x) + sign(position.x) * 3.1415 * 0.5;\r\n    // see, this looks almost like atan2\r\n    gl_FragColor = vec4( vec3 (0.5 + angle / 3.1415), 1.0 );\r\n    float rotx = sin(angle * 0.5) * position.x - cos(angle * 0.5) * position.y;\r\n    gl_FragColor = vec4( vec3 (0.5 + 0.5 * cos(rotx * 700.0)), 1.0 );\r\n</webgl>\r\n```\r\n\r\nand of course the possibility to include via expression `<three-js >{foo}</three-js>`"}}
{"actor":{"display_login":"babakness"}}