{"action":"created","issue":{"url":"https://api.github.com/repos/geelen/jspm-server/issues/1","labels_url":"https://api.github.com/repos/geelen/jspm-server/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/geelen/jspm-server/issues/1/comments","events_url":"https://api.github.com/repos/geelen/jspm-server/issues/1/events","html_url":"https://github.com/geelen/jspm-server/issues/1","id":67134543,"number":1,"title":"JSPM/SystemJS live-reloading hot-swapping dev server?","user":{"login":"geelen","id":23264,"avatar_url":"https://avatars.githubusercontent.com/u/23264?v=3","gravatar_id":"","url":"https://api.github.com/users/geelen","html_url":"https://github.com/geelen","followers_url":"https://api.github.com/users/geelen/followers","following_url":"https://api.github.com/users/geelen/following{/other_user}","gists_url":"https://api.github.com/users/geelen/gists{/gist_id}","starred_url":"https://api.github.com/users/geelen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/geelen/subscriptions","organizations_url":"https://api.github.com/users/geelen/orgs","repos_url":"https://api.github.com/users/geelen/repos","events_url":"https://api.github.com/users/geelen/events{/privacy}","received_events_url":"https://api.github.com/users/geelen/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-04-08T13:47:38Z","updated_at":"2015-04-22T18:18:42Z","closed_at":null,"body":"Ok, this is me just starting an issue to discuss with @guybedford about where this might fit in to the JSPM landscape. It didn't seem ready to add something against jspm-cli or systemjs yet because it's really early days, but I do have something working and I'd like to get feedback.\r\n\r\nThis project is a fork of [live-server](https://github.com/tapio/live-server) which I've been using for all my dev with JSPM. It has the best collection of defaults I've seen for any 0-configuration server, and doesn't build upon tiny-lr or anything, so I found the code really easy to get going with (thanks @tapio!)\r\n\r\nAnyway, on to the proof-of-concept!\r\n\r\nThe main change from live-server is the behaviour [here](https://github.com/geelen/jspm-server/commit/25d3f5b4f912b5974315f296167d42a6b17c52f5?diff=unified#diff-168726dbe96b3ce427e7fedce31bb0bcL118), where now I'm actually passing through the paths of the files that change, rather than deciding whether to 'reload css' or 'reload the whole page' on the server.\r\n\r\nThat logic has now moved into [ChangeHandler](https://github.com/geelen/jspm-server/blob/6caec516c8533b49e2659f654bf210887a25e8b7/lib/change-handler.js), which uses `System._loader.modules` to figure out what's been loaded, and what plugin it used. It then loads the plugin and sees if a flag `reloadable` is set. Since my CSS plugin uses a side-effect to insert the CSS into `<head>`, I can simply call `System.load` (with a cache-busted URL) and cause the CSS to be reloaded.\r\n\r\nOf course, I had to actually set my plugin up to work that way: [post-css.js](https://github.com/geelen/typeslab/blob/6c00c74ca7ac3b496e67384ebac915c7ea5dcea4/src/post-css.js). I've changed this now to only ever add one `<link>` tag to the HEAD, but use a Map (which is ordered) to keep track of the source files so far loaded. When any new ones are translated, add them to the map (if they haven't been seen before they'll go at the end, if they have they'll take their older version's place) and regenerate the one `<link>` tag with a new URL. This means you can define variables in one file and use them in another, since `postcss` is being called on the full concatenated source each time.\r\n\r\nIn the end, I got a lot further than I thought I would have, because live-server had done so much already. Designing my CSS plugin to handle updates wasn't too bad, and actually bought me that variable support between two imports: [defined with this import](https://github.com/geelen/typeslab/blob/f6a9f704d91668ae12ad66a3f223d7eff04ffada/src/lib/main.js#L2) then [used with this one](https://github.com/geelen/typeslab/blob/f6a9f704d91668ae12ad66a3f223d7eff04ffada/src/lib/components/frame.jsx#L3)\r\n\r\nAll in all, this server + plugin combo gives me **super freaking fast** CSS feedback, which was the whole goal. I'd love to extend this to support React hot-reloading too, but I understand that a lot less at the moment.\r\n\r\nWhat do you think? Is there a better way to figure out what's loaded than `System._loader.modules`? And a better way to force a reload than using a cache busting query-string?"},"comment":{"url":"https://api.github.com/repos/geelen/jspm-server/issues/comments/95289872","html_url":"https://github.com/geelen/jspm-server/issues/1#issuecomment-95289872","issue_url":"https://api.github.com/repos/geelen/jspm-server/issues/1","id":95289872,"user":{"login":"geelen","id":23264,"avatar_url":"https://avatars.githubusercontent.com/u/23264?v=3","gravatar_id":"","url":"https://api.github.com/users/geelen","html_url":"https://github.com/geelen","followers_url":"https://api.github.com/users/geelen/followers","following_url":"https://api.github.com/users/geelen/following{/other_user}","gists_url":"https://api.github.com/users/geelen/gists{/gist_id}","starred_url":"https://api.github.com/users/geelen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/geelen/subscriptions","organizations_url":"https://api.github.com/users/geelen/orgs","repos_url":"https://api.github.com/users/geelen/repos","events_url":"https://api.github.com/users/geelen/events{/privacy}","received_events_url":"https://api.github.com/users/geelen/received_events","type":"User","site_admin":false},"created_at":"2015-04-22T18:18:42Z","updated_at":"2015-04-22T18:18:42Z","body":"Published! Check out instructions on https://github.com/geelen/typeslab and see jspm-server in action!"}}