Noice!

[FerrielMelarpis]

Good start man! Might wanna check out some good stuff with latest ECMAScript version. I feel like using modules would make your code more maintainable though. A couple of things:

• You might wanna check out some standards for writing JS code nowadays.
  • I prefer this one Airbnb standards but there are lots of other standards as well that might help you avoid some issues with JS.

• You might want to move your functions from constructor to class methods.

  class Explorer {
  constructor() {
  }
  
  setLabel(areaId, label) {
    if(areas[areaId]) {
  areas[areaId].setAttribute("label", label);
    }
    else {
  labels[areaId] = label;
    }
    return this; // useful for chaining
  }
  
  // usage
  const explorer = new Explorer(...);
  explorer.setLabel(...).setLabel(...).setSomethingElse(...);

• When you're dealing with multiple updates to DOM, you might wanna consider using DocumentFragment
• Using CSS classes instead of styles is much easier than applying styles like this line https://github.com/CJ-Cruz/explorer/blob/a3acce81c885505091bbdcd8819afded00251e72/src/explorer.js#L128-L135

Happy Hacking!

[CJ-Cruz]

It's great to be back, but I need to catch up with the latest stuff.

1. Nice. I like it. I'll work on practicing on Airbnb standards as well.
2. Good tip on chaining. There's a reason why methods aren't written outside the constructor. I haven't explored much about the new standards in JS, but could you share a way to encapsulate attributes while being used in methods defined outside the constructor? I'm trying to be less permissive in modifying the attributes. I plan on adding more catches on the methods to help user identify if their input/s is/are incorrect. or do you think its better if I give freedom in modifying the attributes instead?
3. Awesome, first time I've heard of DocumentFragment. Will try it out.
4. Great catch. I've seen it before. CSS classes will definitely be used in the next update.

Thanks for all the tips, man! I obviously needed more schooling than this.

[FerrielMelarpis]

BTW, you can use some NPM packages as well. You can use dependencies for development only and not include it with your package build. This might be useful https://www.npmjs.com/package/eslint-config-airbnb-standard. For building libraries, this could be a good starter kit https://github.com/ctrlplusb/npm-library-starter. It already includes a test setup as well.

Good tip on chaining. There's a reason why methods aren't written outside the constructor (https://stackoverflow.com/a/28165599). I haven't explored much about the new standards in JS, but could you share a way to encapsulate attributes while being used in methods defined outside the constructor? I'm trying to be less permissive in modifying the attributes. I plan on adding more catches on the methods to help user identify if their input/s is/are incorrect. or do you think its better if I give freedom in modifying the attributes instead?

I think there are other ways to do this. Once you've used the es6 modules, you might find some ways to limit your users to access only the exposed API. e.g.

// foo.js

// not exposed outside of this module
function somethingTodoWithFoo(fooInstance, foo) {
}

export default class Foo {
  constructor() {...}
  init() {...}
  setFoo(foo) {
    somethingTodoWithFoo(this, foo);
  }
}

In JS community, it is commonly accepted to set private attribute names with _ prefix although this doesn't stop them from accessing it. You can use symbols but there is also a way to access the symbols via getOwnPropertySymbols. Weakmap can also be a solution. Something like this

export default (() => {
  let privateProps = new WeakMap();

  return class Explorer {
    constructor(param) {
      privateProps.set(this, {foo: param.foo});
    }
    someAPI() {
      const foo = privateProps.get(this).foo;
      // do something with foo
      return this;
    }
  };
})();

Not sure if it is worth the trouble of maintaining this just to limit users on access. I've been using TypeScript for a while now and I just let it handle the transpiling of my code to js but it gives me a good development experience whilst having a code that can enforce strict rules.

class Explorer {
  private something: string;

  // default is public
  constructor() {
  }

  setSomething(something: string) {
    this.something = something;
    return this;
  }

  getSomething(): string {
    return this.something;
  }
}
// usages
const ex = new Explorer();
ex.something = 'nope'; // error
ex.setSomething('yasss');
const s = ex.something; // still nope
const s = ex.getSomething();

In the end it is still up to you on what really makes sense and would fit your requirements :)