Transform class static block

[JLHwung]

Q	A
Minor: New Feature?	Yes
Tests Added + Pass?	Yes
Documentation PR Link	babel/website#2398
Any Dependency Changes?
License	MIT

This PR implements Stage 2 Class static block proposal. It is an early draft as more test cases are required.

This idea is to transform static { } to a private static field initializer. So

babel/packages/babel-plugin-proposal-class-static-block/test/fixtures/class-static-block/class-declaration/input.js

Lines 1 to 6 in 8523873

	class Foo {
	static {
	this.foo = this.bar;
	}
	static bar = 42;
	}

will be transformed as

babel/packages/babel-plugin-proposal-class-static-block/test/fixtures/class-static-block/class-declaration/output.js

Lines 1 to 6 in 8523873

	class Foo {
	static bar = 42;
	static #_ = (() => {
	this.foo = this.bar;
	})();
	}

You can also try out at Babel REPL.

/cc @rbuckton This approach is slightly different to the "Motivation" section of the proposal, where the static block statements are inserted after class definitions. I think this approach will be more convenient for implementors. They can reuse static methods which already provide proper access to private elements and super properties.

I didn't try to implement this feature in @babel/plugin-helper-create-class-features-plugin because I think the class static block features can be polyfilled by static class methods mentioned above. So it does not rely on how other class features (properties, private methods) are transformed.

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/29876/

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4154ffa:

Sandbox	Source
babel-repl-custom-plugin	Configuration
babel-plugin-multi-config	Configuration

[nicolo-ribaudo]

What about this?

class Foo { 
  static { 
    this.foo = 42; 
  } 
} 

class Foo {
  #_ = (() => {
    this.foo = 42; 
  })();
}

It is completely self-contained (it doesn't leak .init()), and we don't need to transpile it further in browsers with support for static private fields.

[JLHwung]

@nicolo-ribaudo The class element initializer does not have access to the initialized class name binding.

class Foo {
  #_ = (() => {
    Foo.foo = 42; // <-- Foo here is undefined
  })();
}

[nicolo-ribaudo]

My mistake, I meant the private field to be static:

class Foo {
  static #_ = (() => {
    this.foo = 42; 
    console.log(Foo);
  })();
}

In chromium this works, I'm now checking the spec to understand where the binding is initialized.

EDIT: https://tc39.es/proposal-static-class-features/#runtime-semantics-class-definition-evaluation - The binding is initialized at step 30.a, and the static field is evaluated at step 34.a.

[JLHwung]

As a new package it requires @babel/core 7.12.0. It depends on @babel/type 7.12.0 and @babel/parser 7.12.0.

[nicolo-ribaudo]

We should also test how this behaves with the private fields transform (plugin ordering 😛).

[nicolo-ribaudo]

(If we detect the wrong order, we can just throw an error asking users to swap the two plugins)

[JLHwung]

We should also test how this behaves with the private fields transform (plugin ordering 😛).

@nicolo-ribaudo Yes that is how I am gonna fix "you should specify a test" error on node 10.