Convert ActionCable library from CoffeeScript to JavaScript #33380

varyonic · 2018-07-17T16:57:55Z

In response to #33331

rails-bot · 2018-07-17T16:57:58Z

Thanks for the pull request, and welcome! The Rails team is excited to review your changes, and you should hear from @eileencodes (or someone else) soon.

If any changes to this PR are deemed necessary, please add them as extra commits. This ensures that the reviewer can see what has changed since they last reviewed the code. Due to the way GitHub handles out-of-date commits, this should also make it reasonably obvious what issues have or haven't been addressed. Large or tricky changes may require several passes of review and changes.

This repository is being automatically checked for code quality issues using Code Climate. You can see results for this analysis in the PR status below. Newly introduced issues should be fixed before a Pull Request is considered ready to review.

Please see the contribution instructions for more information.

rafaelfranca · 2018-07-17T18:24:36Z

If we would do this, and only if, it would be to use ES6 like Active Storage do. Changing CoffeScript with ES5 is not buying us anything.

javan · 2018-07-17T20:13:41Z

I agree with @rafaelfranca and suggest using the exact rollup+babel+eslint rig from Active Storage:

rails/activestorage/package.json

Lines 35 to 38 in e13e16f

    
           "scripts": { 
        
             "prebuild": "yarn lint", 
        
             "build": "rollup --config rollup.config.js", 
        
             "lint": "eslint app/javascript",

rafaelfranca · 2018-07-17T22:40:33Z

Great! @varyonic are you going to work on it?

varyonic · 2018-07-18T13:24:44Z

I'm not familiar with rollup but I'll give it a try.

varyonic · 2018-07-18T23:26:14Z

The package compiles cleanly and rake test passes locally.
I'm not clear how the shared logging should be implemented: I copied some methods in helpers.js but left the original ActionCable in index,js.
~~I have no idea why test/application/asset_debugging_test.rb is failing when GEM=railties~~.

varyonic · 2018-07-20T15:06:13Z

@javan Does Blade need to be replaced with Karma or similar here? If so any examples I should look at for guidance?

javan

Great start!

Generally, the code feels like a direct translation of the CoffeeScript and not necessarily how you'd write it from scratch in ES6.

Does Blade need to be replaced with Karma or similar here?

Yes, please. :) We should remove Blade / Sprockets dependencies entirely. I'll try to find you a good example to reference.

javan · 2018-07-27T20:52:26Z

actioncable/app/assets/javascripts/actioncable.js

+  let now = undefined;
+  let secondsSince = undefined;
+  let clamp = undefined;
+  class ConnectionMonitor {


This is the compiled actioncable.js file, right? There shouldn't be any ES6 in here…

javan · 2018-07-27T20:59:45Z

actioncable/app/javascript/actioncable/connection.js

+//  ,unsupportedProtocol = protocols[adjustedLength - 1]
+
+export class Connection {
+  static initClass() {


I'm not quite following these static initClass() methods that get executed immediately. I would use static properties instead:

export class Connection { static reopenDelay = 500 // … }

Is this valid ES6? The code feels like a direct translation because it is. I was hoping to have working tests before refactoring.

Not yet… You can use the transform-class-properties Babel plugin. Or, just assign those properties after the class definition:

export class Connection { // … } Connection.reopenDelay = 500

javan · 2018-07-27T21:04:32Z

actioncable/app/javascript/actioncable/helpers.js

+  if (this.debugging) {
+    messages.push(Date.now())
+    this.logger = window.console
+    return this.logger.log("[ActionCable]", ...Array.from(messages))


Don't need Array.from() here: this.logger.log("[ActionCable]", ...messages)

javan · 2018-07-27T21:07:55Z

actioncable/app/javascript/actioncable/connection_monitor.js

+
+let now = undefined
+let secondsSince = undefined
+let clamp = undefined


No need to start these out undefined and then set them later (immediately, basically).

javan · 2018-07-27T21:11:30Z

actioncable/app/javascript/actioncable/helpers.js

+
+export function stopDebugging() {
+  return this.debugging = null
+}


The debugging flag should only be set on the top level object, but these will set it on whatever happens to be this. I'd avoid using this in helpers, generally.

javan · 2018-07-27T21:15:54Z

actioncable/app/javascript/actioncable/index.js

+
+  createConsumer(url) {
+    if (url == null) { let left
+    url = (left = this.getConfig("url")) != null ? left : this.INTERNAL.default_mount_path }


Is INTERNAL defined anywhere? Will need some kind of setup to replace:

rails/actioncable/app/assets/javascripts/action_cable.coffee.erb

Lines 5 to 6 in 45903be

@ActionCable =

INTERNAL: <%= ActionCable::INTERNAL.to_json %>

javan · 2018-07-27T21:18:42Z

actioncable/app/javascript/actioncable/subscriptions.js

+  reject(identifier) {
+    return (() => {
+      const result = []
+      for (let subscription of Array.from(this.findAll(identifier))) {


I think there are browsers that support WebSocket, but not Array.from() so we should avoid using it if possible.

Move javascript out of app/assets

Use ES6 modules.

karma.conf for Rollup/RequireJS plus boilerplate test page to load and run unit tests.

varyonic · 2018-08-03T16:15:21Z

I added and configured karma-qunit but the tests are erroring "Uncaught Error: pushFailure() assertion outside test context" I think that's something to do with mock-socket not being setup correctly but I don't understand how to troubleshoot it.

javan · 2018-08-12T16:09:17Z

For the Karma setup, I think it'd be more straightforward to compile a single .js file first and then start the runner. That way you don't need to muck around with requirejs and stash a list of a files globally. See https://github.com/josh/selector-observer for a good example of this.

dillonwelch · 2018-09-28T06:14:39Z

Two thoughts:

Is this something that could be done on a more incremental level so it's not one big PR that sits around for ages?
Does it need to be tagged with the Rails 6 milestone?

varyonic · 2018-11-16T18:38:31Z

See #34177

Rename actioncable test coffee files to js.

45e680f

rails-bot assigned eileencodes Jul 17, 2018

rafaelfranca requested a review from javan July 17, 2018 18:23

varyonic added 3 commits July 17, 2018 16:55

Machine translate actioncable test coffeescript to ES6.

3fec3e9

Rename actioncable coffee files to js.

ee23b27

Machine translate actioncable coffeescript to ES6.

8fe403f

varyonic force-pushed the actioncable-js branch from 9a5c060 to 8fe403f Compare July 18, 2018 13:23

varyonic changed the title ~~Convert ActionCable library from CoffeeScript to JavaScript~~ [WIP] Convert ActionCable library from CoffeeScript to JavaScript Jul 18, 2018

varyonic added 2 commits July 18, 2018 14:55

Move javascript out of app/assets

0464276

Use ES6 modules and remove semi-colons.

438a803

varyonic added 2 commits July 18, 2018 19:29

Build ES6 package using Rollup.

abb7cee

Build output actioncable.js

829e054

varyonic force-pushed the actioncable-js branch from 814dd26 to 829e054 Compare July 18, 2018 23:33

varyonic changed the title ~~[WIP] Convert ActionCable library from CoffeeScript to JavaScript~~ Convert ActionCable library from CoffeeScript to JavaScript Jul 19, 2018

eileencodes assigned javan and unassigned eileencodes Jul 27, 2018

javan suggested changes Jul 27, 2018

View reviewed changes

varyonic added 6 commits August 3, 2018 11:53

Machine translate actioncable test coffeescript to ES6.

91ae23f

Rename actioncable coffee files to js.

3730c24

Move javascript out of app/assets

Machine translate actioncable coffeescript to ES6.

c3e980a

Use ES6 modules.

Build ES6 package using Rollup.

890bda3

npm install karma qunitjs mock-socket --save-dev

9666e5c

karma.conf for Rollup/RequireJS plus boilerplate test page to load and run unit tests.

javan requested changes

36f7d45

Build output actioncable.js transpiled correctly to ES5.

b7485b5

varyonic closed this Sep 28, 2018

javan added the actioncable label Oct 10, 2018

varyonic deleted the actioncable-js branch November 16, 2018 18:38

varyonic restored the actioncable-js branch November 16, 2018 18:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert ActionCable library from CoffeeScript to JavaScript #33380

Convert ActionCable library from CoffeeScript to JavaScript #33380

varyonic commented Jul 17, 2018

rails-bot commented Jul 17, 2018

rafaelfranca commented Jul 17, 2018 •

edited

javan commented Jul 17, 2018

rafaelfranca commented Jul 17, 2018

varyonic commented Jul 18, 2018

varyonic commented Jul 18, 2018 •

edited

varyonic commented Jul 20, 2018

javan left a comment

javan Jul 27, 2018

javan Jul 27, 2018

varyonic Aug 3, 2018

javan Aug 12, 2018

javan Jul 27, 2018

javan Jul 27, 2018

javan Jul 27, 2018

javan Jul 27, 2018

javan Jul 27, 2018

varyonic commented Aug 3, 2018

javan commented Aug 12, 2018

dillonwelch commented Sep 28, 2018

varyonic commented Nov 16, 2018

	@ActionCable =
	INTERNAL: <%= ActionCable::INTERNAL.to_json %>

Convert ActionCable library from CoffeeScript to JavaScript #33380

Convert ActionCable library from CoffeeScript to JavaScript #33380

Conversation

varyonic commented Jul 17, 2018

rails-bot commented Jul 17, 2018

rafaelfranca commented Jul 17, 2018 • edited

javan commented Jul 17, 2018

rafaelfranca commented Jul 17, 2018

varyonic commented Jul 18, 2018

varyonic commented Jul 18, 2018 • edited

varyonic commented Jul 20, 2018

javan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

varyonic commented Aug 3, 2018

javan commented Aug 12, 2018

dillonwelch commented Sep 28, 2018

varyonic commented Nov 16, 2018

rafaelfranca commented Jul 17, 2018 •

edited

varyonic commented Jul 18, 2018 •

edited