Private Methods (and accessors) (Stage 3)

[hzoo]

Champions: Daniel Ehrenberg @littledan
Spec Repo: https://github.com/littledan/proposal-private-methods
First presented at the July 2017 meeting: https://github.com/tc39/agendas/blob/master/2017/07.md
Moved to Stage 3 at the Sept 2017 meeting: https://docs.google.com/presentation/d/1aI89Jgl7CdtKV6D5-ydieUn_-kgRqAD2X8gGzh62xzc/edit#slide=id.p

Example:

class Counter extends HTMLElement {
  #xValue = 0;

  get #x() { return this.#xValue; }
  set #x(value) {
    this.#xValue = value; 
    window.requestAnimationFrame(
      this.#render.bind(this));
  }

  #clicked() {
    this.#x++;
  }
}

Implementation

• Initial parser PR (Add support for class private methods babylon#703) by @Qantas94Heavy

[littledan]

The main open question here is, should we include private accessors, or only private methods?

cc @diervo

[hzoo]

We could implement both (parsing wise), and just error in the transform if we only wanted to include one of them? (not sure the context)

[littledan]

@hzoo Yes, I think that's a good idea. It'd also be pretty natural to start with implementing the syntax for private methods, and then do private accessors as a follow-on.

[diervo]

If we ever going to support comma separated fields, we need to do some significant refactor in ClassBody parsing, because we need to create a list of nodes for the multiple decorators.

But I would love to get private fields out of the door first.

[phyllisstein]

I was considering taking a crack at this, but I'm having trouble finding any prior art on GitHub or in Slack. Any sense of where the in-progress transform was being worked on? I'm probably slightly out of my depth doing it from scratch but I might be able to help bring something over the finish line.

[littledan]

I can't find an in-progress implementation either, but I'm wondering if @rricard @diervo @jridgewell know anything more here or have any particular plans.

[rricard]

@tim-mc intended to work on that in relation to babel/babel#8052 and babel/babel#8205

[tim-mc]

Yes, I've started work on the implementation of private methods and am working with a few others (including @littledan, @rricard) on the corresponding 262 test plan.

[littledan]

test262 issue

[jhpratt]

@tim-mc @littledan @rricard Any updates on the progress?

[Lodin]

@jhpratt AFAIK, a hard work is in the progress at #8654

[tim-mc]

babel/babel#8654 and babel/babel#9101 have added support for private methods and accessors.

[xgqfrms]

almost ready to go 🎉

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2019-09-06
 *
 * @description auto bind menthods
 * @augments
 * @example
 * @link https://github.com/tc39/proposal-private-methods#Stage-3
 * @link https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
 * @link https://github.com/facebook/create-react-app
 * @link https://create-react-app.dev/docs/adding-typescript
 *
 */

let log = console.log;


import React, { Component } from "react";
import { connect } from "react-redux";

function mapStateToProps(state) {
    return {
        //
    };
}

class ReactComponentAutoBind extends Component {
    constructor(props) {
        super(props);
        state = { count: 0 };
    }
    // es-next class properties
    incCount = () => {
        this.setState(ps => ({ count: ps.count + 1 }));
    }
    render() {
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.incCount}>add one</button>
            </div>
        );
    }
}

export default connect(
    mapStateToProps,
)(ReactComponentAutoBind);

---

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2019-09-06
 *
 * @description private class fields
 * @augments
 * @example
 * @link https://curiosity-driven.org/private-properties-in-javascript
 *
 */

let log = console.log;

// In ESnext, private class fields are defined using a hash # prefix:

class MyClass {
    a = 1;
    // .a is public
    #b = 2;
    // .#b is private
    static #c = 3;
    // .#c is private and static
    static COUNT = 3;
    incB() {
        this.#b++;
    }
}

const m = new MyClass();
m.incB();
// runs OK
m.#b = 0;
// error - private property cannot be modified outside class

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2019-09-06
 *
 * @description private class methods
 * @augments
 * @example
 * @link https://github.com/tc39/proposal-private-methods
 *
 */

let log = console.log;

class MyClass {
    // private property
    #x = 0;
    // private method (can only be called within the class)
    #incX() {
        this.#x++;
    }
    // private setter (can only be called within the class)
    set #setX(x) {
        this.#x = x;
    }
    // private getter (can only be called within the class)
    get #getX() {
        return this.$x;
    }
}