{"action":"created","issue":{"url":"https://api.github.com/repos/hyperapp/hyperapp/issues/569","repository_url":"https://api.github.com/repos/hyperapp/hyperapp","labels_url":"https://api.github.com/repos/hyperapp/hyperapp/issues/569/labels{/name}","comments_url":"https://api.github.com/repos/hyperapp/hyperapp/issues/569/comments","events_url":"https://api.github.com/repos/hyperapp/hyperapp/issues/569/events","html_url":"https://github.com/hyperapp/hyperapp/issues/569","id":290720376,"number":569,"title":"Change component signature from (props, children) to (props) and props.children","user":{"login":"frenzzy","id":640669,"avatar_url":"https://avatars2.githubusercontent.com/u/640669?v=4","gravatar_id":"","url":"https://api.github.com/users/frenzzy","html_url":"https://github.com/frenzzy","followers_url":"https://api.github.com/users/frenzzy/followers","following_url":"https://api.github.com/users/frenzzy/following{/other_user}","gists_url":"https://api.github.com/users/frenzzy/gists{/gist_id}","starred_url":"https://api.github.com/users/frenzzy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/frenzzy/subscriptions","organizations_url":"https://api.github.com/users/frenzzy/orgs","repos_url":"https://api.github.com/users/frenzzy/repos","events_url":"https://api.github.com/users/frenzzy/events{/privacy}","received_events_url":"https://api.github.com/users/frenzzy/received_events","type":"User","site_admin":false},"labels":[{"id":715880805,"url":"https://api.github.com/repos/hyperapp/hyperapp/labels/API","name":"API","color":"893bd3","default":false},{"id":745517151,"url":"https://api.github.com/repos/hyperapp/hyperapp/labels/BREAKING","name":"BREAKING","color":"d6204a","default":false},{"id":522275188,"url":"https://api.github.com/repos/hyperapp/hyperapp/labels/DISCUSSION","name":"DISCUSSION","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2018-01-23T06:13:10Z","updated_at":"2018-02-15T15:47:27Z","closed_at":null,"author_association":"MEMBER","body":"Current component signature:\r\n```js\r\nconst Component = (props, children) => (\r\n  <div {...props}>{children}</div>\r\n)\r\n```\r\nDesirable component signature:\r\n```js\r\nconst Component = (props) => (\r\n  <div {...props}>{props.children}</div>\r\n)\r\n// or even\r\nconst Component = (props) => (\r\n  <div {...props} />\r\n)\r\n```\r\n**Props**\r\n- You may omit the unused argument if your component uses only `children`, ref #567\r\n  ```js\r\n  const Component = (props) => (\r\n    <div>{props.children}</div>\r\n  )\r\n  ```\r\n  vs\r\n  ```js\r\n  const Component = (_, children) => (\r\n    <div>{children}</div>\r\n  )\r\n  ```\r\n- It is easier to use memoization because you don't need to compare children separately from other props\r\n  ```js\r\n  const Component = (props) => (\r\n    <h1 title={props.title}>Hello {props.children}</h1>\r\n  )\r\n\r\n  const MemoizedComponent = memoize(\r\n    Component,\r\n    // by default (props, nextProps) => !shallowEqual(props, nextProps)\r\n  )\r\n  const DeepMemoizedComponent = memoize(\r\n    Component,\r\n    (props, nextProps) => !_.deepEqual(props, nextProps)\r\n  )\r\n  const CustomMemoizedComponent = memoize(\r\n    Component,\r\n    (props, nextProps) => props.children !== nextProps.children\r\n  )\r\n  ```\r\n  vs\r\n  ```js\r\n  const Component = (props, children) => (\r\n    <h1 title={props.title}>Hello {children}</h1>\r\n  )\r\n\r\n  const MemoizedComponent = memoize(\r\n    Component,\r\n    // by default (props, nextProps, children, nextChildren) => !shallowEqual(props, nextProps) || children !== nextChildren\r\n  )\r\n  const DeepMemoizedComponent = memoize(\r\n    Component,\r\n    (props, nextProps, children, nextChildren) => !_.deepEqual(props, nextProps) || children !== nextChildren\r\n  )\r\n  const CustomMemoizedComponent = memoize(\r\n    Component,\r\n    (_, _, children, nextChildren) => children !== nextChildren\r\n  )\r\n  ```\r\n- Using `children` prop is valid and it will not throw an error:\r\n  `TypeError: Cannot assign to read only property 'children' of object '#<HTMLHeadingElement>'`\r\n- It will be easier to add something new in the future (or via HOA)\r\n  ```js\r\n  const ComponentWithContext = (props, context) => (\r\n    <div>{props.children}</div>\r\n  ) // Context for SSR aka context in React.js\r\n  const ComponentWithConnect = (props, store, actions) => (\r\n    <div>{props.children}</div>\r\n  )  // aka React-Redux Connect\r\n  // etc.\r\n  ```\r\n\r\n**Cons**\r\n- It is a breaking change and requires at least Hyperapp v2 release"},"comment":{"url":"https://api.github.com/repos/hyperapp/hyperapp/issues/comments/365967963","html_url":"https://github.com/hyperapp/hyperapp/issues/569#issuecomment-365967963","issue_url":"https://api.github.com/repos/hyperapp/hyperapp/issues/569","id":365967963,"user":{"login":"JorgeBucaran","id":56996,"avatar_url":"https://avatars1.githubusercontent.com/u/56996?v=4","gravatar_id":"","url":"https://api.github.com/users/JorgeBucaran","html_url":"https://github.com/JorgeBucaran","followers_url":"https://api.github.com/users/JorgeBucaran/followers","following_url":"https://api.github.com/users/JorgeBucaran/following{/other_user}","gists_url":"https://api.github.com/users/JorgeBucaran/gists{/gist_id}","starred_url":"https://api.github.com/users/JorgeBucaran/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JorgeBucaran/subscriptions","organizations_url":"https://api.github.com/users/JorgeBucaran/orgs","repos_url":"https://api.github.com/users/JorgeBucaran/repos","events_url":"https://api.github.com/users/JorgeBucaran/events{/privacy}","received_events_url":"https://api.github.com/users/JorgeBucaran/received_events","type":"User","site_admin":false},"created_at":"2018-02-15T15:47:27Z","updated_at":"2018-02-15T15:47:27Z","author_association":"OWNER","body":"@frenzzy Can you file a PR with this?\r\n\r\nI am thinking something like:\r\n\r\n```js\r\nattributes = attributes || { children: children }\r\n\r\n...\r\n```"}}
{"actor":{"display_login":"JorgeBucaran"}}