Merge remote-tracking branch 'soapbox/develop' into rss-button

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

webpack/configuration.ts

@@ -12,7 +12,7 @@ const settings = {
   test_root_path: `${FE_BUILD_DIR}-test`,
   cache_path: 'tmp/cache',
   resolved_paths: [],
-  extensions: [ '.mjs', '.js', '.jsx', '.ts', '.tsx', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ],
+  extensions: [ '.js', '.jsx', '.cjs', '.mjs', '.ts', '.tsx', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ],
 };
 
 const outputDir = env.NODE_ENV === 'test' ? settings.test_root_path : settings.public_root_path;

webpack/development.ts

@@ -3,6 +3,7 @@ console.log('Running in development mode'); // eslint-disable-line no-console
 
 import { join } from 'path';
 
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import { merge } from 'webpack-merge';
 
 import sharedConfig from './shared';
@@ -78,7 +79,7 @@ const devServer: DevServerConfiguration = {
   host: devServerUrl.hostname,
   port: devServerUrl.port,
   https: devServerUrl.protocol === 'https:',
-  hot: false,
+  hot: true,
   allowedHosts: 'all',
   historyApiFallback: {
     disableDotRule: true,
@@ -116,6 +117,10 @@ const configuration: Configuration = {
     watchOptions,
   ),
 
+  plugins: [
+    new ReactRefreshWebpackPlugin(),
+  ],
+
   devServer,
 };
 

webpack/production.ts

@@ -40,6 +40,7 @@ const configuration: Configuration = {
     }),
     new OfflinePlugin({
       autoUpdate: true,
+      responseStrategy: 'network-first',
       caches: {
         main: [':rest:'],
         additional: [
@@ -49,7 +50,6 @@ const configuration: Configuration = {
         ],
         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
@@ -131,6 +131,13 @@ const configuration: Configuration = {
             '/socket',
             '/static',
             '/unsubscribe',
+            '/images',
+            '/favicon.ico',
+            '/favicon.png',
+            '/apple-touch-icon.png',
+            '/browserconfig.xml',
+            '/robots.txt',
+            '/report.html',
           ];
 
           if (backendRoutes.some(path => pathname.startsWith(path)) || pathname.endsWith('/embed') || pathname.endsWith('.rss')) {
@@ -140,7 +147,6 @@ const configuration: Configuration = {
         requestTypes: ['navigate'],
       }],
       safeToUseOptionalCaches: true,
-      appShell: join(FE_SUBDIRECTORY, '/'),
     }),
   ],
 };

webpack/rules/assets.ts

@@ -13,6 +13,7 @@ const rules: RuleSetRule[] = [{
   include: [
     resolve('app', 'assets', 'images'),
     resolve('node_modules', 'emoji-datasource'),
+    resolve('node_modules', 'leaflet'),
   ],
   generator: {
     filename: 'packs/images/[name]-[contenthash:8][ext]',
@@ -58,14 +59,6 @@ const rules: RuleSetRule[] = [{
     filename: 'packs/icons/[name]-[contenthash:8][ext]',
   },
 }, {
-
-  test: /\.svg$/,
-  type: 'asset/resource',
-  include: resolve('node_modules', 'feather-icons'),
-  generator: {
-    filename: 'packs/icons/[name]-[contenthash:8][ext]',
-  },
-}, {
   test: /\.svg$/,
   type: 'asset/resource',
   include: [

webpack/rules/babel.ts

@@ -4,8 +4,10 @@ import { env, settings } from '../configuration';
 
 import type { RuleSetRule } from 'webpack';
 
+const isDevelopment = process.env.NODE_ENV === 'development';
+
 const rule: RuleSetRule = {
-  test: /\.(js|jsx|mjs|ts|tsx)$/,
+  test: /\.(js|jsx|cjs|mjs|ts|tsx)$/,
   include: [
     settings.source_path,
     ...settings.resolved_paths,
@@ -25,6 +27,7 @@ const rule: RuleSetRule = {
         cacheDirectory: join(settings.cache_path, 'babel-loader'),
         cacheCompression: env.NODE_ENV === 'production',
         compact: env.NODE_ENV === 'production',
+        plugins: isDevelopment ? ['react-refresh/babel'] : [],
       },
     },
   ],

webpack/rules/mark.ts

@@ -1,14 +0,0 @@
-import { env } from 'process';
-
-import type { RuleSetRule } from 'webpack';
-
-let rule: RuleSetRule = {};
-
-if (env.NODE_ENV !== 'production') {
-  rule = {
-    test: /\.js$/,
-    loader: 'mark-loader',
-  };
-}
-
-export default rule;

webpack/rules/node-modules.ts

@@ -17,9 +17,6 @@ const rule: RuleSetRule = {
       loader: 'babel-loader',
       options: {
         babelrc: false,
-        plugins: [
-          'transform-react-remove-prop-types',
-        ],
         cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
         cacheCompression: env.NODE_ENV === 'production',
         compact: false,

webpack/shared.ts

@@ -50,7 +50,7 @@ const makeHtmlConfig = (params = {}): HtmlWebpackPlugin.Options => {
 
 const configuration: Configuration = {
   entry: {
-    application: resolve('app/application.ts'),
+    application: resolve('app/soapbox/main.tsx'),
   },
 
   output: {
@@ -157,6 +157,9 @@ const configuration: Configuration = {
     fallback: {
       path: require.resolve('path-browserify'),
       util: require.resolve('util'),
+      // https://github.com/facebook/react/issues/20235#issuecomment-1061708958
+      'react/jsx-runtime': 'react/jsx-runtime.js',
+      'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
     },
   },