Bye bye jQuery

README.md

@@ -30,7 +30,6 @@ Copyright © 2015 - 2024 [Tyler Liu](https://github.com/tylerlong)
 
 ## Todo
 
-- Get rid of jQuery
 - Write Playwright tests
 - Support mobile devices
   - codemirror support mobile devices
@@ -48,7 +47,7 @@ Copyright © 2015 - 2024 [Tyler Liu](https://github.com/tylerlong)
 - Update modal forms UI
   - the preferences modal
 - gantt diagram x-axis format should be part of the diagram code, not a settings
-- Release a React library so that every can use it easily
+- Release a React library so that everyone can use it easily
   - a few lines of code to embed mdp to their own app
 - Download as pdf/png/html/html code
 - show icon as the first item in toolbar, clicked to show the about modal

package.json

@@ -39,7 +39,6 @@
     "eslint-config-tyler": "^0.1.7",
     "globals": "^15.11.0",
     "http-server": "^14.1.1",
-    "jquery": "^3.7.1",
     "localforage": "^1.10.0",
     "manate": "^0.9.8",
     "markdown-core": "1.1.2",

src/sync_scroll.ts

@@ -1,5 +1,4 @@
 import debounce from 'debounce';
-import $ from 'jquery';
 
 import store from './store';
 import { animate } from './utils';
@@ -43,14 +42,16 @@ const scrollRight = (scrollTop: number): void => {
 };
 
 const getEditorScroll = (): IScroll => {
-  const lineMarkers = $('article#preview > [data-source-line]');
+  const lineMarkers = document.querySelectorAll(
+    '#preview > [data-source-line]',
+  );
   const lines = [];
-  lineMarkers.each((index, element) => {
-    lines.push($(element).data('source-line'));
+  lineMarkers.forEach((element: HTMLElement) => {
+    lines.push(element.dataset.sourceLine);
   });
   const currentPosition = store.editor.getScrollInfo().top;
-  let lastMarker;
-  let nextMarker;
+  let lastMarker: number;
+  let nextMarker: number;
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const height = store.editor.heightAtLine(line - 1, 'local');
@@ -76,18 +77,27 @@ const getEditorScroll = (): IScroll => {
 const setPreviewScroll = (editorScroll: IScroll) => {
   let lastPosition = 0;
   let nextPosition =
-    $('article#preview').outerHeight() - $('#right-panel').height(); // maximum scroll
+    document.querySelector<HTMLElement>('#preview').offsetHeight -
+    document.getElementById('right-panel').offsetHeight; // maximum scroll
+
   if (editorScroll.lastMarker) {
     // no marker at very start
-    lastPosition = $('article#preview')
-      .find('>[data-source-line="' + editorScroll.lastMarker + '"]')
-      .get(0).offsetTop;
+    const lastMarkerElement = document.querySelector<HTMLElement>(
+      `#preview > [data-source-line="${editorScroll.lastMarker}"]`,
+    );
+    if (lastMarkerElement) {
+      lastPosition = lastMarkerElement.offsetTop;
+    }
   }
+
   if (editorScroll.nextMarker) {
     // no marker at very end
-    nextPosition = $('article#preview')
-      .find('>[data-source-line="' + editorScroll.nextMarker + '"]')
-      .get(0).offsetTop;
+    const nextMarkerElement = document.querySelector<HTMLElement>(
+      `#preview > [data-source-line="${editorScroll.nextMarker}"]`,
+    );
+    if (nextMarkerElement) {
+      nextPosition = nextMarkerElement.offsetTop;
+    }
   }
   const scrollTop =
     lastPosition + (nextPosition - lastPosition) * editorScroll.percentage; // right scroll according to left percentage
@@ -100,8 +110,11 @@ const getPreviewScroll = (): IScroll => {
   let lastScroll = 0;
   let nextLine = store.editor.getValue().split('\n').length; // number of lines of markdown
   let nextScroll =
-    $('article#preview').outerHeight() - $('#right-panel').height(); // maximum scroll
-  const lineMarkers = $('article#preview > [data-source-line]');
+    document.getElementById('preview').offsetHeight -
+    document.getElementById('right-panel').offsetHeight; // maximum scroll
+  const lineMarkers = document.querySelectorAll<HTMLElement>(
+    '#preview > [data-source-line]',
+  );
   for (let i = 0; i < lineMarkers.length; i++) {
     const lineMarker = lineMarkers[i];
     if (lineMarker.offsetTop < scroll) {

yarn.lock

@@ -3200,11 +3200,6 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
-jquery@^3.7.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
-  integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"