Class: ThemeJavascriptCompiler

Inherits:
Object
  • Object
show all
Defined in:
lib/theme_javascript_compiler.rb

Defined Under Namespace

Classes: CompileError

Constant Summary collapse

COLOCATED_CONNECTOR_REGEX = 
%r{\A(?<prefix>.*/?)connectors/(?<outlet>[^/]+)/(?<name>[^/\.]+)\.(?<extension>.+)\z}
@@terser_disabled = 
false

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(theme_id, theme_name) ⇒ ThemeJavascriptCompiler

Returns a new instance of ThemeJavascriptCompiler.



21
22
23
24
25
 
# File 'lib/theme_javascript_compiler.rb', line 21

def initialize(theme_id, theme_name)
  @theme_id = theme_id
  @output_tree = []
  @theme_name = theme_name
end

Class Method Details

.disable_terser! ⇒ Object 



11
12
13
14
 
# File 'lib/theme_javascript_compiler.rb', line 11

def self.disable_terser!
  raise "Tests only" if !Rails.env.test?
  @@terser_disabled = true
end

.enable_terser! ⇒ Object 



16
17
18
19
 
# File 'lib/theme_javascript_compiler.rb', line 16

def self.enable_terser!
  raise "Tests only" if !Rails.env.test?
  @@terser_disabled = false
end

Instance Method Details

#append_ember_template(name, hbs_template) ⇒ Object 



186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
 
# File 'lib/theme_javascript_compiler.rb', line 186

def append_ember_template(name, hbs_template)
  module_name = name
  module_name = "/#{module_name}" if !module_name.start_with?("/")
  module_name = "discourse/theme-#{@theme_id}#{module_name}"

  # Mimics the ember-cli implementation
  # https://github.com/ember-cli/ember-cli-htmlbars/blob/d5aa14b3/lib/template-compiler-plugin.js#L18-L26
  script = <<~JS
    import { hbs } from 'ember-cli-htmlbars';
    export default hbs(#{hbs_template.to_json}, { moduleName: #{module_name.to_json} });
  JS

  template_module = DiscourseJsProcessor.transpile(script, "", module_name, theme_id: @theme_id)
  @output_tree << ["#{name}.js", <<~JS]
    if ('define' in window) {
    #{template_module}
    }
  JS
rescue MiniRacer::RuntimeError, DiscourseJsProcessor::TranspileError => ex
  raise CompileError.new ex.message
end

#append_js_error(filename, message) ⇒ Object 



250
251
252
253
 
# File 'lib/theme_javascript_compiler.rb', line 250

def append_js_error(filename, message)
  message = "[THEME #{@theme_id} '#{@theme_name}'] Compile error: #{message}"
  append_raw_script filename, "console.error(#{message.to_json});"
end

#append_module(script, name, extension, include_variables: true) ⇒ Object 



235
236
237
238
239
240
241
242
243
244
245
246
247
248
 
# File 'lib/theme_javascript_compiler.rb', line 235

def append_module(script, name, extension, include_variables: true)
  original_filename = name
  name = "discourse/theme-#{@theme_id}/#{name}"

  script = "#{theme_settings}#{script}" if include_variables
  transpiler = DiscourseJsProcessor::Transpiler.new
  @output_tree << ["#{original_filename}.#{extension}", <<~JS]
    if ('define' in window) {
    #{transpiler.perform(script, "", name, theme_id: @theme_id, extension: extension).strip}
    }
  JS
rescue MiniRacer::RuntimeError, DiscourseJsProcessor::TranspileError => ex
  raise CompileError.new ex.message
end

#append_raw_script(filename, script) ⇒ Object 



231
232
233
 
# File 'lib/theme_javascript_compiler.rb', line 231

def append_raw_script(filename, script)
  @output_tree << [filename, script + "\n"]
end

#append_raw_template(name, hbs_template) ⇒ Object 



213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
 
# File 'lib/theme_javascript_compiler.rb', line 213

def append_raw_template(name, hbs_template)
  compiled =
    DiscourseJsProcessor::Transpiler.new.compile_raw_template(hbs_template, theme_id: @theme_id)
  source_for_comment = hbs_template.gsub("*/", '*\/').indent(4, " ")
  @output_tree << ["#{name}.js", <<~JS]
    (function() {
      /*
    #{source_for_comment}
      */
      const addRawTemplate = requirejs('discourse-common/lib/raw-templates').addRawTemplate;
      const template = requirejs('discourse-common/lib/raw-handlebars').template(#{compiled});
      addRawTemplate(#{raw_template_name(name)}, template);
    })();
  JS
rescue MiniRacer::RuntimeError, DiscourseJsProcessor::TranspileError => ex
  raise CompileError.new ex.message
end

#append_tree(tree, for_tests: false) ⇒ Object 



95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
 
# File 'lib/theme_javascript_compiler.rb', line 95

def append_tree(tree, for_tests: false)
  # Replace legacy extensions
  tree.transform_keys! do |filename|
    if filename.ends_with? ".js.es6"
      filename.sub(/\.js\.es6\z/, ".js")
    elsif filename.include? "/templates/"
      filename = filename.sub(/\.raw\.hbs\z/, ".hbr") if filename.ends_with? ".raw.hbs"

      if filename.ends_with? ".hbr"
        filename.sub(%r{/templates/}, "/raw-templates/")
      else
        filename
      end
    else
      filename
    end
  end

  # Some themes are colocating connector JS under `/connectors`. Move template to /templates to avoid module name clash
  tree.transform_keys! do |filename|
    match = COLOCATED_CONNECTOR_REGEX.match(filename)
    next filename if !match

    is_template = match[:extension] == "hbs"
    is_in_templates_directory = match[:prefix].split("/").last == "templates"

    if is_template && !is_in_templates_directory
      "#{match[:prefix]}templates/connectors/#{match[:outlet]}/#{match[:name]}.#{match[:extension]}"
    elsif !is_template && is_in_templates_directory
      "#{match[:prefix].chomp("templates/")}connectors/#{match[:outlet]}/#{match[:name]}.#{match[:extension]}"
    else
      filename
    end
  end

  # Handle colocated components
  tree.dup.each_pair do |filename, content|
    is_component_template =
      filename.end_with?(".hbs") &&
        filename.start_with?("discourse/components/", "admin/components/")
    next if !is_component_template
    template_contents = content

    hbs_invocation_options = { moduleName: filename, parseOptions: { srcName: filename } }
    hbs_invocation = "hbs(#{template_contents.to_json}, #{hbs_invocation_options.to_json})"

    prefix = <<~JS
      import { hbs } from 'ember-cli-htmlbars';
      const __COLOCATED_TEMPLATE__ = #{hbs_invocation};
    JS

    js_filename = filename.sub(/\.hbs\z/, ".js")
    js_contents = tree[js_filename] # May be nil for template-only component
    if js_contents && !js_contents.include?("export default")
      message =
        "#{filename} does not contain a `default export`. Did you forget to export the component class?"
      js_contents += "throw new Error(#{message.to_json});"
    end

    if js_contents.nil?
      # No backing class, use template-only
      js_contents = <<~JS
        import templateOnly from '@ember/component/template-only';
        export default templateOnly();
      JS
    end

    js_contents = prefix + js_contents

    tree[js_filename] = js_contents
    tree.delete(filename)
  end

  # Transpile and write to output
  tree.each_pair do |filename, content|
    module_name, extension = filename.split(".", 2)
    module_name = "test/#{module_name}" if for_tests
    if extension == "js" || extension == "gjs"
      append_module(content, module_name, extension)
    elsif extension == "hbs"
      append_ember_template(module_name, content)
    elsif extension == "hbr"
      append_raw_template(module_name.sub("discourse/raw-templates/", ""), content)
    else
      append_js_error(filename, "unknown file extension '#{extension}' (#{filename})")
    end
  rescue CompileError => e
    append_js_error filename, "#{e.message} (#{filename})"
  end
end

#compile! ⇒ Object 



27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
# File 'lib/theme_javascript_compiler.rb', line 27

def compile!
  if !@compiled
    @compiled = true
    @output_tree.freeze
    output =
      if !has_content?
        { "code" => "" }
      elsif @@terser_disabled
        { "code" => raw_content }
      else
        DiscourseJsProcessor::Transpiler.new.terser(@output_tree.to_h, terser_config)
      end
    @content = output["code"]
    @source_map = output["map"]
  end
  [@content, @source_map]
rescue DiscourseJsProcessor::TranspileError => e
  message = "[THEME #{@theme_id} '#{@theme_name}'] Compile error: #{e.message}"
  @content = "console.error(#{message.to_json});\n"
  [@content, @source_map]
end

#content ⇒ Object 



67
68
69
70
 
# File 'lib/theme_javascript_compiler.rb', line 67

def content
  compile!
  @content
end

#has_content? ⇒ Boolean

Returns:

  • (Boolean) 


81
82
83
 
# File 'lib/theme_javascript_compiler.rb', line 81

def has_content?
  @output_tree.present?
end

#prepend_settings(settings_hash) ⇒ Object 



85
86
87
88
89
90
91
92
93
 
# File 'lib/theme_javascript_compiler.rb', line 85

def prepend_settings(settings_hash)
  @output_tree.prepend ["settings.js", <<~JS]
    (function() {
      if ('require' in window) {
        require("discourse/lib/theme-settings-store").registerSettings(#{@theme_id}, #{settings_hash.to_json});
      }
    })();
  JS
end

#raw_content ⇒ Object 



77
78
79
 
# File 'lib/theme_javascript_compiler.rb', line 77

def raw_content
  @output_tree.map { |filename, source| source }.join("")
end

#raw_template_name(name) ⇒ Object 



208
209
210
211
 
# File 'lib/theme_javascript_compiler.rb', line 208

def raw_template_name(name)
  name = name.sub(/\.(raw|hbr)\z/, "")
  name.inspect
end

#source_map ⇒ Object 



72
73
74
75
 
# File 'lib/theme_javascript_compiler.rb', line 72

def source_map
  compile!
  @source_map
end

#terser_config ⇒ Object 



49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
# File 'lib/theme_javascript_compiler.rb', line 49

def terser_config
  # Based on https://github.com/ember-cli/ember-cli-terser/blob/28df3d90a5/index.js#L12-L26
  {
    sourceMap: {
      includeSources: true,
      root: "theme-#{@theme_id}/",
    },
    compress: {
      negate_iife: false,
      sequences: 30,
      drop_debugger: false,
    },
    output: {
      semicolons: false,
    },
  }
end