jest half-set-up (still errors with esm)

Author: leonhma

.eslintrc.json

@@ -12,5 +12,10 @@
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
 
-  "root": true
+  "root": true,
+
+  "rules": {
+    "no-unused-vars": "error",
+    "@typescript-eslint/no-unused-vars": "off"
+  }
 }

.github/workflows/ci.yml

@@ -41,18 +41,6 @@ jobs:
       - name: test
         run: yarn test
 
-  check-format:
-    runs-on: ubuntu-latest
-    name: Check format 🔍
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: install dependencies
-        run: yarn install
-
-      - name: check format
-        run: yarn format:check
-
   lint:
     runs-on: ubuntu-latest
     name: Lint ✔

__mocks__/obsidian.ts

@@ -1,5 +1,6 @@
 import { parse } from "yaml";
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export function parseYaml(text: string): any {
   return parse(text);
 }

jest.config.ts

@@ -1,7 +1,10 @@
-const config = {
-  verbose: true,
-  transform: {
-    "^.+\\.tsx?$": "ts-jest",
-  },
+import type { JestConfigWithTsJest } from "ts-jest";
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  // Replace `ts-jest` with the preset you want to use
+  // from the above list
+  preset: "ts-jest/presets/js-with-babel-esm",
 };
-export default config;
+
+export default jestConfig;

package.json

@@ -3,23 +3,27 @@
   "version": "1.2.1",
   "description": "A plugin for displaying mathematical functions in obsidian.md.",
   "repository": "https://github.com/leonhma/obsidian-functionplot",
+  "type": "module",
   "author": "leonhma",
   "license": "MIT",
   "private": true,
   "scripts": {
     "build": "webpack",
-    "test": "jest",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "format": "yarn prettier --write .",
-    "format:check": "yarn prettier --check .",
     "lint": "yarn eslint ."
   },
   "devDependencies": {
     "@types/jest": "^29.2.0",
+    "@types/node": "*",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.41.0",
+    "cjstoesm": "^2.1.2",
+    "default-import": "^1.1.5",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "jest": "^29.2.2",
+    "jest-environment-node": "^29.2.2",
     "prettier": "^2.7.1",
     "sass": "^1.54.4",
     "sass-loader": "^13.0.2",
@@ -33,6 +37,7 @@
   },
   "dependencies": {
     "function-plot": "^1.22.9-0",
+    "html-to-image": "^1.10.8",
     "obsidian": "0.12.2"
   }
 }

src/app/CreatePlotModal.ts

@@ -1,27 +1,29 @@
 import { Chart } from "function-plot";
 import { FunctionPlotDatum } from "function-plot/dist/types";
-import { App, Modal, Setting } from "obsidian";
-import { DEFAULT_PLOT_OPTIONS, PlotOptions } from "../types";
+import { Editor, Modal, Setting } from "obsidian";
+import { DEFAULT_PLOT_OPTIONS, rendererOptions } from "../common/defaults";
+import { PlotOptions, rendererType } from "../common/types";
 import ObsidianFunctionPlot, { createPlot } from "../main";
+import { renderPlotAsImage, renderPlotAsInteractive } from "../common/utils";
 
 export default class CreatePlotModal extends Modal {
   options: PlotOptions;
   plugin: ObsidianFunctionPlot;
+  editor: Editor;
   plot: Chart;
+  renderer: rendererType;
 
-  onSubmit: (result: PlotOptions) => void;
-
-  constructor(
-    app: App,
-    plugin: ObsidianFunctionPlot,
-    onSubmit: (result: PlotOptions) => void
-  ) {
-    super(app);
+  constructor(plugin: ObsidianFunctionPlot, editor: Editor) {
+    super(plugin.app);
     this.plugin = plugin;
-    this.onSubmit = onSubmit;
+    this.editor = editor;
+    this.renderer = this.plugin.settings.defaultRenderer;
   }
 
-  // skipcq: JS-0376
+  /**
+   * Reload the preview using internal functions. Zooming doesn't work here.
+   * @returns A Promise
+   */
   async reloadPreview() {
     if (!this.plot) return;
     // update values
@@ -96,10 +98,10 @@ export default class CreatePlotModal extends Modal {
 
     new Setting(settings)
       .setName("Bounds")
-      .setDesc("Bounds must be written in this format: minX, maxX, minY, maxY")
+      .setDesc("Bounds must be written in this format: minX, maxX, minY, maxY.")
       .addText((text) => {
         text.setPlaceholder(DEFAULT_PLOT_OPTIONS.bounds.join(", "));
-        text.onChange(async (_) => {
+        text.onChange(async () => {
           let bounds = text
             .getValue()
             .split(",")
@@ -134,7 +136,7 @@ export default class CreatePlotModal extends Modal {
     new Setting(settings)
       .setName("Functions")
       .setDesc(
-        "Specify functions to plot. Must be in format: <name>(x) = <expression>"
+        "Specify functions to plot. Must be in format: <name>(x) = <expression>."
       )
       .addTextArea((com) => {
         com.onChange(async (value) => {
@@ -147,26 +149,39 @@ export default class CreatePlotModal extends Modal {
         });
       });
 
-    new Setting(contentEl).addButton((btn) => {
-      btn
-        .setButtonText("Plot")
-        .setCta()
-        .onClick(() => {
-          this.close();
-          this.onSubmit({
-            title: this.options.title,
-            xLabel: this.options.xLabel,
-            yLabel: this.options.yLabel,
-            bounds: this.options.bounds,
-            disableZoom: this.options.disableZoom,
-            grid: this.options.grid,
-            functions: this.options.functions,
+    new Setting(contentEl)
+      .addDropdown((com) => {
+        com
+          .addOptions(rendererOptions)
+          .setValue(this.plugin.settings.defaultRenderer)
+          .onChange((value: rendererType) => {
+            this.renderer = value;
           });
-        });
-    });
+      })
+      .addButton((btn) => {
+        btn
+          .setButtonText("Plot")
+          .setCta()
+          .onClick(async () => {
+            await this.handlePlotCreate(this.options);
+          });
+      });
+  }
+
+  async handlePlotCreate(options: PlotOptions) {
+    // render and insert chosen plot using renderer
+    switch (this.renderer) {
+      case "interactive":
+        await renderPlotAsInteractive(this.plugin, this.editor, options);
+        break;
+      case "image":
+        await renderPlotAsImage(this.plugin, this.editor, options);
+        break;
+    }
+
+    this.close();
   }
 
-  // skipcq: JS-0376
   async onClose() {
     const { contentEl } = this;
     contentEl.empty();

src/app/SettingsTab.ts

@@ -5,12 +5,13 @@ import {
   Setting,
   ValueComponent,
 } from "obsidian";
-import ObsidianFunctionPlot from "../main";
-import { DEFAULT_PLOT_PLUGIN_SETTINGS } from "../types";
+import ObsidianFunctionPlot from "../main.js";
+import { DEFAULT_PLUGIN_SETTINGS, rendererOptions } from "../common/defaults";
+import { PluginSettings, rendererType } from "../common/types";
 
 export default class SettingsTab extends PluginSettingTab {
   plugin: ObsidianFunctionPlot;
-  settingsInputs: Map<string, ValueComponent<string | number>>;
+  settingsInputs: Map<keyof PluginSettings, ValueComponent<unknown>>;
 
   constructor(app: App, plugin: ObsidianFunctionPlot) {
     super(app, plugin);
@@ -23,6 +24,31 @@ export default class SettingsTab extends PluginSettingTab {
     containerEl.empty();
 
     containerEl.createEl("h1", { text: "Settings" });
+
+    /*
+     * Default Plot Options
+     */
+
+    containerEl.createEl("h3", { text: "Default Plot Options" });
+
+    new Setting(containerEl)
+      .setName("Default Render Type")
+      .setDesc("The default renderer to use.")
+      .addDropdown((com) => {
+        this.settingsInputs.set("defaultRenderer", com);
+        com
+          .addOptions(rendererOptions)
+          .setValue(this.plugin.settings.defaultRenderer)
+          .onChange(async (value: rendererType) => {
+            this.plugin.settings.defaultRenderer = value;
+            await this.plugin.saveSettings();
+          });
+      });
+
+    /*
+     * Font Sizes
+     */
+
     containerEl.createEl("h3", { text: "Font Sizes" });
 
     new Setting(containerEl)
@@ -70,6 +96,10 @@ export default class SettingsTab extends PluginSettingTab {
           .setDynamicTooltip();
       });
 
+    /*
+     * Line Widths
+     */
+
     containerEl.createEl("h3", { text: "Line Widths" });
 
     new Setting(containerEl)
@@ -102,6 +132,10 @@ export default class SettingsTab extends PluginSettingTab {
           .setDynamicTooltip();
       });
 
+    /*
+     * Colors
+     */
+
     containerEl.createEl("h3", {
       attr: { style: "margin-bottom: 0" },
       text: "Colors",
@@ -115,7 +149,7 @@ export default class SettingsTab extends PluginSettingTab {
 
     new Setting(containerEl)
       .setName("Font Color")
-      .setDesc("Color used for the title and labels. ")
+      .setDesc("Color used for the title and labels.")
       .addText((text) => {
         this.settingsInputs.set("fontColor", text);
         text
@@ -128,7 +162,7 @@ export default class SettingsTab extends PluginSettingTab {
 
     new Setting(containerEl)
       .setName("Line Color")
-      .setDesc("Color used for the domain- and origin-lines. ")
+      .setDesc("Color used for the domain- and origin-lines.")
       .addText((text) => {
         this.settingsInputs.set("lineColor", text);
         text
@@ -141,7 +175,7 @@ export default class SettingsTab extends PluginSettingTab {
 
     new Setting(containerEl)
       .setName("Grid Color")
-      .setDesc("Color used for the gridlines. ")
+      .setDesc("Color used for the gridlines.")
       .addText((text) => {
         this.settingsInputs.set("gridColor", text);
         text
@@ -152,27 +186,23 @@ export default class SettingsTab extends PluginSettingTab {
           });
       });
 
-    new Setting(containerEl)
-      .addButton((btn) => {
-        btn
-          .setButtonText("Reset Settings to Default")
-          .setWarning()
-          .onClick((_) => {
-            Object.assign(this.plugin.settings, DEFAULT_PLOT_PLUGIN_SETTINGS);
-            this.settingsInputs.forEach((input, key) => {
-              input.setValue(this.plugin.settings[key]);
-            });
-            this.plugin.saveSettings();
-            new Notice("Obsidian Functionplot: Settings reset to default.");
-          });
-      })
-      .addButton((btn) => {
-        btn
-          .setButtonText("Save")
-          .setCta()
-          .onClick((_) => {
-            new Notice("Obsidian Functionplot: Settings saved.");
-          });
-      });
+    /*
+     *  Reset Settings
+     */
+
+    new Setting(containerEl).addButton((btn) => {
+      btn
+        .setButtonText("Reset Settings to Default")
+        .setWarning()
+        .onClick(() => {
+          Object.assign(this.plugin.settings, DEFAULT_PLUGIN_SETTINGS);
+          for (const [key, input] of this.settingsInputs) {
+            if (key === "telemetry") continue; // don't reset telemetry
+            input.setValue(this.plugin.settings[key]);
+          }
+          this.plugin.saveSettings();
+          new Notice("Settings reset to default");
+        });
+    });
   }
 }