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

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.

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>
 
+    <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>
+    
+    <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

@@ -3730,16 +3730,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

@@ -37,19 +37,15 @@ module EmberCli
   def self.script_chunks
     return @@chunk_infos if defined?(@@chunk_infos)
 
-    raw_chunk_infos =
+    chunk_infos = {}
-      JSON.parse(
-        File.read("#{Rails.configuration.root}/app/assets/javascripts/discourse/dist/chunks.json"),
-      )
 
-    chunk_infos =
+    begin
-      raw_chunk_infos["scripts"]
+      chunk_infos.merge! parse_chunks_from_html("tests/index.html")
-        .map do |info|
+    rescue Errno::ENOENT
-          logical_name = info["afterFile"][%r{\Aassets/(.*)\.js\z}, 1]
+      # production build
-          chunks = info["scriptChunks"].map { |filename| filename[%r{\Aassets/(.*)\.js\z}, 1] }
-          [logical_name, chunks]
     end
-        .to_h
+
+    chunk_infos.merge! parse_chunks_from_html("index.html")
 
     @@chunk_infos = chunk_infos if Rails.env.production?
     chunk_infos
@@ -78,4 +74,22 @@ module EmberCli
         File.basename(full_path)
       end
   end
+
+  def self.parse_chunks_from_html(path)
+    html = File.read("#{Rails.root}/app/assets/javascripts/discourse/dist/#{path}")
+    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 { |script| script.attr("src")[%r{\A/assets/(.*)\.js\z}, 1] }
+      end
+
+    chunk_infos
+  end
 end