{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/3099","labels_url":"https://api.github.com/repos/facebook/react-native/issues/3099/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/3099/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/3099/events","html_url":"https://github.com/facebook/react-native/issues/3099","id":108709877,"number":3099,"title":"Implement require() properly","user":{"login":"mschwartz","id":329637,"avatar_url":"https://avatars.githubusercontent.com/u/329637?v=3","gravatar_id":"","url":"https://api.github.com/users/mschwartz","html_url":"https://github.com/mschwartz","followers_url":"https://api.github.com/users/mschwartz/followers","following_url":"https://api.github.com/users/mschwartz/following{/other_user}","gists_url":"https://api.github.com/users/mschwartz/gists{/gist_id}","starred_url":"https://api.github.com/users/mschwartz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mschwartz/subscriptions","organizations_url":"https://api.github.com/users/mschwartz/orgs","repos_url":"https://api.github.com/users/mschwartz/repos","events_url":"https://api.github.com/users/mschwartz/events{/privacy}","received_events_url":"https://api.github.com/users/mschwartz/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/facebook/react-native/labels/packager","name":"packager","color":"eb6420"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-09-28T17:47:25Z","updated_at":"2015-09-28T21:54:39Z","closed_at":null,"body":"require() and import are really important features that deserve some love, IMO.\r\n\r\nForcing us to use relative paths in all our import/require statements is not ideal.  It works only ok for the react demos that have a handful of files all in the root.  For example, the Movie example in this repo:\r\n\r\n![image](https://cloud.githubusercontent.com/assets/329637/10143223/eb27011a-65cb-11e5-96a8-9f1facdb2143.png)\r\n\r\nThe require on line 19 works because you've basically hardcoded require to search node_modules/ where react-native exists.\r\n\r\nThe require on line 26 forces you to put a ./ on the beginning of the path, and it works, but not ideally as I said.\r\n\r\nConsider you want to actually break up this file: https://github.com/facebook/react-native/blob/master/Examples/Movies/SearchScreen.js\r\n\r\nOne file per component, even if they're private (for now).  Reusability is the goal, no?\r\n\r\nIf you move this file into a directory called \"components/\", now you have to go and edit the require() statement to reflect the new path.\r\n\r\nThings get really ugly if you want to organize your project into a more complex structure.  Consider search/component1, search/component2, details/movie1, details/movie2, and so on.  Now you're relative paths, if they are sharing code, are ../search/whatever, ../details/whatever.  Moving these files around to reorganize your project now means you have to deduce what the new relative paths must be and you have to edit all those files.\r\n\r\nI suggest you think about implementing a robust require() implementation.  I suggest at least the following features:\r\n\r\n### require.paths array\r\n\r\nThis is an array of search paths used by require.  It searches the paths in the order of the array.  It is allowed by the CommonJS require specification.\r\n\r\nExample:\r\n\r\n```javascript\r\n// In your index.ios.js at the very top:\r\nrequire.paths.unshift('search');\r\nrequire.paths.unshift('movies');\r\n```\r\n\r\nNow you can simply require('component1) ANYWHERE in your source code and search/component1 will be used.  You can move your files around without having to edit your require() statements in every one.  Just change the require.paths.\r\n\r\n### Support directories\r\n\r\nIf you require('foo') and foo is a directory, you should:\r\n\r\n1. Look for index.js and use that to locate the module requested. \r\n2. THEN Look for package.json and use that to locate the module requested.\r\n3. THEN look for bower.json and use that to locate the module requested.\r\n4. THEN look for the module requested by filename (e.g. require('foo').bar means foo/bar.js)\r\n\r\n## Benefits\r\n\r\nIf you implement these changes, people will be easily able to share components via mechanisms other than npm.  You will easily be able to copy components from one project to another without having to refactor the require() statements in each.\r\n\r\nPlease consider this.\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/143884737","html_url":"https://github.com/facebook/react-native/issues/3099#issuecomment-143884737","issue_url":"https://api.github.com/repos/facebook/react-native/issues/3099","id":143884737,"user":{"login":"nevir","id":41373,"avatar_url":"https://avatars.githubusercontent.com/u/41373?v=3","gravatar_id":"","url":"https://api.github.com/users/nevir","html_url":"https://github.com/nevir","followers_url":"https://api.github.com/users/nevir/followers","following_url":"https://api.github.com/users/nevir/following{/other_user}","gists_url":"https://api.github.com/users/nevir/gists{/gist_id}","starred_url":"https://api.github.com/users/nevir/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nevir/subscriptions","organizations_url":"https://api.github.com/users/nevir/orgs","repos_url":"https://api.github.com/users/nevir/repos","events_url":"https://api.github.com/users/nevir/events{/privacy}","received_events_url":"https://api.github.com/users/nevir/received_events","type":"User","site_admin":false},"created_at":"2015-09-28T21:54:39Z","updated_at":"2015-09-28T21:54:39Z","body":"Take a look at the ES7+ spec loader, too (System.js will layer on top of it): https://github.com/whatwg/loader"}}