Upgrade everything (#3183)

* upgrade npm package-lock format

* working version in node 14 with arch set to x64

* npm install success on node 16

* make dev working under node 16

* upgrade webpack-dev-server: fix deprecation warning related to process.binding('http_parser')

* this builds under python 3.10 NOT 3.11. removed Spectron/e2e

* remove deprecated types packages

* upgrade babel/preset-env for deprecation warnings

* this is as far as the babel presets can be upgraded without needing to upgrade webpack to 5.0+

* trying to untangle webpack and all the things

* ..... a version that boots (to a React error)

* okay this version builds on local browser but crashes inside electron

* not needed, this is now the default

* comment out the things that are breaking Monaco and React

* upgrade wait-on

* upgrade semver

* electron builder and notarize

* debug

* lodash

* jsdom

* husky

* some types

* some types, remove unused rimraf

* turndown and fake-indexdb

* update some babel plugins

* webpack config, fix setImmediate shim, comments for things I tried that should be working but aren't

* add plugin for isemail, node polyfills

* node 18.19.1

* comment apparently not required polyfill

* highlight.js from npm audit

* remove misty, replace in build scripts with concurrently and wait-on. upgrade concurrently to latest

* some low-hanging fruit from npm outdated

* date-fns, see breaking notes for 3.0.0: https://github.com/date-fns/date-fns/releases/tag/v3.0.0. also cookie and autoprefixer

* string-replace-to-array, no breaking changes

* replace husky with plain git hooks in npm prepare; remove some unused packages

* update jest, remove some references to e2e tests

* incorporate changes from #2900, props to @sandymcfadden

* Fix recursion error in monaco. (#3184)

* update node version in circleCI

* small change to trigger circleci

* fix typos

* exclude node_modules from babel-loader per babel-loader recommendations

* try choco install for cinst

* Utilize changeAccessor for proper decorations fix (#3185)

* fix linux build, add universal mac build

* electron deprecation on window open

* package-lock

* stylelint to 14

* stylelint, prettier, and temporarily ignore some files to avoid making this PR even worse than it already is

* eslint, move prettier config back to package.json due to vscode errors, fix Jest function call

* remove window.open hack thanks to the new window opening behavior

* make scss lint errors warnings for now, so the build test step passes

* fix up tsconfig so module imports work in editor

* configure asset module instead of file-loader/url-loader in webpack

* some Monaco API updates, keyboard shortcut fixes, etc. temporary Monaco version downgrade

* replace deprecated node-sass with sass package

* Monaco 0.34.1 and some fixes for keybindings

* monaco 0.39.0 and fix up some types

* monaco 0.45.0, fix completion provider and some other issues

* babel-eslint is now babel/eslint-parser

* replace enzyme with react-testing-library

* more react-adjacent packages and fixing some types

* small package upgrades

* more small package updates and fix prettyBytes import

* highlight.js

* bandaid - commented context menu code

* monaco-react-editor to fix cursor issue

* Updated config.yml

* Updated config.yml

* Updated config.yml

* New windows cert.

* Updated config.yml

* Updated cert with proper encryption.

* Spell things correctly...

* Another cert encoding attempt with a different key.

* Removing rpm build, for science.

* Add back rpm build.

* Try building ONLY rpm.

* small point upgrades

* Material UI v5

* Adding back other targets, rpm only gets x64 for now.

* upgrade monaco-editor to 0.48.0

* small point upgrades

* npm audit fix - tar and express

* sentry/react point upgrade

* add --legacy-peer-deps flag because I guess we're stuck with it

* some type fixes

* testing library point update

* js-yaml 3x to 4x

https://github.com/nodeca/js-yaml/blob/master/migrate_v3_to_v4.md

* electron progressbar

* electron to 30x (no breaking changes)

* style-loader to 4x, no breaking changes for our config

* disable highlighting unicode characters

* refactor decorations

* point updates

* FIX THE CONTEXT MENU WITHOUT HACKING CSS

* some small stuff to make typescript happier

---------

Co-authored-by: Dan Roundhill <[email protected]>

.circleci/config.yml

@@ -8,7 +8,7 @@ references:
     run:
       name: Decrypt assets
       command: |
-        openssl aes-256-cbc -md md5 -d -in ./resources/certificates/win.p12.enc -out ./resources/certificates/win.p12 -k ${SECRETS_ENCRYPTION_KEY}
+        openssl aes-256-cbc -md md5 -d -in ./resources/certificates/win.p12.enc -out ./resources/certificates/win.p12 -k ${SECRETS_ENCRYPTION_KEY_2024}
         openssl aes-256-cbc -md md5 -d -in ./resources/certificates/mac.p12.enc -out ./resources/certificates/mac.p12 -k ${SECRETS_ENCRYPTION_KEY}
         openssl aes-256-cbc -md md5 -d -in ./resources/secrets/config.json.enc -out ./config.json -k ${SECRETS_ENCRYPTION_KEY}
   job_filters: &job_filters
@@ -54,7 +54,7 @@ references:
       command: |
         source $HOME/.nvm/nvm.sh
         nvm use
-        npm ci
+        npm install --force
   npm_restore_cache: &npm_restore_cache
     restore_cache:
       name: Restore npm cache
@@ -82,7 +82,7 @@ references:
 jobs:
   build:
     docker:
-      - image: cimg/node:12.14.0
+      - image: cimg/node:18.19.1
     shell: /bin/bash --login
     working_directory: ~/simplenote
     steps:
@@ -100,7 +100,7 @@ jobs:
           paths: *app_cache_paths
   test:
     docker:
-      - image: cimg/node:12.14.0
+      - image: cimg/node:18.19.1
     shell: /bin/bash --login
     working_directory: ~/simplenote
     steps:
@@ -118,7 +118,7 @@ jobs:
 
   linux:
     docker:
-      - image: cimg/node:12.14.0
+      - image: cimg/node:18.19.1
     working_directory: ~/simplenote
     steps:
       - checkout
@@ -190,7 +190,7 @@ jobs:
           at: C:\Users\circleci\simplenote-electron
       - run:
           name: Install make
-          command: cinst make
+          command: choco install make
       - run:
           name: Install node version
           command: |
@@ -200,7 +200,7 @@ jobs:
       - run:
           name: Npm install
           command: |
-            npm ci
+            npm install --force
       - run:
           name: Build windows
           command: |
@@ -234,7 +234,7 @@ jobs:
           at: C:\Users\circleci\simplenote-electron
       - run:
           name: Install make
-          command: cinst make
+          command: choco install make
       - run:
           name: Install node version
           command: |
@@ -244,7 +244,7 @@ jobs:
       - run:
           name: Npm install
           command: |
-            npm ci
+            npm install --force
       - run:
           name: Build windows
           command: |

.eslintrc.json

@@ -18,9 +18,9 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:jest/recommended",
-    "plugin:react/recommended",
     "prettier",
-    "prettier/react"
+    "plugin:prettier/recommended",
+    "plugin:react/recommended"
   ],
   "plugins": [
     "@typescript-eslint",

.githooks/pre-commit

@@ -0,0 +1 @@
+npx pretty-quick --staged

.nvmrc

@@ -1 +1 @@
-12.14.0
+18.19.1

.prettierignore

@@ -0,0 +1,35 @@
+.gitignore
+dist
+
+# ignore files with changes from prettier 2 -> 3
+# TODO: remove these and commit prettier changes in a new PR...
+# ... if updating eslint and typescript don't sort it out somehow
+lib/analytics/tracks.ts
+lib/app-layout/index.tsx
+lib/app-layout/style.scss
+lib/components/note-preview/index.tsx
+lib/connection-status/index.tsx
+lib/dialogs/import/dropzone/style.scss
+lib/error-boundary/index.tsx
+lib/note-content-editor.tsx
+lib/note-editor/index.tsx
+lib/note-list/index.tsx
+lib/search/index.ts
+lib/state/action-types.ts
+lib/state/analytics/actions.ts
+lib/state/analytics/middleware.ts
+lib/state/browser/index.ts
+lib/state/data/middleware.ts
+lib/state/data/reducer.ts
+lib/state/index.ts
+lib/state/persistence.ts
+lib/state/settings/actions.ts
+lib/state/simperium/functions/preferences-bucket.ts
+lib/state/simperium/middleware.ts
+lib/state/simperium/reducer.ts
+lib/state/ui/actions.ts
+lib/state/ui/middleware.ts
+lib/state/ui/reducer.ts
+lib/tag-list/index.tsx
+lib/types.ts
+lib/utils/test/is-email-tag.ts

.stylelintrc

@@ -1,10 +1,9 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
-  "plugins": ["stylelint-prettier", "stylelint-scss"],
+  "defaultSeverity": "warning",
+  "extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
+  "plugins": ["stylelint-prettier"],
   "rules": {
     "prettier/prettier": true,
-    "at-rule-no-unknown": null,
-    "scss/at-rule-no-unknown": true,
     "no-descending-specificity": null
   }
 }

Makefile

@@ -52,17 +52,17 @@ PUBLISH ?= onTag
 # Main targets
 .PHONY: start
 start:
-	@NODE_ENV=$(NODE_ENV) DEV_SERVER=$(DEV_SERVER) npx electron . --inspect
+	@NODE_ENV=$(NODE_ENV) DEV_SERVER=$(DEV_SERVER) npx electron . --inspect --watchDir=./desktop
 
 .PHONY: dev
 dev:
-	@npx misty
+	@NODE_ENV=development DEV_SERVER=true npx concurrently -c gray.dim "make dev-server" "wait-on http://localhost:4000 && make start"
 
 .PHONY: dev-server
 dev-server:
 	@$(MAKE) build NODE_ENV=$(NODE_ENV)
 
-	@NODE_ENV=$(NODE_ENV) npx webpack-dev-server --config ./webpack.config.js --content-base dist --host $(HOST) --port $(PORT) --hot
+	@NODE_ENV=$(NODE_ENV) npx webpack serve --config ./webpack.config.js --static dist --host $(HOST) --port $(PORT) --hot
 
 .PHONY: test
 test:
@@ -87,7 +87,7 @@ endif
 # Build utils
 .PHONY: build-app
 build-app:
-	@NODE_ENV=$(NODE_ENV) npx webpack $(if $(IS_PRODUCTION),-p) --config ./webpack.config.js
+	@NODE_ENV=$(NODE_ENV) npx webpack $(if $(IS_PRODUCTION),--mode production) --config ./webpack.config.js
 
 .PHONY: build-if-not-exists
 build-if-not-exists: config.json
@@ -161,14 +161,14 @@ config-release: config.json install
 
 .PHONY: format
 format:
-	@npx prettier --ignore-path .gitignore --write "**/*.{js,jsx,json,sass,ts,tsx}"
+	@npx prettier --write "**/*.{js,jsx,json,sass,scss,ts,tsx}"
 
 .PHONY: lint
 lint: lint-js lint-scss
 
 .PHONY: lint-scss
 lint-scss:
-	@npx stylelint --ignore-path .gitignore "**/*.scss" --syntax scss
+	@npx stylelint --ignore-path .gitignore "**/*.scss"
 
 .PHONY: lint-js
 lint-js:

README.md

@@ -8,7 +8,7 @@ A Simplenote [React](https://reactjs.org/) client packaged in [Electron](https:/
 
 1. Clone the repo: `git clone https://github.com/Automattic/simplenote-electron.git`
 2. `cd simplenote-electron`
-3. `npm install`
+3. `npm install --legacy-peer-deps` (This flag is necessary because `react-monaco-editor` is pinned to a specific `monaco-editor` dependency, but `npm` [considers minor versions to be breaking changes for sub-1.0.0 apps](https://stackoverflow.com/questions/62629878/why-doesnt-npm-upgrade-install-my-0-0-1-dep-with-a-dependency-on-0-0-0))
 4. `npm run dev`
 5. The dev server will start on [http://localhost:4000](http://localhost:4000), and the Electron app will launch automatically.
 6. For all logging from Electron to be printed to the terminal (e.g. `console.log` statements within `app.js`), you might need to set `env ELECTRON_ENABLE_LOGGING=1`.
@@ -26,11 +26,6 @@ _Note: Simplenote API features such as sharing and publishing will not work with
 
 Unit tests are run with `npm test`.
 
-End-to-end tests are run with `npm run test-e2e`.
-Note that the `Spectron` version [corresponds with the version](https://www.npmjs.com/package/spectron#version-map) of `Electron` we are using.
-Use the corresponding API docs for `webdriver-io` which correspond to the `Spectron` version.
-At the time of writing you will want to refer to the [webdriver-io v4.13 API docs](http://v4.webdriver.io/v4.13/api.html).
-
 ## Coding Guidelines
 
 Please adhere to the same guidelines as found in [wp-calypso](https://github.com/Automattic/wp-calypso/blob/master/docs/coding-guidelines.md).
@@ -42,6 +37,7 @@ See <a href="./CONTRIBUTING.md">CONTRIBUTING.md</a> for more guidelines.
 - [node-simperium](https://github.com/Simperium/node-simperium) for Simperium syncing.
 - [ReactJS](https://reactjs.org/) for UI.
 - [Electron](https://electronjs.org/) for wrapping the JavaScript application.
+- `rpm` must be installed in order to build Linux packages (`brew install rpm` on OSX).
 
 ## Simplenote for Other Platforms
 

after_sign_hook.js

@@ -1,6 +1,5 @@
 const fs = require('fs');
 const path = require('path');
-var electron_notarize = require('electron-notarize');
 
 module.exports = async function (params) {
   // Only notarize the app on Mac OS only.
@@ -30,6 +29,7 @@ module.exports = async function (params) {
   console.log(`Notarizing ${appId} found at ${appPath}`); // eslint-disable-line no-console
 
   try {
+    const electron_notarize = require('electron-notarize');
     await electron_notarize.notarize({
       appBundleId: appId,
       appPath: appPath,

babel.config.js

@@ -6,6 +6,11 @@ module.exports = function (api) {
       '@babel/preset-env',
       {
         corejs: '3',
+        include: [
+          'transform-class-properties',
+          'transform-object-rest-spread',
+          'transform-optional-chaining',
+        ],
         useBuiltIns: 'entry',
         targets: {
           esmodules: true,
@@ -16,9 +21,6 @@ module.exports = function (api) {
     '@babel/typescript',
   ];
   const plugins = [
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-transform-runtime',
   ];

desktop/app.js

@@ -82,7 +82,6 @@ module.exports = function main() {
       show: false,
       webPreferences: {
         contextIsolation: true,
-        enableRemoteModule: false,
         nodeIntegration: false,
         preload: path.join(__dirname, './preload.js'),
       },
@@ -163,14 +162,9 @@ module.exports = function main() {
 
     mainWindowState.manage(mainWindow);
 
-    // this TERRIBLE HACK forces vscode to call window.open(url) rather than window.open()
-    // see https://github.com/microsoft/monaco-editor/issues/628
-    mainWindow.webContents.userAgent =
-      mainWindow.webContents.userAgent + '/Edge/WebView/FakeUA';
-
-    mainWindow.webContents.on('new-window', function (event, linkUrl) {
-      event.preventDefault();
-      shell.openExternal(linkUrl);
+    mainWindow.webContents.setWindowOpenHandler((details) => {
+      shell.openExternal(details.url);
+      return { action: 'deny' };
     });
 
     // Disables navigation for app window drag and drop

desktop/evernote-import/index.js

@@ -1,6 +1,6 @@
 const { createStream } = require('sax');
 const { JSDOM } = require('jsdom');
-const parseISO = require('date-fns/parseISO');
+const { parseISO } = require('date-fns/parseISO');
 const { endsWith, get } = require('lodash');
 const fs = require('fs');
 const enmlToMarkdown = require('./enml-to-markdown');

desktop/updater/lib/setup-progress-updates.js

@@ -1,6 +1,6 @@
 const { app, dialog } = require('electron');
 const ProgressBar = require('electron-progressbar');
-const prettyBytes = require('pretty-bytes');
+const prettyBytes = import('pretty-bytes');
 
 const progressBarBlue = '#4895d9';
 

desktop/updater/manual-updater/index.js

@@ -64,7 +64,7 @@ class ManualUpdater extends Updater {
         }
 
         const configBody = await configResp.text();
-        const releaseConfig = yaml.safeLoad(configBody);
+        const releaseConfig = yaml.load(configBody);
 
         if (semver.lt(app.getVersion(), releaseConfig.version)) {
           // eslint-disable-next-line no-console