Merge pull request #1771 from cardstack/update-transpilation

Updating card transpilation toolchain

packages/host/app/app.ts

@@ -1,3 +1,4 @@
+import 'decorator-transforms/globals';
 import './lib/public-path'; // this should be first
 import './lib/setup-globals'; // This should be second
 import './deprecation-workflow';

packages/host/ember-cli-build.js

@@ -21,16 +21,7 @@ module.exports = function (defaults) {
       disableDecoratorTransforms: true,
     },
     babel: {
-      plugins: [
-        [
-          require.resolve('decorator-transforms'),
-          {
-            runtime: {
-              import: require.resolve('decorator-transforms/runtime'),
-            },
-          },
-        ],
-      ],
+      plugins: [[require.resolve('decorator-transforms')]],
     },
   });
   return compatBuild(app, Webpack, {

packages/host/package.json

@@ -83,7 +83,7 @@
     "concurrently": "^8.2.2",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^2.28.0",
-    "decorator-transforms": "^2.0.0",
+    "decorator-transforms": "^2.3.0",
     "ember-async-data": "^1.0.3",
     "ember-auto-import": "^2.7.2",
     "ember-basic-dropdown": "^8.0.1",

packages/realm-server/main.ts

@@ -18,6 +18,7 @@ import * as Sentry from '@sentry/node';
 import { PgAdapter, PgQueuePublisher } from '@cardstack/postgres';
 import { MatrixClient } from '@cardstack/runtime-common/matrix-client';
 import flattenDeep from 'lodash/flattenDeep';
+import 'decorator-transforms/globals';
 
 let log = logger('main');
 

packages/realm-server/package.json

@@ -32,6 +32,7 @@
     "@types/yargs": "^17.0.10",
     "concurrently": "^8.0.1",
     "date-fns": "^2.28.0",
+    "decorator-transforms": "^2.3.0",
     "eslint-plugin-qunit": "^7.3.4",
     "ethers": "^6.6.2",
     "eventsource": "^2.0.2",

packages/realm-server/tests/index.ts

@@ -1,5 +1,5 @@
 (globalThis as any).__environment = 'test';
-
+import 'decorator-transforms/globals';
 import '../setup-logger'; // This should be first
 import './auth-client-test';
 import './index-query-engine-test';

packages/runtime-common/etc/test-fixtures.ts

@@ -25,54 +25,40 @@ export class Person extends CardDef {
 
 export function compiledCard(id = 'null', moduleName = '/dir/person.gts') {
   return `
-var _class, _descriptor, _descriptor2, _Person;
-import { setComponentTemplate } from \"@ember/component\";
-function _initializerDefineProperty(target, property, descriptor, context) { if (!descriptor) return; Object.defineProperty(target, property, { enumerable: descriptor.enumerable, configurable: descriptor.configurable, writable: descriptor.writable, value: descriptor.initializer ? descriptor.initializer.call(context) : void 0 }); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return ("string" === r ? String : Number)(t); }
-function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
-function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
+import { setComponentTemplate } from "@ember/component";
 import { contains, field, Component, CardDef } from 'https://cardstack.com/base/card-api';
 import StringCard from 'https://cardstack.com/base/string';
-import { createTemplateFactory } from \"@ember/template-factory\";
-export let Person = (_class = (_Person = class Person extends CardDef {
-  constructor(...args) {
-    super(...args);
-    _initializerDefineProperty(this, \"firstName\", _descriptor, this);
-    _initializerDefineProperty(this, \"title\", _descriptor2, this);
-  }
-}, _defineProperty(_Person, "displayName", 'Person'), _defineProperty(_Person, \"isolated\", setComponentTemplate(createTemplateFactory(
-/*
-  \
-
-      <h1 data-test-card><@fields.firstName /></h1>
-    \
-
-*/
-{
-  \"id\": ${id},
-  \"block\": \"[[[1,\\\"\\\\n      \\\"],[10,\\\"h1\\\"],[14,\\\"data-test-card\\\",\\\"\\\"],[12],[8,[30,1,[\\\"firstName\\\"]],null,null,null],[13],[1,\\\"\\\\n    \\\"]],[\\\"@fields\\\"],false,[]]\",
-  \"moduleName\": \"${moduleName}\",
-  \"isStrictMode\": true
-}), class Isolated extends Component {})), _Person), (_descriptor = _applyDecoratedDescriptor(_class.prototype, \"firstName\", [field], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: function () {
-    return contains(StringCard);
+import { createTemplateFactory } from "@ember/template-factory";
+export class Person extends CardDef {
+  static displayName = 'Person';
+  static {
+    dt7948.g(this.prototype, "firstName", [field], function () {
+      return contains(StringCard);
+    });
   }
-}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, \"title\", [field], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: function () {
-    return contains(StringCard, {
-      computeVia: function () {
-        return this.firstName;
-      }
+  #firstName = (dt7948.i(this, "firstName"), void 0);
+  static {
+    dt7948.g(this.prototype, "title", [field], function () {
+      return contains(StringCard, {
+        computeVia: function () {
+          return this.firstName;
+        }
+      });
     });
   }
-})), _class);
+  #title = (dt7948.i(this, "title"), void 0);
+  static isolated = setComponentTemplate(createTemplateFactory(
+  /*
+    
+        <h1 data-test-card><@fields.firstName /></h1>
+      
+  */
+  {
+    "id": ${id},
+    "block": "[[[1,\\"\\\\n      \\"],[10,\\"h1\\"],[14,\\"data-test-card\\",\\"\\"],[12],[8,[30,1,[\\"firstName\\"]],null,null,null],[13],[1,\\"\\\\n    \\"]],[\\"@fields\\"],false,[]]",
+    "moduleName": "${moduleName}",
+    "isStrictMode": true
+  }), class Isolated extends Component {});
+}
   `.trim();
 }

packages/runtime-common/global.d.ts

@@ -13,16 +13,6 @@ declare module '@cardstack/ember-template-imports/src/babel-plugin' {
   export default function makePlugin(babel: typeof Babel): Babel.PluginObj;
 }
 
-declare module '@babel/plugin-proposal-decorators' {
-  import * as Babel from '@babel/core';
-  export default function makePlugin(babel: typeof Babel): Babel.PluginObj;
-}
-
-declare module '@babel/plugin-transform-class-properties' {
-  import * as Babel from '@babel/core';
-  export default function makePlugin(babel: typeof Babel): Babel.PluginObj;
-}
-
 declare module '@babel/plugin-transform-typescript' {
   import * as Babel from '@babel/core';
   export default function makePlugin(babel: typeof Babel): Babel.PluginObj;

packages/runtime-common/package.json

@@ -6,8 +6,6 @@
     "@aws-crypto/sha256-js": "^5.2.0",
     "@babel/generator": "^7.17.8",
     "@babel/parser": "^7.23.3",
-    "@babel/plugin-transform-class-properties": "^7.24.7",
-    "@babel/plugin-proposal-decorators": "^7.17.9",
     "@babel/plugin-syntax-class-properties": "^7.12.13",
     "@babel/plugin-syntax-decorators": "^7.17.12",
     "@babel/plugin-syntax-typescript": "^7.17.12",
@@ -31,6 +29,7 @@
     "babel-plugin-ember-template-compilation": "^2.2.1",
     "camelcase": "^6.3.0",
     "date-fns": "^2.28.0",
+    "decorator-transforms": "^2.3.0",
     "diff": "^5.1.0",
     "ember-concurrency-async-plugin": "workspace:*",
     "ember-source": "~5.4.0",

packages/runtime-common/transpile.ts

@@ -13,16 +13,15 @@ import * as etc from 'ember-source/dist/ember-template-compiler';
 import { loaderPlugin } from './loader-plugin';
 //@ts-ignore no types are available
 import glimmerTemplatePlugin from '@cardstack/ember-template-imports/src/babel-plugin';
-//@ts-ignore no types are available
-import decoratorsProposalPlugin from '@babel/plugin-proposal-decorators';
-//@ts-ignore no types are available
-import classPropertiesPlugin from '@babel/plugin-transform-class-properties';
 //@ts-ignore ironically no types are available
 import typescriptPlugin from '@babel/plugin-transform-typescript';
 //@ts-ignore no types are available
 import emberConcurrencyAsyncPlugin from 'ember-concurrency-async-plugin';
 import scopedCSSTransform from 'glimmer-scoped-css/ast-transform';
 
+//@ts-ignore no upstream types
+import decoratorTransforms from 'decorator-transforms';
+
 export function transpileJS(content: string, debugFilename: string): string {
   let contentIsAllWhitespace = content.match(/^\s*$/);
 
@@ -51,8 +50,7 @@ export function transpileJS(content: string, debugFilename: string): string {
       glimmerTemplatePlugin,
       emberConcurrencyAsyncPlugin,
       [typescriptPlugin, { allowDeclareFields: true }],
-      [decoratorsProposalPlugin, { legacy: true }],
-      classPropertiesPlugin,
+      [decoratorTransforms],
       [makeEmberTemplatePlugin, templateOptions],
       loaderPlugin,
     ],