Refactor Webpacks (#1212)

refactor webpacks

frontend/src/contexts/AppContext.tsx

@@ -20,6 +20,9 @@ import { createTheme, type Theme } from '@mui/material/styles';
 import i18n from '../i18n/Web';
 import getWorldmapGeojson from '../geo/Web';
 import { apiClient } from '../services/api';
+import SettingsSelfhosted from '../models/Settings.default.basic.selfhosted';
+import SettingsSelfhostedPro from '../models/Settings.default.pro.selfhosted';
+import SettingsPro from '../models/Settings.default.pro';
 
 const getWindowSize = function (fontSize: number): { width: number; height: number } {
   // returns window size in EM units
@@ -101,6 +104,19 @@ const getOrigin = (network = 'mainnet'): Origin => {
   return origin;
 };
 
+const getSettings = (): Settings => {
+  let settings = new Settings();
+  if (window.RobosatsSettings === 'selfhosted-basic') {
+    settings = new SettingsSelfhosted();
+  } else if (window.RobosatsSettings === 'selfhosted-pro') {
+    settings = new SettingsSelfhostedPro();
+  } else if (window.RobosatsSettings === 'web-pro') {
+    settings = new SettingsPro();
+  }
+
+  return settings;
+};
+
 export interface WindowSize {
   width: number;
   height: number;
@@ -140,7 +156,7 @@ export interface UseAppStoreType {
 export const initialAppContext: UseAppStoreType = {
   theme: undefined,
   torStatus: 'NOTINIT',
-  settings: new Settings(),
+  settings: getSettings(),
   setSettings: () => {},
   page: entryPage,
   setPage: () => {},
@@ -175,7 +191,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.E
   const hostUrl = initialAppContext.hostUrl;
   const origin = initialAppContext.origin;
 
-  const [settings, setSettings] = useState<Settings>(initialAppContext.settings);
+  const [settings, setSettings] = useState<Settings>(getSettings());
   const [theme, setTheme] = useState<Theme>(() => {
     return makeTheme(settings);
   });

frontend/src/models/Settings.default.basic.selfhosted.ts

@@ -1,7 +1,7 @@
 import { systemClient } from '../services/System';
 import BaseSettings from './Settings.model';
 
-class Settings extends BaseSettings {
+class SettingsSelfhosted extends BaseSettings {
   constructor() {
     super();
     const fontSizeCookie = systemClient.getItem('settings_fontsize_basic');
@@ -12,4 +12,4 @@ class Settings extends BaseSettings {
   public selfhostedClient: boolean = true;
 }
 
-export default Settings;
+export default SettingsSelfhosted;

frontend/src/models/Settings.default.pro.selfhosted.ts

@@ -1,7 +1,7 @@
 import { systemClient } from '../services/System';
 import BaseSettings from './Settings.model';
 
-class Settings extends BaseSettings {
+class SettingsSelfhostedPro extends BaseSettings {
   constructor() {
     super();
     const fontSizeCookie = systemClient.getItem('settings_fontsize_pro');
@@ -12,4 +12,4 @@ class Settings extends BaseSettings {
   public selfhostedClient: boolean = true;
 }
 
-export default Settings;
+export default SettingsSelfhostedPro;

frontend/src/models/Settings.default.pro.ts

@@ -1,7 +1,7 @@
 import { systemClient } from '../services/System';
 import BaseSettings from './Settings.model';
 
-class Settings extends BaseSettings {
+class SettingsPro extends BaseSettings {
   constructor() {
     super();
     const fontSizeCookie = systemClient.getItem('settings_fontsize_pro');
@@ -11,4 +11,4 @@ class Settings extends BaseSettings {
   public frontend: 'basic' | 'pro' = 'pro';
 }
 
-export default Settings;
+export default SettingsPro;

frontend/src/services/Native/index.d.ts

@@ -4,6 +4,7 @@ declare global {
   interface Window {
     ReactNativeWebView?: ReactNativeWebView;
     NativeRobosats?: NativeRobosats;
+    RobosatsSettings: 'web-basic' | 'web-pro' | 'selfhosted-basic' | 'selfhosted-pro';
   }
 }
 

frontend/webpack.config.ts

@@ -32,93 +32,6 @@ const configWeb: Configuration = {
   },
 };
 
-const configWebSelfhosted: Configuration = {
-  ...config,
-  module: {
-    ...config.module,
-    rules: [
-      ...(config?.module?.rules || []),
-      {
-        test: path.resolve(__dirname, 'src/models/Settings.default.basic.ts'),
-        loader: 'file-replace-loader',
-        options: {
-          condition: 'if-replacement-exists',
-          replacement: path.resolve(__dirname, 'src/models/Settings.default.basic.selfhosted.ts'),
-          async: true,
-        },
-      },
-    ],
-  },
-  output: {
-    path: path.resolve(__dirname, 'static/frontend'),
-    filename: 'basic.selfhosted.js',
-  },
-};
-
-const configWebPro: Configuration = {
-  ...config,
-  module: {
-    ...config.module,
-    rules: [
-      ...(config?.module?.rules || []),
-      {
-        test: path.resolve(__dirname, 'src/basic/Main.tsx'),
-        loader: 'file-replace-loader',
-        options: {
-          condition: 'if-replacement-exists',
-          replacement: path.resolve(__dirname, 'src/pro/Main.tsx'),
-          async: true,
-        },
-      },
-      {
-        test: path.resolve(__dirname, 'src/models/Settings.default.basic.ts'),
-        loader: 'file-replace-loader',
-        options: {
-          condition: 'if-replacement-exists',
-          replacement: path.resolve(__dirname, 'src/models/Settings.default.pro.ts'),
-          async: true,
-        },
-      },
-    ],
-  },
-  output: {
-    path: path.resolve(__dirname, 'static/frontend'),
-    filename: 'pro.js',
-  },
-};
-
-const configWebProSelfhosted: Configuration = {
-  ...config,
-  module: {
-    ...config.module,
-    rules: [
-      ...(config?.module?.rules || []),
-      {
-        test: path.resolve(__dirname, 'src/basic/Main.tsx'),
-        loader: 'file-replace-loader',
-        options: {
-          condition: 'if-replacement-exists',
-          replacement: path.resolve(__dirname, 'src/pro/Main.tsx'),
-          async: true,
-        },
-      },
-      {
-        test: path.resolve(__dirname, 'src/models/Settings.default.basic.ts'),
-        loader: 'file-replace-loader',
-        options: {
-          condition: 'if-replacement-exists',
-          replacement: path.resolve(__dirname, 'src/models/Settings.default.pro.selfhosted.ts'),
-          async: true,
-        },
-      },
-    ],
-  },
-  output: {
-    path: path.resolve(__dirname, 'static/frontend'),
-    filename: 'pro.selfhosted.js',
-  },
-};
-
 const configMobile: Configuration = {
   ...config,
   module: {
@@ -177,4 +90,4 @@ const configMobile: Configuration = {
   },
 };
 
-export default [configWeb, configWebPro, configWebSelfhosted, configWebProSelfhosted, configMobile];
+export default [configWeb, configMobile];

nodeapp/basic.html

@@ -55,6 +55,9 @@
         </div>
       </div>
     </div>
-    <script src="/static/frontend/basic.selfhosted.js"></script>
+    <script>
+      window.RobosatsSettings = 'selfhosted-basic'
+    </script>
+    <script src="/static/frontend/main.js"></script>
   </body>
 </html>

nodeapp/pro.html

@@ -57,6 +57,9 @@
         </div>
       </div>
     </div>
-    <script src="/static/frontend/pro.selfhosted.js"></script>
+    <script>
+      window.RobosatsSettings = 'selfhosted-pro'
+    </script>
+    <script src="/static/frontend/main.js"></script>
   </body>
 </html>

web/basic.html

@@ -55,6 +55,9 @@
         </div>
       </div>
     </div>
+    <script>
+      window.RobosatsSettings = 'web-basic'
+    </script>
     <script src="/static/frontend/main.js"></script>
   </body>
 </html>

web/pro.html

@@ -57,6 +57,9 @@
         </div>
       </div>
     </div>
-    <script src="/static/frontend/pro.js"></script>
+    <script>
+      window.RobosatsSettings = 'web-pro'
+    </script>
+    <script src="/static/frontend/main.js"></script>
   </body>
 </html>