optimizely / nuclear-js

Reactive Flux built with ImmutableJS data structures. Framework agnostic.
https://optimizely.github.io/nuclear-js/
MIT License
2.23k stars 141 forks source link

Inheriting from Reactor doesn't seems to work in v1.2.1 #191

Closed raulmatei closed 9 years ago

raulmatei commented 9 years ago

Hi,

It seems that inheriting from Reactor doesn't work as it worked before 1.2.x, is this something deliberate?

Ex: v1.2.1: http://goo.gl/cf2T99 v1.1.2: http://goo.gl/zSMPAQ

Thanks, Raul.

jordangarcia commented 9 years ago

Hey Raul,

I'm having trouble recreating this.

I see it happening in the codepen, but when i try to replicate it locally it works fine.

Here is my file:

import Nuclear from './nuclear'

class Context extends Nuclear.Reactor {
  constructor(options) {
    super(options);
    this.modules = {};
  }

  logState() {
    return this.reactorState;
  }
}

const context = new Context({ debug: true });
console.log(context, context.logState());

const reactor = new Nuclear.Reactor({ debug: true });
console.log(reactor, reactor.reactorState);

and running:

babel test.js -o test-compiled.js && node test-compiled.js
raulmatei commented 9 years ago

Thanks Jordan,

It looks like this is Babel related, I have es6.classes in loose mode. Here is my .babelrc file:

{
  "stage": 0,
  "loose": ["es6.modules", "es6.classes"],
  "optional": ["runtime"]
}

// or just pass the --loose argument in the cli
babel --loose es6.classes test.js -o test-compiled.js && node test-compiled.js

Removing "es6.classes" solves the issue. CodePen is probably using something similar and that's why it's reproducible in their environment.

Thanks, Raul.

jordangarcia commented 9 years ago

@raulmatei is this still an issue then?

raulmatei commented 9 years ago

Not for me, I can remove the es6.classes from loose array, but it will break if some one else will try to use with a constructor function:

function Context(options) {
  Nuclear.Reactor.call(this, options);
  this.modules = {};
}

Context.prototype = Nuclear.Reactor.prototype;
Context.prototype.constructor = Context;

Context.prototype.logState = function () {
  return this.reactorState;
};

const context = new Context({ debug: true });
console.log(context, context.logState());

const reactor = new Nuclear.Reactor({ debug: true });
console.log(reactor, reactor.reactorState);

Thanks, Raul.

jordangarcia commented 9 years ago

Ah yeah that's true because the Reactor can be called without the new operator.

Thanks for figuring this out on your end Raul.

Closing.