DEV: Support inline-hbs compilation in themes (#18112)

This commit makes a number of improvements to the DiscourseJsProcessor:

1. Remove dependence on the out-of-date Ember template compiler from the ember-rails gem; switch to modern template compiler
2. Refactor to make use of a proper module system with `define`/`require`
3. Introduce `babel-plugin-ember-template-compilation` to enable inline hbs compilation

The `mini-loader` is upgraded to support relative lookup and `require.has`, so that these new JS packages work correctly.

app/assets/javascripts/discourse/package.json

@@ -36,6 +36,7 @@
     "a11y-dialog": "7.5.0",
     "admin": "^1.0.0",
     "discourse-plugins": "^1.0.0",
+    "babel-plugin-ember-template-compilation": "^1.0.2",
     "bootstrap": "3.4.1",
     "broccoli-asset-rev": "^3.0.0",
     "deepmerge": "^4.2.2",

app/assets/javascripts/mini-loader.js

@@ -40,12 +40,17 @@ let define, requirejs;
   }
 
   Module.prototype.makeRequire = function () {
-    return (
+    if (this._require) {
-      this._require ||
+      return this._require;
-      (this._require = function (dep) {
+    }
-        return requirejs(resolve(dep, this.name));
+    this._require = (dep) => {
-      })
+      return requirejs(resolve(dep, this.name));
-    );
+    };
+    this._require.has = (dep) => {
+      const moduleName = resolve(dep, this.name);
+      return require.has(moduleName);
+    };
+    return this._require;
   };
 
   define = function (name, deps, callback) {
@@ -105,6 +110,12 @@ let define, requirejs;
 
   function requireFrom(name, origin) {
     let mod = JS_MODULES[name] || registry[name];
+
+    if (!mod) {
+      name = name + "/index";
+      mod = registry[name];
+    }
+
     if (!mod) {
       throw new Error(
         "Could not find module `" + name + "` imported from `" + origin + "`"
@@ -128,6 +139,11 @@ let define, requirejs;
       mod = registry[mod.callback.name];
     }
 
+    if (!mod) {
+      name = name + "/index";
+      mod = registry[name];
+    }
+
     if (!mod) {
       missingModule(name);
     }
@@ -206,4 +222,12 @@ let define, requirejs;
     requirejs.entries = requirejs._eak_seen = registry = {};
     seen = {};
   };
+  require.has = function (moduleName) {
+    return (
+      Boolean(registry[moduleName]) || Boolean(registry[moduleName + "/index"])
+    );
+  };
+
+  globalThis.define = define;
+  globalThis.require = require;
 })();

app/assets/javascripts/yarn.lock

@@ -2378,7 +2378,7 @@ babel-plugin-ember-modules-api-polyfill@^3.5.0:
   dependencies:
     ember-rfc176-data "^0.3.17"
 
-babel-plugin-ember-template-compilation@^1.0.0:
+babel-plugin-ember-template-compilation@^1.0.0, babel-plugin-ember-template-compilation@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-ember-template-compilation/-/babel-plugin-ember-template-compilation-1.0.2.tgz#e0695b8ad5a8fe6b2cbdff1eadb01cf402731ad6"
   integrity sha512-4HBMksmlYsWEf/C/n3uW5rkBRbUp4FNaspzdQTAHgLbfCJnkLze8R6i6sUSge48y/Wne7mx+vcImI1o6rlUwXQ==

app/models/theme.rb

@@ -6,7 +6,7 @@ require 'json_schemer'
 class Theme < ActiveRecord::Base
   include GlobalPath
 
-  BASE_COMPILER_VERSION = 59
+  BASE_COMPILER_VERSION = 60
 
   attr_accessor :child_components
 

lib/discourse_js_processor.rb

@@ -110,27 +110,79 @@ class DiscourseJsProcessor
       @mutex
     end
 
+    def self.load_file_in_context(ctx, path, wrap_in_module: nil)
+      contents = File.read("#{Rails.root}/app/assets/javascripts/#{path}")
+      if wrap_in_module
+        contents = <<~JS
+          define(#{wrap_in_module.to_json}, ["exports", "require"], function(exports, require){
+            #{contents}
+          });
+        JS
+      end
+      ctx.eval(contents, filename: path)
+    end
+
     def self.create_new_context
       # timeout any eval that takes longer than 15 seconds
       ctx = MiniRacer::Context.new(timeout: 15000, ensure_gc_after_idle: 2000)
-      ctx.eval("#{File.read("#{Rails.root}/app/assets/javascripts/node_modules/@babel/standalone/babel.js")}")
-      ctx.eval(File.read(Ember::Source.bundled_path_for('ember-template-compiler.js')))
-      ctx.eval("module = {}; exports = {};")
-      ctx.eval("const DISCOURSE_COMMON_BABEL_PLUGINS = #{DISCOURSE_COMMON_BABEL_PLUGINS.to_json};")
-      ctx.attach("rails.logger.info", proc { |err| Rails.logger.info(err.to_s) })
-      ctx.attach("rails.logger.error", proc { |err| Rails.logger.error(err.to_s) })
-      ctx.eval <<JS
-      console = {
-        prefix: "",
-        log: function(msg){ rails.logger.info(console.prefix + msg); },
-        error: function(msg){ rails.logger.error(console.prefix + msg); }
-      }
 
-JS
+      # General shims
-      source = File.read("#{Rails.root}/lib/javascripts/widget-hbs-compiler.js")
+      ctx.attach("rails.logger.info", proc { |err| Rails.logger.info(err.to_s) })
-      js_source = ::JSON.generate(source, quirks_mode: true)
+      ctx.attach("rails.logger.warn", proc { |err| Rails.logger.warn(err.to_s) })
-      js = ctx.eval("Babel.transform(#{js_source}, { ast: false, plugins: ['transform-arrow-functions', 'transform-block-scoped-functions', 'transform-block-scoping', 'transform-computed-properties', 'transform-destructuring', 'transform-duplicate-keys', 'transform-for-of', 'transform-function-name', 'transform-literals', 'transform-object-super', 'transform-parameters', 'transform-shorthand-properties', 'transform-spread', 'transform-sticky-regex', 'transform-template-literals', 'transform-typeof-symbol', 'transform-unicode-regex', 'proposal-object-rest-spread', 'proposal-optional-chaining'] }).code")
+      ctx.attach("rails.logger.error", proc { |err| Rails.logger.error(err.to_s) })
-      ctx.eval(js)
+      ctx.eval(<<~JS, filename: "environment-setup.js")
+        window = {};
+        console = {
+          prefix: "[DiscourseJsProcessor] ",
+          log: function(...args){ rails.logger.info(console.prefix + args.join(" ")); },
+          warn: function(...args){ rails.logger.warn(console.prefix + args.join(" ")); },
+          error: function(...args){ rails.logger.error(console.prefix + args.join(" ")); }
+        };
+        const DISCOURSE_COMMON_BABEL_PLUGINS = #{DISCOURSE_COMMON_BABEL_PLUGINS.to_json};
+      JS
+
+      # define/require support
+      load_file_in_context(ctx, "mini-loader.js")
+
+      # Babel
+      load_file_in_context(ctx, "node_modules/@babel/standalone/babel.js")
+
+      # Template Compiler
+      load_file_in_context(ctx, "node_modules/ember-source/dist/ember-template-compiler.js")
+      load_file_in_context(ctx, "node_modules/babel-plugin-ember-template-compilation/src/plugin.js", wrap_in_module: "babel-plugin-ember-template-compilation/index")
+      load_file_in_context(ctx, "node_modules/babel-plugin-ember-template-compilation/src/expression-parser.js", wrap_in_module: "babel-plugin-ember-template-compilation/expression-parser")
+      load_file_in_context(ctx, "node_modules/babel-import-util/src/index.js", wrap_in_module: "babel-import-util")
+
+      # Widget HBS compiler
+      widget_hbs_compiler_source = File.read("#{Rails.root}/lib/javascripts/widget-hbs-compiler.js")
+      widget_hbs_compiler_source = <<~JS
+        define("widget-hbs-compiler", ["exports"], function(exports){
+          #{widget_hbs_compiler_source}
+        });
+      JS
+      widget_hbs_compiler_transpiled = ctx.eval <<~JS
+        Babel.transform(
+          #{widget_hbs_compiler_source.to_json},
+          {
+            ast: false,
+            moduleId: 'widget-hbs-compiler',
+            plugins: [
+              ...DISCOURSE_COMMON_BABEL_PLUGINS
+            ]
+          }
+        ).code
+      JS
+      ctx.eval(widget_hbs_compiler_transpiled, filename: "widget-hbs-compiler.js")
+
+      # Prepare template compiler plugins
+      ctx.eval <<~JS
+        const makeEmberTemplateCompilerPlugin = require("babel-plugin-ember-template-compilation").default;
+        const precompile = require("ember-template-compiler").precompile;
+        const DISCOURSE_TEMPLATE_COMPILER_PLUGINS = [
+          require("widget-hbs-compiler").WidgetHbsCompiler,
+          [makeEmberTemplateCompilerPlugin(() => precompile), { enableLegacyModules: ["ember-cli-htmlbars"] }],
+        ]
+      JS
 
       ctx
     end
@@ -184,7 +236,7 @@ JS
               filename: '#{filename}',
               ast: false,
               plugins: [
-                exports.WidgetHbsCompiler,
+                ...DISCOURSE_TEMPLATE_COMPILER_PLUGINS,
                 ['transform-modules-amd', {noInterop: true}],
                 ...DISCOURSE_COMMON_BABEL_PLUGINS
               ]
@@ -198,7 +250,7 @@ JS
             {
               ast: false,
               plugins: [
-                exports.WidgetHbsCompiler,
+                ...DISCOURSE_TEMPLATE_COMPILER_PLUGINS,
                 ...DISCOURSE_COMMON_BABEL_PLUGINS
               ]
             }

spec/lib/discourse_js_processor_spec.rb

@@ -35,4 +35,47 @@ RSpec.describe DiscourseJsProcessor do
       expect(DiscourseJsProcessor.skip_module?("// just some JS\nconsole.log()")).to eq(false)
     end
   end
+
+  it "correctly transpiles widget hbs" do
+    result = DiscourseJsProcessor.transpile(<<~JS, "blah", "blah/mymodule")
+      import hbs from "discourse/widgets/hbs-compiler";
+      const template = hbs`{{somevalue}}`;
+    JS
+    expect(result).to eq <<~JS.strip
+      define("blah/mymodule", [], function () {
+        "use strict";
+
+        const template = function (attrs, state) {
+          var _r = [];
+
+          _r.push(somevalue);
+
+          return _r;
+        };
+      });
+    JS
+  end
+
+  it "correctly transpiles ember hbs" do
+    result = DiscourseJsProcessor.transpile(<<~JS, "blah", "blah/mymodule")
+      import { hbs } from 'ember-cli-htmlbars';
+      const template = hbs`{{somevalue}}`;
+    JS
+    expect(result).to eq <<~JS.strip
+      define("blah/mymodule", ["@ember/template-factory"], function (_templateFactory) {
+        "use strict";
+
+        const template = (0, _templateFactory.createTemplateFactory)(
+        /*
+          {{somevalue}}
+        */
+        {
+          "id": null,
+          "block": "[[[1,[34,0]]],[],false,[\\"somevalue\\"]]",
+          "moduleName": "(unknown template module)",
+          "isStrictMode": false
+        });
+      });
+    JS
+  end
 end