Use decorator transforms (#1675)

* Phase 1: get decorator-transforms working in the browser

* Decorator-transforms new works

* dedupe

packages/app-support/limber-ui/addon/package.json

@@ -50,7 +50,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "decorator-transforms": "^2.2.2",
+    "decorator-transforms": "^2.3.0",
     "penpal": "^6.2.2",
     "reactiveweb": "^1.2.0"
   },

packages/ember-repl/addon/package.json

@@ -84,7 +84,7 @@
     "change-case": "^5.4.4",
     "common-tags": "^1.8.2",
     "content-tag": "^2.0.2",
-    "decorator-transforms": "^2.2.2",
+    "decorator-transforms": "^2.3.0",
     "ember-resources": "^7.0.1",
     "line-column": "^1.0.2",
     "magic-string": "^0.30.6",

packages/ember-repl/addon/src/compile/formats/gjs/index.ts

@@ -86,8 +86,7 @@ async function preprocess(input: string, name: string): Promise<string> {
 
 async function transform(
   intermediate: string,
-  name: string,
-  options: any = {}
+  name: string
 ): Promise<ReturnType<Babel['transform']>> {
   // @babel/standalone is a CJS module....
   // so we have to use the default export (which is all the exports)
@@ -105,20 +104,25 @@ async function transform(
           compiler,
         },
       ],
-      [babel.availablePlugins['proposal-decorators'], { legacy: true }],
-      [babel.availablePlugins['proposal-class-properties']],
-    ],
-    presets: [
+      // See: https://github.com/NullVoxPopuli/limber/issues/1671
+      //     for just how bad the babel plugins are
+      //     (grow your code by 20%!)
+      // [babel.availablePlugins['proposal-decorators'], { legacy: true }],
+      // [babel.availablePlugins['proposal-class-properties']],
       [
-        babel.availablePresets['env'],
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - we don't care about types here..
+        await import('decorator-transforms'),
         {
-          // false -- keeps ES Modules
-          modules: 'cjs',
-          targets: { esmodules: true },
-          forceAllTransforms: false,
-          ...options,
+          runtime: {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore - we don't care about types here..
+            import: 'decorator-transforms/runtime',
+          },
         },
       ],
+      [babel.availablePlugins['transform-modules-commonjs']],
     ],
+    presets: [],
   });
 }

packages/ember-repl/addon/src/compile/formats/gjs/known-modules.ts

@@ -23,6 +23,8 @@ import * as _template from '@ember/template';
 import { createTemplateFactory } from '@ember/template-factory';
 import * as _utils from '@ember/utils';
 
+import * as _decoratorsRuntime from 'decorator-transforms/runtime';
+
 export const modules = {
   '@ember/application': _application,
   '@ember/array': _array,
@@ -43,4 +45,5 @@ export const modules = {
 
   '@glimmer/component': _GlimmerComponent,
   '@glimmer/tracking': _tracking,
+  'decorator-transforms/runtime': _decoratorsRuntime,
 };