Add support for the new decorators proposal

packages/babel-plugin-proposal-decorators/package.json

@@ -16,6 +16,8 @@
   ],
   "dependencies": {
     "@babel/helper-plugin-utils": "^7.0.0",
+    "@babel/helper-replace-supers": "^7.0.0",
+    "@babel/helper-split-export-declaration": "^7.0.0",
     "@babel/plugin-syntax-decorators": "^7.0.0"
   },
   "peerDependencies": {

packages/babel-plugin-proposal-decorators/src/index.js

@@ -6,20 +6,21 @@ import legacyVisitor from "./transformer-legacy";
 export default declare((api, options) => {
   api.assertVersion(7);
 
-  const { legacy = false, decoratorsBeforeExport } = options;
+  const { legacy = false } = options;
   if (typeof legacy !== "boolean") {
     throw new Error("'legacy' must be a boolean.");
   }
 
-  if (legacy !== true) {
-    throw new Error(
-      "The new decorators proposal is not supported yet." +
-        ' You must pass the `"legacy": true` option to' +
-        " @babel/plugin-proposal-decorators",
-    );
-  }
-
-  if (decoratorsBeforeExport !== undefined) {
+  const { decoratorsBeforeExport } = options;
+  if (decoratorsBeforeExport === undefined) {
+    if (!legacy) {
+      throw new Error(
+        "The decorators plugin requires a 'decoratorsBeforeExport' option," +
+          " whose value must be a boolean. If you want to use the legacy" +
+          " decorators semantics, you can set the 'legacy: true' option.",
+      );
+    }
+  } else {
     if (legacy) {
       throw new Error(
         "'decoratorsBeforeExport' can't be used with legacy decorators.",

packages/babel-plugin-proposal-decorators/src/transformer.js

@@ -1,3 +1,232 @@
-// Not implemented yet
+import { types as t, template } from "@babel/core";
+import splitExportDeclaration from "@babel/helper-split-export-declaration";
+import ReplaceSupers from "@babel/helper-replace-supers";
 
-export default {};
+function prop(key, value) {
+  if (!value) return null;
+  return t.objectProperty(t.identifier(key), value);
+}
+
+function value(body, params = []) {
+  return t.objectMethod("method", t.identifier("value"), params, body);
+}
+
+function hasDecorators({ node }) {
+  if (node.decorators && node.decorators.length > 0) return true;
+
+  const body = node.body.body;
+  for (let i = 0; i < body.length; i++) {
+    const method = body[i];
+    if (method.decorators && method.decorators.length > 0) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function takeDecorators({ node }) {
+  let result;
+  if (node.decorators && node.decorators.length > 0) {
+    result = t.arrayExpression(
+      node.decorators.map(decorator => decorator.expression),
+    );
+  }
+  node.decorators = undefined;
+  return result;
+}
+
+function getKey(node) {
+  if (node.computed) {
+    return node.key;
+  } else if (t.isIdentifier(node.key)) {
+    return t.stringLiteral(node.key.name);
+  } else {
+    return t.stringLiteral(String(node.key.value));
+  }
+}
+
+function getSingleElementDefinition(path, superRef, classRef, file) {
+  const { node, scope } = path;
+  const isMethod = path.isClassMethod();
+
+  if (path.isPrivate()) {
+    throw path.buildCodeFrameError(
+      `Private ${
+        isMethod ? "methods" : "fields"
+      } in decorated classes are not supported yet.`,
+    );
+  }
+
+  new ReplaceSupers(
+    {
+      methodPath: path,
+      methodNode: node,
+      objectRef: classRef,
+      isStatic: node.static,
+      superRef,
+      scope,
+      file,
+    },
+    true,
+  ).replace();
+
+  const properties = [
+    prop("kind", t.stringLiteral(isMethod ? node.kind : "field")),
+    prop("decorators", takeDecorators(path)),
+    prop("static", node.static && t.booleanLiteral(true)),
+    prop("key", getKey(node)),
+    isMethod
+      ? value(node.body, node.params)
+      : node.value
+        ? value(template.ast`{ return ${node.value} }`)
+        : prop("value", scope.buildUndefinedNode()),
+  ].filter(Boolean);
+
+  return t.objectExpression(properties);
+}
+
+function getElementsDefinitions(path, fId, file) {
+  const elements = [];
+  for (const p of path.get("body.body")) {
+    if (!p.isClassMethod({ kind: "constructor" })) {
+      elements.push(
+        getSingleElementDefinition(p, path.node.superClass, fId, file),
+      );
+      p.remove();
+    }
+  }
+
+  return t.arrayExpression(elements);
+}
+
+function getConstructorPath(path) {
+  return path
+    .get("body.body")
+    .find(path => path.isClassMethod({ kind: "constructor" }));
+}
+
+const bareSupersVisitor = {
+  CallExpression(path, { initializeInstanceElements }) {
+    if (path.get("callee").isSuper()) {
+      path.insertAfter(t.cloneNode(initializeInstanceElements));
+    }
+  },
+  Function(path) {
+    if (!path.isArrowFunctionExpression()) path.skip();
+  },
+};
+
+function insertInitializeInstanceElements(path, initializeInstanceId) {
+  const isBase = !path.node.superClass;
+  const initializeInstanceElements = t.callExpression(initializeInstanceId, [
+    t.thisExpression(),
+  ]);
+
+  const constructorPath = getConstructorPath(path);
+  if (constructorPath) {
+    if (isBase) {
+      constructorPath
+        .get("body")
+        .unshiftContainer("body", [
+          t.expressionStatement(initializeInstanceElements),
+        ]);
+    } else {
+      constructorPath.traverse(bareSupersVisitor, {
+        initializeInstanceElements,
+      });
+    }
+  } else {
+    const constructor = isBase
+      ? t.classMethod(
+          "constructor",
+          t.identifier("constructor"),
+          [],
+          t.blockStatement([t.expressionStatement(initializeInstanceElements)]),
+        )
+      : t.classMethod(
+          "constructor",
+          t.identifier("constructor"),
+          [t.restElement(t.identifier("args"))],
+          t.blockStatement([
+            t.expressionStatement(
+              t.callExpression(t.Super(), [
+                t.spreadElement(t.identifier("args")),
+              ]),
+            ),
+            t.expressionStatement(initializeInstanceElements),
+          ]),
+        );
+    path.node.body.body.push(constructor);
+  }
+}
+
+function transformClass(path, file) {
+  const isDeclaration = path.node.id && path.isDeclaration();
+  const isStrict = path.isInStrictMode();
+  const { superClass } = path.node;
+
+  path.node.type = "ClassDeclaration";
+  if (!path.node.id) path.node.id = path.scope.generateUidIdentifier("class");
+
+  const initializeId = path.scope.generateUidIdentifier("initialize");
+  const superId =
+    superClass &&
+    path.scope.generateUidIdentifierBasedOnNode(path.node.superClass, "super");
+
+  if (superClass) path.node.superClass = superId;
+
+  const classDecorators = takeDecorators(path);
+  const definitions = getElementsDefinitions(path, path.node.id, file);
+
+  insertInitializeInstanceElements(path, initializeId);
+
+  const expr = template.expression.ast`
+      ${addDecorateHelper(file)}(
+        ${classDecorators || t.nullLiteral()},
+        function (${initializeId}, ${superClass ? superId : null}) {
+          ${path.node}
+          return { F: ${t.cloneNode(path.node.id)}, d: ${definitions} };
+        },
+        ${superClass}
+      )
+    `;
+  if (!isStrict) {
+    expr.arguments[1].body.directives.push(
+      t.directive(t.directiveLiteral("use strict")),
+    );
+  }
+
+  return isDeclaration ? template.ast`let ${path.node.id} = ${expr}` : expr;
+}
+
+function addDecorateHelper(file) {
+  try {
+    return file.addHelper("decorate");
+  } catch (err) {
+    if (err.code === "BABEL_HELPER_UNKNOWN") {
+      err.message +=
+        "\n  '@babel/plugin-transform-decorators' in non-legacy mode" +
+        " requires '@babel/core' version ^7.0.1 and you appear to be using" +
+        " an older version.";
+    }
+    throw err;
+  }
+}
+
+export default {
+  ExportDefaultDeclaration(path) {
+    let decl = path.get("declaration");
+    if (!decl.isClassDeclaration() || !hasDecorators(decl)) return;
+
+    if (decl.node.id) decl = splitExportDeclaration(path);
+
+    decl.replaceWith(transformClass(decl, this.file));
+  },
+
+  Class(path) {
+    if (hasDecorators(path)) {
+      path.replaceWith(transformClass(path, this.file));
+    }
+  },
+};

packages/babel-plugin-proposal-decorators/test/fixtures/duplicated-keys/coalesce-get-set/exec.js

@@ -0,0 +1,22 @@
+var el, el1;
+
+@(_ => el = _)
+class A {
+  @(_ => el1 = _)
+  get foo() { return 1; }
+
+  set foo(x) { return 2; }
+}
+
+expect(el.elements).toHaveLength(1);
+
+expect(el1).toEqual(expect.objectContaining({
+  descriptor: expect.objectContaining({
+    get: expect.any(Function),
+    set: expect.any(Function)
+  })
+}));
+
+var desc = Object.getOwnPropertyDescriptor(A.prototype, "foo");
+expect(desc.get()).toBe(1);
+expect(desc.set()).toBe(2);

packages/babel-plugin-proposal-decorators/test/fixtures/duplicated-keys/computed-keys-same-ast/exec.js

@@ -0,0 +1,28 @@
+var i = 0;
+
+function getKey() {
+  return (i++).toString();
+}
+
+var desc;
+
+@(_ => desc = _)
+class Foo {
+  [getKey()]() {
+    return 1;
+  }
+
+  [getKey()]() {
+    return 2;
+  }
+}
+
+expect(desc.elements).toHaveLength(2);
+
+expect(desc.elements[0].key).toBe("0");
+expect(desc.elements[0].descriptor.value()).toBe(1);
+
+expect(desc.elements[1].key).toBe("1");
+expect(desc.elements[1].descriptor.value()).toBe(2);
+
+expect(i).toBe(2);

packages/babel-plugin-proposal-decorators/test/fixtures/duplicated-keys/computed-keys-same-ast/input.js

@@ -0,0 +1,10 @@
+@(_ => desc = _)
+class Foo {
+  [getKey()]() {
+    return 1;
+  }
+
+  [getKey()]() {
+    return 2;
+  }
+}

packages/babel-plugin-proposal-decorators/test/fixtures/duplicated-keys/computed-keys-same-ast/output.js

@@ -0,0 +1,31 @@
+let Foo = babelHelpers.decorate([_ => desc = _], function (_initialize) {
+  "use strict";
+
+  class Foo {
+    constructor() {
+      _initialize(this);
+    }
+
+  }
+
+  return {
+    F: Foo,
+    d: [{
+      kind: "method",
+      key: getKey(),
+
+      value() {
+        return 1;
+      }
+
+    }, {
+      kind: "method",
+      key: getKey(),
+
+      value() {
+        return 2;
+      }
+
+    }]
+  };
+});