discourse · davidtaylorhq · Jan 2, 2025 · May 8, 2025 · May 8, 2025 · May 8, 2025
diff --git a/app/assets/javascripts/discourse/app/app.js b/app/assets/javascripts/discourse/app/app.js
@@ -19,6 +19,12 @@ import { buildResolver } from "discourse/resolver";
 const _pluginCallbacks = [];
 let _unhandledThemeErrors = [];
 
+window.moduleBroker = {
+  lookup: function (moduleName) {
+    return require(moduleName);
+  },
+};
+
 class Discourse extends Application {
   modulePrefix = "discourse";
   rootElement = "#main";

diff --git a/app/assets/javascripts/discourse/public/assets/scripts/start-app.js b/app/assets/javascripts/discourse/public/assets/scripts/start-app.js
@@ -1,6 +1,16 @@
-document.addEventListener("discourse-init", (e) => {
+document.addEventListener("discourse-init", async (e) => {
   performance.mark("discourse-init");
   const config = e.detail;
-  const app = require(`${config.modulePrefix}/app`)["default"].create(config);
+  const klass = require(`${config.modulePrefix}/app`).default;
+
+  for (const link of document.querySelectorAll("link[rel=modulepreload]")) {
+    const themeId = link.dataset.themeId;
+    const compatModules = (await import(link.href)).default;
+    for (const [key, mod] of Object.entries(compatModules)) {
+      define(`discourse/theme-${themeId}/${key}`, () => mod);
+    }
+  }
+
+  const app = klass.create(config);
   app.start();
 });
diff --git a/app/assets/javascripts/theme-transpiler/add-theme-globals.js b/app/assets/javascripts/theme-transpiler/add-theme-globals.js
@@ -0,0 +1,52 @@
+export default function (babel) {
+  const { types: t } = babel;
+
+  const visitor = {
+    Program(path) {
+      const importDeclarations = [];
+
+      if (path.scope.bindings.themePrefix) {
+        if (path.scope.bindings.themePrefix.kind !== "module") {
+          throw new Error("duplicate themePrefix");
+        } else {
+          // TODO: maybe check the import path
+        }
+      } else {
+        importDeclarations.push(
+          t.importSpecifier(
+            t.identifier("themePrefix"),
+            t.identifier("themePrefix")
+          )
+        );
+      }
+
+      if (path.scope.bindings.settings) {
+        if (path.scope.bindings.settings.kind !== "module") {
+          throw new Error("duplicate settings");
+        } else {
+          // TODO: maybe check the import path
+        }
+      } else {
+        importDeclarations.push(
+          t.importSpecifier(t.identifier("settings"), t.identifier("settings"))
+        );
+      }
+
+      if (importDeclarations.length > 0) {
+        path.node.body.push(
+          t.importDeclaration(
+            importDeclarations,
+            t.stringLiteral("virtual:theme")
+          )
+        );
+      }
+    },
+  };
+
+  return {
+    pre(file) {
+      babel.traverse(file.ast, visitor, file.scope);
+      file.scope.crawl();
+    },
+  };
+}
diff --git a/app/assets/javascripts/theme-transpiler/babel-replace-imports.js b/app/assets/javascripts/theme-transpiler/babel-replace-imports.js
@@ -0,0 +1,50 @@
+import rollupVirtualImports from "./rollup-virtual-imports";
+
+export default function (babel) {
+  const { types: t } = babel;
+
+  return {
+    visitor: {
+      ImportDeclaration(path) {
+        const moduleName = path.node.source.value;
+        if (moduleName.startsWith(".") || rollupVirtualImports[moduleName]) {
+          return;
+        }
+
+        const properties = path.node.specifiers.map((specifier) => {
+          if (specifier.type === "ImportDefaultSpecifier") {
+            return t.objectProperty(
+              t.identifier("default"),
+              t.identifier(specifier.local.name)
+            );
+          } else {
+            return t.objectProperty(
+              t.identifier(specifier.imported.name),
+              t.identifier(specifier.local.name)
+            );
+          }
+        });
+
+        const replacement = t.variableDeclaration("const", [
+          t.variableDeclarator(
+            t.objectPattern(properties),
+            t.awaitExpression(
+              t.callExpression(
+                t.memberExpression(
+                  t.memberExpression(
+                    t.identifier("window"),
+                    t.identifier("moduleBroker")
+                  ),
+                  t.identifier("lookup")
+                ),
+                [t.stringLiteral(moduleName)]
+              )
+            )
+          ),
+        ]);
+
+        path.replaceWith(replacement);
+      },
+    },
+  };
+}
diff --git a/app/assets/javascripts/theme-transpiler/build.js b/app/assets/javascripts/theme-transpiler/build.js
@@ -52,10 +52,15 @@ esbuild
       path: "path-browserify",
       url: "./url-polyfill",
       "source-map-js": "source-map-js",
+      assert: "./noop",
+      fs: "./noop",
     },
     banner: {
       js: `var process = { "env": { "EMBER_ENV": "production" }, "cwd": () => "/" };`,
     },
+    define: {
+      "import.meta.url": "'http://example.com'",
+    },
     external: [],
     entryPoints: ["./transpiler.js"],
     plugins: [wasmPlugin],

diff --git a/app/assets/javascripts/theme-transpiler/noop.js b/app/assets/javascripts/theme-transpiler/noop.js
@@ -0,0 +1 @@
+export default {};
diff --git a/app/assets/javascripts/theme-transpiler/package.json b/app/assets/javascripts/theme-transpiler/package.json
@@ -7,8 +7,14 @@
   "license": "GPL-2.0-only",
   "keywords": [],
   "dependencies": {
+    "@babel/preset-env": "^7.27.2",
     "@babel/standalone": "^7.27.6",
     "@csstools/postcss-light-dark-function": "^2.0.9",
+    "@rollup/browser": "^4.40.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/wasm-node": "^4.29.1",
+    "@swc/wasm-web": "^1.10.4",
+    "@zxing/text-encoding": "^0.9.0",
     "autoprefixer": "^10.4.21",
     "babel-plugin-ember-template-compilation": "^2.4.1",
     "content-tag": "^4.0.0",
@@ -20,13 +26,17 @@
     "ember-source": "~5.12.0",
     "ember-this-fallback": "^0.4.0",
     "fastestsmallesttextencoderdecoder": "^1.0.22",
+    "jsdom": "^25.0.1",
+    "magic-string": "^0.30.17",
     "path-browserify": "^1.0.1",
     "polyfill-crypto.getrandomvalues": "^1.0.0",
-    "postcss": "^8.5.4",
     "postcss-js": "^4.0.1",
     "postcss-media-minmax": "^5.0.0",
+    "postcss": "^8.5.4",
     "source-map-js": "^1.2.1",
-    "terser": "^5.42.0"
+    "terser": "^5.42.0",
+    "url-polyfill": "^1.1.12",
+    "url-shim": "^1.0.1"
   },
   "engines": {
     "node": ">= 18",

diff --git a/app/assets/javascripts/theme-transpiler/rollup-virtual-imports.js b/app/assets/javascripts/theme-transpiler/rollup-virtual-imports.js
@@ -0,0 +1,59 @@
+export default {
+  "virtual:main": (tree) => {
+    let output = `
+      import "virtual:init-settings";
+    `;
+
+    output += "const themeCompatModules = {};\n";
+
+    let i = 1;
+    for (const moduleFilename of Object.keys(tree)) {
+      if (moduleFilename.match(/(^|\/)connectors\//)) {
+        let moduleName = moduleFilename.replace(/\.es6?$/, "");
+
+        const isTemplate = moduleName.endsWith(".hbs");
+        const isInTemplatesDirectory = moduleName.match(/(^|\/)templates\//);
+
+        moduleName = moduleName.replace(/\.[^\.]+$/, "");
+
+        if (isTemplate && !isInTemplatesDirectory) {
+          moduleName = moduleName.replace(
+            /(^|\/)connectors\//,
+            "$1templates/connectors/"
+          );
+        } else if (!isTemplate && isInTemplatesDirectory) {
+          moduleName = moduleName.replace(/^templates\//, "");
+        }
+        output += `import * as Mod${i} from "${moduleFilename}";\n`;
+        output += `themeCompatModules["${moduleName}"] = Mod${i};\n`;
+      } else {
+        const moduleName = moduleFilename.replace(/\.[^\.]+(\.es6)?$/, "");
+        output += `import * as Mod${i} from "${moduleName}";\n`;
+        output += `themeCompatModules["${moduleName}"] = Mod${i};\n`;
+      }
+
+      i += 1;
+    }
+
+    output += "export default themeCompatModules;\n";
+
+    return output;
+  },
+  "virtual:init-settings": (_, { themeId, settings }) => {
+    return `
+      import { registerSettings } from "discourse/lib/theme-settings-store";
+      registerSettings(${themeId}, ${JSON.stringify(settings)});
+    `;
+  },
+  "virtual:theme": (_, { themeId }) => {
+    return `
+      import { getObjectForTheme } from "discourse/lib/theme-settings-store";
+
+      export const settings = getObjectForTheme(${themeId});
+
+      export function themePrefix(key) {
+        return \`theme_translations.${themeId}.\${key}\`;
+      }
+    `;
+  },
+};
diff --git a/app/assets/javascripts/theme-transpiler/theme-hbs-ast-transforms.js b/app/assets/javascripts/theme-transpiler/theme-hbs-ast-transforms.js
@@ -0,0 +1,28 @@
+function manipulateAstNodeForTheme(node, themeId) {
+  // Magically add theme id as the first param for each of these helpers)
+  if (
+    node.path.parts &&
+    ["theme-i18n", "theme-prefix", "theme-setting"].includes(node.path.parts[0])
+  ) {
+    if (node.params.length === 1) {
+      node.params.unshift({
+        type: "NumberLiteral",
+        value: themeId,
+        original: themeId,
+        loc: { start: {}, end: {} },
+      });
+    }
+  }
+}
+
+export default function buildEmberTemplateManipulatorPlugin(themeId) {
+  return function () {
+    return {
+      name: "theme-template-manipulator",
+      visitor: {
+        SubExpression: (node) => manipulateAstNodeForTheme(node, themeId),
+        MustacheStatement: (node) => manipulateAstNodeForTheme(node, themeId),
+      },
+    };
+  };
+}