feat: hypermd demo!!!

apps/gpa-calculator/package.json

@@ -27,7 +27,7 @@
     "lint:fix": "pnpm run lint --fix"
   },
   "browserslist": [
-    "defaults and fully supports es6-module"
+    "defaults"
   ],
   "dependencies": {
     "html-template-tag": "^4.1.1",

apps/petal-notes/package.json

@@ -17,6 +17,13 @@
     "build-storybook": "storybook build",
     "chromatic": "chromatic"
   },
+  "browserslist": [
+    "defaults"
+  ],
+  "dependencies": {
+    "codemirror": "^5.65.18",
+    "hypermd": "^0.3.11"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",
     "@psdtools/tsconfig": "workspace:^",
@@ -36,8 +43,11 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "4.0.0-beta.9",
     "@total-typescript/ts-reset": "^0.6.1",
+    "@types/codemirror": "~5.60.15",
     "@vitest/browser": "^3.0.2",
     "@vitest/coverage-v8": "^3.0.2",
+    "browserslist": "^4.24.4",
+    "browserslist-to-esbuild": "^2.1.1",
     "chromatic": "^11.25.0",
     "deputy": "workspace:^",
     "eslint": "^9.18.0",

apps/petal-notes/src/lib/hypermd.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" module>
+  const HyperMD_ = await import("hypermd");
+
+  const loadingP = Promise.all([
+    // Load these modes if you want highlighting ...
+    import("codemirror/mode/htmlmixed/htmlmixed.js"), // for embedded HTML.
+    import("codemirror/mode/stex/stex.js"), // for Math TeX Formulae.
+    import("codemirror/mode/yaml/yaml.js"), // for frontmatter.
+
+    // Load PowerPacks if you want to use 3rd-party libraries for enhanced features...
+    import("hypermd/powerpack/fold-math-with-katex.js"),
+    import("hypermd/powerpack/hover-with-marked.js"),
+  ]);
+</script>
+
+<script lang="ts">
+  export interface Props {
+    value: string;
+
+    mode: "hypermd" | "normal";
+  }
+
+  let { mode = $bindable(), value = $bindable() }: Props = $props();
+
+  let editor: CodeMirror.Editor;
+  let textarea: HTMLTextAreaElement;
+
+  // eslint-disable-next-line unicorn/prefer-top-level-await
+  void (async () => {
+    await loadingP;
+
+    // @ts-expect-error(TS2454): Using `bind:this`.
+    editor = HyperMD_.fromTextArea(textarea);
+    editor.setSize(null, "200%");
+    editor.focus();
+  })();
+
+  let isMounting = true;
+
+  $effect(() => {
+    // Force the effect to run if the mode changes.
+    mode = mode;
+
+    if (isMounting) {
+      isMounting = false;
+
+      return;
+    }
+
+    if (mode === "hypermd") {
+      HyperMD_.switchToHyperMD(editor);
+    } else {
+      HyperMD_.switchToNormal(editor);
+    }
+  });
+</script>
+
+<textarea bind:this={textarea} bind:value></textarea>

apps/petal-notes/src/lib/hypermd.ts

@@ -0,0 +1,3 @@
+declare module "codemirror/mode/htmlmixed/htmlmixed.js" {}
+declare module "codemirror/mode/stex/stex.js" {}
+declare module "codemirror/mode/yaml/yaml.js" {}

apps/petal-notes/src/routes/+page.svelte

@@ -1,8 +1,55 @@
 <script lang="ts">
-  import { sveltekitUrl as svelteKitDocsUrl } from "$lib/demo.ts";
+  import HyperMDC from "$lib/hypermd.svelte";
+
+  let mode: "hypermd" | "normal" = $state("hypermd");
+
+  const value = `---
+title: Hello, HyperMD!
+---
+# Your HyperMD editor is here :gift:
+
+![Logo](/favicon.png)
+
+-------------------
+
+All ~~builtin~~ features are ready to go 🤘
+Try out these methods!
+
+1. \`HyperMD.switchToNormal(cm)\`
+2. \`HyperMD.switchToHyperMD(cm)\`
+3. \`cm.getValue()\` returns the Markdown source text
+
+**Note**: This demo uses these powerpacks:
+
+1. **fold-math-with-katex** uses _$KaTeX$_, the math typesetting library.
+2. **hover-with-marked** uses _marked_ to render footnotes[^1].
+
+[^1]: Like this one!
+
+[hypermd-doc]: https://laobubu.net/HyperMD/docs/ HyperMD documentation
+[cm-manual]: https://codemirror.net/doc/manual.html CodeMirror User manual
+`;
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>
-  Visit <a href={svelteKitDocsUrl}>svelte.dev/docs/kit</a> to read the documentation
-</p>
+<div>
+  <button
+    class="rounded-sm border px-2 py-0.5"
+    onclick={() => {
+      mode = "normal";
+    }}
+    type="button"
+  >
+    Switch To Normal
+  </button>
+  <button
+    class="rounded-md border px-2 py-0.5"
+    onclick={() => {
+      mode = "hypermd";
+    }}
+    type="button"
+  >
+    Switch To HyperMD
+  </button>
+</div>
+
+<HyperMDC {value} bind:mode />

apps/petal-notes/tests/demo.test.ts

@@ -1,8 +1,7 @@
-import { sveltekitUrl } from "$lib/demo";
 import { describe, test } from "vitest";
 
 describe("demo test", () => {
   test("svelte is secure", ({ expect }) => {
-    expect(sveltekitUrl).toMatch(/^https:\/\//);
+    expect("https://svelte.dev/").toMatch(/^https:\/\//);
   });
 });

apps/petal-notes/vite.config.ts

@@ -1,23 +1,34 @@
 import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
 import { sveltekit } from "@sveltejs/kit/vite";
 import tailwindcss from "@tailwindcss/vite";
+import browserslist from "browserslist";
+import browserslistToEsbuild from "browserslist-to-esbuild";
+import { browserslistToTargets } from "lightningcss";
 import * as path from "node:path";
 import {
   coverageConfigDefaults,
   defaultExclude,
   defineConfig,
 } from "vitest/config";
 
+const browsersList = browserslist();
+
+// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [sveltekit(), tailwindcss()],
 
   build: {
     cssMinify: "lightningcss",
     sourcemap: true,
+    target: browserslistToEsbuild(browsersList),
   },
 
   css: {
     transformer: "lightningcss",
+
+    lightningcss: {
+      targets: browserslistToTargets(browsersList),
+    },
   },
 
   // Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node

apps/phs-map/package.json

@@ -27,7 +27,7 @@
     "lint:fix": "pnpm run lint --fix"
   },
   "browserslist": [
-    "defaults and fully supports es6-module"
+    "defaults"
   ],
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",

knip.json

@@ -4,30 +4,25 @@
     "apps/gpa-calculator": {
       "entry": ["src/{script,sw}.ts"],
       "project": ["**/*.{js,cjs,mjs,ts,cts,mts}"],
-      "ignore": ["eslint.config.ts", "tailwind.config.ts"],
-      "ignoreDependencies": ["deputy", "fontaine", "tailwindcss"]
+      "ignore": ["tailwind.config.ts"],
+      "ignoreDependencies": ["fontaine", "tailwindcss"]
     },
     "apps/petal-notes": {
-      "ignore": [".storybook/vitest.setup.ts", "eslint.config.ts"],
+      "ignore": [".storybook/vitest.setup.ts", "src/lib/hypermd.ts"],
       "ignoreDependencies": [
         "@tailwindcss/forms",
         "@tailwindcss/typography",
-        "deputy",
         "tailwindcss",
         "vitest-browser-svelte"
       ]
     },
     "apps/phs-map": {
       "entry": ["src/{script,sw}.ts"],
-      "project": ["**/*.{js,cjs,mjs,ts,cts,mts}"],
-      "ignore": ["eslint.config.ts"],
-      "ignoreDependencies": ["deputy"]
-    },
-    "packages/deputy": {
-      "ignore": ["eslint.config.ts"]
+      "project": ["**/*.{js,cjs,mjs,ts,cts,mts}"]
     }
   },
-  "ignore": [".pnpmfile.cjs"],
+  "ignore": [".pnpmfile.cjs", "**/eslint.config.ts"],
+  "ignoreDependencies": ["deputy"],
   "ignoreExportsUsedInFile": true,
   "includeEntryExports": true
 }

package.json

@@ -60,7 +60,14 @@
       "svelte-preprocess"
     ],
     "overrides": {
-      "eslint-plugin-unicorn": "^56.0.1"
+      "eslint-plugin-unicorn": "^56.0.1",
+      "hypermd>emojione": "-",
+      "hypermd>flowchart.js": "-",
+      "hypermd>mathjax": "-",
+      "hypermd>mermaid": "-",
+      "hypermd>turndown": "-",
+      "hypermd>turndown-plugin-gfm": "-",
+      "hypermd>twemoji": "-"
     },
     "patchedDependencies": {
       "eslint-config-sheriff": "patches/eslint-config-sheriff.patch"