mirror of
https://github.com/discourse/discourse.git
synced 2025-05-22 07:53:49 +08:00
DEV: Use DiscourseJsProcessor for theme template compilation (#18135)
Previously we were relying on a highly-customized version of the unmaintained Barber gem for theme template compilation. This commit switches us to use our own DiscourseJsProcessor, which makes use of more modern patterns and will be easier to maintain going forward. In summary: - Refactors DiscourseJsProcessor to move multiline JS heredocs into a companion `discourse-js-processor.js` file - Use MiniRacer's `.call` method to avoid manually escaping JS strings - Move Theme template AST transformers into DiscourseJsProcessor, and formalise interface for extending RawHandlebars AST transformations - Update Ember template compilation to use a babel-based approach, just like Ember CLI. This gives each template its own ES6 module rather than directly assigning `Ember.TEMPLATES` values - Improve testing of template compilation (and move some tests from `theme_javascript_compiler_spec.rb` to `discourse_js_processor_spec.rb`
This commit is contained in:
David Taylor
@ -1,112 +1,10 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
RSpec.describe ThemeJavascriptCompiler do
|
||||
|
||||
let(:compiler) { ThemeJavascriptCompiler.new(1, 'marks') }
|
||||
let(:theme_id) { 22 }
|
||||
|
||||
describe ThemeJavascriptCompiler::RawTemplatePrecompiler do
|
||||
# For the raw templates, we can easily render them serverside, so let's do that
|
||||
|
||||
let(:compiler) { described_class.new(theme_id) }
|
||||
|
||||
let(:helpers) {
|
||||
<<~JS
|
||||
Handlebars.registerHelper('theme-prefix', function(themeId, string) {
|
||||
return `theme_translations.${themeId}.${string}`
|
||||
})
|
||||
Handlebars.registerHelper('theme-i18n', function(themeId, string) {
|
||||
return `translated(theme_translations.${themeId}.${string})`
|
||||
})
|
||||
Handlebars.registerHelper('theme-setting', function(themeId, string) {
|
||||
return `setting(${themeId}:${string})`
|
||||
})
|
||||
Handlebars.registerHelper('dummy-helper', function(string) {
|
||||
return `dummy(${string})`
|
||||
})
|
||||
JS
|
||||
}
|
||||
|
||||
let(:mini_racer) {
|
||||
ctx = MiniRacer::Context.new
|
||||
ctx.eval(File.open("#{Rails.root}/app/assets/javascripts/node_modules/handlebars/dist/handlebars.js").read)
|
||||
ctx.eval(helpers)
|
||||
ctx
|
||||
}
|
||||
|
||||
def render(template)
|
||||
compiled = compiler.compile(template)
|
||||
mini_racer.eval "Handlebars.template(#{compiled.squish})({})"
|
||||
end
|
||||
|
||||
it 'adds the theme id to the helpers' do
|
||||
# Works normally
|
||||
expect(render("{{theme-prefix 'translation_key'}}")).
|
||||
to eq('theme_translations.22.translation_key')
|
||||
expect(render("{{theme-i18n 'translation_key'}}")).
|
||||
to eq('translated(theme_translations.22.translation_key)')
|
||||
expect(render("{{theme-setting 'setting_key'}}")).
|
||||
to eq('setting(22:setting_key)')
|
||||
|
||||
# Works when used inside other statements
|
||||
expect(render("{{dummy-helper (theme-prefix 'translation_key')}}")).
|
||||
to eq('dummy(theme_translations.22.translation_key)')
|
||||
end
|
||||
|
||||
it "doesn't duplicate number parameter inside {{each}}" do
|
||||
expect(compiler.compile("{{#each item as |test test2|}}{{theme-setting 'setting_key'}}{{/each}}")).
|
||||
to include('{"name":"theme-setting","hash":{},"hashTypes":{},"hashContexts":{},"types":["NumberLiteral","StringLiteral"]')
|
||||
# Fail would be if theme-setting is defined with types:["NumberLiteral","NumberLiteral","StringLiteral"]
|
||||
end
|
||||
end
|
||||
|
||||
describe ThemeJavascriptCompiler::EmberTemplatePrecompiler do
|
||||
# For the Ember (Glimmer) templates, serverside rendering is not trivial,
|
||||
# so we compile the expected result with the standard compiler and compare to the theme compiler
|
||||
let(:standard_compiler) { Barber::Ember::Precompiler.new }
|
||||
let(:theme_compiler) { described_class.new(theme_id) }
|
||||
|
||||
def theme_compile(template)
|
||||
compiled = theme_compiler.compile(template)
|
||||
data = JSON.parse(compiled)
|
||||
JSON.parse(data["block"])
|
||||
end
|
||||
|
||||
def standard_compile(template)
|
||||
compiled = standard_compiler.compile(template)
|
||||
data = JSON.parse(compiled)
|
||||
JSON.parse(data["block"])
|
||||
end
|
||||
|
||||
it 'adds the theme id to the helpers' do
|
||||
expect(
|
||||
theme_compile "{{theme-prefix 'translation_key'}}"
|
||||
).to eq(
|
||||
standard_compile "{{theme-prefix #{theme_id} 'translation_key'}}"
|
||||
)
|
||||
|
||||
expect(
|
||||
theme_compile "{{theme-i18n 'translation_key'}}"
|
||||
).to eq(
|
||||
standard_compile "{{theme-i18n #{theme_id} 'translation_key'}}"
|
||||
)
|
||||
|
||||
expect(
|
||||
theme_compile "{{theme-setting 'setting_key'}}"
|
||||
).to eq(
|
||||
standard_compile "{{theme-setting #{theme_id} 'setting_key'}}"
|
||||
)
|
||||
|
||||
# # Works when used inside other statements
|
||||
expect(
|
||||
theme_compile "{{dummy-helper (theme-prefix 'translation_key')}}"
|
||||
).to eq(
|
||||
standard_compile "{{dummy-helper (theme-prefix #{theme_id} 'translation_key')}}"
|
||||
)
|
||||
end
|
||||
end
|
||||
|
||||
describe "#append_raw_template" do
|
||||
let(:compiler) { ThemeJavascriptCompiler.new(1, 'marks') }
|
||||
it 'uses the correct template paths' do
|
||||
template = "<h1>hello</h1>"
|
||||
name = "/path/to/templates1"
|
||||
@ -124,16 +22,54 @@ RSpec.describe ThemeJavascriptCompiler do
|
||||
end
|
||||
|
||||
describe "#append_ember_template" do
|
||||
let(:compiler) { ThemeJavascriptCompiler.new(1, 'marks') }
|
||||
it 'prepends `javascripts/` to template name if it is not prepended' do
|
||||
it 'maintains module names so that discourse-boot.js can correct them' do
|
||||
compiler.append_ember_template("/connectors/blah-1", "{{var}}")
|
||||
expect(compiler.content.to_s).to include('Ember.TEMPLATES["javascripts/connectors/blah-1"]')
|
||||
expect(compiler.content.to_s).to include("define(\"discourse/theme-1/connectors/blah-1\", [\"exports\", \"@ember/template-factory\"]")
|
||||
|
||||
compiler.append_ember_template("connectors/blah-2", "{{var}}")
|
||||
expect(compiler.content.to_s).to include('Ember.TEMPLATES["javascripts/connectors/blah-2"]')
|
||||
expect(compiler.content.to_s).to include("define(\"discourse/theme-1/connectors/blah-2\", [\"exports\", \"@ember/template-factory\"]")
|
||||
|
||||
compiler.append_ember_template("javascripts/connectors/blah-3", "{{var}}")
|
||||
expect(compiler.content.to_s).to include('Ember.TEMPLATES["javascripts/connectors/blah-3"]')
|
||||
expect(compiler.content.to_s).to include("define(\"discourse/theme-1/javascripts/connectors/blah-3\", [\"exports\", \"@ember/template-factory\"]")
|
||||
end
|
||||
end
|
||||
|
||||
describe "connector module name handling" do
|
||||
it 'separates colocated connectors to avoid module name clash' do
|
||||
# Colocated under `/connectors`
|
||||
compiler = ThemeJavascriptCompiler.new(1, 'marks')
|
||||
compiler.append_ember_template("connectors/outlet/blah-1", "{{var}}")
|
||||
compiler.append_module("console.log('test')", "connectors/outlet/blah-1")
|
||||
expect(compiler.content.to_s).to include("discourse/theme-1/connectors/outlet/blah-1")
|
||||
expect(compiler.content.to_s).to include("discourse/theme-1/templates/connectors/outlet/blah-1")
|
||||
|
||||
# Colocated under `/templates/connectors`
|
||||
compiler = ThemeJavascriptCompiler.new(1, 'marks')
|
||||
compiler.append_ember_template("templates/connectors/outlet/blah-1", "{{var}}")
|
||||
compiler.append_module("console.log('test')", "templates/connectors/outlet/blah-1")
|
||||
expect(compiler.content.to_s).to include("discourse/theme-1/connectors/outlet/blah-1")
|
||||
expect(compiler.content.to_s).to include("discourse/theme-1/templates/connectors/outlet/blah-1")
|
||||
|
||||
# Not colocated
|
||||
compiler = ThemeJavascriptCompiler.new(1, 'marks')
|
||||
compiler.append_ember_template("templates/connectors/outlet/blah-1", "{{var}}")
|
||||
compiler.append_module("console.log('test')", "connectors/outlet/blah-1")
|
||||
expect(compiler.content.to_s).to include("discourse/theme-1/connectors/outlet/blah-1")
|
||||
expect(compiler.content.to_s).to include("discourse/theme-1/templates/connectors/outlet/blah-1")
|
||||
end
|
||||
end
|
||||
|
||||
describe "error handling" do
|
||||
it "handles syntax errors in raw templates" do
|
||||
expect do
|
||||
compiler.append_raw_template("sometemplate.hbr", "{{invalidtemplate")
|
||||
end.to raise_error(ThemeJavascriptCompiler::CompileError, /Parse error on line 1/)
|
||||
end
|
||||
|
||||
it "handles syntax errors in ember templates" do
|
||||
expect do
|
||||
compiler.append_ember_template("sometemplate", "{{invalidtemplate")
|
||||
end.to raise_error(ThemeJavascriptCompiler::CompileError, /Parse error on line 1/)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user