added storybook for component testing

leonhma · leonhma · commit 615fc11cdadd · 2022-11-21T00:28:27.000+01:00
diff --git a/.storybook/package.json b/.storybook/package.json
@@ -0,0 +1 @@
+{}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
diff --git a/declaration.d.ts b/declaration.d.ts
diff --git a/package.json b/package.json
@@ -11,19 +11,37 @@
     "build": "webpack",
     "test": "jest",
     "format": "yarn prettier --write .",
-    "lint": "yarn eslint ."
+    "lint": "yarn eslint .",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "devDependencies": {
-    "@types/jest": "^29.2.0",
+    "@babel/core": "^7.20.2",
+    "@mdx-js/react": "^1.6.22",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-docs": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/svelte": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@tsconfig/svelte": "^3.0.0",
+    "@types/jest": "^29.2.3",
     "@types/node": "*",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.41.0",
+    "babel-loader": "^8.3.0",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "jest": "^29.2.2",
     "prettier": "^2.7.1",
     "sass": "^1.54.4",
     "sass-loader": "^13.0.2",
+    "svelte": "^3.53.1",
+    "svelte-loader": "^3.1.4",
+    "svelte-preprocess": "^4.10.7",
     "ts-jest": "^29.0.3",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
diff --git a/src/app/CreatePlotModal.ts b/src/app/CreatePlotModal.ts
@@ -1,10 +1,10 @@
-import { Chart } from "function-plot";
-import { FunctionPlotDatum } from "function-plot/dist/types";
+import type { FunctionPlotDatum } from "function-plot/dist/types";
 import { Editor, Modal, Setting } from "obsidian";
 import { DEFAULT_PLOT_OPTIONS } from "../common/defaults";
-import { PlotOptions, rendererType, Line } from "../common/types";
+import type { PlotOptions, rendererType, Line } from "../common/types";
 import type ObsidianFunctionPlot from "../main";
 import { createPlot, renderPlotAsInteractive } from "../common/utils";
+import type { Chart } from "function-plot";
 
 export default class CreatePlotModal extends Modal {
   options: PlotOptions;
diff --git a/src/app/SettingsTab.ts b/src/app/SettingsTab.ts
@@ -7,7 +7,7 @@ import {
 } from "obsidian";
 import type ObsidianFunctionPlot from "../main.js";
 import { DEFAULT_PLUGIN_SETTINGS } from "../common/defaults";
-import { PluginSettings } from "../common/types";
+import type { PluginSettings } from "../common/types";
 
 export default class SettingsTab extends PluginSettingTab {
   plugin: ObsidianFunctionPlot;
diff --git a/src/common/defaults.ts b/src/common/defaults.ts
@@ -1,4 +1,4 @@
-import { rendererType, PlotOptions, PluginSettings } from "./types";
+import type { rendererType, PlotOptions, PluginSettings } from "./types";
 
 /**
  * The options displayed for renderers
diff --git a/src/common/types.ts b/src/common/types.ts
@@ -1,5 +1,5 @@
-import { Chart } from "function-plot";
-import { EventEmitter } from "events";
+import type { Chart } from "function-plot";
+import type { EventEmitter } from "events";
 
 /**
  * The possible types of renderer.
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -1,9 +1,9 @@
 import { Editor, parseYaml } from "obsidian";
 import type ObsidianFunctionPlot from "../main";
-import { PlotOptions, Line } from "./types";
-import { type FunctionPlotOptions } from "function-plot/dist/types";
+import type { PlotOptions, Line } from "./types";
 import createStylingPlugin from "../plugins/styling";
 import functionPlot, { Chart } from "function-plot";
+import type { FunctionPlotOptions } from "function-plot/dist/types";
 
 /**
  * Insert the text as a new paragraph (newline before and after), and place the active cursor below.
diff --git a/src/main.ts b/src/main.ts
@@ -1,8 +1,8 @@
-import { MarkdownPostProcessorContext, Plugin, Editor } from "obsidian";
+import { type MarkdownPostProcessorContext, Plugin, Editor } from "obsidian";
 import CreatePlotModal from "./app/CreatePlotModal";
 import SettingsTab from "./app/SettingsTab";
 import { createPlot, parseCodeBlock } from "./common/utils";
-import { PlotOptions, PluginSettings } from "./common/types";
+import type { PlotOptions, PluginSettings } from "./common/types";
 import {
   DEFAULT_PLOT_OPTIONS,
   DEFAULT_PLUGIN_SETTINGS,
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,10 +1,12 @@
 {
-  "files": ["./src/main.ts"],
+  "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
+    "types": ["jest", "svelte", "node"],
     "moduleResolution": "node",
     "module": "ES6",
     "esModuleInterop": true,
     "target": "ES6",
     "allowJs": true
-  }
+  },
+  "include": ["./src/**/*.ts", "declaration.d.ts"],
 }
diff --git a/webpack.config.cjs b/webpack.config.cjs
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,57 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import preprocess from 'svelte-preprocess'
+
+export default {
+  mode: "production",
+  entry: "./src/main.ts",
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          // Creates `style` nodes from JS strings
+          "style-loader",
+          // Translates CSS into CommonJS
+          "css-loader",
+          // Compiles Sass to CSS
+          "sass-loader",
+        ],
+      },
+      {
+        test: /\.(html|svelte)$/,
+        use: {
+          loader: "svelte-loader",
+          options: {
+            preprocess: preprocess({
+
+            })
+          }
+        },
+      },
+      {
+        // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
+        test: /node_modules\/svelte\/.*\.mjs$/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".ts", ".js", ".svelte"],
+  },
+  externals: {
+    obsidian: "commonjs obsidian",
+  },
+  output: {
+    path: dirname(fileURLToPath(import.meta.url)),
+    filename: "main.js",
+    libraryTarget: "commonjs",
+  },
+};
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { rendererType, PlotOptions, PluginSettings } from "./types";`
	`1`	`+import type { rendererType, PlotOptions, PluginSettings } from "./types";`
`2`	`2`
`3`	`3`	`/**`
`4`	`4`	`* The options displayed for renderers`