{"action":"created","issue":{"url":"https://api.github.com/repos/arackaf/customize-cra/issues/2","repository_url":"https://api.github.com/repos/arackaf/customize-cra","labels_url":"https://api.github.com/repos/arackaf/customize-cra/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/arackaf/customize-cra/issues/2/comments","events_url":"https://api.github.com/repos/arackaf/customize-cra/issues/2/events","html_url":"https://github.com/arackaf/customize-cra/issues/2","id":365790874,"node_id":"MDU6SXNzdWUzNjU3OTA4NzQ=","number":2,"title":"[Discussion] Global API and ecosystem","user":{"login":"jgoux","id":1443499,"node_id":"MDQ6VXNlcjE0NDM0OTk=","avatar_url":"https://avatars0.githubusercontent.com/u/1443499?v=4","gravatar_id":"","url":"https://api.github.com/users/jgoux","html_url":"https://github.com/jgoux","followers_url":"https://api.github.com/users/jgoux/followers","following_url":"https://api.github.com/users/jgoux/following{/other_user}","gists_url":"https://api.github.com/users/jgoux/gists{/gist_id}","starred_url":"https://api.github.com/users/jgoux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jgoux/subscriptions","organizations_url":"https://api.github.com/users/jgoux/orgs","repos_url":"https://api.github.com/users/jgoux/repos","events_url":"https://api.github.com/users/jgoux/events{/privacy}","received_events_url":"https://api.github.com/users/jgoux/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-02T08:27:22Z","updated_at":"2018-10-02T11:55:10Z","closed_at":null,"author_association":"NONE","body":"Hello,\r\n\r\nAs we're starting again from scratch, it would be a good time to think about the API we want to provide to rewired CRA consumers.\r\n\r\nI'd like `customize-cra` to take a more functional approach so we just have to import a bunch of `addThing()`, provide their specifics options, and we're good to go! 🚀 \r\n\r\nThis is what I have in mind : \r\n\r\n```js\r\n// fantasy organization xD\r\nconst { override } = require('@react-app-rewired/core')\r\nconst addReactHotLoader = require('@react-app-rewired/add-react-hot-loader')\r\nconst addEmotion = require('@react-app-rewired/add-emotion')\r\nconst addBundleVisualizer= require('@react-app-rewired/add-bundle-visualizer')\r\n\r\nmodule.exports = override(\r\n  addReactHotLoader , /* no options */\r\n  addEmotion(), /* can have options, here none given so falling back to emotion's defaults */\r\n  addBundleVisualizer({ reportFilename: 'bundle.html' })\r\n)\r\n```\r\n\r\nThe `override` function is an helper providing the (config, env) to all the functions in the pipeline.\r\n\r\nThe `addX` functions have to respect two criterias : \r\n- Take their specific options and return a function accepting `(config, [env])`. If they don't have any options then you can just write the `(config, [env])` directly.\r\n- Always return the altered `config` object.\r\n\r\nAnd that's it!\r\n\r\nThe implementation of `override` is : \r\n```js\r\nconst { flow, curry } = require('lodash')\r\n\r\nfunction override(...pipeline) {\r\n  return function(config, env) {\r\n    return flow(\r\n      ...pipeline.map(f => {\r\n        const curried = curry(f, 2)\r\n        return curried(curry.placeholder, env)\r\n      })\r\n    )(config)\r\n  }\r\n}\r\n```\r\n\r\nAnd here is an example of \"addX\" library for `webpack-bundle-visualizer` : \r\n```js\r\nconst { /* re-exported from lodash for convenience */ merge } = require('@react-app-rewired/core')\r\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin\r\n\r\nmodule.exports = function addBundleVisualizer(options) {\r\n  const defaultOptions = {\r\n    analyzerMode: 'static',\r\n    reportFilename: 'report.html'\r\n  }\r\n  return function(config) {\r\n    config.plugins.push(\r\n      new BundleAnalyzerPlugin(merge(defaultOptions, options))\r\n    )\r\n    return config\r\n  }\r\n}\r\n```\r\n\r\nAlso, installing `@react-app-rewired/core` would be enough to get started with the `scripts` in `package.json` (either we include `react-app-rewired` or we restart from scratch...)\r\n\r\nWhat do you think? 💡 "},"comment":{"url":"https://api.github.com/repos/arackaf/customize-cra/issues/comments/426245762","html_url":"https://github.com/arackaf/customize-cra/issues/2#issuecomment-426245762","issue_url":"https://api.github.com/repos/arackaf/customize-cra/issues/2","id":426245762,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNjI0NTc2Mg==","user":{"login":"benedyktdryl","id":576068,"node_id":"MDQ6VXNlcjU3NjA2OA==","avatar_url":"https://avatars1.githubusercontent.com/u/576068?v=4","gravatar_id":"","url":"https://api.github.com/users/benedyktdryl","html_url":"https://github.com/benedyktdryl","followers_url":"https://api.github.com/users/benedyktdryl/followers","following_url":"https://api.github.com/users/benedyktdryl/following{/other_user}","gists_url":"https://api.github.com/users/benedyktdryl/gists{/gist_id}","starred_url":"https://api.github.com/users/benedyktdryl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benedyktdryl/subscriptions","organizations_url":"https://api.github.com/users/benedyktdryl/orgs","repos_url":"https://api.github.com/users/benedyktdryl/repos","events_url":"https://api.github.com/users/benedyktdryl/events{/privacy}","received_events_url":"https://api.github.com/users/benedyktdryl/received_events","type":"User","site_admin":false},"created_at":"2018-10-02T11:55:10Z","updated_at":"2018-10-02T11:55:10Z","author_association":"NONE","body":"This looks awesome. Let me know if you need any help.\r\n\r\nIMO methods passed to `override` should be always executed, not passed as reference to method, so we will have always same API, means we can avoid confusion. Also I would call module with related methods `utils` as `core` sounds like something internal.\r\n\r\nWhat do you think?\r\n\r\n```javascript\r\nconst { override } = require('@react-app-rewired/utils')\r\n\r\nconst addReactHotLoader = require('@react-app-rewired/add-react-hot-loader')\r\nconst addEmotion = require('@react-app-rewired/add-emotion')\r\nconst addBundleVisualizer = require('@react-app-rewired/add-bundle-visualizer')\r\n\r\nmodule.exports = override(\r\n  addReactHotLoader() , /* no options, still, same API - we are passing result of execution */\r\n  addEmotion(), /* can have options, here none given so falling back to emotion's defaults */\r\n  addBundleVisualizer({ reportFilename: 'bundle.html' })\r\n)\r\n```"}}
{"actor":{"display_login":"benedyktdryl"}}