Merge pull request #426 from chriskrycho/decorators-fun

lib/babel-options-util.js

@@ -342,21 +342,7 @@ function _addDecoratorPlugins(plugins, options, config, parent, project) {
       );
     }
   } else {
-    addPlugin(
-      plugins,
-      [
-        require.resolve("@babel/plugin-proposal-class-properties"),
-        { loose: options.loose || false },
-      ],
-      _buildClassFeaturePluginConstraints(
-        {
-          after: ["@babel/plugin-proposal-decorators"],
-        },
-        config,
-        parent,
-        project
-      )
-    );
+    _addClassProperties(addPlugin, plugins, options, config, parent, project);
   }
 
   if (hasPlugin(plugins, "babel-plugin-filter-imports")) {
@@ -379,6 +365,48 @@ function _addDecoratorPlugins(plugins, options, config, parent, project) {
   return plugins;
 }
 
+function _addClassProperties(addPlugin, plugins, options, config, parent, project) {
+  addPlugin(
+    plugins,
+    [
+      require.resolve("@babel/plugin-proposal-class-properties"),
+      { loose: options.loose || false }
+    ],
+    _buildClassFeaturePluginConstraints(
+      {
+        after: ["@babel/plugin-proposal-decorators"],
+      },
+      config,
+      parent,
+      project
+    )
+  );
+  addPlugin(
+    plugins,
+    [require.resolve("@babel/plugin-proposal-private-methods")],
+    _buildClassFeaturePluginConstraints(
+      {
+        after: ["@babel/plugin-proposal-decorators"],
+      },
+      config,
+      parent,
+      project
+    )
+  );
+  addPlugin(
+    plugins,
+    [require.resolve("@babel/plugin-proposal-private-property-in-object")],
+    _buildClassFeaturePluginConstraints(
+      {
+        after: ["@babel/plugin-proposal-decorators"],
+      },
+      config,
+      parent,
+      project
+    )
+  );
+}
+
 function _addTypeScriptPlugin(plugins, parent, project) {
   const { hasPlugin, addPlugin } = require("ember-cli-babel-plugin-helpers");
 

node-tests/addon-test.js

@@ -127,6 +127,52 @@ describe('ember-cli-babel', function() {
       });
     }));
 
+    describe('decorators and class fields', function() {
+      it(
+        "can compile decorators",
+        co.wrap(function* () {
+          input.write({
+            "foo.js": `import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nexport default class Foo extends Component { @tracked thisIsTracked = true; }`,
+          });
+
+          this.addon.project.targets = {
+            browsers: ["last 2 chrome versions"],
+          };
+
+          subject = this.addon.transpileTree(input.path(), {});
+
+          output = createBuilder(subject);
+
+          yield output.build();
+          expect(output.read()["foo.js"]).not.to.include(
+            "_initializerWarningHelper(_descriptor, this)"
+          );
+        })
+      );
+
+      it(
+        "can compile class fields",
+        co.wrap(function* () {
+          input.write({
+            "foo.js": `import Component from '@ember/component';\n\nexport default class Foo extends Component { thisIsAField = true; }`,
+          });
+
+          this.addon.project.targets = {
+            browsers: ["last 2 chrome versions"],
+          };
+
+          subject = this.addon.transpileTree(input.path(), {});
+
+          output = createBuilder(subject);
+
+          yield output.build();
+          expect(output.read()["foo.js"]).not.to.include(
+            "Decorating class property failed"
+          );
+        })
+      );
+    });
+
     describe('ember modules API polyfill', function() {
       it("does not transpile deprecate debug tooling import paths", co.wrap(function* () {
         input.write({

node-tests/get-babel-options-test.js

@@ -71,7 +71,7 @@ describe("get-babel-options", function () {
       expect(
         _addDecoratorPlugins([], {}, {}, this.addon.parent, this.addon.project)
           .length
-      ).to.equal(2, "plugins added correctly");
+      ).to.equal(4, "plugins added correctly");
     });
 
     it("should include only fields if it detects decorators plugin", function () {
@@ -91,7 +91,7 @@ describe("get-babel-options", function () {
           this.addon.parent,
           this.addon.project
         ).length
-      ).to.equal(2, "plugins were not added");
+      ).to.equal(4, "plugins were not added");
     });
 
     it("should include only decorators if it detects class fields plugin", function () {
@@ -123,7 +123,7 @@ describe("get-babel-options", function () {
         this.addon.project
       );
 
-      expect(strictPlugins[1][1].loose).to.equal(
+      expect(strictPlugins[strictPlugins.length - 1][1].loose).to.equal(
         false,
         "loose is false if no option is provided"
       );
@@ -136,7 +136,7 @@ describe("get-babel-options", function () {
         this.addon.project
       );
 
-      expect(loosePlugins[1][1].loose).to.equal(
+      expect(loosePlugins[loosePlugins.length - 1][1].loose).to.equal(
         true,
         "loose setting added correctly"
       );
@@ -157,7 +157,7 @@ describe("get-babel-options", function () {
         "@babel/plugin-transform-typescript",
         "typescript still first"
       );
-      expect(plugins.length).to.equal(3, "class fields and decorators added");
+      expect(plugins.length).to.equal(5, "class fields and decorators added");
     });
 
     it("should include class fields and decorators before typescript if not handling typescript", function () {
@@ -172,8 +172,8 @@ describe("get-babel-options", function () {
         this.addon.project
       );
 
-      expect(plugins.length).to.equal(3, "class fields and decorators added");
-      expect(plugins[2]).to.equal(
+      expect(plugins.length).to.equal(5, "class fields and decorators added");
+      expect(plugins[4]).to.equal(
         "@babel/plugin-transform-typescript",
         "typescript is now last"
       );

package.json

@@ -31,7 +31,7 @@
   "scripts": {
     "build": "ember build",
     "changelog": "lerna-changelog",
-    "lint:js": "eslint ./*.js addon addon-test-support app blueprints config lib server test-support tests",
+    "lint:js": "eslint ./*.js addon addon-test-support app blueprints config lib server test-support",
     "release": "release-it",
     "start": "ember serve",
     "test": "mocha node-tests && ember test",
@@ -43,13 +43,15 @@
   "dependencies": {
     "@babel/core": "^7.12.0",
     "@babel/helper-compilation-targets": "^7.12.0",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
     "@babel/plugin-proposal-decorators": "^7.13.5",
+    "@babel/plugin-proposal-private-methods": "^7.16.5",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.5",
     "@babel/plugin-transform-modules-amd": "^7.13.0",
     "@babel/plugin-transform-runtime": "^7.13.9",
     "@babel/plugin-transform-typescript": "^7.13.0",
     "@babel/polyfill": "^7.11.5",
-    "@babel/preset-env": "^7.12.0",
+    "@babel/preset-env": "^7.16.5",
     "@babel/runtime": "7.12.18",
     "amd-name-resolver": "^1.3.1",
     "babel-plugin-debug-macros": "^0.3.4",
@@ -71,6 +73,8 @@
     "semver": "^5.5.0"
   },
   "devDependencies": {
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
     "babel-eslint": "^10.1.0",
     "broccoli-test-helper": "^1.4.0",
     "chai": "^4.1.2",
@@ -80,15 +84,15 @@
     "core-object": "^3.1.5",
     "ember-cli": "~3.3.0",
     "ember-cli-dependency-checker": "^3.0.0",
-    "ember-cli-eslint": "^4.2.3",
+    "eslint": "^4.0.0",
     "ember-cli-htmlbars": "^3.0.0",
     "ember-cli-htmlbars-inline-precompile": "^1.0.3",
     "ember-cli-inject-live-reload": "^1.8.2",
     "ember-cli-shims": "^1.2.0",
     "ember-load-initializers": "^2.1.1",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^5.0.1",
-    "ember-source": "~3.3.1",
+    "ember-source": "~3.28.8",
     "ember-source-channel-url": "^1.1.0",
     "eslint-plugin-ember": "^5.2.0",
     "eslint-plugin-node": "^7.0.1",

tests/acceptance/simple-test.js

@@ -14,5 +14,8 @@ module('Acceptance | ES6 features work correctly', function(hooks) {
     assert.equal('dog', this.element.querySelector('#animal-value').textContent, 'Has class and getters/setters and decorators as ES6 feature');
     assert.equal('mammal', this.element.querySelector('#animal-type').textContent, 'Has class decorators as ES6 feature');
     assert.equal('mammal', this.element.querySelector('#static-animal-type').textContent, 'static and fields as an ES6 class feature');
+    assert.equal('123', this.element.querySelector('#uses-decorators').textContent, 'decorated class fields work in the app')
+    assert.equal('private field', this.element.querySelector('#gets-private-field').textContent, 'private class fields work in the app')
+    assert.equal('private method', this.element.querySelector('#calls-private-method').textContent, 'private methods work in the app')
   });
 });

tests/dummy/app/components/basic.js

@@ -0,0 +1,20 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class Basic extends Component {
+  @tracked someField = 123;
+
+  #privateField = "private field";
+
+  #privateMethod() {
+    return "private method";
+  }
+
+  get getsPrivateField() {
+    return this.#privateField;
+  }
+
+  get callsPrivateMethod() {
+    return this.#privateMethod();
+  }
+}

tests/dummy/app/templates/application.hbs

@@ -8,4 +8,6 @@
 <div id="animal-type">{{animal.type}}</div>
 <div id="static-animal-type">{{staticAnimalType}}</div>
 
+<Basic />
+
 {{outlet}}

tests/dummy/app/templates/components/basic.hbs

@@ -0,0 +1,3 @@
+<p id='uses-decorators'>{{this.someField}}</p>
+<p id='gets-private-field'>{{this.getsPrivateField}}</p>
+<p id='calls-private-method'>{{this.callsPrivateMethod}}</p>