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

decorator-transforms (https://github.com/ef4/decorator-transforms) is a modern replacement for babel's plugin-proposal-decorators. It provides a decorator implementation using modern browser features, without needing to enable babel's full suite of class feature transformations. Initial tests suggest: - Our largest JS chunk drops from 4.38MB (991.71kb gzip) to 4.18MB (956.49kb gzip), so that's a 3.5% saving on gzip size - Tachometer benchmarks suggest a 1-2% speedup in the time taken to boot the app and render the topic list ``` ┌───────────┬─────────────────────┬─────────────────┬─────────────────┐ │ Benchmark │ Avg time │ vs before │ vs after │ ├───────────┼─────────────────────┼─────────────────┼─────────────────┤ │ before │ 220.22ms - 222.21ms │ │ slower │ │ │ │ - │ 1% - 2% │ │ │ │ │ 1.39ms - 4.09ms │ ├───────────┼─────────────────────┼─────────────────┼─────────────────┤ │ after │ 217.57ms - 219.39ms │ faster │ │ │ │ │ 1% - 2% │ - │ │ │ │ 1.39ms - 4.09ms │ │ └───────────┴─────────────────────┴─────────────────┴─────────────────┘ ``` Currently installs decorator-transforms from a fork which includes [two pending fixes](https://github.com/ef4/decorator-transforms/pulls)
discourse · Apr 25, 2024 · 26ccad4 · 26ccad4
1 parent 14fc029
commit 26ccad4
Show file tree

Hide file tree

Showing 17 changed files with 158 additions and 11 deletions.
diff --git a/app/assets/javascripts/admin/index.js b/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

diff --git a/app/assets/javascripts/dialog-holder/index.js b/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;
   },

diff --git a/app/assets/javascripts/discourse-common/index.js b/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() {

diff --git a/app/assets/javascripts/discourse-plugins/index.js b/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": {

diff --git a/app/assets/javascripts/discourse/app/app.js b/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 */

diff --git a/app/assets/javascripts/discourse/ember-cli-build.js b/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: {

diff --git a/app/assets/javascripts/discourse/package.json b/app/assets/javascripts/discourse/package.json
@@ -29,7 +29,7 @@
     "jspreadsheet-ce": "^4.13.4",
     "morphlex": "^0.0.15",
     "pretty-text": "1.0.0",
-    "decorator-transforms": "^1.2.1"
+    "decorator-transforms": "^2.0.0-alpha.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",

diff --git a/app/assets/javascripts/discourse/tests/setup-tests.js b/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";

diff --git a/app/assets/javascripts/float-kit/index.js b/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;
   },

diff --git a/app/assets/javascripts/pretty-text/index.js b/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;
   },

diff --git a/app/assets/javascripts/select-kit/index.js b/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;
   },

diff --git a/app/assets/javascripts/theme-transpiler/package.json b/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.30.4"
+    "terser": "^5.30.4",
+    "decorator-transforms": "^2.0.0-alpha.0"
   },
   "engines": {
     "node": ">= 18",

diff --git a/app/assets/javascripts/theme-transpiler/transpiler.js b/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 {

diff --git a/lib/discourse_js_processor.rb b/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",

diff --git a/patches/decorator-transforms+2.0.0-alpha.0.patch b/patches/decorator-transforms+2.0.0-alpha.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 a7147a6..5ff5aef 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(t) {
+   return {
+     Program(path, state) {
diff --git a/spec/lib/discourse_js_processor_spec.rb b/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

diff --git a/yarn.lock b/yarn.lock
@@ -4947,6 +4947,14 @@ decorator-transforms@^1.2.1:
     "@babel/plugin-syntax-decorators" "^7.23.3"
     babel-import-util "^2.0.1"
 
+decorator-transforms@^2.0.0-alpha.0:
+  version "2.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/decorator-transforms/-/decorator-transforms-2.0.0-alpha.0.tgz#30504ef249ede058e3cb8ae5899c65ce6cbd9c31"
+  integrity sha512-I/y6PeRrRLl7oRnPqPSBJice7ddi1880wOLc7hz2iOxMkF3n/I3x5gpJ4kSVcAkvheGJspemFdf1jcbvGg3H7w==
+  dependencies:
+    "@babel/plugin-syntax-decorators" "^7.23.3"
+    babel-import-util "^2.0.1"
+
 deep-eql@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.3.tgz#7c7775513092f7df98d8df9996dd085eb668cc6d"