Webpack: move Twemoji icons back to CopyPlugin

app/soapbox/components/autosuggest_emoji.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
+import { joinPublicPath } from 'soapbox/utils/static';
 
 export default class AutosuggestEmoji extends React.PureComponent {
 
@@ -21,7 +22,7 @@ export default class AutosuggestEmoji extends React.PureComponent {
         return null;
       }
 
-      url = require(`twemoji/assets/svg/${mapping.filename}.svg`);
+      url = joinPublicPath(`packs/emoji/${mapping.filename}.svg`);
     }
 
     return (

app/soapbox/features/compose/components/emoji_picker_dropdown.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { buildCustomEmojis } from '../../emoji/emoji';
+import { joinPublicPath } from 'soapbox/utils/static';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -357,7 +358,7 @@ class EmojiPickerDropdown extends React.PureComponent {
           <img
             className={classNames('emojione', { 'pulse-loading': active && loading })}
             alt='😂'
-            src={require('twemoji/assets/svg/1f602.svg')}
+            src={joinPublicPath('packs/emoji/1f602.svg')}
           />
         </div>
 

app/soapbox/features/emoji/emoji.js

@@ -1,5 +1,6 @@
 import unicodeMapping from './emoji_unicode_mapping_light';
 import Trie from 'substring-trie';
+import { joinPublicPath } from 'soapbox/utils/static';
 
 const trie = new Trie(Object.keys(unicodeMapping));
 
@@ -60,7 +61,7 @@ const emojify = (str, customEmojis = {}, autoplay = false) => {
     } else { // matched to unicode emoji
       const { filename, shortCode } = unicodeMapping[match];
       const title = shortCode ? `:${shortCode}:` : '';
-      const src = require(`twemoji/assets/svg/${filename}.svg`);
+      const src = joinPublicPath(`packs/emoji/${filename}.svg`);
       replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${src}" />`;
       rend = i + match.length;
       // If the matched character was followed by VS15 (for selecting text presentation), skip it.

app/soapbox/utils/static.js

@@ -0,0 +1,11 @@
+/**
+ * Static: functions related to static files.
+ * @module soapbox/utils/static
+ */
+
+import { join } from 'path';
+import { FE_SUBDIRECTORY } from 'soapbox/build_config';
+
+export const joinPublicPath = (...paths) => {
+  return join(FE_SUBDIRECTORY, ...paths);
+};

webpack/production.js

@@ -1,11 +1,15 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 console.log('Running in production mode'); // eslint-disable-line no-console
 
+const { join } = require('path');
 const { merge } = require('webpack-merge');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const OfflinePlugin = require('@lcdp/offline-plugin');
 const sharedConfig = require('./shared');
 
+const { FE_SUBDIRECTORY } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
+const joinPublicPath = (...paths) => join(FE_SUBDIRECTORY, ...paths);
+
 module.exports = merge(sharedConfig, {
   mode: 'production',
   devtool: 'source-map',
@@ -26,28 +30,32 @@ module.exports = merge(sharedConfig, {
       caches: {
         main: [':rest:'],
         additional: [
-          'packs/emoji/1f602-*.svg', // used for emoji picker dropdown
-          'packs/images/32-*.png',   // used in emoji-mart
-
-          // Default emoji reacts
-          'packs/emoji/1f44d-*.svg', // Thumbs up
-          'packs/emoji/2764-*.svg',  // Heart
-          'packs/emoji/1f606-*.svg', // Laughing
-          'packs/emoji/1f62e-*.svg', // Surprised
-          'packs/emoji/1f622-*.svg', // Crying
-          'packs/emoji/1f629-*.svg', // Weary
-          'packs/emoji/1f621-*.svg', // Angry (Spinster)
+          ':externals:',
+          'packs/images/32-*.png', // used in emoji-mart
         ],
         optional: [
           '**/locale_*.js', // don't fetch every locale; the user only needs one
           '**/*_polyfills-*.js', // the user may not need polyfills
           '**/*.chunk.js', // only cache chunks when needed
+          '**/*.chunk.css',
           '**/*.woff2', // the user may have system-fonts enabled
           // images can be cached on-demand
           '**/*.png',
           '**/*.svg',
         ],
       },
+      externals: [
+        joinPublicPath('packs/emoji/1f602.svg'), // used for emoji picker dropdown
+
+        // Default emoji reacts
+        joinPublicPath('packs/emoji/1f44d.svg'), // Thumbs up
+        joinPublicPath('packs/emoji/2764.svg'),  // Heart
+        joinPublicPath('packs/emoji/1f606.svg'), // Laughing
+        joinPublicPath('packs/emoji/1f62e.svg'), // Surprised
+        joinPublicPath('packs/emoji/1f622.svg'), // Crying
+        joinPublicPath('packs/emoji/1f629.svg'), // Weary
+        joinPublicPath('packs/emoji/1f621.svg'), // Angry (Spinster)
+      ],
       excludes: [
         '**/*.gz',
         '**/*.map',
@@ -69,12 +77,16 @@ module.exports = merge(sharedConfig, {
         // https://github.com/bromite/bromite/issues/1294
         'index.html',
         '404.html',
+        'assets-manifest.json',
+        // It would be nice to serve these, but they bloat up sw.js
+        'packs/images/crypto/**/*',
+        'packs/emoji/**/*',
       ],
-      // ServiceWorker: {
-      //   entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
-      //   cacheName: 'soapbox',
-      //   minify: true,
-      // },
+      ServiceWorker: {
+        // entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
+        // cacheName: 'soapbox',
+        minify: true,
+      },
       safeToUseOptionalCaches: true,
     }),
   ],

webpack/shared.js

@@ -88,6 +88,9 @@ module.exports = {
     new HtmlWebpackHarddiskPlugin(),
     new CopyPlugin({
       patterns: [{
+        from: join(__dirname, '../node_modules/twemoji/assets/svg'),
+        to: join(output.path, 'packs/emoji'),
+      }, {
         from: join(__dirname, '../app/instance'),
         to: join(output.path, 'instance'),
       }],