Upgrade to webpacker/webpack 4 and Babel 7 (#6664)

Upgraded to webpacker 4/webpack 4 and Babel 7

.babelrc

@@ -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" }]
-  ]
-}

.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

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

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)

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,
+  // podcastArticle,
-  podcastEpisodeArticle,
+  // podcastEpisodeArticle,
-  userArticle,
+  // 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)
+export default {
-  .addDecorator(withKnobs)
+  title: 'App Components/Article/Standard',
-  .addDecorator(articleDecorator)
+  component: Article,
-  .add('Default', () => (
+  decorators: [withKnobs, articleDecorator],
-    <Article
+};
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', article)}
-      currentTag={text('currentTag', 'javascript')}
-    />
-  ))
-  .add('With Organization', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithOrganization)}
-      currentTag={text('currentTag', 'javascript')}
-    />
-  ))
-  .add('Wth Flare Tag', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', article)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Wth Snippet Result', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithSnippetResult)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Wth Reading Time', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithReadingTimeGreaterThan1)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Wth Reactions', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithReactions)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('With Comments', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithComments)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Is on Reading List', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', true)}
-      article={object('article', articleWithComments)}
-      currentTag={text('currentTag')}
-    />
-  ));
 
-storiesOf('App Components/Article/Video', module)
+export const DefaultArticle = () => (
-  .addDecorator(withKnobs)
+  <Article
-  .addDecorator(articleDecorator)
+    {...commonProps}
-  .add('Default', () => (
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-    <Article
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      {...commonProps}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    article={object('article', article)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    currentTag={text('currentTag', 'javascript')}
-      isBookmarked={boolean('isBookmarked', false)}
+  />
-      article={object('article', videoArticle)}
+);
-      currentTag={text('currentTag', 'javascript')}
-    />
-  ))
-  .add('Video Article and Flare Tag', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', videoArticle)}
-      currentTag={text('currentTag')}
-    />
-  ));
 
-storiesOf('App Components/Article/Podcast', module)
+DefaultArticle.story = {
-  .addDecorator(withKnobs)
+  name: 'default',
-  .addDecorator(articleDecorator)
+};
-  .add('Default', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', podcastArticle)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Podcast Episode', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', podcastEpisodeArticle)}
-      currentTag={text('currentTag')}
-    />
-  ));
 
-storiesOf('App Components/Article/User', module)
+export const WithOrganization = () => (
-  .addDecorator(withKnobs)
+  <Article
-  .addDecorator(articleDecorator)
+    {...commonProps}
-  .add('Default', () => (
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-    <Article
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      {...commonProps}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    article={object('article', articleWithOrganization)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    currentTag={text('currentTag', 'javascript')}
-      article={object('article', userArticle)}
+  />
-    />
+);
-  ));
+
+WithOrganization.story = {
+  name: 'with organization',
+};
+
+export const WithFlareTag = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', article)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithFlareTag.story = {
+  name: 'with flare tag',
+};
+
+export const WithSnippetResult = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', articleWithSnippetResult)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithSnippetResult.story = {
+  name: 'with snippet result',
+};
+
+export const WithReadingTime = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', articleWithReadingTimeGreaterThan1)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithReadingTime.story = {
+  name: 'with reading time',
+};
+
+export const WithReactions = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', articleWithReactions)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithReactions.story = {
+  name: 'with reactions',
+};
+
+export const WithComments = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', articleWithComments)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithComments.story = {
+  name: 'with comments',
+};
+
+export const OnReadingList = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', true)}
+    article={object('article', articleWithComments)}
+    currentTag={text('currentTag')}
+  />
+);
+
+OnReadingList.story = {
+  name: 'on reading list',
+};
+
+// storiesOf('App Components/Article/Video', module)
+//   .addDecorator(withKnobs)
+//   .addDecorator(articleDecorator)
+//   .add('Default', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       isBookmarked={boolean('isBookmarked', false)}
+//       article={object('article', videoArticle)}
+//       currentTag={text('currentTag', 'javascript')}
+//     />
+//   ))
+//   .add('Video Article and Flare Tag', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       isBookmarked={boolean('isBookmarked', false)}
+//       article={object('article', videoArticle)}
+//       currentTag={text('currentTag')}
+//     />
+//   ));
+
+// storiesOf('App Components/Article/Podcast', module)
+//   .addDecorator(withKnobs)
+//   .addDecorator(articleDecorator)
+//   .add('Default', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       isBookmarked={boolean('isBookmarked', false)}
+//       article={object('article', podcastArticle)}
+//       currentTag={text('currentTag')}
+//     />
+//   ))
+//   .add('Podcast Episode', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       isBookmarked={boolean('isBookmarked', false)}
+//       article={object('article', podcastEpisodeArticle)}
+//       currentTag={text('currentTag')}
+//     />
+//   ));
+
+// storiesOf('App Components/Article/User', module)
+//   .addDecorator(withKnobs)
+//   .addDecorator(articleDecorator)
+//   .add('Default', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       article={object('article', userArticle)}
+//     />
+//   ));

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 {

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';

app/javascript/chat/__tests__/__snapshots__/channelDetails.test.jsx.snap

@@ -195,7 +195,7 @@ preact-render-spy (1 nodes)
          
         <button
           type="button"
-          onClick={[Function value]}
+          onClick={[Function anonymous]}
           data-content="searched_userid3"
         >
           Invite

app/javascript/chat/__tests__/__snapshots__/githubRepo.test.jsx.snap

@@ -14,7 +14,7 @@ preact-render-spy (1 nodes)
         href="https://github.com/username/repositoryname/tree/master/Camera"
         data-api-url="https://api.github.com/repos/username/repositoryname/contents/Camera?ref=master"
         data-path="Camera"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
       >
         <span
           role="img"
@@ -30,7 +30,7 @@ preact-render-spy (1 nodes)
         href="https://github.com/username/repositoryname/tree/master/Environment"
         data-api-url="https://api.github.com/repos/username/repositoryname/contents/Environment?ref=master"
         data-path="Environment"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
       >
         <span
           role="img"
@@ -46,7 +46,7 @@ preact-render-spy (1 nodes)
         href="https://github.com/username/repositoryname/tree/master/Interactables"
         data-api-url="https://api.github.com/repos/username/repositoryname/contents/Interactables?ref=master"
         data-path="Interactables"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
       >
         <span
           role="img"
@@ -62,7 +62,7 @@ preact-render-spy (1 nodes)
         href="https://github.com/username/repositoryname/tree/master/Level%20Design"
         data-api-url="https://api.github.com/repos/username/repositoryname/contents/Level%20Design?ref=master"
         data-path="Level Design"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
       >
         Level Design
       </a>
@@ -72,7 +72,7 @@ preact-render-spy (1 nodes)
         href="https://github.com/username/repositoryname/tree/master/Player"
         data-api-url="https://api.github.com/repos/username/repositoryname/contents/Player?ref=master"
         data-path="Player"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
       >
         Player
       </a>

app/javascript/designSystem/__stories__/avatarsAndLogos.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 

app/javascript/designSystem/__stories__/boxes.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 import { defaultChildrenPropTypes } from '../../src/components/common-prop-types';

app/javascript/designSystem/__stories__/buttons.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 

app/javascript/designSystem/__stories__/dropdowns.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 
@@ -20,8 +19,7 @@ storiesOf('Components/HTML/Dropdowns', module)
       <p>
         If you need to utilize entire dropdown area and you have to get rid of
         default padding, please use modifier class
-        <code>crayons-dropdown--padding-0</code>
+        <code>crayons-dropdown--padding-0</code>.
-        .
       </p>
       <p>
         FYI: Dropdowns use “Box” component as background, with Level 3

app/javascript/designSystem/__stories__/formElements.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 import { defaultChildrenPropTypes } from '../../src/components/common-prop-types';

app/javascript/designSystem/__stories__/indicators.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 

app/javascript/designSystem/__stories__/mainNavigation.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 

app/javascript/designSystem/__stories__/modals.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 
@@ -21,8 +20,7 @@ storiesOf('Components/HTML/Modals', module)
       <p>
         If you need to utilize entire modal area and you have to get rid of
         default padding, please use modifier class
-        <code>crayons-modal--padding-0</code>
+        <code>crayons-modal--padding-0</code>.
-        .
       </p>
       <p>
         FYI: Modals use “Box” component as background, with Level 3 elevation.

app/javascript/designSystem/__stories__/navigationTabs.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 

app/javascript/designSystem/__stories__/notices.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 

app/javascript/designSystem/__stories__/typography.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import './designSystem.scss';
 import './typography.scss';

app/javascript/listings/__tests__/__snapshots__/singleListing.test.jsx.snap

@@ -22,7 +22,7 @@ preact-render-spy (1 nodes)
           type="button"
           class="dropdown-btn"
           aria-label="Toggle dropdown menu"
-          onClick={[Function value]}
+          onClick={[Function anonymous]}
         >
           <img
             src=""

app/javascript/podcasts/__stories__/PodcastEpisode.stories.jsx

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
+
 import { PodcastEpisode } from '../PodcastEpisode';
 import { podcastArticle } from '../../articles/__tests__/utilities/articleUtilities';
 

app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx

@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 
 import '../../../assets/stylesheets/articles.scss';
 import { TodaysPodcasts } from '../TodaysPodcasts';

app/javascript/src/components/Search/__stories__/SearchForm.stories.jsx

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
+
 import { action } from '@storybook/addon-actions';
 import { SearchForm } from '..';
 

app/views/articles/_actions.html.erb

@@ -47,7 +47,7 @@
             <button for="subscribe_notifications" id="notification-subscription-label_only_author_comments" class="notification-subscription-label" data-payload="only_author_comments">
               Post Author Comments <span class="selected-emoji">✅</span>
             </button>
-            <%= javascript_pack_tag "notificationSubscriptionHandler", defer: true %>
+            <%= javascript_packs_with_chunks_tag "notificationSubscriptionHandler", defer: true %>
           </div>
         <% end %>
         <div class="dropdown-link-row">

app/views/articles/edit.html.erb

@@ -28,6 +28,5 @@
 <% end %>
 
 <%= render "shared/webcomponents_loader_script" %>
-<%= javascript_pack_tag "clipboardCopy", defer: true %>
+<%= javascript_packs_with_chunks_tag "clipboardCopy", "articleForm", defer: true %>
-<%= javascript_pack_tag "articleForm", defer: true %>
 <%= render "articles/v2_form", article: @article, organizations: @organizations, version: @version %>

app/views/articles/index.html.erb

@@ -23,7 +23,7 @@
   <meta name="twitter:card" content="summary_large_image">
   <%= 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 %>
   <div class="home" id="index-container"

app/views/articles/new.html.erb

@@ -2,8 +2,7 @@
 
 <% if user_signed_in? %>
   <%= render "shared/webcomponents_loader_script" %>
-  <%= javascript_pack_tag "clipboardCopy", defer: true %>
+  <%= javascript_packs_with_chunks_tag "clipboardCopy", "articleForm", defer: true %>
-  <%= javascript_pack_tag "articleForm", defer: true %>
   <%= render "articles/v2_form", article: @article, organizations: @organizations, version: @version %>
 <% else %>
   <% @new_article_not_logged_in = true %>

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 %>
   </script>
 <% end %>
-
-<%= javascript_pack_tag "webShare", defer: true %>

app/views/articles/stats.html.erb

@@ -17,4 +17,4 @@
   <%= render "shared/stats" %>
 </div>
 
-<%= javascript_pack_tag "analyticsArticle", defer: true %>
+<%= javascript_packs_with_chunks_tag "analyticsArticle", defer: true %>

app/views/articles/tags/_sidebar_additional.html.erb

@@ -17,7 +17,7 @@
       </div>
     <% end %>
     <% if user_signed_in? %>
-      <%= javascript_pack_tag "sidebarWidget", defer: true %>
+      <%= javascript_packs_with_chunks_tag "sidebarWidget", defer: true %>
       <div id="sidebarWidget__pack" data-tag-info="<%= @tag_model.attributes.slice("id", "text_color_hex", "bg_color_hex", "name").to_json %>">
       </div>
     <% else %>

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 %>
   <div class="chat-page-wrapper">
     <div
       id="chat"

app/views/classified_listings/_form.html.erb

@@ -45,7 +45,9 @@
         <% end %>
       </div>
     </div>
-      <%= javascript_pack_tag "listingForm", defer: true %>
+      <% unless @organizations.present? %>
+        <%= javascript_packs_with_chunks_tag "listingForm", defer: true %>
+      <% end %>
     <div class="field">
       <%= form.label "location", "Location (If applicable for events, etc.)" %>
       <%= form.text_field "location", placeholder: "32 characters max, plain text" %>
@@ -81,7 +83,7 @@
         has <span id="org-credits-number"><%= @organizations.first.credits.unspent.size %></span> credits -
           <a id="org-credits-purchase-link" target="_blank" rel="noopener noreferrer" href="/credits/purchase?organization_id=<%= @organizations.first.id %>" data-no-instant>Buy More</a>
         </div>
-        <%= javascript_pack_tag "orgCreditsSelector", defer: true %>
+        <%= javascript_packs_with_chunks_tag "listingForm", "orgCreditsSelector", defer: true %>
       <% end %>
     </div>
   </div>

app/views/classified_listings/dashboard.html.erb

@@ -15,4 +15,4 @@
         only: %i[id name slug unspent_credits_count]
       ) %>" >
 </div>
-<%= javascript_pack_tag "listingDashboard", defer: true %>
+<%= javascript_packs_with_chunks_tag "listingDashboard", defer: true %>

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],
+          only: %i[title processed_html tag_list category id user_id slug contact_via_connect location],
-        include: {
+          include: {
-          author: { only: %i[username name], methods: %i[username profile_image_90] }
+            author: { only: %i[username name], methods: %i[username profile_image_90] }
-        },
+          },
       ) %> "
     <% end %>
   >
@@ -54,4 +54,4 @@
   </div>
 </div>
 
-<%= javascript_pack_tag "listings", defer: true %>
+<%= javascript_packs_with_chunks_tag "listings", defer: true %>

app/views/dashboards/pro.html.erb

@@ -25,4 +25,4 @@
   <%= render "shared/stats" %>
 </div>
 
-<%= javascript_pack_tag "analyticsDashboard", defer: true %>
+<%= javascript_packs_with_chunks_tag "analyticsDashboard", defer: true %>

app/views/layouts/internal.html.erb

@@ -12,9 +12,7 @@
   <title><%= controller_name.titleize %></title>
 
   <!-- StimulusJS -->
-  <%= javascript_pack_tag "manifest", defer: true %>
+  <%= javascript_packs_with_chunks_tag "internal", defer: true %>
-  <%= javascript_pack_tag "vendor", defer: true %>
-  <%= javascript_pack_tag "internal", defer: true %>
 
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
 

app/views/moderations/index.html.erb

@@ -25,13 +25,13 @@
       <% plucked_article_ids = Article.cached_tagged_with(@tag).pluck(:id) if @tag %>
       <div class="mod-index-hero-data-pod">
         <div class="mod-index-hero-data-pod-number">
-          <%= 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) %>
         </div>
         Comments This Week
       </div>
       <div class="mod-index-hero-data-pod">
         <div class="mod-index-hero-data-pod-number">
-          <%= 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) %>
         </div>
         Reactions This Week
       </div>
@@ -86,7 +86,7 @@
     <div class="body">
       <p>We periodically award some DEV members with heightened privileges to help moderate the community.</p>
       <p>Email <a href="mailto:<%= SiteConfig.default_site_email %>"><%= SiteConfig.default_site_email %></a> if you'd like to be considered right away.</p>
-      <% if !user_signed_in? %>
+      <% unless user_signed_in? %>
         <p><em>P.S. You are not currently signed in.</em></p>
       <% end %>
     </div>

app/views/onboardings/show.html.erb

@@ -14,7 +14,7 @@
 </style>
 
 <div id="onboarding-container">
-  <%= javascript_pack_tag "Onboarding", defer: true %>
+  <%= javascript_packs_with_chunks_tag "Onboarding", defer: true %>
 </div>
 
 <div id="terms" style="display: none;">

app/views/pages/live.html.erb

@@ -1,5 +1,5 @@
 <% if user_signed_in? %>
-  <%= javascript_pack_tag "Chat", defer: true %>
+  <%= javascript_packs_with_chunks_tag "Chat", defer: true %>
 <% end %>
 <% title "DEV Live 📡👩‍💻👨‍💻👩‍💻👨‍💻" %>
 <link rel="canonical" href="https://dev.to/live" />

app/views/reading_list_items/index.html.erb

@@ -21,4 +21,4 @@
   <div class="item-list-container" id="reading-list" data-algolia-key="<%= @secured_algolia_key %>" data-view="<%= @view %>">
   </div>
 </div>
-<%= javascript_pack_tag "readingList", defer: true %>
+<%= javascript_packs_with_chunks_tag "readingList", defer: true %>

app/views/shell/_top.html.erb

@@ -11,21 +11,20 @@
       <meta name="algolia-public-key" content="<%= ALGOLIASEARCH_PUBLIC_SEARCH_ONLY_KEY %>">
       <meta name="environment" content="<%= Rails.env %>">
       <%= render "layouts/styles" %>
-      <style> 
+      <style>
-        .home { 
+        .home {
-          overflow: hidden; 
+          overflow: hidden;
-          position: relative; 
+          position: relative;
-          margin: auto; 
+          margin: auto;
-          max-width: 1250px;  
+          max-width: 1250px;
-        } 
+        }
       </style>
-      <%= javascript_pack_tag "manifest", defer: true %>
+      <% unless user_signed_in? %>
-      <%= javascript_pack_tag "vendor", defer: true %>
+        <%= javascript_packs_with_chunks_tag "Search", defer: true %>
-      <%= javascript_pack_tag "Search", defer: true %>
+      <% end %>
       <%= javascript_include_tag "base", defer: true %>
       <% if user_signed_in? %>
-        <%= javascript_pack_tag "onboardingRedirectCheck", defer: true %>
+        <%= javascript_packs_with_chunks_tag "Search", "onboardingRedirectCheck", "contentDisplayPolicy", defer: true %>
-        <%= javascript_pack_tag "contentDisplayPolicy", defer: true %>
       <% end %>
       <%= yield(:page_meta) %>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -61,4 +60,4 @@
         loading...
       </div>
     <!-- End Top Shell -->
-  <% end %>
+  <% end %>

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 %>
 
 <style>
   .widget header {

app/views/users/_integrations.html.erb

@@ -4,7 +4,7 @@
     <div class="github-repos loading-repos">
     </div>
   </div>
-  <%= javascript_pack_tag "githubRepos", defer: true %>
+  <%= javascript_packs_with_chunks_tag "githubRepos", defer: true %>
 <% end %>
 
 <hr />
@@ -14,7 +14,7 @@
     <h2>Connected to Stackbit <sup>beta</sup><img src="<%= asset_path("checkmark-green.svg") %>" /></h2>
     <p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/dashboard">Go To Your Stackbit Dashboard</a></strong></p>
     <p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/create?ref=devto">Create New Stackbit Site</a></strong></p>
-    
+
   <% else %>
     <h2>Connect to Stackbit <sup>beta</sup></h2>
     <p>Automatically generate a self-hosted static blog feed from your DEV posts.</p>
@@ -36,4 +36,4 @@
 
     <%= submit_tag "SUBMIT", class: "cta" %>
   <% end %>
-<% end %>
+<% end %>

app/views/users/_org_admin.html.erb

@@ -1,7 +1,6 @@
-<%= javascript_pack_tag "colorPreview", defer: true %>
+<%= javascript_packs_with_chunks_tag "colorPreview", "clipboardCopy", defer: true %>
 
 <%= render "shared/webcomponents_loader_script" %>
-<%= javascript_pack_tag "clipboardCopy", defer: true %>
 
 <style>
   .primary-sticky-nav-author, .primary-sticky-nav-author-element {

app/views/users/_org_non_member.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_pack_tag "colorPicker", defer: true %>
+<%= javascript_packs_with_chunks_tag "colorPicker", defer: true %>
 
 <h3>Join An Organization</h3>
 <h5>Do you have the secret code?</h5>

app/views/users/_profile.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_pack_tag "colorPreview", defer: true %>
+<%= javascript_packs_with_chunks_tag "colorPreview", defer: true %>
 
 <% unless @user.identities.exists?(provider: 'github') %>
   <div class="field">

app/views/users/show.html.erb

@@ -153,7 +153,7 @@
       <div id="user-profile-dropdownmenu" class="profile-dropdownmenu">
         <button id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="block-button" type="button">Block @<%= @user.username %></button>
         <% if user_signed_in? %>
-          <%= javascript_pack_tag "profileDropdown", defer: true %>
+          <%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
         <% end %>
         <a href="/report-abuse?url=https://dev.to/<%= @user.username %>">Report Abuse</a>
       </div>

babel.config.js

@@ -0,0 +1,38 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+        targets: {
+          browsers: '> 1%',
+        },
+        useBuiltIns: 'entry',
+        corejs: { version: 3, proposals: false },
+      },
+    ],
+    'preact',
+  ],
+  env: {
+    test: {
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
+    },
+  },
+  plugins: [
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-object-rest-spread',
+    [
+      '@babel/plugin-proposal-class-properties',
+      {
+        spec: true,
+      },
+    ],
+    [
+      '@babel/plugin-transform-react-jsx',
+      {
+        pragma: 'h',
+      },
+    ],
+  ],
+};

config/webpack/environment.js

@@ -1,25 +1,43 @@
+/* global require module */
 const { environment } = require('@rails/webpacker');
 const erb = require('./loaders/erb');
-const webpack = require('webpack');
 
-environment.plugins.append(
+/*
-  'CommonsChunkVendor',
+The customizations below are to create the vendor chunk. The vendor chunk is no longer consumed like it was in webpacker 3.
-  new webpack.optimize.CommonsChunkPlugin({
+There is no longer one vendor bundle. It gets code split based on what webpacker packs need. All the object spreading e.g. `...config.optimization` is to keep
-    name: 'vendor',
+the existing configuration and only override/add what is necessary.
-    minChunks: module => {
+
-      // this assumes your vendor imports exist in the node_modules directory
+The cache groups section is the default cache groups in webpack 4. See https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks.
-      return module.context && module.context.indexOf('node_modules') !== -1;
+It does not appear to be the default with webpacker 4.
+*/
+environment.splitChunks(config => {
+  return {
+    ...config,
+    optimization: {
+      ...config.optimization,
+      splitChunks: {
+        ...config.optimization.splitChunks,
+        cacheGroups: {
+          vendor: {
+            test: /node_modules/,
+            chunks: 'initial',
+            name: 'vendor',
+            enforce: true,
+          },
+          default: {
+            minChunks: 2,
+            priority: -20,
+            reuseExistingChunk: true,
+          },
+        },
+      },
     },
-  }),
+  };
-);
+});
 
-environment.plugins.append(
+// We don't want babel-loader running on the node_modules folder.
-  'CommonsChunkManifest',
+environment.loaders.delete('nodeModules');
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'manifest',
-    minChunks: Infinity,
-  }),
-);
 
 environment.loaders.append('erb', erb);
+
 module.exports = environment;

config/webpacker.yml

@@ -3,26 +3,47 @@
 default: &default
   source_path: app/javascript
   source_entry_path: packs
+  public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
+  webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
   resolved_paths: ['app/assets']
 
-  # Reload manifest.json on all requests so we reload latest compiled packs
+  # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
   extensions:
-    - .coffee
+    - .mjs
     - .erb
     - .js
     - .jsx
-    - .ts
-    - .vue
     - .sass
     - .scss
     - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
     - .png
     - .svg
     - .gif
@@ -33,11 +54,28 @@ development:
   <<: *default
   compile: true
 
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+  check_yarn_integrity: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
+    https: false
     host: localhost
     port: 3035
+    public: localhost:3035
     hmr: false
-    https: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    pretty: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: '**/node_modules/**'
 
 test:
   <<: *default
@@ -52,5 +90,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
+  # Extract and emit a css file
+  extract_css: true
+
   # Cache manifest.json for performance
   cache_manifest: true

docs/frontend/preact.md

@@ -10,8 +10,8 @@ API.
 Preact components are packaged using [Webpacker](/frontend/webpacker) and the
 Preact code is located in `app/javascript`.
 
-The components are mounted when needed, look for `javascript_pack_tag` in the
+Preact components get loaded via webpacker's helper function
-view pages inside `app/views`.
+`javascript_packs_with_chunks_tag`.
 
 ## PropTypes
 

docs/frontend/webpacker.md

@@ -6,21 +6,37 @@ title: Webpacker
 
 DEV has two Javascript codebases.
 
-One contains plain Javascript, you can read about it [in its own guide](/frontend/plain-js).
+One contains plain Javascript, you can read about it
+[in its own guide](/frontend/plain-js).
 
-The other one is managed by [Webpacker](https://github.com/rails/webpacker), and it's located inside `/app/javascripts`, written using ES6+.
+The other one is managed by [Webpacker](https://github.com/rails/webpacker), and
+it's located inside `/app/javascripts`, written using ES6+.
 
-Currently, it's mainly used for Preact components, served via `webpack` which is integrated into the Rails app using `Webpacker`.
+Currently, it's mainly used for Preact components, served via `webpack` which is
+integrated into the Rails app using `Webpacker`.
 
-There is a packs directory `/app/javascript/packs` where you can create
+There is a packs directory `/app/javascript/packs` where you can create new
-new "pack" files. Pack files are initializers for Webpacker.
+"pack" files. Pack files are initializers for Webpacker.
 
-Since DEV is not a Single Page Application (SPA), Preact components are mounted as needed by including the pack file in the view files.
+Since DEV is not a Single Page Application (SPA), Preact components are mounted
+as needed by including the pack file in the view files.
 
 For example:
 
 ```erb
-<%= javascript_pack_tag "webShare", defer: true %>
+<%= javascript_packs_with_chunks_tag "webShare", defer: true %>
 ```
 
-The include statement corresponds to the pack `app/javascripts/packs/webShare.js`
+The include statement corresponds to the pack
+`app/javascripts/packs/webShare.js`
+
+If you have more than one webpacker pack on the page, you need to include it in
+the same `javascript_packs_with_chunks_tag` call. The reason being is it avoids
+loading split chunks multiple times.
+
+```erb
+<%= javascript_packs_with_chunks_tag "webShare", "someOtherPack", defer: true %>
+```
+
+For more information in regards to `javascript_packs_with_chunks_tag`, see
+https://github.com/rails/webpacker/blob/master/lib/webpacker/helper.rb

package.json

@@ -75,6 +75,7 @@
     "@storybook/addon-links": "3.4.12",
     "@storybook/addons": "3.4.12",
     "@storybook/react": "3.4.12",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^23.4.2",
     "eslint": "^5.16.0",
@@ -99,16 +100,18 @@
     "preact-render-to-json": "^3.6.6",
     "prettier": "^1.19.1",
     "redoc-cli": "0.9.6",
-    "webpack-dev-server": "^2.11.3"
+    "webpack-dev-server": "^3.10.3"
   },
   "dependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@github/clipboard-copy-element": "^1.1.2",
-    "@rails/webpacker": "^3.5.5",
+    "@rails/webpacker": "4.2.2",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-preact": "^2.0.0",
-    "babel-preset-preact": "^1.1.0",
     "chart.js": "^2.9.3",
     "clipboard-polyfill": "^2.8.6",
     "codemirror": "^5.52.0",
+    "core-js": "3",
     "focus-visible": "^5.0.2",
     "honeybadger-js": "2.1.3",
     "intersection-observer": "^0.7.0",