From ccf7e6e5bfee67d02fb07c7ca556e1938ca9b7d9 Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Tue, 17 Mar 2020 08:20:36 -0400 Subject: [PATCH] Upgrade to webpacker/webpack 4 and Babel 7 (#6664) Upgraded to webpacker 4/webpack 4 and Babel 7 --- .babelrc | 21 - .travis.yml | 2 +- Gemfile | 2 +- Gemfile.lock | 4 +- .../articles/__stories__/Article.stories.jsx | 357 +- .../__stories__/FeaturedArticle.stories.jsx | 1 - .../__stories__/LoadingArticle.stories.jsx | 1 - .../channelDetails.test.jsx.snap | 2 +- .../__snapshots__/githubRepo.test.jsx.snap | 10 +- .../__stories__/avatarsAndLogos.stories.jsx | 1 - .../__stories__/boxes.stories.jsx | 1 - .../__stories__/buttons.stories.jsx | 1 - .../__stories__/dropdowns.stories.jsx | 4 +- .../__stories__/formElements.stories.jsx | 1 - .../__stories__/indicators.stories.jsx | 1 - .../__stories__/mainNavigation.stories.jsx | 1 - .../__stories__/modals.stories.jsx | 4 +- .../__stories__/navigationTabs.stories.jsx | 1 - .../__stories__/notices.stories.jsx | 1 - .../__stories__/typography.stories.jsx | 1 - .../__snapshots__/singleListing.test.jsx.snap | 2 +- .../__stories__/PodcastEpisode.stories.jsx | 2 +- .../__stories__/TodaysPodcasts.stories.jsx | 1 - .../Search/__stories__/SearchForm.stories.jsx | 2 +- app/views/articles/_actions.html.erb | 2 +- app/views/articles/edit.html.erb | 3 +- app/views/articles/index.html.erb | 2 +- app/views/articles/new.html.erb | 3 +- app/views/articles/show.html.erb | 4 +- app/views/articles/stats.html.erb | 2 +- .../tags/_sidebar_additional.html.erb | 2 +- app/views/chat_channels/index.html.erb | 2 +- app/views/classified_listings/_form.html.erb | 6 +- .../classified_listings/dashboard.html.erb | 2 +- app/views/classified_listings/index.html.erb | 12 +- app/views/dashboards/pro.html.erb | 2 +- app/views/layouts/internal.html.erb | 4 +- app/views/moderations/index.html.erb | 6 +- app/views/onboardings/show.html.erb | 2 +- app/views/pages/live.html.erb | 2 +- app/views/reading_list_items/index.html.erb | 2 +- app/views/shell/_top.html.erb | 25 +- app/views/tags/edit.html.erb | 2 +- app/views/users/_integrations.html.erb | 6 +- app/views/users/_org_admin.html.erb | 3 +- app/views/users/_org_non_member.html.erb | 2 +- app/views/users/_profile.html.erb | 2 +- app/views/users/show.html.erb | 2 +- babel.config.js | 38 + config/webpack/environment.js | 52 +- config/webpacker.yml | 51 +- docs/frontend/preact.md | 4 +- docs/frontend/webpacker.md | 32 +- package.json | 11 +- yarn.lock | 3465 ++++++++++++----- 55 files changed, 2865 insertions(+), 1312 deletions(-) delete mode 100644 .babelrc create mode 100644 babel.config.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 4f0581df5..000000000 --- a/.babelrc +++ /dev/null @@ -1,21 +0,0 @@ -{ - "presets": [ - ["env", { "modules": false, "targets": { "browsers": "> 1%", "uglify": true }, "useBuiltIns": true }], - "preact", - ], - - "env": { - "test": { - "plugins": [ - "transform-es2015-modules-commonjs", - ] - } - }, - - "plugins": [ - "syntax-dynamic-import", - "transform-object-rest-spread", - ["transform-class-properties", { "spec": true }], - [ "transform-react-jsx", { "pragma": "h" }] - ] -} diff --git a/.travis.yml b/.travis.yml index 7c714dd37..dedbd21e2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -64,7 +64,7 @@ script: - './cc-test-reporter sum-coverage coverage/codeclimate.*.json' - './cc-test-reporter upload-coverage' - 'bundle exec bundle-audit check --update --ignore CVE-2015-9284' - - yarn build-storybook + # - yarn build-storybook - bundle exec rails runner -e production 'puts "App booted successfully"' deploy: provider: heroku diff --git a/Gemfile b/Gemfile index 4542308af..0c621061d 100644 --- a/Gemfile +++ b/Gemfile @@ -104,7 +104,7 @@ gem "typhoeus", "~> 1.3.1" # Used with Elasticsearch to support http keep-alive gem "uglifier", "~> 4.2" # Uglifier minifies JavaScript files gem "ulid", "~> 1.2" # Universally Unique Lexicographically Sortable Identifier implementation for Ruby gem "validate_url", "~> 1.0" # Library for validating urls in Rails -gem "webpacker", "~> 3.5" # Use webpack to manage app-like JavaScript modules in Rails +gem "webpacker", "~> 4.2.2" # Use webpack to manage app-like JavaScript modules in Rails group :development do gem "better_errors", "~> 2.6" # Provides a better error page for Rails and other Rack apps diff --git a/Gemfile.lock b/Gemfile.lock index a81b9b412..bc047c844 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -842,7 +842,7 @@ GEM addressable (>= 2.3.6) crack (>= 0.3.2) hashdiff (>= 0.4.0, < 2.0.0) - webpacker (3.5.5) + webpacker (4.2.2) activesupport (>= 4.2) rack-proxy (>= 0.6.1) railties (>= 4.2) @@ -1004,7 +1004,7 @@ DEPENDENCIES web-console (~> 3.7) webdrivers (~> 4.2) webmock (~> 3.8) - webpacker (~> 3.5) + webpacker (~> 4.2.2) yard (~> 0.9.24) yard-activerecord (~> 0.0.16) yard-activesupport-concern (~> 0.0.1) diff --git a/app/javascript/articles/__stories__/Article.stories.jsx b/app/javascript/articles/__stories__/Article.stories.jsx index a765c1ee6..307a14ee8 100644 --- a/app/javascript/articles/__stories__/Article.stories.jsx +++ b/app/javascript/articles/__stories__/Article.stories.jsx @@ -1,5 +1,4 @@ import { h } from 'preact'; -import { storiesOf } from '@storybook/react'; import { withKnobs, object, text, boolean } from '@storybook/addon-knobs/react'; import { action } from '@storybook/addon-actions'; import { Article } from '..'; @@ -9,11 +8,11 @@ import { articleWithSnippetResult, articleWithReadingTimeGreaterThan1, articleWithReactions, - videoArticle, + // videoArticle, articleWithComments, - podcastArticle, - podcastEpisodeArticle, - userArticle, + // podcastArticle, + // podcastEpisodeArticle, + // userArticle, assetPath, } from '../__tests__/utilities/articleUtilities'; import { articleDecorator } from './articleDecorator'; @@ -30,159 +29,201 @@ const commonProps = { bookmarkClick: action('Saved/unsaved article'), }; -storiesOf('App Components/Article/Standard', module) - .addDecorator(withKnobs) - .addDecorator(articleDecorator) - .add('Default', () => ( -
- )) - .add('With Organization', () => ( -
- )) - .add('Wth Flare Tag', () => ( -
- )) - .add('Wth Snippet Result', () => ( -
- )) - .add('Wth Reading Time', () => ( -
- )) - .add('Wth Reactions', () => ( -
- )) - .add('With Comments', () => ( -
- )) - .add('Is on Reading List', () => ( -
- )); +export default { + title: 'App Components/Article/Standard', + component: Article, + decorators: [withKnobs, articleDecorator], +}; -storiesOf('App Components/Article/Video', module) - .addDecorator(withKnobs) - .addDecorator(articleDecorator) - .add('Default', () => ( -
- )) - .add('Video Article and Flare Tag', () => ( -
- )); +export const DefaultArticle = () => ( +
+); -storiesOf('App Components/Article/Podcast', module) - .addDecorator(withKnobs) - .addDecorator(articleDecorator) - .add('Default', () => ( -
- )) - .add('Podcast Episode', () => ( -
- )); +DefaultArticle.story = { + name: 'default', +}; -storiesOf('App Components/Article/User', module) - .addDecorator(withKnobs) - .addDecorator(articleDecorator) - .add('Default', () => ( -
- )); +export const WithOrganization = () => ( +
+); + +WithOrganization.story = { + name: 'with organization', +}; + +export const WithFlareTag = () => ( +
+); + +WithFlareTag.story = { + name: 'with flare tag', +}; + +export const WithSnippetResult = () => ( +
+); + +WithSnippetResult.story = { + name: 'with snippet result', +}; + +export const WithReadingTime = () => ( +
+); + +WithReadingTime.story = { + name: 'with reading time', +}; + +export const WithReactions = () => ( +
+); + +WithReactions.story = { + name: 'with reactions', +}; + +export const WithComments = () => ( +
+); + +WithComments.story = { + name: 'with comments', +}; + +export const OnReadingList = () => ( +
+); + +OnReadingList.story = { + name: 'on reading list', +}; + +// storiesOf('App Components/Article/Video', module) +// .addDecorator(withKnobs) +// .addDecorator(articleDecorator) +// .add('Default', () => ( +//
+// )) +// .add('Video Article and Flare Tag', () => ( +//
+// )); + +// storiesOf('App Components/Article/Podcast', module) +// .addDecorator(withKnobs) +// .addDecorator(articleDecorator) +// .add('Default', () => ( +//
+// )) +// .add('Podcast Episode', () => ( +//
+// )); + +// storiesOf('App Components/Article/User', module) +// .addDecorator(withKnobs) +// .addDecorator(articleDecorator) +// .add('Default', () => ( +//
+// )); diff --git a/app/javascript/articles/__stories__/FeaturedArticle.stories.jsx b/app/javascript/articles/__stories__/FeaturedArticle.stories.jsx index 421038a51..f2a903c77 100644 --- a/app/javascript/articles/__stories__/FeaturedArticle.stories.jsx +++ b/app/javascript/articles/__stories__/FeaturedArticle.stories.jsx @@ -1,5 +1,4 @@ import { h } from 'preact'; -import { storiesOf } from '@storybook/react'; import { withKnobs, object, text, boolean } from '@storybook/addon-knobs/react'; import { action } from '@storybook/addon-actions'; import { diff --git a/app/javascript/articles/__stories__/LoadingArticle.stories.jsx b/app/javascript/articles/__stories__/LoadingArticle.stories.jsx index 40830b939..9a4d588ce 100644 --- a/app/javascript/articles/__stories__/LoadingArticle.stories.jsx +++ b/app/javascript/articles/__stories__/LoadingArticle.stories.jsx @@ -1,5 +1,4 @@ import { h } from 'preact'; -import { storiesOf } from '@storybook/react'; import { LoadingArticle } from '..'; import '../../../assets/stylesheets/articles.scss'; import { articleDecorator } from './articleDecorator'; diff --git a/app/javascript/chat/__tests__/__snapshots__/channelDetails.test.jsx.snap b/app/javascript/chat/__tests__/__snapshots__/channelDetails.test.jsx.snap index d3427cac5..452f43ef4 100644 --- a/app/javascript/chat/__tests__/__snapshots__/channelDetails.test.jsx.snap +++ b/app/javascript/chat/__tests__/__snapshots__/channelDetails.test.jsx.snap @@ -195,7 +195,7 @@ preact-render-spy (1 nodes) - <%= javascript_pack_tag "notificationSubscriptionHandler", defer: true %> + <%= javascript_packs_with_chunks_tag "notificationSubscriptionHandler", defer: true %> <% end %>
diff --git a/app/views/articles/edit.html.erb b/app/views/articles/edit.html.erb index a5fb5795b..0d61f1c45 100644 --- a/app/views/articles/edit.html.erb +++ b/app/views/articles/edit.html.erb @@ -28,6 +28,5 @@ <% end %> <%= render "shared/webcomponents_loader_script" %> -<%= javascript_pack_tag "clipboardCopy", defer: true %> -<%= javascript_pack_tag "articleForm", defer: true %> +<%= javascript_packs_with_chunks_tag "clipboardCopy", "articleForm", defer: true %> <%= render "articles/v2_form", article: @article, organizations: @organizations, version: @version %> diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb index 3cc401554..454c7a1a0 100644 --- a/app/views/articles/index.html.erb +++ b/app/views/articles/index.html.erb @@ -23,7 +23,7 @@ <%= auto_discovery_link_tag(:rss, "#{app_protocol_and_domain}/feed", title: "#{ApplicationConfig['COMMUNITY_NAME']} RSS Feed") %> <% end %> -<%= javascript_pack_tag "homePage", defer: true %> +<%= javascript_packs_with_chunks_tag "homePage", defer: true %> <% cache(cache_key_heroku_slug("main-stories-index-#{params}-#{user_signed_in?}"), expires_in: 90.seconds) do %>
<%= render "shared/webcomponents_loader_script" %> - <%= javascript_pack_tag "clipboardCopy", defer: true %> - <%= javascript_pack_tag "articleForm", defer: true %> + <%= javascript_packs_with_chunks_tag "clipboardCopy", "articleForm", defer: true %> <%= render "articles/v2_form", article: @article, organizations: @organizations, version: @version %> <% else %> <% @new_article_not_logged_in = true %> diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb index 8a84afef4..e356bfb67 100644 --- a/app/views/articles/show.html.erb +++ b/app/views/articles/show.html.erb @@ -1,7 +1,7 @@ <% title @article.title %> <%= render "shared/webcomponents_loader_script" %> -<%= javascript_pack_tag "clipboardCopy", defer: true %> +<%= javascript_packs_with_chunks_tag "clipboardCopy", "webShare", defer: true %> <% cache("content-related-optional-scripts-#{@article.id}-#{@article.updated_at}", expires_in: 30.hours) do %> <% if @article.processed_html.include? "ltag_gist-liquid-tag" %> @@ -227,5 +227,3 @@ <%= TweetTag.script.html_safe %> <% end %> - -<%= javascript_pack_tag "webShare", defer: true %> diff --git a/app/views/articles/stats.html.erb b/app/views/articles/stats.html.erb index 3a1f6213c..63ec4da5f 100644 --- a/app/views/articles/stats.html.erb +++ b/app/views/articles/stats.html.erb @@ -17,4 +17,4 @@ <%= render "shared/stats" %>
-<%= javascript_pack_tag "analyticsArticle", defer: true %> +<%= javascript_packs_with_chunks_tag "analyticsArticle", defer: true %> diff --git a/app/views/articles/tags/_sidebar_additional.html.erb b/app/views/articles/tags/_sidebar_additional.html.erb index aa260de92..be1f7aabd 100644 --- a/app/views/articles/tags/_sidebar_additional.html.erb +++ b/app/views/articles/tags/_sidebar_additional.html.erb @@ -17,7 +17,7 @@
<% end %> <% if user_signed_in? %> - <%= javascript_pack_tag "sidebarWidget", defer: true %> + <%= javascript_packs_with_chunks_tag "sidebarWidget", defer: true %>
">
<% else %> diff --git a/app/views/chat_channels/index.html.erb b/app/views/chat_channels/index.html.erb index 3df574300..ebc35d68c 100644 --- a/app/views/chat_channels/index.html.erb +++ b/app/views/chat_channels/index.html.erb @@ -6,7 +6,7 @@ <%= csrf_meta_tags %> <% if user_signed_in? %> - <%= javascript_pack_tag "Chat", defer: true %> + <%= javascript_packs_with_chunks_tag "Chat", defer: true %>
- <%= javascript_pack_tag "listingForm", defer: true %> + <% unless @organizations.present? %> + <%= javascript_packs_with_chunks_tag "listingForm", defer: true %> + <% end %>
<%= form.label "location", "Location (If applicable for events, etc.)" %> <%= form.text_field "location", placeholder: "32 characters max, plain text" %> @@ -81,7 +83,7 @@ has <%= @organizations.first.credits.unspent.size %> credits - Buy More
- <%= javascript_pack_tag "orgCreditsSelector", defer: true %> + <%= javascript_packs_with_chunks_tag "listingForm", "orgCreditsSelector", defer: true %> <% end %> diff --git a/app/views/classified_listings/dashboard.html.erb b/app/views/classified_listings/dashboard.html.erb index 1eb265ab2..4b802c1a8 100644 --- a/app/views/classified_listings/dashboard.html.erb +++ b/app/views/classified_listings/dashboard.html.erb @@ -15,4 +15,4 @@ only: %i[id name slug unspent_credits_count] ) %>" > -<%= javascript_pack_tag "listingDashboard", defer: true %> +<%= javascript_packs_with_chunks_tag "listingDashboard", defer: true %> diff --git a/app/views/classified_listings/index.html.erb b/app/views/classified_listings/index.html.erb index cc74ff123..37a5c0a63 100644 --- a/app/views/classified_listings/index.html.erb +++ b/app/views/classified_listings/index.html.erb @@ -32,15 +32,15 @@ only: %i[title processed_html tag_list category id user_id slug contact_via_connect location], include: { author: { only: %i[username name], methods: %i[username profile_image_90] } - }, + } ) %>" data-allcategories="<%= ClassifiedListing.categories_for_display.to_json %>" <% if @displayed_classified_listing %> data-displayedlisting="<%= @displayed_classified_listing.to_json( - only: %i[title processed_html tag_list category id user_id slug contact_via_connect location], - include: { - author: { only: %i[username name], methods: %i[username profile_image_90] } - }, + only: %i[title processed_html tag_list category id user_id slug contact_via_connect location], + include: { + author: { only: %i[username name], methods: %i[username profile_image_90] } + }, ) %> " <% end %> > @@ -54,4 +54,4 @@ -<%= javascript_pack_tag "listings", defer: true %> +<%= javascript_packs_with_chunks_tag "listings", defer: true %> diff --git a/app/views/dashboards/pro.html.erb b/app/views/dashboards/pro.html.erb index 04412f68e..40412ff93 100644 --- a/app/views/dashboards/pro.html.erb +++ b/app/views/dashboards/pro.html.erb @@ -25,4 +25,4 @@ <%= render "shared/stats" %> -<%= javascript_pack_tag "analyticsDashboard", defer: true %> +<%= javascript_packs_with_chunks_tag "analyticsDashboard", defer: true %> diff --git a/app/views/layouts/internal.html.erb b/app/views/layouts/internal.html.erb index 5f7f4c64a..9196c1b7a 100644 --- a/app/views/layouts/internal.html.erb +++ b/app/views/layouts/internal.html.erb @@ -12,9 +12,7 @@ <%= controller_name.titleize %> - <%= javascript_pack_tag "manifest", defer: true %> - <%= javascript_pack_tag "vendor", defer: true %> - <%= javascript_pack_tag "internal", defer: true %> + <%= javascript_packs_with_chunks_tag "internal", defer: true %> diff --git a/app/views/moderations/index.html.erb b/app/views/moderations/index.html.erb index 5d3dc09df..ab266ef55 100644 --- a/app/views/moderations/index.html.erb +++ b/app/views/moderations/index.html.erb @@ -25,13 +25,13 @@ <% plucked_article_ids = Article.cached_tagged_with(@tag).pluck(:id) if @tag %>
- <%= number_with_delimiter(@tag ? Comment.where(commentable_id: plucked_article_ids ).where("created_at > ?", 7.days.ago).size : Comment.where("created_at > ?", 7.days.ago).size) %> + <%= number_with_delimiter(@tag ? Comment.where(commentable_id: plucked_article_ids).where("created_at > ?", 7.days.ago).size : Comment.where("created_at > ?", 7.days.ago).size) %>
Comments This Week
- <%= number_with_delimiter(@tag ? Reaction.where(reactable_id: plucked_article_ids ).where("created_at > ?", 7.days.ago).size : Reaction.where("created_at > ?", 7.days.ago).size) %> + <%= number_with_delimiter(@tag ? Reaction.where(reactable_id: plucked_article_ids).where("created_at > ?", 7.days.ago).size : Reaction.where("created_at > ?", 7.days.ago).size) %>
Reactions This Week
@@ -86,7 +86,7 @@

We periodically award some DEV members with heightened privileges to help moderate the community.

Email <%= SiteConfig.default_site_email %> if you'd like to be considered right away.

- <% if !user_signed_in? %> + <% unless user_signed_in? %>

P.S. You are not currently signed in.

<% end %>
diff --git a/app/views/onboardings/show.html.erb b/app/views/onboardings/show.html.erb index b8efb7048..71c02c069 100644 --- a/app/views/onboardings/show.html.erb +++ b/app/views/onboardings/show.html.erb @@ -14,7 +14,7 @@
- <%= javascript_pack_tag "Onboarding", defer: true %> + <%= javascript_packs_with_chunks_tag "Onboarding", defer: true %>
-<%= javascript_pack_tag "readingList", defer: true %> +<%= javascript_packs_with_chunks_tag "readingList", defer: true %> diff --git a/app/views/shell/_top.html.erb b/app/views/shell/_top.html.erb index 59127154e..7e0d437fb 100644 --- a/app/views/shell/_top.html.erb +++ b/app/views/shell/_top.html.erb @@ -11,21 +11,20 @@ <%= render "layouts/styles" %> - - <%= javascript_pack_tag "manifest", defer: true %> - <%= javascript_pack_tag "vendor", defer: true %> - <%= javascript_pack_tag "Search", defer: true %> + <% unless user_signed_in? %> + <%= javascript_packs_with_chunks_tag "Search", defer: true %> + <% end %> <%= javascript_include_tag "base", defer: true %> <% if user_signed_in? %> - <%= javascript_pack_tag "onboardingRedirectCheck", defer: true %> - <%= javascript_pack_tag "contentDisplayPolicy", defer: true %> + <%= javascript_packs_with_chunks_tag "Search", "onboardingRedirectCheck", "contentDisplayPolicy", defer: true %> <% end %> <%= yield(:page_meta) %> @@ -61,4 +60,4 @@ loading... - <% end %> \ No newline at end of file + <% end %> diff --git a/app/views/tags/edit.html.erb b/app/views/tags/edit.html.erb index cad4e0431..4696354a5 100644 --- a/app/views/tags/edit.html.erb +++ b/app/views/tags/edit.html.erb @@ -1,6 +1,6 @@ <% title "Edit #{@tag.name}" %> -<%= javascript_pack_tag "colorPicker", defer: true %> +<%= javascript_packs_with_chunks_tag "colorPicker", defer: true %>