{"action":"opened","issue":{"url":"https://api.github.com/repos/jsstyles/jss/issues/59","labels_url":"https://api.github.com/repos/jsstyles/jss/issues/59/labels{/name}","comments_url":"https://api.github.com/repos/jsstyles/jss/issues/59/comments","events_url":"https://api.github.com/repos/jsstyles/jss/issues/59/events","html_url":"https://github.com/jsstyles/jss/issues/59","id":70552637,"number":59,"title":"Fully re-usable components","user":{"login":"serapath","id":1771897,"avatar_url":"https://avatars.githubusercontent.com/u/1771897?v=3","gravatar_id":"","url":"https://api.github.com/users/serapath","html_url":"https://github.com/serapath","followers_url":"https://api.github.com/users/serapath/followers","following_url":"https://api.github.com/users/serapath/following{/other_user}","gists_url":"https://api.github.com/users/serapath/gists{/gist_id}","starred_url":"https://api.github.com/users/serapath/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/serapath/subscriptions","organizations_url":"https://api.github.com/users/serapath/orgs","repos_url":"https://api.github.com/users/serapath/repos","events_url":"https://api.github.com/users/serapath/events{/privacy}","received_events_url":"https://api.github.com/users/serapath/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-04-24T00:51:32Z","updated_at":"2015-04-24T00:51:32Z","closed_at":null,"body":"A component consists of:\r\n* html\r\n* jss\r\n* javascript\r\n\r\nIf I write a component, it's very likely, that it'll use `assets` (may that be `fonts`, `images`, `videos`, `audio`, or something else). Now let's assume I create a component `fancy-menu`.\r\n\r\nSo I do:\r\n`$> npm install fancy-button --save`\r\n\r\nMy current component is called `special-page`.\r\nNow in my current component, I'd like to use:\r\n```js\r\nvar fancyButton = require('fancy-button');\r\nvar menustructure = require('./menustructure.json');\r\nvar container = document.querySelector('#menuvar');\r\nvar remoteControlAPI = fancyButton(container, menustructure);\r\n```\r\nThis will add the fancy-menu to the dom container initializing it with whatever my `menustructure.json` contains. In addition, I return some kind of API, with which my current component can \"remote control\" the fancy-button.\r\n\r\nSo far so good. The problem is, the `HTML` and maybe the `CSS/JSS` of my `fancy-button` component use **assets**.\r\n\r\nI continue now to build my `special-page` with:\r\n`$> browserify specialpage.js > bundle.js`\r\nWhen I load my `index.html`, it fails to load all the assets contained in the installed `fancy-button` component, because they are somewhere nested in `node_modules` and so the asset paths are wrong.\r\n\r\nIs there a solution for that already? If not, how to approach this problem?\r\n\r\n\r\n\r\n"}}