Restructe to be able to build the app later down the line

electron/.eslintrc.json

@@ -1,16 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/recommended",
-    "plugin:import/electron",
-    "plugin:import/typescript"
-  ],
-  "parser": "@typescript-eslint/parser"
-}

electron/src/app/messageHandler.ts

@@ -1,13 +0,0 @@
-import { ipcMain, MessagePortMain } from "electron";
-import { MessageHandler } from "../../../@types/messageHandler";
-import Funimation from './serviceHandler/funimation';
-
-let handler: MessageHandler|undefined;
-
-ipcMain.on('setup', (ev, data) => {
-  if (data === 'funi') {
-    handler = new Funimation();
-  } else if (data === 'crunchy') {
-
-  }
-});

electron/src/react/App.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

electron/src/renderer.ts

@@ -1 +0,0 @@
-import './react/index.tsx';

funi.ts

@@ -24,7 +24,7 @@ import { Item } from './@types/items';
 // params
 
 // Import modules after argv has been exported
-import getData from './modules/module.getdata.js';
+import getData from './modules/module.getdata';
 import merger from './modules/module.merger';
 import parseSelect from './modules/module.parseSelect';
 import { EpisodeData, MediaChild } from './@types/episode';

gui/electron/src/index.ts

@@ -1,14 +1,13 @@
 import { app, BrowserWindow } from 'electron';
-import json from '../../package.json';
-import './app/messageHandler';
-declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
-declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
+import json from '../../../package.json';
+import registerMessageHandler from './messageHandler';
 
 if (require('electron-squirrel-startup')) {
   app.quit();
 }
 
 const createWindow = (): void => {
+  registerMessageHandler();
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     height: 600,
@@ -16,11 +15,11 @@ const createWindow = (): void => {
     title: json.name,
     webPreferences: {
       nodeIntegration: true,
-      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY
+      preload: 'preload.js'
     },
   });
 
-  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+  mainWindow.loadURL('http://localhost:3000');
 
   mainWindow.webContents.openDevTools();
 };

gui/electron/src/messageHandler.ts

@@ -0,0 +1,17 @@
+import { ipcMain, MessagePortMain } from "electron";
+import { MessageHandler } from "../../../@types/messageHandler";
+import Funimation from './serviceHandler/funimation';
+
+export default () => {
+  let handler: MessageHandler|undefined;
+  
+  ipcMain.handle('setup', (ev, data) => {
+    if (data === 'funi') {
+      handler = new Funimation();
+    } else if (data === 'crunchy') {
+  
+    }
+  });
+  
+  ipcMain.handle('auth', async (ev, data) => handler?.auth(data));
+}

gui/react/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "reacttt",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/material": "^5.3.1",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/electron": "^1.6.10",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^16.11.21",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "typescript": "^4.5.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

gui/react/src/App.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button } from '@mui/material';
+import { messageChannelContext } from './provider/MessageChannel';
+
+function App() {
+  const channel = React.useContext(messageChannelContext);
+
+  return (
+    <Button variant='contained' size='large' onClick={async () => {
+      console.log(await channel?.auth({ username: 'thekonrat@gmail.com', password: 'Ol5@2OAf2qDp05kXqiW#' }));
+    }}>
+      Test auth
+    </Button>
+  );
+}
+
+export default App;

gui/react/src/provider/MessageChannel.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import type { AuthData, AuthResponse, MessageHandler, ResponseBase } from '../../../../@types/messageHandler';
 import { serviceContext } from './ServiceProvider';
+import type { IpcRenderer } from "electron";
 
-
-const messageChannelContext = React.createContext<MessageHandler|undefined>(undefined);
+export const messageChannelContext = React.createContext<MessageHandler|undefined>(undefined);
 
 const MessageChannelProvider: React.FC = ({ children }) => {
 
   const service = React.useContext(serviceContext);
 
-  const { ipcRenderer } = window.Electron;
+  const { ipcRenderer } = (window as any).Electron as { ipcRenderer: IpcRenderer };
 
   React.useEffect(() => {
     ipcRenderer.invoke('setup', service);

gui/react/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "./src"
+  ]
+}

package.json

@@ -24,11 +24,8 @@
     "url": "https://github.com/anidl/multi-downloader-nx/issues"
   },
   "license": "MIT",
-  "main": ".webpack/main/index.js",
+  "main": "lib/gui/electron/src/index.js",
   "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@mui/material": "^5.3.0",
     "cheerio": "^1.0.0-rc.10",
     "electron-squirrel-startup": "^1.0.0",
     "eslint-plugin-import": "^2.25.4",
@@ -39,8 +36,6 @@
     "iso-639": "^0.2.2",
     "lookpath": "^1.1.0",
     "m3u8-parsed": "^1.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "sei-helper": "^3.3.0",
     "typescript-eslint": "^0.0.1-alpha.0",
     "yaml": "^1.10.0",
@@ -55,8 +50,6 @@
     "@electron-forge/plugin-webpack": "^6.0.0-beta.61",
     "@types/fs-extra": "^9.0.13",
     "@types/node": "^16.11.9",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
     "@types/yargs": "^17.0.7",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -75,6 +68,7 @@
     "typescript": "^4.5.5"
   },
   "scripts": {
+    "prestart": "npm run tsc",
     "start": "electron-forge start",
     "docs": "ts-node modules/build-docs.ts",
     "tsc": "ts-node tsc.ts",
@@ -113,27 +107,6 @@
           "name": "@electron-forge/maker-rpm",
           "config": {}
         }
-      ],
-      "plugins": [
-        [
-          "@electron-forge/plugin-webpack",
-          {
-            "mainConfig": "./webpack.main.config.js",
-            "renderer": {
-              "config": "./webpack.renderer.config.js",
-              "entryPoints": [
-                {
-                  "html": "./electron/src/index.html",
-                  "js": "./electron/src/renderer.ts",
-                  "name": "main_window",
-                  "preload": {
-                    "js": "./electron/src/preload.ts"
-                  }
-                }
-              ]
-            }
-          }
-        ]
       ]
     }
   }

tsc.ts

@@ -8,6 +8,7 @@ const ignore = [
   'lib',
   'node_modules',
   '@types',
+  path.join('gui', 'react', 'node_modules'),
   path.join('bin', 'mkvtoolnix'),
   path.join('config', 'token.yml'),
   path.join('config', 'updates.json'),
@@ -19,12 +20,15 @@ const ignore = [
 export { ignore };
 
 (async () => {
+  process.stdout.write('Removing lib dir... ');
   removeSync('lib');
+  process.stdout.write('✓\nRunning tsc... ');
   const tsc = exec('npx tsc');
   tsc.stdout?.on('data', console.log);
   tsc.stderr?.on('data', console.log);
 
   tsc.on('close', () => {
+    process.stdout.write('✓\nCopying files... ');
     const files = readDir(__dirname);
     const filtered = files.filter(a => {
       if (a.stats.isFile()) {
@@ -42,6 +46,7 @@ export { ignore };
         copyFileSync(item.path, itemPath);
       }
     });
+    process.stdout.write('✓\n');
   });
 })();
 

tsconfig.json

@@ -9,7 +9,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "downlevelIteration": true,
-    "jsx": "react"
+    "jsx": "react",
   },
   "exclude": [
     "./videos",

webpack.main.config.js

@@ -1,14 +0,0 @@
-module.exports = {
-  /**
-   * This is the main entry point for your application, it's the first file
-   * that runs in the main process.
-   */
-  entry: './electron/src/index.ts',
-  // Put your normal webpack config below here
-  module: {
-    rules: require('./webpack.rules'),
-  },
-  resolve: {
-    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json']
-  },
-};

webpack.plugins.js

@@ -1,5 +0,0 @@
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-module.exports = [
-  new ForkTsCheckerWebpackPlugin()
-];

webpack.renderer.config.js

@@ -1,18 +0,0 @@
-const rules = require('./webpack.rules');
-const plugins = require('./webpack.plugins');
-
-rules.push({
-  test: /\.css$/,
-  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
-});
-
-module.exports = {
-  module: {
-    rules,
-  },
-  plugins: plugins,
-  resolve: {
-    fallback: { path: false },
-    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css']
-  },
-};

webpack.rules.js

@@ -1,29 +0,0 @@
-module.exports = [
-  // Add support for native node modules
-  {
-    // We're specifying native_modules in the test because the asset relocator loader generates a
-    // "fake" .node file which is really a cjs file.
-    test: /native_modules\/.+\.node$/,
-    use: 'node-loader',
-  },
-  {
-    test: /\.(m?js|node)$/,
-    parser: { amd: false },
-    use: {
-      loader: '@vercel/webpack-asset-relocator-loader',
-      options: {
-        outputAssetBase: 'native_modules',
-      },
-    },
-  },
-  {
-    test: /\.tsx?$/,
-    exclude: /(node_modules|\.webpack)/,
-    use: {
-      loader: 'ts-loader',
-      options: {
-        transpileOnly: true
-      }
-    }
-  },
-];