DEV: Refactor content-tag usage in theme-transpiler, and upgrade (#32684)

This strategy allows us to synchronously init the wasm, without needing
a patch on the npm package

---------

Co-authored-by: Jarek Radosz <jarek@cvx.dev>

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

@@ -49,7 +49,6 @@ esbuild
     bundle: true,
     minify: false,
     alias: {
-      util: "./node_modules/@zxing/text-encoding",
       path: "path-browserify",
       url: "./url-polyfill",
       "source-map-js": "source-map-js",

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

@@ -0,0 +1,9 @@
+import {
+  initSync,
+  Preprocessor,
+} from "./node_modules/content-tag/pkg/standalone/content_tag.js";
+import contentTagWasm from "./node_modules/content-tag/pkg/standalone/content_tag_bg.wasm";
+
+export { Preprocessor };
+
+initSync(contentTagWasm);

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

@@ -9,10 +9,9 @@
   "dependencies": {
     "@babel/standalone": "^7.27.2",
     "@csstools/postcss-light-dark-function": "^2.0.8",
-    "@zxing/text-encoding": "^0.9.0",
     "autoprefixer": "^10.4.21",
     "babel-plugin-ember-template-compilation": "^2.4.1",
-    "content-tag": "^3.1.3",
+    "content-tag": "^4.0.0",
     "core-js": "^3.42.0",
     "decorator-transforms": "^2.3.0",
     "discourse": "workspace:0.0.0",
@@ -20,6 +19,7 @@
     "ember-cli-htmlbars": "^6.3.0",
     "ember-source": "~5.12.0",
     "ember-this-fallback": "^0.4.0",
+    "fastestsmallesttextencoderdecoder": "^1.0.22",
     "path-browserify": "^1.0.1",
     "polyfill-crypto.getrandomvalues": "^1.0.0",
     "postcss": "^8.5.3",

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

@@ -0,0 +1,29 @@
+/* global rails */
+
+import "core-js/actual/url";
+import { TextDecoder, TextEncoder } from "fastestsmallesttextencoderdecoder";
+import path from "path";
+import getRandomValues from "polyfill-crypto.getrandomvalues";
+
+const CONSOLE_PREFIX = "[DiscourseJsProcessor] ";
+globalThis.window = {};
+globalThis.console = {
+  log(...args) {
+    rails.logger.info(CONSOLE_PREFIX + args.join(" "));
+  },
+  warn(...args) {
+    rails.logger.warn(CONSOLE_PREFIX + args.join(" "));
+  },
+  error(...args) {
+    rails.logger.error(CONSOLE_PREFIX + args.join(" "));
+  },
+};
+
+globalThis.TextEncoder = TextEncoder;
+globalThis.TextDecoder = TextDecoder;
+
+path.win32 = {
+  sep: "/",
+};
+
+globalThis.crypto = { getRandomValues };

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

@@ -1,36 +1,17 @@
 // This is executed in mini_racer to provide the JS logic for lib/discourse_js_processor.rb
 
-/* global rails */
+import "./shims";
-
+import "./postcss";
-const CONSOLE_PREFIX = "[DiscourseJsProcessor] ";
-globalThis.window = {};
-globalThis.console = {
-  log(...args) {
-    rails.logger.info(CONSOLE_PREFIX + args.join(" "));
-  },
-  warn(...args) {
-    rails.logger.warn(CONSOLE_PREFIX + args.join(" "));
-  },
-  error(...args) {
-    rails.logger.error(CONSOLE_PREFIX + args.join(" "));
-  },
-};
-
 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";
-// A sub-dependency of content-tag (getrandom) needs `getRandomValues`
-// so we polyfill it
-import getRandomValues from "polyfill-crypto.getrandomvalues";
 import { minify as terserMinify } from "terser";
 import { WidgetHbsCompiler } from "discourse-widget-hbs/lib/widget-hbs-compiler";
-globalThis.crypto = { getRandomValues };
-import "./postcss";
 import { browsers } from "../discourse/config/targets";
+import { Preprocessor } from "./content-tag";
 
 const thisFallbackPlugin = EmberThisFallback._buildPlugin({
   enableLogging: false,

package.json

@@ -69,7 +69,6 @@
       "babel-plugin-debug-macros@0.3.4": "patches/babel-plugin-debug-macros@0.3.4.patch",
       "virtual-dom@2.1.1": "patches/virtual-dom@2.1.1.patch",
       "licensee@11.1.1": "patches/licensee@11.1.1.patch",
-      "content-tag@3.1.3": "patches/content-tag@3.1.3.patch",
       "@ember-compat/tracked-built-ins@0.9.1": "patches/@ember-compat__tracked-built-ins@0.9.1.patch",
       "ember-source@5.12.0": "patches/ember-source@5.12.0.patch"
     },

patches/content-tag@3.1.3.patch

@@ -1,24 +0,0 @@
-diff --git a/pkg/standalone/content_tag.js b/pkg/standalone/content_tag.js
-index ffac649b59d3c00ee025807971082cfea4e1cb2c..511c7ccf57b16e2d95dcd94da737d79ef170387f 100644
---- a/pkg/standalone/content_tag.js
-+++ b/pkg/standalone/content_tag.js
-@@ -1,5 +1,6 @@
- let wasm;
- 
-+const { TextDecoder, TextEncoder } = require('util');
- const cachedTextDecoder = (typeof TextDecoder !== 'undefined' ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true }) : { decode: () => { throw Error('TextDecoder not available') } } );
- 
- if (typeof TextDecoder !== 'undefined') { cachedTextDecoder.decode(); };
-diff --git a/pkg/standalone.js b/pkg/standalone.js
-index cb50046539df05b41dcc842ffb98e354236f8d26..10eea2962ffd804905d85057bb25d5b30b4d2e11 100644
---- a/pkg/standalone.js
-+++ b/pkg/standalone.js
-@@ -1,5 +1,6 @@
--import init from "./standalone/content_tag.js";
-+import { initSync } from "./standalone/content_tag.js";
-+import module from "./standalone/content_tag_bg.wasm";
- export { Preprocessor  } from "./standalone/content_tag.js";
- 
--await init();
-+initSync(module);
- 

pnpm-lock.yaml

@@ -11,9 +11,6 @@ patchedDependencies:
   babel-plugin-debug-macros@0.3.4:
     hash: wki6cycbrrm5sscamn5w4cujby
     path: patches/babel-plugin-debug-macros@0.3.4.patch
-  content-tag@3.1.3:
-    hash: lgdkxhmahesfzwpl4vwprolz5m
-    path: patches/content-tag@3.1.3.patch
   ember-source@5.12.0:
     hash: xx7mvsb7nmshqkkqhmf45r3hse
     path: patches/ember-source@5.12.0.patch
@@ -1024,9 +1021,6 @@ importers:
       '@csstools/postcss-light-dark-function':
         specifier: ^2.0.8
         version: 2.0.8(postcss@8.5.3)
-      '@zxing/text-encoding':
-        specifier: ^0.9.0
-        version: 0.9.0
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.3)
@@ -1034,8 +1028,8 @@ importers:
         specifier: ^2.4.1
         version: 2.4.1
       content-tag:
-        specifier: ^3.1.3
+        specifier: ^4.0.0
-        version: 3.1.3(patch_hash=lgdkxhmahesfzwpl4vwprolz5m)
+        version: 4.0.0
       core-js:
         specifier: ^3.42.0
         version: 3.42.0
@@ -1057,6 +1051,9 @@ importers:
       ember-this-fallback:
         specifier: ^0.4.0
         version: 0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.27.1))(@glint/template@1.4.1-unstable.34c4510)(rsvp@4.8.5)(webpack@5.99.8(@swc/core@1.11.24)(esbuild@0.25.4)))
+      fastestsmallesttextencoderdecoder:
+        specifier: ^1.0.22
+        version: 1.0.22
       path-browserify:
         specifier: ^1.0.1
         version: 1.0.1
@@ -2855,9 +2852,6 @@ packages:
   '@xtuc/long@4.2.2':
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
 
-  '@zxing/text-encoding@0.9.0':
-    resolution: {integrity: sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==}
-
   a11y-dialog@8.1.3:
     resolution: {integrity: sha512-fA1RKuGEeDnfqSUeigf0Yec8SHsn7Qng/V0Tw4lcwbwLl+4bigxqxm8b7UdBhl6cqGmKO/4USRXU1lkCdpW0/g==}
 
@@ -3961,6 +3955,9 @@ packages:
   content-tag@3.1.3:
     resolution: {integrity: sha512-4Kiv9mEroxuMXfWUNUHcljVJgxThCNk7eEswdHMXdzJnkBBaYDqDwzHkoh3F74JJhfU3taJOsgpR6oEGIDg17g==}
 
+  content-tag@4.0.0:
+    resolution: {integrity: sha512-qqJiY9nueYAI396MOmfOk+w/0KL6ERKxANQcSKcR0CrNTc38yT//b73l+WHr9brZx57bFHNaW7a/6Yll0bn95w==}
+
   content-type@1.0.5:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
@@ -4929,6 +4926,9 @@ packages:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
     engines: {node: '>= 4.9.1'}
 
+  fastestsmallesttextencoderdecoder@1.0.22:
+    resolution: {integrity: sha512-Pb8d48e+oIuY4MaM64Cd7OW1gt4nxCHs7/ddPPZ/Ic3sg8yVGM7O9wDvZ7us6ScaUupzM+pfBolwtYhN1IxBIw==}
+
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
@@ -11226,8 +11226,6 @@ snapshots:
 
   '@xtuc/long@4.2.2': {}
 
-  '@zxing/text-encoding@0.9.0': {}
-
   a11y-dialog@8.1.3:
     dependencies:
       focusable-selectors: 0.8.4
@@ -12483,11 +12481,13 @@ snapshots:
 
   content-tag-utils@0.3.1:
     dependencies:
-      content-tag: 3.1.3(patch_hash=lgdkxhmahesfzwpl4vwprolz5m)
+      content-tag: 3.1.3
 
   content-tag@2.0.3: {}
 
-  content-tag@3.1.3(patch_hash=lgdkxhmahesfzwpl4vwprolz5m): {}
+  content-tag@3.1.3: {}
+
+  content-tag@4.0.0: {}
 
   content-type@1.0.5: {}
 
@@ -13118,7 +13118,7 @@ snapshots:
       compression: 1.8.0
       configstore: 5.0.1
       console-ui: 3.1.2
-      content-tag: 3.1.3(patch_hash=lgdkxhmahesfzwpl4vwprolz5m)
+      content-tag: 3.1.3
       core-object: 3.1.5
       dag-map: 2.0.2
       diff: 7.0.0
@@ -13420,7 +13420,7 @@ snapshots:
   ember-template-imports@4.3.0:
     dependencies:
       broccoli-stew: 3.0.0
-      content-tag: 3.1.3(patch_hash=lgdkxhmahesfzwpl4vwprolz5m)
+      content-tag: 3.1.3
       ember-cli-version-checker: 5.1.2
     transitivePeerDependencies:
       - supports-color
@@ -13436,7 +13436,7 @@ snapshots:
       aria-query: 5.3.2
       chalk: 5.4.1
       ci-info: 4.2.0
-      content-tag: 3.1.3(patch_hash=lgdkxhmahesfzwpl4vwprolz5m)
+      content-tag: 3.1.3
       content-tag-utils: 0.3.1
       date-fns: 3.6.0
       ember-template-recast: 6.1.5
@@ -14134,6 +14134,8 @@ snapshots:
 
   fastest-levenshtein@1.0.16: {}
 
+  fastestsmallesttextencoderdecoder@1.0.22: {}
+
   fastq@1.19.1:
     dependencies:
       reusify: 1.1.0
@@ -15509,7 +15511,7 @@ snapshots:
 
   lint-to-the-future-ember-template@3.1.0(ember-template-lint@7.6.0(@babel/core@7.27.1)):
     dependencies:
-      content-tag: 3.1.3(patch_hash=lgdkxhmahesfzwpl4vwprolz5m)
+      content-tag: 3.1.3
       debug: 4.4.0(supports-color@8.1.1)
       ember-template-lint: 7.6.0(@babel/core@7.27.1)
       globby: 14.1.0
@@ -16566,7 +16568,7 @@ snapshots:
   prettier-plugin-ember-template-tag@2.0.5(prettier@3.5.3):
     dependencies:
       '@babel/core': 7.27.1(supports-color@8.1.1)
-      content-tag: 3.1.3(patch_hash=lgdkxhmahesfzwpl4vwprolz5m)
+      content-tag: 3.1.3
       prettier: 3.5.3
     transitivePeerDependencies:
       - supports-color