{"action":"created","issue":{"url":"https://api.github.com/repos/metal/metal.js/issues/178","repository_url":"https://api.github.com/repos/metal/metal.js","labels_url":"https://api.github.com/repos/metal/metal.js/issues/178/labels{/name}","comments_url":"https://api.github.com/repos/metal/metal.js/issues/178/comments","events_url":"https://api.github.com/repos/metal/metal.js/issues/178/events","html_url":"https://github.com/metal/metal.js/issues/178","id":195334548,"number":178,"title":"Feature request: Add a `willRender` method to (Soy)Components","user":{"login":"yuchi","id":646609,"avatar_url":"https://avatars.githubusercontent.com/u/646609?v=3","gravatar_id":"","url":"https://api.github.com/users/yuchi","html_url":"https://github.com/yuchi","followers_url":"https://api.github.com/users/yuchi/followers","following_url":"https://api.github.com/users/yuchi/following{/other_user}","gists_url":"https://api.github.com/users/yuchi/gists{/gist_id}","starred_url":"https://api.github.com/users/yuchi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yuchi/subscriptions","organizations_url":"https://api.github.com/users/yuchi/orgs","repos_url":"https://api.github.com/users/yuchi/repos","events_url":"https://api.github.com/users/yuchi/events{/privacy}","received_events_url":"https://api.github.com/users/yuchi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2016-12-13T18:42:35Z","updated_at":"2016-12-14T13:07:44Z","closed_at":null,"body":"In JSX Components there’s a simple moment to compute values to be used in the actual rendering logic:\r\n\r\n```js\r\nclass MyButton extends JSXComponent {\r\n  render() {\r\n    const className = this.props.primary ? 'btn btn-primary' : 'btn';\r\n    return <button class={ className }>Hallo</button>;\r\n  }\r\n}\r\n```\r\n\r\nThis is completely missing in Soy components, and that means that components’ properties more or less need to be the ones you use in the Soy template.\r\nSince in Soy is not possible to call functions to manipulate the data, this makes difficult to have properties that depend on the value of another one.\r\n\r\nExamples include:\r\n\r\n- filtered, split or manipulated arrays;\r\n- transform a file size (in bytes) in a human readable string (“23GB”)\r\n\r\n- - -\r\n\r\nThe proposal is to add a new `willRender` method (similar to React’s [`componentWillUpdate`](https://facebook.github.io/react/docs/react-component.html#componentwillupdate)) that can be used to update the properties passed down to the template.\r\n\r\n```soy\r\n{template .render}\r\n  <span>The file is {$humanReadableFileSize} big</span>\r\n{/template}\r\n```\r\n```js\r\nclass FileInfo extends Component {\r\n  willRender() {\r\n    return {\r\n      \"humanReadableFileSize\": humanize(this.fileSize)\r\n    };\r\n  }\r\n}\r\nFileInfo.STATE = {\r\n  \"fileSize\": {\r\n    value: 0\r\n  }\r\n};\r\nSoy.register(FileInfo, templates);\r\n```"},"comment":{"url":"https://api.github.com/repos/metal/metal.js/issues/comments/267029265","html_url":"https://github.com/metal/metal.js/issues/178#issuecomment-267029265","issue_url":"https://api.github.com/repos/metal/metal.js/issues/178","id":267029265,"user":{"login":"yuchi","id":646609,"avatar_url":"https://avatars.githubusercontent.com/u/646609?v=3","gravatar_id":"","url":"https://api.github.com/users/yuchi","html_url":"https://github.com/yuchi","followers_url":"https://api.github.com/users/yuchi/followers","following_url":"https://api.github.com/users/yuchi/following{/other_user}","gists_url":"https://api.github.com/users/yuchi/gists{/gist_id}","starred_url":"https://api.github.com/users/yuchi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yuchi/subscriptions","organizations_url":"https://api.github.com/users/yuchi/orgs","repos_url":"https://api.github.com/users/yuchi/repos","events_url":"https://api.github.com/users/yuchi/events{/privacy}","received_events_url":"https://api.github.com/users/yuchi/received_events","type":"User","site_admin":false},"created_at":"2016-12-14T13:07:44Z","updated_at":"2016-12-14T13:07:44Z","body":"### `prepareState`"}}
{"actor":{"display_login":"yuchi"}}