{"action":"created","issue":{"url":"https://api.github.com/repos/streetmix/streetmix/issues/1148","repository_url":"https://api.github.com/repos/streetmix/streetmix","labels_url":"https://api.github.com/repos/streetmix/streetmix/issues/1148/labels{/name}","comments_url":"https://api.github.com/repos/streetmix/streetmix/issues/1148/comments","events_url":"https://api.github.com/repos/streetmix/streetmix/issues/1148/events","html_url":"https://github.com/streetmix/streetmix/pull/1148","id":364218329,"node_id":"MDExOlB1bGxSZXF1ZXN0MjE4NDYwMjEz","number":1148,"title":"Migrate CSS/JS bundling to Parcel","user":{"login":"louh","id":2553268,"node_id":"MDQ6VXNlcjI1NTMyNjg=","avatar_url":"https://avatars3.githubusercontent.com/u/2553268?v=4","gravatar_id":"","url":"https://api.github.com/users/louh","html_url":"https://github.com/louh","followers_url":"https://api.github.com/users/louh/followers","following_url":"https://api.github.com/users/louh/following{/other_user}","gists_url":"https://api.github.com/users/louh/gists{/gist_id}","starred_url":"https://api.github.com/users/louh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/louh/subscriptions","organizations_url":"https://api.github.com/users/louh/orgs","repos_url":"https://api.github.com/users/louh/repos","events_url":"https://api.github.com/users/louh/events{/privacy}","received_events_url":"https://api.github.com/users/louh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-09-26T21:27:09Z","updated_at":"2018-09-28T15:34:15Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/streetmix/streetmix/pulls/1148","html_url":"https://github.com/streetmix/streetmix/pull/1148","diff_url":"https://github.com/streetmix/streetmix/pull/1148.diff","patch_url":"https://github.com/streetmix/streetmix/pull/1148.patch"},"body":"See previous discussion in #711 and #785, where we've expressed a desire to use Webpack to replace our current processes for bundling CSS and JavaScript. While it was a nice thought, the challenge of porting an existing large application to Webpack is probably why we haven't really been able to begin that effort. Enter [Parcel](https://parceljs.org/), which promises super-fast build times with zero config.\r\n\r\nWith this PR, we port our old process to Parcel. Browserify, Gulp, and their respective plugins have been removed as dependencies.\r\n\r\nThis also follows up https://github.com/streetmix/streetmix/pull/1147, where certain dependencies related to CSS building were not upgraded because our old homegrown Gulp-based system was no longer compatible with the latest versions of those dependencies.\r\n\r\n### What's changed?\r\n\r\n- Parcel now watches our JS and CSS, so we no longer manually set up `chokidar` for file watching and `supervisor` to shutdown and restart the server when files change. Now, the server always remains up (unless it crashes due to errors) -- this should cut down dramatically on the \"waiting for it to rebuild\" part of development.\r\n- Parcel uses a cache so rebuilds of changes should happen _much_ quicker.\r\n- Parcel also provides hot-module-reloading. Changes to CSS will now appear instantly in the browser without a reload. Changes to JS will also be injected into the browser without a true reload, but this is buggy; see \"Gotchas\" section.\r\n- We use the `main.js` entry point which also imports our CSS; there are no longer separate CSS and JS build pipelines. Unlike Webpack, CSS is automatically \"extracted\" into its own file.\r\n- Because Parcel's bundler automatically hashes asset filenames, and moves them to the `build` directory, files that no longer needed to be in the `./public` directory have moved to `./assets`. Ideally, we'd organize all bundle-able assets in the same place. Right now, we can put fonts there without a problem, but we shouldn't do this with images just yet until we know for certain no one else is looking for them in the `public` folder.\r\n- Parcel creates two new directories in the project root that should not be committed to the repository: `./.cache` and `./build`. If you run into issues, sometimes removing these folders and letting them regenerate can solve your problem.\r\n\r\n### Smaller tweaks\r\n\r\n- `main.js` also now uses a timestamp in its filename for cache-busting.\r\n- Improve timestamp matching.\r\n- Broken/missing asset urls now return the HTTP 404 status code instead of just the 404 page with a 200 status code.\r\n- Removed certain Babel plugins that are now automatically part of the `preset-env` package.\r\n\r\n### Gotchas\r\n\r\nBecause we have completely replaced our old system, and Parcel is somewhat of a black-box, it is possible that the resulting bundles are not exactly like the files produced by our current system. We should make sure that Parcel's output still maintains supported browser compatibility.\r\n\r\nSecondly, the hot-module reloading for JavaScript is still quite buggy, because Streetmix code has never been designed in a way that allows it to \"refresh\" in place without a true reload. Remounting the application causes the street view to position incorrectly, for instance (it's the same reason why we use multiple `<IntlProvider />` components so that when locale changes, it won't destroy the street view). Other side effects include not cleaning up event listeners properly, and network requests that continue running. Basically, remounting Streetmix this way leaks memory like crazy. One would still need to periodically close/reload the browser tab to counteract this, but I assume it's still a much faster process than waiting for the server to reload and rebuild from scratch.\r\n\r\n### The future\r\n\r\n- I've decided to leave the cleanup work needed to fix hot-module-reloading (HMR) Javascript until later. I'm confident that it's possible to do, but let's first make sure Parcel is what we want.\r\n- Parcel supports TypeScript; we should be able to revisit #1084.\r\n- We should be able to also replace the current process for bundling SVG assets (segments, icons, etc) with Parcel, which would remove a lot of the current complexity with that process.\r\n- I'm really looking forward to tree-shaking which should, ideally, make our JS bundle even smaller. Unfortunately, it's experimental in Parcel and broken for us right now.\r\n\r\n### Request for review\r\n\r\nPlease let me know:\r\n\r\n- Is this working for you?\r\n- Does this actually work faster than the old system?\r\n- Any other thoughts, comments, etc.\r\n\r\nThanks!\r\n\r\ncc @joerodrig \r\n\r\n"},"comment":{"url":"https://api.github.com/repos/streetmix/streetmix/issues/comments/425475031","html_url":"https://github.com/streetmix/streetmix/pull/1148#issuecomment-425475031","issue_url":"https://api.github.com/repos/streetmix/streetmix/issues/1148","id":425475031,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNTQ3NTAzMQ==","user":{"login":"mkong0216","id":17012261,"node_id":"MDQ6VXNlcjE3MDEyMjYx","avatar_url":"https://avatars2.githubusercontent.com/u/17012261?v=4","gravatar_id":"","url":"https://api.github.com/users/mkong0216","html_url":"https://github.com/mkong0216","followers_url":"https://api.github.com/users/mkong0216/followers","following_url":"https://api.github.com/users/mkong0216/following{/other_user}","gists_url":"https://api.github.com/users/mkong0216/gists{/gist_id}","starred_url":"https://api.github.com/users/mkong0216/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkong0216/subscriptions","organizations_url":"https://api.github.com/users/mkong0216/orgs","repos_url":"https://api.github.com/users/mkong0216/repos","events_url":"https://api.github.com/users/mkong0216/events{/privacy}","received_events_url":"https://api.github.com/users/mkong0216/received_events","type":"User","site_admin":false},"created_at":"2018-09-28T15:34:15Z","updated_at":"2018-09-28T15:34:15Z","author_association":"COLLABORATOR","body":"@louh CSS changes looks good to me locally. However, I was testing around and when I added a console.log in `componentDidUpdate` for `StreetView.jsx` it broke the view. \r\n\r\n![image](https://user-images.githubusercontent.com/17012261/46218279-358c1280-c312-11e8-8cbb-5b5c2777f345.png)\r\n\r\nIf I resize the window it fixes itself though...\r\nThat was the first thing I tried so I don't know if any other changes will break the view as well.\r\n"}}
{"actor":{"display_login":"mkong0216"}}