Added websocket communication between main and renderer, improved bui…

…ld process and dev experience (#24)

.erb/configs/webpack.config.base.ts

@@ -7,6 +7,10 @@ import TsconfigPathsPlugins from 'tsconfig-paths-webpack-plugin';
 import webpackPaths from './webpack.paths';
 import { dependencies as externals } from '../../release/app/package.json';
 
+const isRenderer =
+  process.env.npm_lifecycle_script?.includes('webpack.config.renderer') ??
+  false;
+
 const configuration: webpack.Configuration = {
   externals: [...Object.keys(externals || {})],
 
@@ -53,6 +57,26 @@ const configuration: webpack.Configuration = {
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'production',
     }),
+
+    new webpack.IgnorePlugin({
+      checkResource(resource, context) {
+        // Don't include stuff from the main folder or @main... in renderer and renderer folder in main folder
+        const exclude = isRenderer
+          ? resource.startsWith('@main') || resource.includes('main/')
+          : resource.startsWith('@renderer') || /renderer\//.test(resource);
+
+        // Log if a file is excluded just fyi
+        if (!context.includes('node_modules') && exclude)
+          console.log(
+            `${
+              isRenderer ? 'Renderer' : 'Main'
+            }: Resource ${resource}\n\tat context ${context}: ${
+              exclude ? 'excluded' : 'included'
+            }`,
+          );
+        return exclude;
+      },
+    }),
   ],
 };
 

.erb/configs/webpack.config.renderer.dev.ts

@@ -32,8 +32,8 @@ if (
 ) {
   console.log(
     chalk.black.bgYellow.bold(
-      'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"'
-    )
+      'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"',
+    ),
   );
   execSync('npm run postinstall');
 }
@@ -186,15 +186,14 @@ const configuration: webpack.Configuration = {
         shell: true,
         stdio: 'inherit',
       })
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        .on('close', (code: number) => process.exit(code!))
+        .on('close', (code: number) => process.exit(code))
         .on('error', (spawnError) => console.error(spawnError));
 
       console.log('Starting Main Process...');
       let args = ['run', 'start:main'];
       if (process.env.MAIN_ARGS) {
         args = args.concat(
-          ['--', ...process.env.MAIN_ARGS.matchAll(/"[^"]+"|[^\s"]+/g)].flat()
+          ['--', ...process.env.MAIN_ARGS.matchAll(/"[^"]+"|[^\s"]+/g)].flat(),
         );
       }
       spawn('npm', args, {
@@ -203,8 +202,7 @@ const configuration: webpack.Configuration = {
       })
         .on('close', (code: number) => {
           preloadProcess.kill();
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          process.exit(code!);
+          process.exit(code);
         })
         .on('error', (spawnError) => console.error(spawnError));
       return middlewares;

.erb/configs/webpack.paths.ts

@@ -7,6 +7,7 @@ const dllPath = path.join(__dirname, '../dll');
 const srcPath = path.join(rootPath, 'src');
 const srcMainPath = path.join(srcPath, 'main');
 const srcRendererPath = path.join(srcPath, 'renderer');
+const srcSharedPath = path.join(srcPath, 'shared');
 
 const releasePath = path.join(rootPath, 'release');
 const appPath = path.join(releasePath, 'app');
@@ -26,6 +27,7 @@ export default {
   srcPath,
   srcMainPath,
   srcRendererPath,
+  srcSharedPath,
   releasePath,
   appPath,
   appPackagePath,

.erb/scripts/check-native-dep.js

@@ -16,34 +16,34 @@ if (dependencies) {
     // because of a devDependency then that is okay. Warn when it is installed
     // because of a dependency
     const { dependencies: dependenciesObject } = JSON.parse(
-      execSync(`npm ls ${nativeDeps.join(' ')} --json`).toString()
+      execSync(`npm ls ${nativeDeps.join(' ')} --json`).toString(),
     );
     const rootDependencies = Object.keys(dependenciesObject);
     const filteredRootDependencies = rootDependencies.filter((rootDependency) =>
-      dependenciesKeys.includes(rootDependency)
+      dependenciesKeys.includes(rootDependency),
     );
     if (filteredRootDependencies.length > 0) {
       const plural = filteredRootDependencies.length > 1;
       console.log(`
  ${chalk.whiteBright.bgYellow.bold(
-   'Webpack does not work with native dependencies.'
+   'Webpack does not work with native dependencies.',
  )}
 ${chalk.bold(filteredRootDependencies.join(', '))} ${
         plural ? 'are native dependencies' : 'is a native dependency'
       } and should be installed inside of the "./release/app" folder.
  First, uninstall the packages from "./package.json":
 ${chalk.whiteBright.bgGreen.bold('npm uninstall your-package')}
  ${chalk.bold(
-   'Then, instead of installing the package to the root "./package.json":'
+   'Then, instead of installing the package to the root "./package.json":',
  )}
 ${chalk.whiteBright.bgRed.bold('npm install your-package')}
  ${chalk.bold('Install the package to "./release/app/package.json"')}
 ${chalk.whiteBright.bgGreen.bold(
-  'cd ./release/app && npm install your-package'
+  'cd ./release/app && npm install your-package',
 )}
  Read more about native dependencies at:
 ${chalk.bold(
-  'https://electron-react-boilerplate.js.org/docs/adding-dependencies/#module-structure'
+  'https://electron-react-boilerplate.js.org/docs/adding-dependencies/#module-structure',
 )}
  `);
       process.exit(1);

.erb/scripts/check-node-env.js

@@ -8,8 +8,8 @@ export default function checkNodeEnv(expectedEnv) {
   if (process.env.NODE_ENV !== expectedEnv) {
     console.log(
       chalk.whiteBright.bgRed.bold(
-        `"process.env.NODE_ENV" must be "${expectedEnv}" to use this webpack config`
-      )
+        `"process.env.NODE_ENV" must be "${expectedEnv}" to use this webpack config`,
+      ),
     );
     process.exit(2);
   }

.erb/scripts/check-port-in-use.js

@@ -7,8 +7,8 @@ detectPort(port, (err, availablePort) => {
   if (port !== String(availablePort)) {
     throw new Error(
       chalk.whiteBright.bgRed.bold(
-        `Port "${port}" on "localhost" is already in use. Please use another port. ex: PORT=4343 npm start`
-      )
+        `Port "${port}" on "localhost" is already in use. Please use another port. ex: PORT=4343 npm start`,
+      ),
     );
   } else {
     process.exit(0);

.erb/scripts/notarize.js

@@ -14,7 +14,7 @@ exports.default = async function notarizeMacos(context) {
 
   if (!('APPLE_ID' in process.env && 'APPLE_ID_PASS' in process.env)) {
     console.warn(
-      'Skipping notarizing step. APPLE_ID and APPLE_ID_PASS env variables must be set'
+      'Skipping notarizing step. APPLE_ID and APPLE_ID_PASS env variables must be set',
     );
     return;
   }

.eslintrc.js

@@ -1,11 +1,35 @@
 module.exports = {
   extends: 'erb',
   rules: {
+    // #region ERB rules
+
     // A temporary hack related to IDE not resolving correct package.json
     'import/no-extraneous-dependencies': 'off',
     'import/no-unresolved': 'error',
     // Since React 17 and typescript 4.1 you can safely disable the rule
     'react/react-in-jsx-scope': 'off',
+
+    // #endregion
+
+    // #region Our rules
+
+    indent: 'off',
+    'react/jsx-indent-props': ['warn', 2],
+    'comma-dangle': ['error', 'always-multiline'],
+    'prettier/prettier': ['warn', { tabWidth: 2, trailingComma: 'all' }],
+    'no-console': 'off',
+    'react/require-default-props': 'off',
+    'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
+    'jsx-a11y/label-has-associated-control': [
+      'error',
+      {
+        assert: 'either',
+      },
+    ],
+    // This is already a Typescript rule, so we don't need it to be reported twice
+    '@typescript-eslint/no-unused-vars': 'off',
+
+    // #endregion
   },
   parserOptions: {
     ecmaVersion: 2020,

.github/workflows/test.yml

@@ -42,10 +42,9 @@ jobs:
           USE_HARD_LINKS: false
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          npm run package
           npm run lint
-          npm exec tsc
           npm test
+          npm run package
 
       # Enable tmate debugging of manually-triggered workflows if the input option was provided
       - name: Setup tmate session

.gitignore

@@ -27,3 +27,6 @@ npm-debug.log.*
 *.css.d.ts
 *.sass.d.ts
 *.scss.d.ts
+
+# Extra VS Code workspaces
+*.code-workspace

.husky/pre-commit

@@ -1,4 +1,8 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged
+# Thanks to axmrnv for helping to fix the lint-staged output https://github.com/typicode/husky/issues/968#issuecomment-1176848345
+exec >/dev/tty 2>&1
+
+# Can enable quiet mode to show nothing unless it has an error
+npx lint-staged # -q

.nvmrc

@@ -1 +1 @@
-16.15.0
+16.17.1

.prettierignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Coverage directory used by tools like istanbul
+coverage
+.eslintcache
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# OSX
+.DS_Store
+
+release/app/dist
+release/build
+.erb/dll
+
+.idea
+npm-debug.log.*
+*.css.d.ts
+*.sass.d.ts
+*.scss.d.ts
+
+# eslint ignores hidden directories by default:
+# https://github.com/eslint/eslint/issues/8429
+!.erb

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "endOfLine": "lf",
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": [".eslintrc"],
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

README.md

@@ -1,6 +1,6 @@
 # paranext-core
 
-Backend webserver/extension host and frontend Electron client for Paranext
+Electron client, extension host, and C# library for Paranext
 
 <div align="center">
   <img src="doc-meta/doc-icon.png" />
@@ -53,6 +53,8 @@ Start the app in the `dev` environment:
 npm start
 ```
 
+After you run `npm start`, you can edit the Electron and frontend files, and they will hot reload. To edit C# files, you must stop the `npm start` process (or only close Paranext), run `npm run build:c-sharp`, and restart `npm start` (or if you only closed Paranext, make a trivial edit to `src/main/main.ts`, and save it to launch Paranext again).
+
 ## Packaging for Production
 
 To package apps for the local platform:

jest.config.ts

@@ -0,0 +1,27 @@
+// eslint-disable-next-line jest/no-jest-import
+import type { Config } from 'jest';
+import { pathsToModuleNameMapper } from 'ts-jest';
+import { compilerOptions } from './tsconfig.json';
+
+const config: Config = {
+  moduleDirectories: ['node_modules', 'release/app/node_modules', 'src'],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/.erb/mocks/fileMock.js',
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+    ...pathsToModuleNameMapper(compilerOptions.paths, {
+      prefix: '<rootDir>/src',
+    }),
+  },
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+  testPathIgnorePatterns: ['release/app/dist'],
+  transform: {
+    '\\.(ts|tsx|js|jsx)$': 'ts-jest',
+  },
+};
+
+export default config;