DEV: Improve strategy for identifying ember-cli JS chunks (#23382)

Our Ember build compiles assets into multiple chunks. In the past, we used the output from ember-auto-import-chunks-json-generator to give Rails a map of those chunks. However, that addon is specific to ember-auto-import, and is not compatible with Embroider.

Instead, we can switch to parsing the html files which are output by ember-cli. These are guaranteed to have the correct JS files in the correct place. A <discourse-chunked-script> will allow us to easily identify which chunks belong to which entrypoint.

In future, as we update more entrypoints to be compiled by Embroider/Webpack, we can easily introduce new wrappers.

Previously applied in 2c58d45 and reverted in 24d46fd. This version has been updated for subfolder support.

app/assets/javascripts/discourse/app/index.html

@@ -22,9 +22,11 @@
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/discourse.css" />
 
     <script defer src="{{rootURL}}assets/vendor.js"></script>
-    <script defer src="{{rootURL}}assets/discourse.js"></script>
 
-    <ember-auto-import-scripts defer entrypoint="app"></ember-auto-import-scripts>
+    <discourse-chunked-script entrypoint="discourse">
+      <ember-auto-import-scripts defer entrypoint="app"></ember-auto-import-scripts>
+      <script defer src="{{rootURL}}assets/discourse.js"></script>
+    </discourse-chunked-script>
 
     <bootstrap-content key="head"></bootstrap-content>
     {{content-for "head"}}

app/assets/javascripts/discourse/package.json

@@ -59,7 +59,6 @@
     "discourse-common": "1.0.0",
     "discourse-plugins": "1.0.0",
     "ember-auto-import": "^2.6.3",
-    "ember-auto-import-chunks-json-generator": "^1.1.0",
     "ember-buffered-proxy": "^2.1.1",
     "ember-cached-decorator-polyfill": "^1.0.2",
     "ember-cli": "~5.0.0",

app/assets/javascripts/discourse/tests/index.html

@@ -49,10 +49,17 @@
 
     <script src="/testem.js" integrity="" data-embroider-ignore></script>
     <script src="{{rootURL}}assets/vendor.js"></script>
-    <ember-auto-import-scripts entrypoint="app"></ember-auto-import-scripts>
-    <script src="{{rootURL}}assets/test-support.js"></script>
-    <ember-auto-import-scripts entrypoint="tests"></ember-auto-import-scripts>
-    <script src="{{rootURL}}assets/discourse.js"></script>
+    
+    <discourse-chunked-script entrypoint="test-support">
+      <script src="{{rootURL}}assets/test-support.js"></script>
+      <ember-auto-import-scripts entrypoint="tests"></ember-auto-import-scripts>
+    </discourse-chunked-script>
+
+    <discourse-chunked-script entrypoint="discourse">
+      <ember-auto-import-scripts entrypoint="app"></ember-auto-import-scripts>
+      <script src="{{rootURL}}assets/discourse.js"></script>
+    </discourse-chunked-script>
+
     <script src="{{rootURL}}assets/markdown-it-bundle.js"></script>
     <script src="{{rootURL}}assets/admin.js"></script>
     <script src="{{rootURL}}assets/wizard.js"></script>

app/assets/javascripts/yarn.lock

@@ -3773,16 +3773,6 @@ electron-to-chromium@^1.4.477:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.496.tgz#a57534b70d2bdee7e1ad7dbd4c91e560cbd08db1"
   integrity sha512-qeXC3Zbykq44RCrBa4kr8v/dWzYJA8rAwpyh9Qd+NKWoJfjG5vvJqy9XOJ9H4P/lqulZBCgUWAYi+FeK5AuJ8g==
 
-ember-auto-import-chunks-json-generator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ember-auto-import-chunks-json-generator/-/ember-auto-import-chunks-json-generator-1.1.0.tgz#9b3ee4b6e2f274fdbf722762fc9d72f13942a594"
-  integrity sha512-50JvuBVD5mLx+9YMcBLlV8HIVdtdHHzEfVwID8jo8yRo83x5SAKULdSH+ZwwNTYcUNI7amMKDl9RA5LBGzbDWA==
-  dependencies:
-    broccoli-merge-trees "^4.2.0"
-    broccoli-plugin "^4.0.7"
-    ember-cli-babel "^7.26.11"
-    ember-cli-htmlbars "^6.1.1"
-
 ember-auto-import@^2.2.3, ember-auto-import@^2.5.0, ember-auto-import@^2.6.0, ember-auto-import@^2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/ember-auto-import/-/ember-auto-import-2.6.3.tgz#f18d1b93dd10b08ba5496518436f9d56dd4e000a"

app/helpers/application_helper.rb

@@ -133,10 +133,12 @@ module ApplicationHelper
   end
 
   def preload_script(script)
-    scripts = [script]
+    scripts = []
 
     if chunks = EmberCli.script_chunks[script]
       scripts.push(*chunks)
+    else
+      scripts.push(script)
     end
 
     scripts

lib/ember_cli.rb

@@ -1,6 +1,10 @@
 # frozen_string_literal: true
 
 module EmberCli
+  def self.dist_dir
+    "#{Rails.root}/app/assets/javascripts/discourse/dist"
+  end
+
   def self.assets
     @assets ||=
       begin
@@ -37,19 +41,17 @@ module EmberCli
   def self.script_chunks
     return @@chunk_infos if defined?(@@chunk_infos)
 
-    raw_chunk_infos =
-      JSON.parse(
-        File.read("#{Rails.configuration.root}/app/assets/javascripts/discourse/dist/chunks.json"),
-      )
+    chunk_infos = {}
 
-    chunk_infos =
-      raw_chunk_infos["scripts"]
-        .map do |info|
-          logical_name = info["afterFile"][%r{\Aassets/(.*)\.js\z}, 1]
-          chunks = info["scriptChunks"].map { |filename| filename[%r{\Aassets/(.*)\.js\z}, 1] }
-          [logical_name, chunks]
-        end
-        .to_h
+    begin
+      test_html = File.read("#{dist_dir}/tests/index.html")
+      chunk_infos.merge! parse_chunks_from_html(test_html)
+    rescue Errno::ENOENT
+      # production build
+    end
+
+    index_html = File.read("#{dist_dir}/index.html")
+    chunk_infos.merge! parse_chunks_from_html(index_html)
 
     @@chunk_infos = chunk_infos if Rails.env.production?
     chunk_infos
@@ -78,4 +80,23 @@ module EmberCli
         File.basename(full_path)
       end
   end
+
+  def self.parse_chunks_from_html(html)
+    doc = Nokogiri::HTML5.parse(html)
+
+    chunk_infos = {}
+
+    doc
+      .css("discourse-chunked-script")
+      .each do |discourse_script|
+        entrypoint = discourse_script.attr("entrypoint")
+        chunk_infos[entrypoint] = discourse_script
+          .css("script[src]")
+          .map do |script|
+            script.attr("src").delete_prefix("#{Discourse.base_path}/assets/").delete_suffix(".js")
+          end
+      end
+
+    chunk_infos
+  end
 end

spec/lib/ember_cli_spec.rb

@@ -1,9 +1,44 @@
 # frozen_string_literal: true
 
 describe EmberCli do
-  describe "#ember_version" do
+  describe ".ember_version" do
     it "works" do
       expect(EmberCli.ember_version).to match(/\A\d+\.\d+/)
     end
   end
+
+  describe ".parse_chunks_from_html" do
+    def generate_html
+      <<~HTML
+        <html>
+          <head>
+            <discourse-chunked-script entrypoint="discourse">
+              <script src="#{Discourse.base_path}/assets/firstchunk.js"></script>
+              <script src="#{Discourse.base_path}/assets/secondchunk.js"></script>
+            </discourse-chunked-script>
+          </head>
+          <body>
+            Hello world
+          </body>
+        </html>
+      HTML
+    end
+
+    it "can parse chunks for a normal site" do
+      chunks = EmberCli.parse_chunks_from_html generate_html
+      expect(chunks["discourse"]).to eq(%w[firstchunk secondchunk])
+    end
+
+    it "can parse chunks for a subfolder site" do
+      set_subfolder "/discuss"
+
+      html = generate_html
+
+      # sanity check that our fixture is working
+      expect(html).to include("/discuss/assets/firstchunk.js")
+
+      chunks = EmberCli.parse_chunks_from_html html
+      expect(chunks["discourse"]).to eq(%w[firstchunk secondchunk])
+    end
+  end
 end