Class method declaration errors

[tphecca]

I used this code:

class Rectangle ::
  constructor(height, width) ::
    this.height = height;
    this.width = width;
  
  toString() ::
    return `(${this.height} ${this.width})`;

When I try to build using gulp:

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: /home/suse/go/src/mtool/preproc/js/index.js: Keyword 'if' should be followed by a block statement using '::' or matching '{' / '}'.
    (From 'keyword_blocks' enforcement option of babel-plugin-offside) (This is an error on an internal node. Probably an internal error)
    at File.buildCodeFrameError (/home/suse/go/src/mtool/node_modules/babel-core/lib/transformation/file/index.js:427:15)
    at NodePath.buildCodeFrameError (/home/suse/go/src/mtool/node_modules/babel-traverse/lib/path/index.js:140:26)
    at PluginPass.ExpressionStatement (/home/suse/go/src/mtool/node_modules/babel-plugin-offside-js/dist/index.js:323:21)
    at newFn (/home/suse/go/src/mtool/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/home/suse/go/src/mtool/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/home/suse/go/src/mtool/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/home/suse/go/src/mtool/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/home/suse/go/src/mtool/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/home/suse/go/src/mtool/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/home/suse/go/src/mtool/node_modules/babel-traverse/lib/context.js:192:19)

My babel presets and plugins:

{
            presets: ['latest'/*, 'babili'*/],
            plugins: ['offside-js']
}

Creating only the constructor (no other methods) does work with no errors:

class Rectangle ::
  constructor(height, width) ::
    this.height = height;
    this.width = width;

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Rectangle = function Rectangle(height, width) {
  _classCallCheck(this, Rectangle);

  this.height = height;
  this.width = width;
};
//# sourceMappingURL=index.js.map

[shanewholloway]

@tphecca, I'm glad you found our offside parser. We've been really enjoying it, but I haven't made the time to spread the word about it.

It looks like the generated code from babel-preset-latest triggers the linting I enabled by default for offside-js. You can turn this setting off using {"keyword_blocks": false} — see example package.json

The reason I added this default setting is the following (bad) pattern:

if (condition)
  doFirstThing()
  doSecondThing()

Which, of course, should actually be:

if (condition) ::
  doFirstThing()
  doSecondThing()

So I added the linting to make sure control flows were properly followed by :: or {}. I'll put some more thought into this to improve compatibility. Thanks for the feedback!

-Shane

[shanewholloway]

Your question inspired me to removing the linting solution in favor of ensuring that elements of the body have matching indentation levels. The current version of babel-plugin-offside-js is 0.6.3. That version compiles your example without additional settings.

I've also put together a composite preset that uses babel-plugin-offside-js you might be interested in — shanewholloway/babel-preset-jsy

[tphecca]

Thanks! Glad I can continue to use this plugin, it's awesome.

[danielo515]

What does the preset-jsy adds over this plugin ?

[shanewholloway]

babel-preset-jsy is a simple convenience package that bundles together:

presets

• babel-preset-env
• babel-preset-stage-3 – optional using lean packaging.

plugins

• babel-plugin-syntax-dynamic-import
• babel-plugin-transform-class-properties

[danielo515]

Thanks for clarification. I think I don't need any of those, so I'll stick to the plugin

Regards