Merge pull request #424 from MicroPad/next-dev

v4.2.0
MicroPad · Nov 3, 2022 · 19dffe0 · 19dffe0
2 parents 3642757 + cf0e9b6
commit 19dffe0
Show file tree

Hide file tree

Showing 13 changed files with 12,876 additions and 7,579 deletions.
diff --git a/app/.gitignore b/app/.gitignore
@@ -1,3 +1,11 @@
 build.js
 *.tsbuildinfo
 .reports
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/app/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs b/app/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
diff --git a/app/.yarn/releases/yarn-3.2.4.cjs b/app/.yarn/releases/yarn-3.2.4.cjs
diff --git a/app/.yarnrc.yml b/app/.yarnrc.yml
@@ -0,0 +1,20 @@
+packageExtensions:
+  react-materialize@*:
+    dependencies:
+      prop-types: ^15.8.1
+  safe-buffer@*:
+    dependencies:
+      buffer: ^6.0.3
+  sax@*:
+    dependencies:
+      string_decoder: ^1.3.0
+  xml2js@*:
+    dependencies:
+      events: ^3.3.0
+      timers: "npm:timers-browserify@^2.0.12"
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.2.4.cjs
diff --git a/app/_build/build.ts b/app/_build/build.ts
@@ -22,8 +22,6 @@ const esBuildTargets = browserslist().filter(browser => !browser.endsWith('TP'))
 (async () => {
 	process.env.PUBLIC_URL ??= '';
 
-	await copyDir('node_modules/timers-browserify', 'node_modules/timers');
-
 	await rm(OUT_DIR, { recursive: true, force: true });
 	await copyDir('public', OUT_DIR);
 
@@ -96,7 +94,7 @@ const esBuildTargets = browserslist().filter(browser => !browser.endsWith('TP'))
 
 	const { metafile: monacoMetafile } = await build({
 		entryPoints: {
-			'monaco.worker': 'node_modules/monaco-editor/esm/vs/editor/editor.worker.js'
+			'monaco.worker': require.resolve('monaco-editor/esm/vs/editor/editor.worker.js')
 		},
 		entryNames: isDev ? '[name]' : '[name]-[hash]',
 		bundle: true,
@@ -130,7 +128,7 @@ const esBuildTargets = browserslist().filter(browser => !browser.endsWith('TP'))
 		],
 	}).catch(() => process.exit(1));
 	const monacoWorkerJsPath: string | undefined = Object.entries(monacoMetafile.outputs)
-		.find(([, metadata]) => metadata.entryPoint === 'node_modules/monaco-editor/esm/vs/editor/editor.worker.js')?.[0]
+		.find(([, metadata]) => metadata.entryPoint?.endsWith('/monaco-editor/esm/vs/editor/editor.worker.js'))?.[0]
 		.replace(`${OUT_DIR}/`, '');
 	if (!monacoWorkerJsPath) throw new Error('Missing monaco.worker.js');
 
@@ -241,12 +239,12 @@ const esBuildTargets = browserslist().filter(browser => !browser.endsWith('TP'))
 });
 
 async function copyWasm(): Promise<{ [originalName: string]: string }> {
-	const fendPath = join('node_modules', 'fend-wasm-web', 'fend_wasm_bg.wasm');
+	const fendPath = require.resolve('fend-wasm-web/fend_wasm_bg.wasm');
 	const fendHash = createHash('sha256').update(await readFile(fendPath)).digest('hex').substring(0,8);
 	const fendName = `fend_wasm_bg.${fendHash}.wasm`;
 	const fend$ = copyFile(fendPath, join(OUT_DIR, 'dist', fendName));
 
-	const photonPath = join('node_modules', '@nick_webster', 'photon', 'photon_rs_bg.wasm');
+	const photonPath = require.resolve('@nick_webster/photon/photon_rs_bg.wasm');
 	const photonHash = createHash('sha256').update(await readFile(photonPath)).digest('hex').substring(0,8);
 	const photonName = `photon_rs_bg.${photonHash}.wasm`;
 	const photon$ = copyFile(photonPath, join(OUT_DIR, 'dist', photonName));

diff --git a/app/package.json b/app/package.json
@@ -1,13 +1,13 @@
 {
   "name": "micropad",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "scripts": {
     "preinstall": "python3 ../libs/build-libs.py && ./get_precache_files.py > src/extraPrecacheFiles.ts",
     "prestart": "tsc -p _build/tsconfig.json",
-    "start": "NODE_ENV='' node _build/build.js",
+    "start": "yarn prestart && NODE_ENV='' node _build/build.js",
     "prebuild": "tsc -p _build/tsconfig.json",
-    "build": "NODE_ENV=production node _build/build.js",
+    "build": "yarn prebuild && NODE_ENV=production node _build/build.js",
     "test": "TZ=NZ jest",
     "typecheck": "tsc --noEmit --p ./tsconfig.json",
     "typecheck:watch": "tsc --noEmit --watch -p ./tsconfig.json",
@@ -17,50 +17,51 @@
     "node": ">=16.0.0"
   },
   "dependencies": {
-    "@fontsource/abeezee": "^4.4.5",
-    "@monaco-editor/react": "^4.4.5",
+    "@fontsource/abeezee": "^4.5.10",
+    "@monaco-editor/react": "^4.4.6",
     "@nick_webster/photon": "^0.3.1",
-    "@redux-devtools/extension": "^3.2.1",
-    "@reduxjs/toolkit": "^1.8.1",
-    "@sentry/integrations": "^7.12.1",
-    "@sentry/react": "^7.12.1",
-    "@sentry/tracing": "^7.12.1",
-    "browserslist-useragent-regexp": "^3.0.0",
-    "date-fns": "^2.21.3",
+    "@redux-devtools/extension": "^3.2.3",
+    "@reduxjs/toolkit": "^1.8.6",
+    "@sentry/integrations": "^7.17.3",
+    "@sentry/react": "^7.17.3",
+    "@sentry/tracing": "^7.17.3",
+    "browserslist-useragent-regexp": "^3.0.2",
+    "date-fns": "^2.29.3",
     "deep-freeze": "~0.0.1",
-    "fend-wasm-web": "^1.0.5",
+    "fend-wasm-web": "^1.1.2",
     "json-stringify-safe": "^5.0.1",
-    "jszip": "^3.1.5",
-    "localforage": "^1.5.6",
+    "jszip": "^3.10.1",
+    "localforage": "^1.10.0",
     "material-icons-font": "^2.1.0",
     "materialize-css": "^1.0.0",
-    "monaco-editor": "~0.34.0",
-    "mousetrap": "^1.6.1",
-    "opus-recorder": "^4.1.0",
-    "pdfobject": "^2.1.1",
-    "re-resizable": "^6.9.0",
+    "monaco-editor": "~0.34.1",
+    "mousetrap": "^1.6.5",
+    "opus-recorder": "^4.1.4",
+    "pdfobject": "^2.2.8",
+    "re-resizable": "^6.9.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-draggable": "^4.4.4",
-    "react-materialize": "^3.9.9",
-    "react-redux": "^8.0.1",
-    "react-select": "^5.2.1",
+    "react-draggable": "^4.4.5",
+    "react-materialize": "^3.10.0",
+    "react-redux": "^8.0.4",
+    "react-select": "^5.6.0",
     "react-treeview": "~0.4.7",
+    "redux": "^4.2.0",
     "redux-observable": "^2.0.0",
-    "rxjs": "^7.5.1",
+    "rxjs": "^7.5.7",
     "save-as": "^0.1.8",
-    "semver": "^7.3.4",
+    "semver": "^7.3.8",
     "showdown": "^1.9.1",
-    "typescript": "~4.8.2",
+    "typescript": "~4.8.4",
     "typescript-fsa": "^3.0.0",
-    "upad-parse": "^7.5.1",
+    "upad-parse": "^7.5.2",
     "vex-dialog": "^1.1.0",
     "vex-js": "^4.1.0",
-    "workbox-core": "^6.1.5",
-    "workbox-expiration": "^6.1.5",
-    "workbox-precaching": "^6.1.5",
-    "workbox-routing": "^6.1.5",
-    "workbox-strategies": "^6.1.5"
+    "workbox-core": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4"
   },
   "eslintConfig": {
     "extends": [
@@ -137,53 +138,57 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-syntax-flow": "^7.14.5",
-    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@babel/core": "^7.19.6",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@types/deep-freeze": "^0.1.2",
-    "@types/html-minifier": "^4.0.1",
-    "@types/jest": "^27.0.1",
-    "@types/jest-image-snapshot": "^4.3.0",
+    "@types/html-minifier": "^4.0.2",
+    "@types/jest": "^27.5.2",
+    "@types/jest-image-snapshot": "^4.3.2",
     "@types/json-stringify-safe": "^5.0.0",
-    "@types/mousetrap": "^1.6.7",
-    "@types/node": "^18.7.14",
-    "@types/react": "^17",
-    "@types/react-dom": "^17.0.15",
-    "@types/semver": "^7.3.4",
+    "@types/mousetrap": "^1.6.10",
+    "@types/node": "^18.11.9",
+    "@types/react": "^17.0.52",
+    "@types/react-dom": "^17.0.18",
+    "@types/semver": "^7.3.13",
     "@types/showdown": "^1.9.4",
     "@types/workbox-build": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
     "babel-eslint": "^10.1.0",
-    "browserslist": "^4.16.6",
-    "esbuild": "~0.15.6",
-    "esbuild-plugin-browserslist": "~0.5.0",
+    "browserslist": "^4.21.4",
+    "esbuild": "~0.15.13",
+    "esbuild-plugin-browserslist": "~0.5.2",
     "esbuild-plugin-manifest": "~0.5.0",
-    "eslint": "=8.22.0",
-    "eslint-config-react-app": "^7.0.0",
+    "eslint": "^8.26.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^26.1.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.9.0",
     "eslint-plugin-jest-playwright": "~0.9.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "expect-playwright": "^0.8.0",
     "html-minifier": "^4.0.0",
-    "jest": "^27.2.0",
-    "jest-circus": "^27.2.0",
-    "jest-environment-node": "^27.2.0",
+    "jest": "^27.5.1",
+    "jest-circus": "^27.5.1",
+    "jest-environment-node": "^27.5.1",
     "jest-image-snapshot": "^4.5.1",
-    "jest-junit": "^13.0.0",
-    "jest-playwright-preset": "^1.7.0",
-    "jest-runner": "^27.2.0",
-    "playwright": "^1.14.1",
+    "jest-junit": "^13.2.0",
+    "jest-playwright-preset": "^1.7.2",
+    "jest-runner": "^27.5.1",
+    "playwright": "^1.27.1",
     "servor": "^4.0.2",
-    "ts-jest": "^27.0.5",
-    "workbox-build": "^6.1.5"
+    "ts-jest": "^27.1.5",
+    "workbox-build": "^6.5.4"
   },
   "resolutions": {
     "@types/react": "^17",
     "react": "^17",
-    "redux": "^4"
-  }
+    "redux": "^4",
+    "rxjs": "^7.5.7",
+    "playwright-core": "^1.27.1"
+  },
+  "packageManager": "yarn@3.2.4"
 }
diff --git a/app/src/app/assets/Help.npx b/app/src/app/assets/Help.npx
diff --git a/app/src/app/components/note-element-modal/NoteElementModalComponent.tsx b/app/src/app/components/note-element-modal/NoteElementModalComponent.tsx
@@ -3,7 +3,11 @@ import './NoteElementModalComponent.css';
 import { Converter, extension } from 'showdown';
 import { IShowdownOpts } from '../note-viewer/elements/markdown/MarkdownElementComponent';
 import { Translators } from 'upad-parse';
-import { colourTransformer, fendTransformer } from '../note-viewer/elements/markdown/MarkdownTransformers';
+import {
+	colourTransformer,
+	fendTransformer,
+	preTransform
+} from '../note-viewer/elements/markdown/MarkdownTransformers';
 import { DEFAULT_MODAL_OPTIONS } from '../../util';
 import { Note, Notepad } from 'upad-parse/dist';
 import SingletonModalComponent from '../singleton-modal/SingletonModalContainer';
@@ -76,6 +80,7 @@ async function renderNote({ npx, findNote }: Props): Promise<RenderedNote> {
 		];
 	});
 
+	await preTransform();
 	const html = new Converter({
 		parseImgDimensions: true,
 		simplifiedAutoLink: true,

diff --git a/app/src/app/components/note-viewer/elements/markdown/MarkdownElementComponent.tsx b/app/src/app/components/note-viewer/elements/markdown/MarkdownElementComponent.tsx
@@ -14,7 +14,7 @@ import { Checkbox, Col, Row, TextInput } from 'react-materialize';
 import { Resizable } from 're-resizable';
 import { NoteElement } from 'upad-parse/dist/Note';
 import { ITheme } from '../../../../types/Themes';
-import { colourTransformer, fendTransformer, mathsTransformer } from './MarkdownTransformers';
+import { colourTransformer, fendTransformer, mathsTransformer, preTransform } from './MarkdownTransformers';
 import NoteElementModalComponent from '../../../note-element-modal/NoteElementModalComponent';
 import { BehaviorSubject } from 'rxjs';
 import { ConnectedProps } from 'react-redux';
@@ -216,8 +216,8 @@ export default class MarkdownElementComponent extends React.Component<Props> {
 		const { element, isPrinting } = props;
 
 		if (!!this.iframe) {
-			this.iframe.onload = () => {
-				const html = this.generateHtml(element);
+			this.iframe.onload = async () => {
+				const html = await this.generateHtml(element);
 				this.sendMessage({
 					type: 'render',
 					id: element.args.id,
@@ -277,17 +277,20 @@ export default class MarkdownElementComponent extends React.Component<Props> {
 
 		updateElement!(element.args.id, newElement);
 
-		this.sendMessage({
-			type: 'render',
-			id: element.args.id,
-			payload: {
-				...newElement,
-				content: this.generateHtml(newElement)
-			}
-		});
+		this.generateHtml(newElement).then(content =>
+			this.sendMessage({
+				type: 'render',
+				id: element.args.id,
+				payload: {
+					...newElement,
+					content
+				}
+			})
+		);
 	}
 
-	private generateHtml = (element: NoteElement): string => {
+	private generateHtml = async (element: NoteElement): Promise<string> => {
+		await preTransform();
 		const rawHtml = converter.makeHtml(element.content);
 		const res = this.props.enableCheckboxes(element.content, rawHtml);
 		this.progress$.next(res);
@@ -345,14 +348,16 @@ export default class MarkdownElementComponent extends React.Component<Props> {
 						content: this.props.toggleMdCheckbox(element.content, message.payload)
 					};
 					this.props.updateElement!(element.args.id, newElement);
-					this.sendMessage({
-						type: 'render',
-						id: element.args.id,
-						payload: {
-							...element,
-							content: this.generateHtml(newElement)
-						}
-					});
+					this.generateHtml(newElement).then(content =>
+						this.sendMessage({
+							type: 'render',
+							id: element.args.id,
+							payload: {
+								...element,
+								content
+							}
+						})
+					);
 				})();
 				break;
 

diff --git a/app/src/app/components/note-viewer/elements/markdown/MarkdownTransformers.ts b/app/src/app/components/note-viewer/elements/markdown/MarkdownTransformers.ts
@@ -1,5 +1,7 @@
 import { ShowdownExtension } from 'showdown';
 import { substituteInlineFendExpressions } from 'fend-wasm-web';
+import { START_FEND$ } from '../../../../services/FendService';
+import { firstValueFrom } from 'rxjs';
 
 export type MarkdownTransformer = ShowdownExtension;
 
@@ -8,10 +10,19 @@ interface FendResponseComponent {
 	contents: string;
 }
 
+let HAS_STARTED_FEND: boolean = false;
+
+export async function preTransform() {
+	await firstValueFrom(START_FEND$);
+	HAS_STARTED_FEND = true;
+}
+
 export const fendTransformer: MarkdownTransformer = {
 	type: 'listener',
 	listeners: {
 		'hashHTMLBlocks.after': (evtName, text) => {
+			if (!HAS_STARTED_FEND) throw new Error(`fend has not been started. Make sure preTransform() has ran before running other markdown transformers.`);
+
 			// e.g. [[1+1]] -> 2
 			const components: FendResponseComponent[] = JSON.parse(substituteInlineFendExpressions(text, 500));
 			let result = '';