Use webpacker for bundling and transpiling javascript #484
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files.
- Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn.
All changes cherry-picked and squashed from decaffeinate branch
Remove jquery-rails gem because it's now managed with yarn
Now we can write es6 code in any .js file! All the coffeescript
has been converted into js.
Changes:
- Use es6 modules instead of globals. This is better encapsulation.
This results in the removal of `window.Refuge`. Instead, to use a
module, like Geocoder, just import it like this:
`import { Geocoder } from 'path/to/geocoder';`
|
Do we need to take |
|
We don't really need it. It's just a ruby wrapper around the system command https://github.com/stardust66/refugerestrooms/blob/c446173c6ca4e906ec4597bb4e4aae2db78be645/bin/yarn |
DeeDeeG
reviewed
Jun 14, 2018
There was a problem hiding this comment.
Okay, thanks @stardust66.
Once again, this presents us with a way to get rid of CoffeeScript files in favor of es6-era JavaScript.
And apparently we would still be serving transpiled, non-es6 JavaScript to our end-users (site visitors). So there's no worry about compatibility with older or peculiar browsers.
My take: Small upside but no downside. (Again, assuming we prefer es6 JavaScript to CoffeeScript). I don't know if I should be the one to merge this, since I rarely touch JavaScript files directly, but I have nothing personally against merging this should that be the direction folks decide they want to go.
|
I'm in favor of this. Looks like we need to resolve conflicts, and we have a few code climate issues, but I think this has a big upside. Makes it much easier for people who are not me to contribute. =) |
|
Whoops, I think I deleted your merge of (The Code Climate site had been tracking our I just went and set the website to track our I succeeded in bringing the codeclimate analysis back, but as mentioned I did also delete your commit.
Edit: I just re-did the merge myself, hope that's okay. I'll try to be more careful with force pushes, generally speaking. |
|
Updates the 'webpacker' branch to use Ruby 2.3.7
DeeDeeG
reviewed
Jun 14, 2018
There was a problem hiding this comment.
Looking into the Code Climate issues...
3 of the 5 are these similar functions that it wants these refactored in a more DRY way:
$('#ada_filter').click(function() {
if ($(this).hasClass("active")) {
$('.listItem.not_accessible').show();
} else {
$('.listItem.not_accessible').hide();We have this same function in restrooms.js for powering the ADA accessible filter button, as well as the, unisex, and diaper changing table filter buttons.
The we have these two "similar functions":
$(() => {
$.fn.initializeNewRestroomForm = function() { return new NewRestroomForm($(this)); };
$('.submit-new-bathroom-form').initializeNewRestroomForm();
});(from new.js) and:
$(() => {
$.fn.initializeSearch = function() { return new Search($(this)); };
$('.search-restrooms-form').initializeSearch();
});(from search.js)
I suspect these two "similar functions" don't need to be any more optimized, and we can dismiss these as "invalid" code warnings on the code climate site. or simply ignore them.
All that said, since I'm not such a big JS writer/reader, I don't know how big/little a deal either of these things is, so I leave it to the JS readers/writers to figure out.)
|
I think we can ignore those issues, This seems fine to merge as long as its functional. Thanks to both @stardust66 and @DeeDeeG for picking this up. |
|
Looks like this isn't building correctly to Heroku. |
|
Looks like Node Modules are not getting compiled and built to the tmp file. |
|
(Off-topic a bit) This PR just reminded me: I'm pretty sure our JS code isn't directly covered by a testing scheme yet. So CI isn't really helping us out there. Well, I mean, lots of the Ruby tests need the JS to be working to pass, but some JS code probably isn't tested? Maybe? Not sure now. |
|
rails/webpacker#739 This could be related. And you're correct, none of the JS code itself is strictly tested. |
|
Lots of people over at that issue are saying they needed to run some commands on the Heroku side of things: Optionally?:
Then:
|
|
I've updated the buildpacks on heroku. And am attempting to redeploy |
|
I did it via the CLI and the web app for heroku |
|
Still failing with the same error. |
|
You need to run I set up a similar instance on heroku to test this. |
|
Looks like it's working now. |
|
Seems to be working perfectly now. I'm happy to merge this. |
DeeDeeG
reviewed
Jun 14, 2018
| }, | ||
| "HEROKU_POSTGRESQL_CYAN_URL": { | ||
| "required": true | ||
| }, |
There was a problem hiding this comment.
Probably doesn't make a difference, but this looks duplicated.
"HEROKU_POSTGRESQL_CYAN_URL": {
"required": true
},
There was a problem hiding this comment.
good catch, we were missing a couple of these, and so they were not inheriting correctly.
|
BTW if this is squashed, I think @stardust66 will lose credit as a commit author. |
|
squashed commits show both authors; bd5ded8 |
|
I think it only shows: The author of the last commit in the series ("commit author") and whoever squashed and merged ("committer") not 100% sure of their algorithm for who is the commit author, but I've usually only see GitHub produce one commit author. Edit: I think. |
|
Alright, I can just do a regular merge commit. |
|
I'm not even sure if the underlying Git program can do multiple authors? Researching real quick. |
|
https://help.github.com/articles/creating-a-commit-with-multiple-authors/ We can go in and add this manually if needed, while doing a Edit: or normal merge, whatever works. |
|
Re-posting: I totally missed the later part of that article. It can all be done with the GitHub website's GUI
so |
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Jun 16, 2018
…s#484) Co-authored-by: Jason Chen <kbtpodifo@gmail.com> * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Jun 16, 2018
…s#484) Co-authored-by: Jason Chen <kbtpodifo@gmail.com> Co-authored-by: Teagan <tkwidmer@gmail.com> * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Jun 16, 2018
…s#484) Co-authored-by: Jason Chen <kbtpodifo@gmail.com> Co-authored-by: Teagan <tkwidmer@gmail.com> * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Jun 16, 2018
…s#484) * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry Co-authored-by: Jason Chen <kbtpodifo@gmail.com> Co-authored-by: Teagan <tkwidmer@gmail.com>
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Jun 16, 2018
…s#484) * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry Co-authored-by: Jason Chen <kbtpodifo@gmail.com> Co-authored-by: Teagan <tkwidmer@gmail.com>
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Jun 16, 2018
…s#484) * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry Co-authored-by: Teagan <tkwidmer@gmail.com>
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Aug 8, 2018
…s#484) Co-authored-by: Jason Chen <kbtpodifo@gmail.com> * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Aug 8, 2018
…s#484) Co-authored-by: Jason Chen <kbtpodifo@gmail.com> * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Oct 15, 2018
…s#484) Co-authored-by: Jason Chen <kbtpodifo@gmail.com> * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry
DeeDeeG
pushed a commit
to DeeDeeG/refugerestrooms
that referenced
this pull request
Nov 3, 2018
…s#484) Co-authored-by: Jason Chen <kbtpodifo@gmail.com> * Add webpacker * Add all configurations for webpacker Webpacker is the ruby gem that wraps webpack, a javascript utility for transforming and bundling. Add: - Yarn, which webpacker uses to manage javascript dependencies. - .babelrc, configuration file for Babel, the standard javascript transpiler. We're using it to transpile es6 javascript so that it's compatible with more browsers. - Config files for webpacker. - Config files to allow webpacker to process .erb files. * Install what webpacker needs inside Docker - Get the latest node.js from NodeSource, officially recommended linux binaries. link: https://github.com/nodesource/distributions - Install yarn, javascript package manager required by webpacker. - Create separate volume for /refugerestrooms/node_modules in Docker to prevent mounting /refugerestrooms from overriding what was installed by yarn. * Convert all coffeescript files to es6 javascript All changes cherry-picked and squashed from decaffeinate branch * Add javascript dependencies with yarn Remove jquery-rails gem because it's now managed with yarn * Replace old javascript tag with webpacker's * Bundle and transpile all javascript with webpacker Now we can write es6 code in any .js file! All the coffeescript has been converted into js. Changes: - Use es6 modules instead of globals. This is better encapsulation. This results in the removal of `window.Refuge`. Instead, to use a module, like Geocoder, just import it like this: `import { Geocoder } from 'path/to/geocoder';` * commit yarn * add engine * review apps * Update Yarn Lock * Update App.json * remove trailing comma * remove duplicate entry
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context
Use rails/webpacker instead of sprockets for all javascript files for the following reasons:
.es6extensions. For some reason that was the requirement forsprockets-es6. (See Decaffeinate #474). ES6 is what the web is moving towards. It also allows for cleaner syntax when converting from Coffeescript.jquery-rails). This will be more familiar to javascript developers. From here on, adding more javascript libraries is trivial.Webpacker effectively decouples the javascript side of things with the ruby on rails side. It brings standard javascript ecosystems to ruby projects. This makes finding contributors for just the javascript side easier.
Caveats:
coffee-railsgem because I thinkactive-adminstill needs it.I recommend looking at the diffs for individual commits than all of them together. Please ask me questions if you have any.
Checklist