Restructure code

ElMassimo · Nov 3, 2022 · fd52b2a · fd52b2a
1 parent 37e124d
commit fd52b2a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 41 deletions.
diff --git a/docs/src/guide/plugin-legacy.md b/docs/src/guide/plugin-legacy.md
@@ -1,8 +1,6 @@
 [vite_plugin_legacy]: https://github.com/ElMassimo/vite_ruby/tree/main/vite_plugin_legacy
 [plugin-legacy]: https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
 [vite_legacy_javascript_tag]: https://github.com/ElMassimo/vite_ruby/blob/main/vite_plugin_legacy/lib/vite_plugin_legacy/tag_helpers.rb
-[vite_legacy_typescript_tag]: https://github.com/ElMassimo/vite_ruby/blob/main/vite_plugin_legacy/lib/vite_plugin_legacy/tag_helpers.rb
-[vite_legacy_polyfill_tag]: https://github.com/ElMassimo/vite_ruby/blob/main/vite_plugin_legacy/lib/vite_plugin_legacy/tag_helpers.rb
 
 # Plugin Legacy
 
@@ -27,11 +25,8 @@ bundle install
 
 In order to include the polyfills and script tags you can using the following helpers:
 
-- <kbd>[vite_legacy_javascript_tag]</kbd>: Render a `<script>` tag referencing a JavaScript file.
-- <kbd>[vite_legacy_typescript_tag]</kbd>: Render a `<script>` tag referencing a TypeScript file.
-- <kbd>[vite_legacy_polyfill_tag]</kbd>: Renders the polyfills necessary to enable code-splitting in legacy browsers.
+- <kbd>[vite_legacy_javascript_tag]</kbd>: Render a `<script>` tag referencing a JavaScript or TypeScript entrypoints.
 
-The polyfill is included by default when using <kbd>[vite_legacy_javascript_tag]</kbd>
 
 ```erb
 <head>
@@ -40,11 +35,11 @@ The polyfill is included by default when using <kbd>[vite_legacy_javascript_tag]
   <%= csp_meta_tag %>
   <%= vite_client_tag %>
 
+  <%= vite_legacy_javascript_tag 'application' => :javascript %>
   <%= vite_javascript_tag 'application' %>
 </head>
 <body>
   <%= yield %>
-  <%= vite_legacy_javascript_tag 'application' %>
 </body>
 ```
 

diff --git a/examples/rails/app/views/layouts/application.html.erb b/examples/rails/app/views/layouts/application.html.erb
@@ -9,12 +9,12 @@
 
     <link rel="icon" type="image/png" href="<%= vite_asset_path('images/logo.png') %>">
 
+    <%= vite_legacy_javascript_tag 'application' => :typescript %>
     <%= vite_stylesheet_tag 'styles.scss' %>
     <%= vite_typescript_tag 'application', 'data-turbo-track': 'reload', media: 'all' %>
   </head>
 
   <body>
     <%= yield %>
-    <%= vite_legacy_typescript_tag 'application' %>
   </body>
 </html>
diff --git a/test/helper_test.rb b/test/helper_test.rb
@@ -50,9 +50,9 @@ class LegacyHelperTest < HelperTestCase
   })
 
   def test_plugin_legacy
-    assert_includes vite_legacy_javascript_tag('/app/assets/external'), '/vite-production/assets/external.a35ee0db-legacy.js'
-    assert_includes vite_legacy_typescript_tag('main.ts'), '/vite-production/assets/main.20bbd3a5-legacy.js'
-    assert_includes vite_legacy_polyfill_tag, '/vite-production/assets/polyfills-legacy.07477394.js'
+    assert_includes vite_legacy_javascript_tag('/app/assets/external' => :javascript), '/vite-production/assets/external.a35ee0db-legacy.js'
+    assert_includes vite_legacy_javascript_tag('main.ts' => :typescript), '/vite-production/assets/main.20bbd3a5-legacy.js'
+    assert_includes vite_legacy_javascript_tag('main.ts' => :typescript), '/vite-production/assets/polyfills-legacy.07477394.js'
   end
 end
 

diff --git a/vite_plugin_legacy/lib/vite_plugin_legacy/tag_helpers.rb b/vite_plugin_legacy/lib/vite_plugin_legacy/tag_helpers.rb
@@ -5,46 +5,51 @@ module VitePluginLegacy::TagHelpers
   VITE_SAFARI_NOMODULE_FIX = <<-JS.html_safe.freeze
   !function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;console.log('preventing load',e.target);e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();
   JS
-  # Public: Renders a <script> tag for the specified Vite entrypoints when using
-  # @vitejs/plugin-legacy, which injects polyfills.
-  def vite_legacy_javascript_tag(name, asset_type: :javascript)
-    return if ViteRuby.instance.dev_server_running?
-
-    legacy_name = name.sub(/(\..+)|$/, '-legacy\1')
-    import_tag = content_tag(:script, nomodule: true) {
-      vite_legacy_import_body(name, asset_type: asset_type)
-    }
-
-    import_tag
-  end
-
-  # Public: Same as `vite_legacy_javascript_tag`, but for TypeScript entries.
-  def vite_legacy_typescript_tag(name)
-    vite_legacy_javascript_tag(name, asset_type: :typescript)
-  end
 
-  # Renders the vite-legacy-polyfill to enable code splitting in
-  # browsers that do not support modules.
-  # Entrypoints in format: {"entrypoint_name" => asset_type }
-  # e.g.: { "application" => :typescript }
-  def vite_legacy_polyfill_tag(entrypoints)
+  # Renders code to load vite entrypoints for legacy browsers:
+  # * Safari NOMODULE fix for Safari 10, which supports modules but not `nomodule`
+  # * vite-legacy-polyfill (System.import polyfill) for browsers that do not support modules @vitejs/plugin-legacy
+  # * Dynamic import code for browsers that support modules, but not dynamic imports
+  # This helper must be called before any other Vite import tags.
+  # Accepts a hash with entrypoint names as keys and asset types (:javascript or :typescript) as values.
+  def vite_legacy_javascript_tag(entrypoints)
     return if ViteRuby.instance.dev_server_running?
 
     tags = []
-    tags.push(content_tag(:script, nil, nomodule: true) { VITE_SAFARI_NOMODULE_FIX })
-    tags.push(content_tag(:script, nil, nomodule: true, id: 'vite-legacy-polyfill', src: vite_asset_path('legacy-polyfills', type: :virtual)))
-    entrypoints.each do |entrypoint, asset_type|
-      tags.push(content_tag(:script, nil, type: 'module') { vite_dynamic_fallback_inline_code(entrypoint, asset_type: asset_type) })
+    safari_nomodule_fix = content_tag(:script, nil, nomodule: true) { VITE_SAFARI_NOMODULE_FIX }
+    tags.push(safari_nomodule_fix)
+    # for browsers which do not support modules at all
+    legacy_polyfill = content_tag(:script, nil, nomodule: true, id: 'vite-legacy-polyfill', src: vite_asset_path('legacy-polyfills', type: :virtual))
+    tags.push(legacy_polyfill)
+    # for browsers which support modules, but don't support dynamic import
+    legacy_fallback_tag = content_tag(:script, nil, type: 'module') do
+      vite_dynamic_fallback_inline_code(entrypoints)
+    end
+    entrypoints.each do |name, asset_type|
+      import_tag = content_tag(:script, nomodule: true) do
+        vite_legacy_import_body(name, asset_type: asset_type)
+      end
+      tags.push(import_tag)
     end
+    tags.push(legacy_fallback_tag)
     safe_join(tags, "\n")
   end
 
-  def vite_dynamic_fallback_inline_code(name, asset_type: :javascript)
-    %Q{!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){#{vite_legacy_import_body(name, asset_type: asset_type)}},document.body.appendChild(n)}}();}.html_safe
+  def vite_dynamic_fallback_inline_code(entrypoints)
+    load_body = entrypoints.map do |name, asset_type|
+      vite_legacy_import_body(name, asset_type: asset_type)
+    end
+    load_body = safe_join(load_body, "\n")
+    # rubocop:disable Layout/LineLength
+    %{!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){#{ load_body }},document.body.appendChild(n)}}();}.html_safe
+    # rubocop:enable Layout/LineLength
   end
 
   def vite_legacy_import_body(name, asset_type: :javascript)
-    legacy_name = name.sub(/(\..+)|$/, '-legacy\1')
-    "System.import('#{ vite_asset_path(legacy_name, type: asset_type) }')".html_safe
+    "System.import('#{ vite_asset_path(vite_legacy_name(name), type: asset_type) }')".html_safe
+  end
+
+  def vite_legacy_name(name)
+    name.sub(/(\..+)|$/, '-legacy\1')
   end
 end