Merge pull request #39521 from rossta/patch/use-import-syntax-in-application-js-template

Use ES module import syntax in application js template

actionview/app/assets/javascripts/README.md

@@ -40,7 +40,8 @@ In a conventional Rails application that uses the asset pipeline, require `rails
 If you're using the Webpacker gem or some other JavaScript bundler, add the following to your main JS file:
 
 ```javascript
-require("@rails/ujs").start()
+import Rails from "@rails/ujs"
+Rails.start()
 ```
 
 ## How to run tests

activestorage/README.md

@@ -151,7 +151,8 @@ Active Storage, with its included JavaScript library, supports uploading directl
     ```
     Using the npm package:
     ```js
-    require("@rails/activestorage").start()
+    import * as ActiveStorage from "@rails/activestorage"
+    ActiveStorage.start()
     ```
 2. Annotate file inputs with the direct upload URL.
 

guides/source/active_storage_overview.md

@@ -578,7 +578,8 @@ directly from the client to the cloud.
     Using the npm package:
 
     ```js
-    require("@rails/activestorage").start()
+    import * as ActiveStorage from "@rails/activestorage"
+    ActiveStorage.start()
     ```
 
 2. Annotate file inputs with the direct upload URL.

railties/lib/rails/generators/rails/app/templates/app/javascript/packs/application.js.tt

@@ -3,17 +3,24 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-require("@rails/ujs").start()
+import Rails from "@rails/ujs"
 <%- unless options[:skip_turbolinks] -%>
-require("turbolinks").start()
+import Turbolinks from "turbolinks"
 <%- end -%>
 <%- unless skip_active_storage? -%>
-require("@rails/activestorage").start()
+import * as ActiveStorage from "@rails/activestorage"
 <%- end -%>
 <%- unless options[:skip_action_cable] -%>
-require("channels")
+import "channels"
 <%- end -%>
 
+Rails.start()
+<%- unless options[:skip_turbolinks] -%>
+Turbolinks.start()
+<%- end -%>
+<%- unless skip_active_storage? -%>
+ActiveStorage.start()
+<%- end -%>
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%%= image_pack_tag 'rails.png' %>)

railties/test/application/rake_test.rb

@@ -157,7 +157,7 @@ module ApplicationTests
     end
 
     def test_code_statistics_sanity
-      assert_match "Code LOC: 29     Test LOC: 3     Code to Test Ratio: 1:0.1",
+      assert_match "Code LOC: 32     Test LOC: 3     Code to Test Ratio: 1:0.1",
         rails("stats")
     end
 

railties/test/generators/shared_generator_tests.rb

@@ -203,7 +203,8 @@ module SharedGeneratorTests
 
     unless generator_class.name == "Rails::Generators::PluginGenerator"
       assert_file "#{application_path}/app/javascript/packs/application.js" do |content|
-        assert_match(/^require\("@rails\/activestorage"\)\.start\(\)/, content)
+        assert_match(/^import \* as ActiveStorage from "@rails\/activestorage"/, content)
+        assert_match(/^ActiveStorage.start\(\)/, content)
       end
     end
 
@@ -264,7 +265,7 @@ module SharedGeneratorTests
     assert_file "#{application_path}/config/application.rb", /#\s+require\s+["']active_storage\/engine["']/
 
     assert_file "#{application_path}/app/javascript/packs/application.js" do |content|
-      assert_no_match(/^require\("@rails\/activestorage"\)\.start\(\)/, content)
+      assert_no_match(/activestorage/i, content)
     end
 
     assert_file "#{application_path}/config/environments/development.rb" do |content|