Update various dependencies, add toast about exiting full screen

(I hate how the toast looks but wow it's too much work to customize at the moment)

Author: hatton

.babelrc

@@ -6,32 +6,52 @@
         [
           "@babel/preset-env",
           {
-            "targets": { "node": 12 }
+            "targets": {
+              "node": 12
+            }
           }
         ]
       ],
-      "plugins": ["istanbul"]
+      "plugins": [
+        "istanbul"
+      ]
     },
     "main": {
       "presets": [
         [
           "@babel/preset-env",
           {
-            "targets": { "node": 12 }
+            "targets": {
+              "node": 12
+            }
           }
         ]
       ]
     },
     "renderer": {
-      "presets": ["@babel/preset-typescript", "@babel/preset-react"],
-      "plugins": ["react-hot-loader/babel"]
+      "presets": [
+        "@babel/preset-typescript",
+        [
+          "@babel/preset-react",
+          {
+            "runtime": "automatic",
+            "importSource": "@emotion/react"
+          }
+        ]
+      ],
+      "plugins": [
+        "react-hot-loader/babel",
+        "@emotion"
+      ]
     },
-
     "web": {
+      "plugins": [
+        "@emotion"
+      ],
       "presets": [
         "@babel/preset-env",
         "@babel/preset-typescript",
-        "@babel/preset-react"
+        "@babel/preset-react",
       ]
     }
   },
@@ -40,4 +60,4 @@
     "@babel/proposal-class-properties",
     "@babel/proposal-object-rest-spread"
   ]
-}
+}

.eslintrc.yml

@@ -15,4 +15,9 @@ parserOptions:
 plugins:
   - react
   - "@typescript-eslint"
-rules: { "react/prop-types": 0 }
+  - "@emotion"
+rules:
+  {
+    "react/prop-types": 0,
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+  }

README.md

@@ -14,9 +14,7 @@ yarn dev
 
 ## Releasing
 
-1. Update the `version` in package.json.
-1. Commit.
-1. Add a tag of the form "v1.2.3" to your commit and push them both to github, e.g. `git push --atomic origin master v1.2.3`.
-1. A Github Action will build the app and create a draft release.
+1. Change the version in `package.json`
+1. Commit, push. A github action will build an installer Windows and create an unpublished "Release" on github.
 1. Go to https://github.com/BloomBooks/bloompub-viewer/releases/ , edit that draft, and publish it.
 1. Users will be notified of the new version via toast on the next run.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloompub-viewer",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "author": "Bloom Devs",
   "description": "Viewer for Bloom Digital books",
   "license": "MIT",
@@ -12,13 +12,10 @@
     "build:web": "cross-env BUILD_TARGET=web node .electron-react/build.js",
     "release": "yarn build -p always",
     "dev": "node .electron-react/dev-runner.js",
-    "lintx": "eslint --ext .ts,.tsx -f ./node_modules/eslint-friendly-formatter src",
-    "lint": "",
-    "lint:fix": "eslint --ext .ts,.tsx -f ./node_modules/eslint-friendly-formatter --fix src",
+    "lint": "eslint \"./**/!(*.d).ts{,x}\"",
     "pack": "yarn run pack:main && yarn run pack:renderer",
     "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-react/webpack.main.config.js",
     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-react/webpack.renderer.config.js",
-    "postinstall": "yarn run lint:fix",
     "test": "yarn run test:unit && yarn run test:e2e",
     "test:unit": "jest -c jest.unit.config.js",
     "test:e2e": "yarn run pack && jest -c jest.e2e.config.js"
@@ -101,21 +98,21 @@
     "deb": {}
   },
   "dependencies": {
-    "@emotion/core": "^10.3.0",
+    "@emotion/react": "^11.10.6",
     "@octokit/rest": "^18.0.0",
     "@types/archiver": "^3.0.0",
     "@types/temp": "^0.8.34",
     "@types/unzipper": "^0.10.3",
     "archiver": "^3.1.1",
-    "bloom-player": "^2.1.8",
+    "bloom-player": "^2.1.25",
     "compare-versions": "^3.6.0",
     "electron-log": "^4.2.2",
     "electron-updater": "^4.3.1",
     "fs": "^0.0.1-security",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-toastify": "^6.0.6",
+    "react-toastify": "9.0.3",
     "temp": "^0.9.1",
     "unzipper": "^0.10.8"
   },
@@ -128,15 +125,17 @@
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
+    "@emotion/babel-plugin": "^11.10.6",
+    "@emotion/eslint-plugin": "^11.10.0",
     "@types/electron": "^1.6.10",
     "@types/enzyme": "^3.10.4",
     "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/jest": "^25.1.1",
+    "@types/jest": "^29.4.0",
     "@types/node": "^12.12.27",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/parser": "^3.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "ajv": "^6.11.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-istanbul": "^6.0.0",
@@ -156,16 +155,11 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
-    "eslint": "^7.3.1",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-friendly-formatter": "^4.0.1",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-html": "^6.0.2",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^5.0.2",
     "fork-ts-checker-webpack-plugin": "^4.0.3",
     "html-webpack-plugin": "^3.2.0",
@@ -181,10 +175,10 @@
     "spectron": "^10.0.0",
     "style-loader": "^1.1.3",
     "terser-webpack-plugin": "^2.3.4",
-    "ts-jest": "^25.1.0",
+    "ts-jest": "^29.0.5",
     "ts-loader": "^6.2.1",
     "tslint": "^6.0.0",
-    "typescript": "^3.7.5",
+    "typescript": "^4.9.5",
     "url-loader": "^3.0.0",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",

src/main/index.ts

@@ -177,9 +177,12 @@ app.on("activate", () => {
   }
 });
 
-ipcMain.on("toggleFullScreen", () => {
-  mainWindow!.setMenuBarVisibility(mainWindow!.isFullScreen());
-  mainWindow!.setFullScreen(!mainWindow!.isFullScreen());
+ipcMain.on("toggleFullScreen", (event) => {
+  console.log("xxxx");
+  const makeFullScreen = !mainWindow!.isFullScreen();
+  mainWindow!.setMenuBarVisibility(!makeFullScreen);
+  mainWindow!.setFullScreen(makeFullScreen);
+  event.returnValue = makeFullScreen;
 });
 
 ipcMain.on("exitFullScreen", () => {

src/preload.ts

@@ -5,18 +5,14 @@ import { contextBridge, ipcRenderer, remote, shell } from "electron";
 contextBridge.exposeInMainWorld("electronApi", {
   sendSync: (channel: string, data) => {
     // whitelist channels
-    let validChannels = ["get-file-that-launched-me"];
+    let validChannels = ["get-file-that-launched-me", "toggleFullScreen"];
     if (validChannels.includes(channel)) {
       return ipcRenderer.sendSync(channel, data);
     }
   },
   send: (channel: string, data) => {
     // whitelist channels
-    let validChannels = [
-      "unpack-zip-file",
-      "toggleFullScreen",
-      "exitFullScreen",
-    ];
+    let validChannels = ["unpack-zip-file", "exitFullScreen"];
     if (validChannels.includes(channel)) {
       ipcRenderer.send(channel, data);
     }

src/renderer/StartScreen.tsx

@@ -1,12 +1,8 @@
-import { css } from "@emotion/core";
-// these two lines make the css prop work on react elements
-import { jsx } from "@emotion/core";
-/** @jsx jsx */
+import { css } from "@emotion/react";
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { showOpenFile } from ".";
 import wordmark from "../../build/wordmark.svg";
-import logo from "../../build/icon.svg";
 import search from "../../build/Search.svg";
 import open from "../../build/Open.svg";
 

src/renderer/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App, { showBook } from "./App";
+import { toast } from "react-toastify";
 
 updateMainMenu();
 const zipFilePath = window.electronApi.sendSync("get-file-that-launched-me");
@@ -51,7 +52,21 @@ function updateMainMenu() {
         label: "&" + `Full Screen`,
         accelerator: "F11",
         click: () => {
-          window.electronApi.send("toggleFullScreen");
+          const isNowFullScreen =
+            window.electronApi.sendSync("toggleFullScreen");
+
+          if (isNowFullScreen) {
+            toast.info(`Press F11 or ESC to exit full screen`, {
+              position: "top-left",
+              icon: false,
+              autoClose: 3000,
+              hideProgressBar: true,
+              closeOnClick: true,
+              pauseOnHover: true,
+              draggable: false,
+              progress: undefined,
+            });
+          }
         },
       },
       {

tsconfig.json

@@ -3,15 +3,33 @@
     "target": "es5",
     "module": "commonjs",
     "sourceMap": true,
-    "jsx": "react",
-    "lib": ["dom", "es6", "scripthost", "es2017.object"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
+    "types": [
+      /*"@emotion/react",
+      "@emotion/react/types/css-prop"*/
+      "jest"
+    ],
+    "lib": [
+      "dom",
+      "es6",
+      "scripthost",
+      "es2017.object"
+    ],
     "experimentalDecorators": true,
     "alwaysStrict": true,
     "noImplicitReturns": true,
     "strictNullChecks": true,
-    "outDir": "lib",
     "resolveJsonModule": true,
     "esModuleInterop": true
   },
-  "exclude": ["node_modules", "typings", "lib"]
-}
+  "paths": {
+    "react": [
+      "./node_modules/@types/react"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "typings",
+  ]
+}