Skip to content

Modernize the javascript and bundle everything with Vite#1392

Merged
eliotjordan merged 100 commits intomainfrom
modernize-js
Jul 29, 2024
Merged

Modernize the javascript and bundle everything with Vite#1392
eliotjordan merged 100 commits intomainfrom
modernize-js

Conversation

@thatbudakguy
Copy link
Member

@thatbudakguy thatbudakguy commented Jul 8, 2024

Ref #1132

You may need to completely delete .internal_test_app for the generators to re-run correctly.

This updates all of the javascript to ES6 (borrowing somewhat from #1344). It also removes sprockets imports from these files and instead uses Vite to bundle all of the JS and CSS for the app.

The app/assets/javascripts directory goes away, in favor of everything being listed in app/javascript like the other entrypoints. Many structures that made use of jQuery have been converted into Stimulus controllers and are now Turbo-compatible.

In general, everything that was vendorized or referenced from a gem is now installed via npm and referenced from node_modules. This is the pattern blacklight uses to ship its JS and SCSS sources. This means that the generated app can ultimately choose its own bundling strategy, since all the source files are available.

peetucket and others added 21 commits July 29, 2024 16:41
Setting a huge height with !important caused these viewers to be
much larger than their container.
This fixes the height issue with the initial render.
We now only support Rails 7, and no longer build the test app
without javascript, so these Hotwire libraries will always be
installed automatically and don't need special handling.
Both `yarn link` and `npm link` do not install the dependencies
of the linked package. This means that things like leaflet are
not actually available in a dev/test context when building the
frontend, even though they would be in a production context
where the frontend package is installed normally.

This PR fixes the situation by borrowing the same approach as
blacklight, which instead adds the package with `yarn add` pointing
to the parent directory. This way, its dependencies will be installed
at the correct level and available for building with Vite.
Copy link
Member

@eliotjordan eliotjordan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent work. 💯

@eliotjordan eliotjordan merged commit 867b13b into main Jul 29, 2024
@eliotjordan eliotjordan deleted the modernize-js branch July 29, 2024 22:56
@marlo-longley
Copy link
Contributor

Yayyy!! 🥳 Great work everyone.

dnoneill pushed a commit that referenced this pull request Jul 30, 2024
Modernize the javascript and bundle everything with Vite
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sass is deprecated, so don't deliver sprockets stylesheets Update / upgrade javascript

5 participants