[go: nahoru, domu]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for @vitejs/plugin-legacy #27

Closed
smalluban opened this issue Mar 5, 2021 · 12 comments · Fixed by #28
Closed

Support for @vitejs/plugin-legacy #27

smalluban opened this issue Mar 5, 2021 · 12 comments · Fixed by #28

Comments

@smalluban
Copy link
smalluban commented Mar 5, 2021 •
edited
Loading

Is your feature request related to a problem? Please describe.

In my RoR project support for older browsers (not supporting ES modules) is required. There is a great plugin from the Vite contributors - @vitejs/plugin-legacy - to support that case.

Unfortunately, it does not work properly with vite_rails_legacy (I did not check the vite_rails). The manifest.json does not include additional chunks generated by the plugin, which are required to make it work properly.

For now, I added the following code to the application layout:

%head
  = vite_client_tag
  = vite_javascript_tag 'application'
  = vite_javascript_tag 'application-legacy', type: nil, nomodule: ""

The application-legacy chunk is generated, but not the rest.

Describe the solution you'd like

I looked into the source code of the plugin, and it looks, that we should have also a list of chunks.

EDIT:

I bootstraped vite on node, and legacy plugin generates more sophisticated output (regardless of Safari 10 bugfix):

<script nomodule src="/assets/polyfills-legacy.0809adaa.js"></script>
<script
  nomodule
  id="vite-legacy-entry"
  data-src="/assets/index-legacy.4271aeaa.js"
>
  System.import(
    document.getElementById("vite-legacy-entry").getAttribute("data-src")
  );
</script>

I am not sure how it can be integrated with this tool (as just output chunks will not be sufficient).

Describe alternatives you've considered

n/a.
@ElMassimo
Copy link
Owner

Hi Dominik! Thanks for the report.

Fortunately, it's possible to replicate the same behavior that the plugin performs in the index.html by adding a few tag helpers.

I'm about to release a new gem that includes these helpers.

In the meantime, here's the code:

  # Public: Renders the vite-legacy-polyfill to enable code splitting in
  # browsers that do not support modules.
  def vite_legacy_polyfills_tag
    return if ViteRuby.instance.dev_server_running?

    name = vite_manifest.send(:manifest).keys.find { |file| file.include?('legacy-polyfills') } ||
           raise(ArgumentError, 'Vite legacy polyfill not found in manifest.json')
    tag.script(nomodule: true, src: vite_asset_path(name))
  end

  # 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')
    id = "vite-#{ legacy_name.tr(' .\'', '-') }-entry"
    legacy_tag = tag.script(nomodule: true, id: id, 'data-src': vite_asset_path(legacy_name, type: asset_type)) {
      "System.import(document.getElementById('#{ id }').getAttribute('data-src'))".html_safe
    }

    safe_join [vite_legacy_polyfills_tag, legacy_tag]
  end

and then use it as:

  <body>
    <%= yield %>
    <%= vite_legacy_javascript_tag 'application' %>
  </body>
</html>

@smalluban
Copy link
Author

I tried your code, but there is a problem with tag.script function.

error

@ElMassimo
Copy link
Owner
ElMassimo commented Mar 5, 2021 •
edited
Loading

Gotcha, I was testing on Rails 5. Replace it with a content_tag.

@ElMassimo ElMassimo mentioned this issue Mar 5, 2021
Merged
@smalluban
Copy link
Author

I think nomodule should be set to empty string. For now, it produces nomodule="false", which is not correct in sense of boolean attributes. Empty string will produce <script nomodule>, which is correct.

@ElMassimo
Copy link
Owner
ElMassimo commented Mar 5, 2021 •
edited
Loading

Sorry, testing leftovers, thanks for the heads up!

Please install gem 'vite_plugin_legacy', '0.5.1'.

There's a new section in the guide.

I decided to skip the Safari 10 polyfill, but we could add a note in the docs so that anyone that needs to provide support for it knows what to do about it.

@smalluban
Copy link
Author

We don't support Safari 10, so I agree, that it is not necessary. Thanks a lot for such a fast response with a solution! Great project btw!

@smalluban
Copy link
Author

Tested, and I think this line should be vite_rails_legacy? Or one of those? I have an error when starting rails server:

`require': cannot load such file -- vite_rails (LoadError)

vite_ruby/vite_plugin_legacy/lib/vite_plugin_legacy/engine.rb

Line 3 in ae7774d

require 'vite_rails'

@ElMassimo
Copy link
Owner
ElMassimo commented Mar 5, 2021 •
edited
Loading

Sorry again! The require isn't necessary anymore as I used content_tag which is also available in frameworks such as padrino.

Released as 0.5.2, let me know if this one does the trick 😅 @smalluban

@smalluban
Copy link
Author
smalluban commented Mar 8, 2021 •
edited
Loading

Hi again! I think we have the last leftover. I am testing TypeScript in the project and vite_legacy_javascript_tag does not work with entry points written in .ts. It looks, that manifest now has entrypoint.ts instead of entrypoint.js. As the result, rails throws an error:

Vite Ruby can't find broadcast-legacy.js in /Users/dominik/Workspace/Viewcy/public/vite-dev/manifest.json or /Users/dominik/Workspace/Viewcy/public/vite-dev/manifest-assets.json.

@ElMassimo
Copy link
Owner
ElMassimo commented Mar 8, 2021 •
edited
Loading

Didn't add a vite_legacy_typescript_tag helper, but you should be able to achieve the same by passing asset_type: :typescript.

It might be useful to add that helper in a future release. Please try it out and let me know how it goes.

@smalluban
Copy link
Author

Thanks, it worked :)

@ElMassimo
Copy link
Owner

Added vite_legacy_typescript_tag to vite_plugin_legacy@0.5.4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Add vite_plugin_legacy with tag helpers for @vitejs/plugin-legacy ElMassimo/vite_ruby
2 participants
@ElMassimo @smalluban