DEV: @babel/plugin-proposal-decorators -> decorator-transforms

app/assets/javascripts/admin/index.js

@@ -6,6 +6,23 @@ const path = require("path");
 module.exports = {
   name: require("./package").name,
 
+  options: {
+    babel: {
+      plugins: [
+        [
+          require.resolve("decorator-transforms"),
+          {
+            runEarly: true,
+          },
+        ],
+      ],
+    },
+
+    "ember-cli-babel": {
+      disableDecoratorTransforms: true,
+    },
+  },
+
   // return an empty tree here as we do not want the addon modules to be
   // included into vendor.js; instead, we will produce a separate bundle
   // (admin.js) to be included via a script tag as needed

app/assets/javascripts/dialog-holder/index.js

@@ -3,6 +3,23 @@
 module.exports = {
   name: require("./package").name,
 
+  options: {
+    babel: {
+      plugins: [
+        [
+          require.resolve("decorator-transforms"),
+          {
+            runEarly: true,
+          },
+        ],
+      ],
+    },
+
+    "ember-cli-babel": {
+      disableDecoratorTransforms: true,
+    },
+  },
+
   isDevelopingAddon() {
     return true;
   },

app/assets/javascripts/discourse-common/index.js

@@ -8,6 +8,21 @@ module.exports = {
         handlebars: "handlebars/dist/cjs/handlebars.js",
       },
     },
+
+    babel: {
+      plugins: [
+        [
+          require.resolve("decorator-transforms"),
+          {
+            runEarly: true,
+          },
+        ],
+      ],
+    },
+
+    "ember-cli-babel": {
+      disableDecoratorTransforms: true,
+    },
   },
 
   isDevelopingAddon() {

app/assets/javascripts/discourse-plugins/index.js

@@ -97,11 +97,20 @@ module.exports = {
 
   options: {
     babel: {
-      plugins: [require.resolve("deprecation-silencer")],
+      plugins: [
+        require.resolve("deprecation-silencer"),
+        [
+          require.resolve("decorator-transforms"),
+          {
+            runEarly: true,
+          },
+        ],
+      ],
     },
 
     "ember-cli-babel": {
       throwUnlessParallelizable: true,
+      disableDecoratorTransforms: true,
     },
 
     "ember-this-fallback": {

app/assets/javascripts/discourse/app/app.js

@@ -1,4 +1,5 @@
 /* eslint-disable simple-import-sort/imports */
+import "decorator-transforms/globals";
 import "./loader-shims";
 import "./global-compat";
 /* eslint-enable simple-import-sort/imports */

app/assets/javascripts/discourse/ember-cli-build.js

@@ -60,10 +60,20 @@ module.exports = function (defaults) {
 
     "ember-cli-babel": {
       throwUnlessParallelizable: true,
+      disableDecoratorTransforms: true,
     },
 
     babel: {
-      plugins: [require.resolve("deprecation-silencer")],
+      sourceMaps: false,
+      plugins: [
+        require.resolve("deprecation-silencer"),
+        [
+          require.resolve("decorator-transforms"),
+          {
+            runEarly: true,
+          },
+        ],
+      ],
     },
 
     vendorFiles: {

app/assets/javascripts/discourse/tests/setup-tests.js

@@ -1,4 +1,5 @@
 /* eslint-disable simple-import-sort/imports */
+import Application from "../app";
 import "./loader-shims";
 /* eslint-enable simple-import-sort/imports */
 
@@ -46,7 +47,6 @@ import deprecated from "discourse-common/lib/deprecated";
 import { setDefaultOwner } from "discourse-common/lib/get-owner";
 import { setupS3CDN, setupURL } from "discourse-common/lib/get-url";
 import { buildResolver } from "discourse-common/resolver";
-import Application from "../app";
 import { loadSprites } from "../lib/svg-sprite-loader";
 import * as FakerModule from "@faker-js/faker";
 import { setLoadedFaker } from "discourse/lib/load-faker";

app/assets/javascripts/float-kit/index.js

@@ -2,7 +2,22 @@
 
 module.exports = {
   name: require("./package").name,
-  options: {},
+  options: {
+    babel: {
+      plugins: [
+        [
+          require.resolve("decorator-transforms"),
+          {
+            runEarly: true,
+          },
+        ],
+      ],
+    },
+
+    "ember-cli-babel": {
+      disableDecoratorTransforms: true,
+    },
+  },
   isDevelopingAddon() {
     return true;
   },

app/assets/javascripts/pretty-text/index.js

@@ -3,6 +3,23 @@
 module.exports = {
   name: require("./package").name,
 
+  options: {
+    babel: {
+      plugins: [
+        [
+          require.resolve("decorator-transforms"),
+          {
+            runEarly: true,
+          },
+        ],
+      ],
+    },
+
+    "ember-cli-babel": {
+      disableDecoratorTransforms: true,
+    },
+  },
+
   isDevelopingAddon() {
     return true;
   },

app/assets/javascripts/select-kit/index.js

@@ -2,7 +2,22 @@
 
 module.exports = {
   name: require("./package").name,
-  options: {},
+  options: {
+    babel: {
+      plugins: [
+        [
+          require.resolve("decorator-transforms"),
+          {
+            runEarly: true,
+          },
+        ],
+      ],
+    },
+
+    "ember-cli-babel": {
+      disableDecoratorTransforms: true,
+    },
+  },
   isDevelopingAddon() {
     return true;
   },

app/assets/javascripts/theme-transpiler/package.json

@@ -19,7 +19,8 @@
     "handlebars": "^4.7.8",
     "path-browserify": "^1.0.1",
     "polyfill-crypto.getrandomvalues": "^1.0.0",
-    "terser": "^5.31.0"
+    "terser": "^5.31.0",
+    "decorator-transforms": "^2.0.0"
   },
   "engines": {
     "node": ">= 18",

app/assets/javascripts/theme-transpiler/transpiler.js

@@ -19,6 +19,7 @@ globalThis.console = {
 import { transform as babelTransform } from "@babel/standalone";
 import HTMLBarsInlinePrecompile from "babel-plugin-ember-template-compilation";
 import { Preprocessor } from "content-tag";
+import DecoratorTransforms from "decorator-transforms";
 import colocatedBabelPlugin from "ember-cli-htmlbars/lib/colocated-babel-plugin";
 import { precompile } from "ember-source/dist/ember-template-compiler";
 import EmberThisFallback from "ember-this-fallback";
@@ -138,6 +139,8 @@ globalThis.transpile = function (source, options = {}) {
   if (moduleId && !skipModule) {
     plugins.push(["transform-modules-amd", { noInterop: true }]);
   }
+  commonPlugins.find((p) => p[0] === "decorator-transforms")[0] =
+    DecoratorTransforms;
   plugins.push(...commonPlugins);
 
   try {

app/models/theme.rb

@@ -6,7 +6,7 @@
 class Theme < ActiveRecord::Base
   include GlobalPath
 
-  BASE_COMPILER_VERSION = 81
+  BASE_COMPILER_VERSION = 82
 
   class SettingsMigrationError < StandardError
   end

lib/discourse_js_processor.rb

@@ -9,9 +9,7 @@ class TranspileError < StandardError
   # To generate a list of babel plugins used by ember-cli, set
   # babel: { debug: true } in ember-cli-build.js, then run `yarn ember build -prod`
   DISCOURSE_COMMON_BABEL_PLUGINS = [
-    ["proposal-decorators", { legacy: true }],
-    "proposal-class-properties",
-    "proposal-private-methods",
+    ["decorator-transforms", { runEarly: true }],
     "proposal-class-static-block",
     "transform-parameters",
     "proposal-export-namespace-from",

patches/decorator-transforms+2.0.0.patch

@@ -0,0 +1,21 @@
+diff --git a/node_modules/decorator-transforms/dist/index.js b/node_modules/decorator-transforms/dist/index.js
+index fce3aeb..c23d8e4 100644
+--- a/node_modules/decorator-transforms/dist/index.js
++++ b/node_modules/decorator-transforms/dist/index.js
+@@ -4,10 +4,13 @@ import {
+ import "./chunk-CSAU5B4Q.js";
+
+ // src/index.ts
+-import { createRequire } from "module";
++
+ import { ImportUtil } from "babel-import-util";
+-var req = createRequire(import.meta.url);
+-var { default: decoratorSyntax } = req("@babel/plugin-syntax-decorators");
++
++// https://github.com/ef4/decorator-transforms/pull/27
++import PluginSyntaxDecorators from "@babel/plugin-syntax-decorators";
++const decoratorSyntax = PluginSyntaxDecorators.default || PluginSyntaxDecorators;
++
+ function makeVisitor(babel) {
+   const t = babel.types;
+   return {

spec/lib/discourse_js_processor_spec.rb

@@ -92,7 +92,7 @@ class MyClass {
     JS
 
     result = DiscourseJsProcessor.transpile(script, "blah", "blah/mymodule")
-    expect(result).to include("_applyDecoratedDescriptor")
+    expect(result).to include("static #_ = dt7948.n")
   end
 
   it "correctly transpiles widget hbs" do

spec/lib/theme_javascript_compiler_spec.rb

@@ -251,7 +251,7 @@ class MyComponent extends Component {}
       expect(compiler.raw_content).to include(
         "define(\"discourse/theme-1/discourse/components/my-component\", [\"exports\",",
       )
-      expect(compiler.raw_content).to include("_defineProperty(this, \"value\", \"foo\");")
+      expect(compiler.raw_content).to include('value = "foo";')
       expect(compiler.raw_content).to include("setComponentTemplate")
       expect(compiler.raw_content).to include("createTemplateFactory")
     end